Replace Price Difference with Actual Price

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.

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.

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

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.

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;

});

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.

In 1.7 (not sure when this was changed) things were changed around. it ends up that the price string is built in PHP, inside Mage/Catalog/Block/Product/View/Options/Abstract.php in the _formatPrice function when called from Mage/Catalog/Block/Product/View/Options/Type/Select.php

Notice that changing any of those 2 classes is going to provoke a change through the site and not just in that specific combo

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!

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

modify this function code as required.