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!


Uploadify HTTP Error 412

November 3, 2010 § 2 Comments

Few days ago I encounter the HTTP error 412.

It’s so weird that I uploaded few JPG files without error, except one which is JPG as well.

After I exported to PNG , it works again.

Got tips from a friend as following.

This is caused by mod_security, which is used for blocking spam , but sometimes it got triggered by accident.

For quick and dirty fix, you could  edit your .htaccess. and add following

SecFilterEngine Off
SecFilterScanPOST Off

And if you are interested about the issue, you could look at following link

In summary, the mod_security will determine if the request is spam by looking at the URI / POST.

For URI like “-poker” or “-sex”, mod_security will be triggered and blocked visiter to execute such action.

In long one, one should not disable the mod_security as it provides minimal protection from spam. Starting looking at the URI or POST that might trigger the mod_security and add following lines.

In our case

SecFilterEngine On
SecFilterSelective "POST_PAYLOAD" "KEY WORD" "allow,nolog"

replacing the keyword with the one you think may trigger the mod_security. I think this is a better practice at last.

How to prevent people steal images while using fancybox with ease

October 5, 2010 § 4 Comments

Some will look for right click disable, but using mac will just need to drap and drop the image is done.

So I suggest we can do a transparent overlay on top of the fancybox plugin.

But wait! They already got two of them!
they are fancybox-left and fancybox-right, navigations.

Simply go to fancybox.css for modification.

Look for

#fancybox-left, #fancybox-right {

Edit the width from 35% to 50%, then there is no room for anyone to right click for the real image while cannot be drag and drop!

JQuery Accordion Keep Jumping!

March 29, 2010 § Leave a comment

I saw an article from the web and the smart guy called “The Gaber”

According to his solution, the IE quirks mode is the issue that make the accordion keep jumping…

Never thought of the quirks mode can affect the behavior of the browser…

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” > doctype:
and the other with
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “”&gt; doctype:

To me the effect makes it looking good, so give it a shot!

You may refer the oringinal articles here

jQuery Uploadify – A handy dandy tools for upload to your own place

February 23, 2010 § Leave a comment

Uploadify is an open source jQuery plugin and very easy to use.

You may follow the link

The installation and basic usage you can also find it in the hosting site.

Couple things share I would like to share

1.Debug script

{ $('#fileInput').uploadify({
'uploader'  : 'uploadify.swf',
'script'    : 'uploadify.php',
'cancelImg' : 'cancel.png',
'auto'      : true,
'folder'    : '/uploads',
'onChange' :function(eventObj, queueID, fileObj, response, data)
alert('File Name:'+fileObj. name);
alert('File Path:'+fileObj. filePath);
alert('Server Response:'+ response);

2. Testing on Localhost works perfectly, but a mess in actual deployment

Uploadify is just great treat for every developer, but when it comes to actual deployment it is a pain.

There are couple error you can get ‘HTTP’,’IO’ or ‘Security’.

I encounter HTTP error 500, still looking for solution to overcome this.

Where Am I?

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