Announcement

Collapse
No announcement yet.

The Product Price In Multiple Places?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • The Product Price In Multiple Places?

    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.

  • #2
    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:

    PHP Code:
    !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(selectorvalue) {
        
    //If were changing the price fire an event with data for the event
        
    if (selector === "price"
          
    $priceUpdateSelector.trigger("contentChanged", {newPricevalue})
        
        
    //Then return the results of the original function
        
    return original(selectorvalue)
      }
      
      
    //Listen for the event and act on it when it happens
      
    $priceUpdateSelector.on("contentChanged", function(edata) {
        $(
    this).html(data.newPrice)
      })
    }() 
    Last edited by mtbottens; 03-05-2014, 09:59 AM.
    Michael

    JES Restaurant Equipment

    Comment


    • #3
      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.

      Comment


      • #4
        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:

        HTML Code:
        <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:

        HTML Code:
        <span class="alt-price">[price]</span>
        This should work out fine. Let me know if you have any problems :)
        Michael

        JES Restaurant Equipment

        Comment


        • #5
          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.

          Comment

          Working...
          X