Update price in multiple areas on product page

Question

I imagine this is something simple but can't seem to find the answer after searching through various stack exchange sites. I have a layout for a product page where we need to have 2 places that display the price. The product has custom options that change the price, so getting the price on page load isn't an issue, it's getting that second price to update when someone changes an option. Right now the span with a class of "price" is wrapped in a span with a class of "regular-price" and an id of "product-price-28". Is this just a case of labeling the 2nd price area with the correct ids and classes or will I have to do something else to accomplish this? Thanks for your help.

Answer 1

You can actually have all the ids listed here

initPrices: function() {
    this.containers[0] = 'product-price-' + this.productId;
    this.containers[1] = 'bundle-price-' + this.productId;
    this.containers[2] = 'price-including-tax-' + this.productId;
    this.containers[3] = 'price-excluding-tax-' + this.productId;
    this.containers[4] = 'old-price-' + this.productId;
},

However this doesn't answer your question. To help you out, you can actually have all of those again, suffixed with _clone

For example you can have

product-price-1234
 and
product-price-1234_clone

A bit odd, but this is permitted here:

if ($(pair.value+this.duplicateIdSuffix)) {
    $(pair.value+this.duplicateIdSuffix).innerHTML = formattedPrice;
}

Were this.duplicateIdSuffix is '_clone'.

TLDR; You can have prices listed at most twice by using the _clone suffix on the second id. Why? Magento's weird.

Answer 2

I think you should approach this by listening to an onChange DOM event on the <div class="price-box"> DOM node, then extract the price innerHTML and update the innerHTML of the second place you want the price to show.

Plan B would be to analyse, modify or duplicate parts of the JavaScript function OptionsPrice.reload() which is in the object Product.OptionsPrice.prototype = {

You can't just repeat the HTML because (I expect) that Prototype.js is coded to match only the first DOM node via a CSS selector rather than tracking an array of nodes that match the price selector. If you are going for Plan B then changing the code to select (and update) an array of price box DOM nodes instead of only the first matched node would be an elegant solution.

Remember that the id attribute of DOM nodes needs to be unique.