Replace Price Difference with Actual Price in Magento Configurable Product Options

Question

I have a configurable product with 3 options, see below:

I want to replace the +£24.00 and the +£75.00 with the actual prices of the products.

So instead it would say: £69.00 and £120.00

I have located the code being in js/varien/product.js

I've spent a bit of time chopping and changing the code, but can't quite decipher what needs to change. Line 240 downwards in this file handles the JavaScript events for configurable products.

I'd appreciate any help here.

Answer 1

This is performed by javascript. You need to modify the method getOptionLabel in js/varien/configurable.js (this is Magento 1.5.1.0, your milage may vary depending on the version you're using).

This method receives the option and the price difference to be applied. If you want to just show the absolute price of the different options, you need to calculate them yourself, using the absolute base value of the configurable product and the absolute difference of the option.

The first few lines of the method look like this:

getOptionLabel: function(option, price){
    var price = parseFloat(price);

Change that so you get the absolute base price and the absolute difference of the option. Then add them together to get the final absolute price of the option. Like this:

getOptionLabel: function(option, price){
    var basePrice = parseFloat(this.config.basePrice);
    // 'price' as passed is the RELATIVE DIFFERENCE. We won't use it.
    //  The ABSOLUTE DIFFERENCE is in option.price (and option.oldPrice)
    var absoluteDifference = parseFloat(option.price);
    var absoluteFinalPrice = basePrice + absoluteDifference;
    // var price = parseFloat(price);
    var price = absoluteFinalPrice;

Then you need to get rid of the + and - symbols in the options. Later on in the same method, when you call this.formatPrice, just change the second paramter to false in each call.

    if(price){
        if (this.taxConfig.showBothPrices) {
            str+= ' ' + this.formatPrice(excl, false) + ' (' + this.formatPrice(price, false) + ' ' + this.taxConfig.inclTaxTitle + ')';
        } else {
            str+= ' ' + this.formatPrice(price, false);
        }  

Some more notes about this:

You will find another identical object called Product.Config being created in js/varien/product.js. As far as I can tell, this does absolutely nothing as it is replaced by js/varien/configurable.js.

Also, if just change js/varien/configurable.js, the next time you upgrade Magento you will probably lose your changes. Better to create another file like js/varien/my_configurable.js or whatever, and call it in the config file (product.xml) for whatever theme you are using.