1

I have the configurable products by sizes and i want to not display price at the beginning but if choose or select by size then only display the price. And if there is single product then price will display at the beginning.

Can i edit jquery for price and how can i edit ? Please suggest me !

Configurable Product

2

This is a very simple change to make. You need to create a new module or modify your existing module. The information below will look complex, but if you follow the answers, you will see that the work has already been done for you.

Background and setup:

This module needs to depend on the Mage_Catalog to ensure that your files are included in execution of the page after Mage_Catalog's files are.

Thus, to do that, you need to create your module file in app/etc/modules (with the name YourCompany_HideConfigurablePrices.xml):

<?xml version="1.0"?>
<config>
    <modules>
        <YourCompany_HideConfigurablePrices>
            <active>true</active>
            <codePool>local</codePool>
            <depends>
                <Mage_Catalog/>
            </depends>
        </YourCompany_HideConfigurablePrices>
    </modules>
</config>

Then, create your config.xml file in app/code/local/YourCompany/HideConfigurablePrices/etc/. This is the configuration file for your module and is what tells Magento how to interact with your module. For the case of this answer, your config.xml will be super simple:

<?xml version="1.0"?>
<config>
    <modules>
        <YourCompany_HideConfigurablePrices>
            <version>1.0</version>
        </YourCompany_HideConfigurablePrices>
    </modules>
    <frontend>
        <layout>
            <updates>
                <YourCompany_HideConfigurablePrices>
                    <file>YourCompany/HideConfigurablePrices.xml</file>
                </YourCompany_HideConfigurablePrices>
            </updates>
        </layout>
    </frontend>
</config>

Creating the layout xml file:

Then, you need to create the update/layout xml file: app/design/frontend/base/default/layout/YourCompany/HideConfigurablePrices.xml:

<?xml version="1.0"?>
<layout>
    <PRODUCT_TYPE_configurable translate="label" module="catalog">
        <reference name="head">
            <action method="addJs"><script>your-company/hide-configurable-prices.js</script></action>
        </reference>
    </PRODUCT_TYPE_configurable>
</layout>

Where the magic happens:

Finally, in js/your-company/hide-configurable-prices.js, you can add this code:

Product.Config.prototype.configureForValues = function () {
    if (this.values) {
        this.settings.each(function(element){
            var attributeId = element.attributeId;
            element.value = (typeof(this.values[attributeId]) == 'undefined')? '' : this.values[attributeId];
            this.configureElement(element);
        }.bind(this));
    }

    this.reloadPrice();
};


Product.Config.prototype.reloadPrice = function(){
    if (this.config.disablePriceReload) {
        return;
    }
    var price    = 0;
    var oldPrice = 0;
    var hasSelectedOption = false;

    for(var i=this.settings.length-1;i>=0;i--){
        var selected = this.settings[i].options[this.settings[i].selectedIndex];
        if(selected.config){
            price    += parseFloat(selected.config.price);
            oldPrice += parseFloat(selected.config.oldPrice);
            hasSelectedOption = true;
        }
    }

    if (optionsPrice) {
        if (hasSelectedOption === false) {
            $H(optionsPrice.containers).each(function (pair) {
                if ($(pair.value + '_clone')) {
                    $(pair.value + '_clone').hide();
                }
                if ($(pair.value)) {
                    $(pair.value).hide();
                }
            });
        } else {
            $H(optionsPrice.containers).each(function (pair) {
                if ($(pair.value + '_clone')) {
                    $(pair.value + '_clone').show();
                }
                if ($(pair.value)) {
                    $(pair.value).show();
                }
            });

            optionsPrice.changePrice('config', {'price': price, 'oldPrice': oldPrice});
            optionsPrice.reload();
        }
    }

    return price;

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

There are quite a few ways to simplify the above JS, but this is the simplest way to present how to show/hide the pricing containers.

  • It is still displaying the price in the beginning, and removing/hiding the price after select from dropdown not still worked on radio. Can you help me for solve this issue. – Bishal Neupane Sep 29 '15 at 10:55
  • 1
    Sorry for the delay. This is now fixed and should work as expected. – Joseph at SwiftOtter Oct 3 '15 at 20:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.