StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POremotely manipulating the configurable products select dropdown menus
text
Body
copied!<p>Magento sets up the choices of a configurable product as a series of select dropdowns - where a selection of the first adds the relevant options to the second, a selection of an option in the second adds the relevant options to the third, and so on.</p> <p>I would like to override these dropdowns by setting the select options for a configurable product with other form objects than the standard select dropdown menus created by magento. However, it seems to complicated and risky to rewrite magento's code, so I am trying to hide the default drop downs and create better looking css buttons to replace them. When one clicks on these new buttons the code would select the same option from one of the hidden dropdowns, read the results printed by the standard magento js, and relay the information back to my script.</p> <p>the problem is that I cannot get a click on my buttons to affect the dropdowns - I can get the dropdown to show the new value but cannot seem to activate the magneto js which adds the relevant options to the next select dropdown.</p> <p>the magento js is written with prototype.js and I am using regular javascript with the jQuery library.</p> <p>here is the prototype script magneto has for the configurable products:</p> <pre><code>/**************************** 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]); } // Set default values - from config and overwrite them by url values if (config.defaultValues) { this.values = config.defaultValues; } var separatorIndex = window.location.href.indexOf('#'); if (separatorIndex != -1) { var paramsStr = window.location.href.substr(separatorIndex+1); var urlValues = paramsStr.toQueryParams(); if (!this.values) { this.values = {}; } for (var i in urlValues) { this.values[i] = urlValues[i]; } } this.configureForValues(); document.observe("dom:loaded", this.configureForValues.bind(this)); }, 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)); } }, 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(); }, 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; var oldPrice = 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); oldPrice += parseFloat(selected.config.oldPrice); } } 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(); }, 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){ var parsedOldPrice = parseFloat(selected.config.oldPrice); price += isNaN(parsedOldPrice) ? 0 : parsedOldPrice; } } if (price < 0) price = 0; price = this.formatPrice(price); if($('old-price-'+this.config.productId)){ $('old-price-'+this.config.productId).innerHTML = price; } } } } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload