The Product Price In Multiple Places?

[ScribeTime]

Does anyone know if it's possible to have the product price in more than one place with all prices being updated when options are added?

I copied the pricing code on my listing template and placed it in a 2nd location near the Add to Cart Button. However, when options are added to a product, only the original price updates.

I'd like for both prices to update so that the customer doesn't have to scroll back up to see the new price.

Anyone know if this can be done and if so, how?
Thanks.

[mtbottens]

In listing.js there is a function called "changecontent" that gets fired whenever a user selects an option. So what you could do is overwrite that function with one of your own. You could either duplicate the functionality or reference the original function. Heres an example of referencing the original function:

!function() {
  //original is the reference to the original function
  var original = changecontent
  //price selector is the prices you want to keep updated with the main price that gets changed 'id="price"'
    , $priceUpdateSelector = $(".alt-price")
  
  //Overwriting the function
  changecontent = function(selector, value) {
    //If were changing the price fire an event with data for the event
    if (selector === "price") 
      $priceUpdateSelector.trigger("contentChanged", {newPrice: value})
    
    //Then return the results of the original function
    return original(selector, value)
  }
  
  //Listen for the event and act on it when it happens
  $priceUpdateSelector.on("contentChanged", function(e, data) {
    $(this).html(data.newPrice)
  })
}() 

[ScribeTime]

Hi Michael,

Thanks so much for taking the time to respond. Unfortunately, css and html are the extent of my "programming" abilities so I wouldn't know where or how to implement the code you referenced.

If the steps are pretty basic and easy to explain, would you mind sharing how to go about this? If it's more complicated than that, please let me know.

Thanks again.

[mtbottens]

Sure, it's no problem.

Assuming you have jQuery included in the head of your page it will be as simple as adding this to your listing template:

<script>
$(function() { 
  var original = changecontent 
    , $priceUpdateSelector = $(".alt-price") 
   
  //Overwriting the function 
  changecontent = function(selector, value) { 
    if (selector === "price")  
      $priceUpdateSelector.trigger("contentChanged", {newPrice: value}) 
     
    return original(selector, value) 
  } 
   
  $priceUpdateSelector.on("contentChanged", function(e, data) { 
    $(this).html(data.newPrice) 
  }) 
})  
</script>

and to use it just wrap the duplicate price variables with class="alt-price" like this:

<span class="alt-price">[price]</span>

This should work out fine. Let me know if you have any problems :)

[ScribeTime]

Hi Michael,

Thanks so much for the code. But unfortunately it didn't work for me. I'm going to play around with it a little more though and will report back again if I have any problems.

Thanks again.