Magento: How to update configuable attribute by javascript?

June 27, 2011 § 12 Comments

Recently, I am in the case that need to update the configurable attribute/ super attribute by scripting.

Although magento is using prototype.js, but I prefer to work on JQuery :p, but the theory should be the same.
So I got a configurable product, and I would like to have thumbnail image for each associated products. Moreover, clicking the thumbnail should change the color and pricing as well!

This apply to Single/Multiple Configurable Attribute(s) Update


                jQuery('#associated-list a').click(function()
                        // Implement your image swapping here
                        // Please note that your A tag should contain attribute value as well, so we can do a search value and select it in the dropdown
                        // In my case, I have following HTML structure as example <a href="#"><img id="" src="'associated.jpg/" alt="" /></a>

By using the value passed by the A tag , we can select the right one in the dropdown.

                        /* Update Attribute */

		        jQuery('#attribute124 option[value="'+jQuery(this).attr('opt')+'"]').attr('selected','selected');   //selected the matched option

So let’s say attribute124 is your super attribute for the product, let’s locate the element first. However, please note that we will do it in prototype namespace instead of JQuery or native JS referencing.

                        var element=$('attribute124');   //Your super attribute id

Finally call the script below to let Magento Js lib to handle it. What it does is reloading all attribute option and reload the price, so it pretty much does everything.

                        spConfig.configureElement(element);  //This is the one!

I am sure you still a lot to go, so let’s roll!

Where Am I?

You are currently browsing entries tagged with super attribute at Nick Wan L.K..