0

I am having problem in showing configurable product details in product page when selecting the option. The image change is perfectly working but the prices (normal price and tire price table) are not getting changed.
I have used a free extension (http://www.magentocommerce.com/magento-connect/color-switcher-free.html) and it is configured somewhere in the config.js , but can't understand the workflow of this. So could anyone explain how to change the prices on selecting an option from dropdown in product page in default magento, so that I can relate this to the custom js file and try to modify it.
Here is the config.js of the custom extension..

if(typeof Product=='undefined') {
var Product = {};
}
if(typeof selectedAssocProducts=='undefined') {
    var selectedAssocProducts = {};
}
/**************************** CONFIGURABLE PRODUCT *      *************************/
Product.Config = Class.create();
Product.Config.prototype = {
initialize: function(config){
    this.config     = config;
    this.taxConfig  = this.config.taxConfig;
    this.settings   = $$('.super-attribute-select');
    this.state      = new Hash();
    this.priceTemplate = new Template(this.config.template);
    this.prices     = config.prices;
    this.settings.each(function(element){
        Event.observe(element, 'change', this.configure.bind(this))
    }.bind(this));

    // fill state
    this.settings.each(function(element){
        var attributeId = element.id.replace(/[a-z]*/, '');
        if(attributeId && this.config.attributes[attributeId]) {
            element.config = this.config.attributes[attributeId];
            element.attributeId = attributeId;
            this.state[attributeId] = false;
        }
    }.bind(this))

    // Init settings dropdown
    var childSettings = [];
    for(var i=this.settings.length-1;i>=0;i--){
        var prevSetting = this.settings[i-1] ? this.settings[i-1] : false;
        var nextSetting = this.settings[i+1] ? this.settings[i+1] : false;
        if(i==0){
            this.fillSelect(this.settings[i])
        }
        else {
            this.settings[i].disabled=true;
        }
        $(this.settings[i]).childSettings = childSettings.clone();
        $(this.settings[i]).prevSetting   = prevSetting;
        $(this.settings[i]).nextSetting   = nextSetting;
        childSettings.push(this.settings[i]);
    }

    // try retireve options from url
    var separatorIndex = window.location.href.indexOf('#');
    if (separatorIndex!=-1) {
        var paramsStr = window.location.href.substr(separatorIndex+1);
        this.values = paramsStr.toQueryParams();
        this.settings.each(function(element){
            var attributeId = element.attributeId;
            element.value = this.values[attributeId];
            this.configureElement(element);
        }.bind(this));
    }
},

configure: function(event){
    var element = Event.element(event);
    this.configureElement(element);
},

configureElement : function(element) {
    this.reloadOptionLabels(element);
    if(element.value){
        this.state[element.config.id] = element.value;
        if(element.nextSetting){
            element.nextSetting.disabled = false;
            this.fillSelect(element.nextSetting);
            this.resetChildren(element.nextSetting);
        }
    }
    else {
        this.resetChildren(element);
    }
    this.reloadPrice();
//      Calculator.updatePrice();
    /***** Load Associated Image : This should come after this.resetChildren is called *****/

// If an option doesnt have a value attribute, it'll take its innerHTML as its value - hence the reason for || element.value.substr(0,6) == 'choose'
if (!element.value || element.value.substr(0,6) == 'choose') return; // Selected "choose option"
var attributeId = element.id.replace(/[a-z]*/, '');
for (var a in this.config.attributes)
{
    for (i = 0; i < this.config.attributes[a].options.length; i++)
    {
        if (this.config.attributes[a].options[i].id != element.value) continue;
        selectedAssocProducts[a] = this.config.attributes[attributeId].options[i].products;

    }
}

var productNo = selectedAssocProductsImg(selectedAssocProducts) || selectedAssocProducts[attributeId][0];
var changeImg = document.getElementById("image");
var changeLightImg = document.getElementById("lightimage");
var associatedProductImg= assocIMG[productNo] ;
changeImg.src=associatedProductImg;
changeLightImg.href=associatedProductImg;alert(chagelingImg);
},

reloadOptionLabels: function(element){
    var selectedPrice;
    if(element.options[element.selectedIndex].config){
        selectedPrice = parseFloat(element.options[element.selectedIndex].config.price)
    }
    else{
        selectedPrice = 0;
    }
    for(var i=0;i<element.options.length;i++){
        if(element.options[i].config){
            element.options[i].text = this.getOptionLabel(element.options[i].config, element.options[i].config.price-selectedPrice);
        }
    }
},

resetChildren : function(element){
    if(element.childSettings) {
        for(var i=0;i<element.childSettings.length;i++){
            element.childSettings[i].selectedIndex = 0;
            element.childSettings[i].disabled = true;
            if(element.config){
                this.state[element.config.id] = false;
            }
        }
    }
},

fillSelect: function(element){
    var attributeId = element.id.replace(/[a-z]*/, '');
    var options = this.getAttributeOptions(attributeId);
    this.clearSelect(element);
    element.options[0] = new Option(this.config.chooseText, '');

    var prevConfig = false;
    if(element.prevSetting){
        prevConfig = element.prevSetting.options[element.prevSetting.selectedIndex];
    }

    if(options) {
        var index = 1;
        for(var i=0;i<options.length;i++){
            var allowedProducts = [];
            if(prevConfig) {
                for(var j=0;j<options[i].products.length;j++){
                    if(prevConfig.config.allowedProducts
                        && prevConfig.config.allowedProducts.indexOf(options[i].products[j])>-1){
                        allowedProducts.push(options[i].products[j]);
                    }
                }
            } else {
                allowedProducts = options[i].products.clone();
            }

            if(allowedProducts.size()>0){
                options[i].allowedProducts = allowedProducts;
                element.options[index] = new Option(this.getOptionLabel(options[i], options[i].price), options[i].id);
                element.options[index].config = options[i];
                index++;
            }
        }
    }
},

getOptionLabel: function(option, price){
    var price = parseFloat(price);
    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) {
            str+= ' ' + this.formatPrice(excl, true) + ' (' + this.formatPrice(price, true) + ' ' + this.taxConfig.inclTaxTitle + ')';
        } else {
            str+= ' ' + this.formatPrice(price, true);
        }
    }
    return str;
},

formatPrice: function(price, showSign){
    var str = '';
    price = parseFloat(price);
    if(showSign){
        if(price<0){
            str+= '-';
            price = -price;
        }
        else{
            str+= '+';
        }
    }

    var roundedPrice = (Math.round(price*100)/100).toString();

    if (this.prices && this.prices[roundedPrice]) {
        str+= this.prices[roundedPrice];
    }
    else {
        str+= this.priceTemplate.evaluate({price:price.toFixed(2)});
    }
    return str;
},

clearSelect: function(element){
    for(var i=element.options.length-1;i>=0;i--){
        element.remove(i);
    }
},

getAttributeOptions: function(attributeId){
    if(this.config.attributes[attributeId]){
        return this.config.attributes[attributeId].options;
    }
},

reloadPrice: function(){
    var price = 0;
    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);
        }
    }
    optionsPrice.changePrice('config', price);
    optionsPrice.reload();

    return price;

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

reloadOldPrice: function(){
    if ($('old-price-'+this.config.productId)) {

        var price = parseFloat(this.config.oldPrice);
        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);
            }
        }
        if (price < 0)
            price = 0;
        price = this.formatPrice(price);

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

    }
}
}
function selectedAssocProductsImg(selectedAssocProduct) // passing associated image array here
{
    if (selectedAssocProduct == null) return false;

    var newselectedAssocProduct = new Array();
    if (selectedAssocProduct.length == undefined) // push all data in new array if more than one images
    {    
        for (var i in selectedAssocProduct)
         newselectedAssocProduct.push(selectedAssocProduct[i]);       
    }     
    else
     newselectedAssocProduct = selectedAssocProduct;

    if (newselectedAssocProduct.length == 1) return false; // return false if array legth 1
  var finalImgArray = new Array();
    function eachAttribute(newselectedAssocProduct, iIndex, jIndex, JnextIndex)
    {               
        if (iIndex == null) iIndex = 0;
        if (jIndex == null) jIndex = 0;
        if (JnextIndex == null) JnextIndex = newselectedAssocProduct[iIndex].length;
        if (iIndex == newselectedAssocProduct.length - 1) return;           
        for (var i = jIndex; i < JnextIndex; i++)
        {
            if (finalImgArray.indexOf(newselectedAssocProduct[iIndex][i]) != -1) continue;
            for (var j = 0; j < newselectedAssocProduct[iIndex + 1].length; j++)
            {
                if (newselectedAssocProduct[iIndex][i] != newselectedAssocProduct[iIndex+1][j]) continue;                       
                eachAttribute(newselectedAssocProduct, iIndex + 1, j, j + 1);
                if (iIndex + 1 == newselectedAssocProduct.length - 1) { finalImgArray.push(newselectedAssocProduct[iIndex][i]); break; }                       
            }
        }           
    }       

    eachAttribute(newselectedAssocProduct);
    return finalImgArray;
}

I got stuck here for the last few days..I am using a very vary custom theme in magento 1.7. So please suggest me what to do now for this problem..
Thanks.

0

Check your console for js errors, the price change happens by js added in product view page. Maybe it stopped working due to js conflict, If there is no error on browser console then first check the same by disabling the module, if starts working then you need to work on js added by module.

Try to call optionsPrice.reload(); function on change event whenever you want to reload the price. This might help you.

  • I checked but there is no js errors. I am getting the price(as alert message ) of the configurable product when selecting the dropdown. The problem is that how to show it in that page. I have done the id and class of the element as default magento , but nothing works..As I am a novice , I am getting really frustrate. – Kishore Patra Dec 3 '15 at 5:05

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.