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.

Solution 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.

Solution 2

This extension might be helpful, I've used it in the past (and it appears to be maintained):

http://www.magentocommerce.com/magento-connect/Matt+Dean/extension/596/simple-configurable-products

Solution 3

In magento 1.9 the .js method doesn't seem to work anymore.

Instead I updated Abstract.php (/app/code/core/Mage/Catalog/Block/Product/View/Options/Abstract.php), copy this file to /app/code/local/Mage/Catalog/Block/Product/View/Options/Abstract.php. On line 128, change the $_priceInclTax and $_priceExclTax variables to the following:

$_priceInclTax = $this->getPrice($sign.$value['pricing_value'], true)+$this->getProduct()->getFinalPrice();

$_priceExclTax = $this->getPrice($sign.$value['pricing_value'])+$this->getProduct()->getFinalPrice();

I've seen similar solutions, but this is the only way to ensure it also works with things such as negative product options and special price discounts.

Solution 4

Found a solution here that works on Magento 1.9 but it overrides core code, it should be done so that it does not override core.

I've tried something like this in a new js file, but somehow the core configurable.js get's messed up, maybe someone can come up with a way so that id doesn't.

Product.Config.prototype.getOptionLabel  = Product.Config.prototype.getOptionLabel.wrap(function(parentMethod){
// BEGIN:: custom price display update
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 price = parseFloat(price);
if(absoluteDifference){
    // console.log(option);
    price = basePrice + absoluteDifference;
} else {
    price = absoluteDifference;
}
// END:: custom price display update

if (this.taxConfig.includeTax) {
    var tax = price / (100 + this.taxConfig.defaultTax) * this.taxConfig.defaultTax;
    var excl = price - tax;
    var incl = excl*(1+(this.taxConfig.currentTax/100));
} else {
    var tax = price * (this.taxConfig.currentTax / 100);
    var excl = price;
    var incl = excl + tax;
}

if (this.taxConfig.showIncludeTax || this.taxConfig.showBothPrices) {
    price = incl;
} else {
    price = excl;
}

var str = option.label;
if(price){
    if (this.taxConfig.showBothPrices) {
        // BEGIN:: custom price display update
        // NOTE:: 'true' was changed to 'false' in 3 places.
        str+= ' ' + this.formatPrice(excl, false) + ' (' + this.formatPrice(price, false) + ' ' + this.taxConfig.inclTaxTitle + ')';
    } else {
        str+= ' ' + this.formatPrice(price, false);
        // END:: custom price display update
    }
}
return str;

});

View more solutions

Comments

[Mike]

found one: github.com/organicinternet/magento-configurable-simple it's the version updated for 1.7 but needs a manual install (download it then upload it) rather than using Magento connect.

[Damodar Bashyal]

+1. thx a lot. it's good for 1 attribute selection but when there are two, second attribute's price is shown wrong.

[jaycodez]

Tried this on Magento 1.7.2 any tips on how to make this work. Hard to understand configurable.js

[K.I]

This works in Magento 1.9.1.0, but kinda messes things up if you have more than one set of options. Anyhow it worked in my case so I am adding +1.