Configurable products don't respond to price.phtml changes

Question

According to the block hints, configurable products display the price typically from app/design/frontend/base/default/template/catalog/product/price.phtml.

However, we are making changes to that file in our custom package/theme and only the simple products respond. The configurables continue to show the old version of price.phtml in our theme. Even if we disable that file with an underscore, it continues to display the old price.phtml in our theme. The only way it goes away at all is if we remove price.phtml from the base folder too. Then we get no price at all.

Will someone please explain how to control the price display in configurable products using a custom file?

Answer 1

First, view the page source of a configurable product and make sure that http://www.yourdomain.com/js/varien/configurable.js is present. That is where the javascript that controls the price display is located.

Next, in the page source, make sure that you see spConfig defined. It should look similar to this:

<script type="text/javascript">
    var spConfig = new Product.Config({"attributes":{"92":{"id":"92","code":"color","label":"Color","options":[{"id":"20","label":"Black","price":"0","oldPrice":"0","products":["284","878","880","881"]},{"id":"21","label":"Pink","price":"0","oldPrice":"0","products":["282","283","510","511"]}]},"180":{"id":"180","code":"size","label":"Size","options":[{"id":"78","label":"L","price":"0","oldPrice":"0","products":["284"]},{"id":"79","label":"M","price":"0","oldPrice":"0","products":["878","283"]},{"id":"80","label":"S","price":"0","oldPrice":"0","products":["282","881"]},{"id":"81","label":"XS","price":"0","oldPrice":"0","products":["510","880"]},{"id":"77","label":"XL","price":"0","oldPrice":"0","products":["511"]}]}},"template":"$#{price}","basePrice":"150","oldPrice":"150","productId":"877","chooseText":"Choose an Option...","taxConfig":{"includeTax":false,"showIncludeTax":false,"showBothPrices":false,"defaultTax":7,"currentTax":8.25,"inclTaxTitle":"Incl. Tax"}});
</script>

spConfig gets defined in catalog/product/view/type/options/configurable.phtml.

You will also notice in, js/varien/configurable.js, on line 291(or close to it) depending on your version of Magento, that the price display gets reloaded with this little snippet.

if($('product-price-'+this.config.productId)){
    $('product-price-'+this.config.productId).innerHTML = price;
}

Also, the same snippet above is used for reloading the old price, referenced by id like this: $('old-price-'+this.config.productId)

My guess is that maybe while customizing your price template that you inadvertently either deleted this html id from the price element or maybe changed it.

Please let me know how you make out.