Coming soon, change the product image based on dropdown color select
One of the Magento projects I will be working on requires a functionality where user will be able to choose a different colors for a single product. Client wants the user to be presented with different color product upon color selection. I have managed to make that kind of functionality relatively easy. However, I will not post the solution in this post because I’m making a screencast.
How i did it? I created a small jQuery script that looks into certain div element with listed product images (styles set to display:none). jQuery then simply switches image display style from none to visible. The trick was to retrieve the inner text value of option element inside the select element. I needed to extract the inner text of option element because by default Magento shows dropdown boxes with value set to some number and inner text to te text you added when creating custom product options (some dropdown box). So if you created custom dropdown box with options (Red, Blue, Green) your option box would look like <option value=”24″>Green</option> for example. The idea is to upload few images to a product and give them the same names, that is Blue, Green, Red and so on. Names of the images are to be set the same as the name of the options. This is pretty trivial task. After that, the jQuery script and a few lines of code I inserted into media.ptml file would do the job.
I’m witting all of this from a coffee shop, and my laptop battery is almost dead so, no time for big HOWTO for now. I’ll be posting a screencast of this probably today at the evening. Consider this a teaser 
Recent comments