Can i set blank value for price if there is configurable product?

Question

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 !

Answer 1

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.