Replace Price Difference with Actual Price in Mage

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

in Magento 1.9 open js/varien/configurable.js goto function getOptionLabel

modify this function code as required.

Answer 2

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.

Answer 3

Edit the file js/varien/product.js, looking at line number 691

If we were to change the attribute prices from the product detail page, the trigger will fire here. Just check with alert(price);, and you can get the changeable price.

Answer 4

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.

Answer 5

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;

});

Answer 6

I am suprised at how Magento can use by default such a weird logic.

The ability to see different prices per variant should be available, and perhaps even the default one.

Prestashop does this, and even automatically switches images when selecting each variant!