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.
