Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

I created a module that changes the product image when the user changes an option
 
dagobert renouf
Jr. Member
 
Avatar
Total Posts:  26
Joined:  2008-07-03
 

Hello everyone,
After a while coming here to get something, I will give something.

This module is not even a module, I’m a bad developer, it just works without being heavy (40lines of code) but I’m sure it can be greatly improved. Major “issues” are that it runs using jquery (which is an additional js lib, increase loading times) and that the code is directly in the “catalog/product/view/option.phtml” file, I didn’t try to separate it clearly because I don’t want to waste my time for now.

So here’s how it works :

1 - To associate an image with a specific option, the admin just need to “label” the image properly following this convention : $option_name + “__” + $option_value (for example : “color__blue” will be associated with the blue option of the color dropdown)

2 - the options.phtml file will check the product options to see if there is any dropdown to process. If this is the case it will foreach dropdown option check the images of the product to see if there is an image associated to the option (with the label created earlier).

3 - the javascript is created only if options are associated with image, and when the user select an option THAT IS associated with an image, the product #image change (jquery updates the src attribute). If the option is not associated with any image, than it just do nothing,.

This way we can have a classic dropdown with 0 associated image (works like magento default behavior) . We can have a dropdown with only some options changing the image (which means if we don’t associate images with every option, it will still work) and We can have a dropdown with every option changing the product’s image.

So as it’s very new and I don’t know how I can give it to you, you can see the page I’m using it on here : http://serv1.dezign.fr/mybabyz/les-bodys/test.html/ (on the “couleur” select only the first two options have a specific image and on the “taille” select it’s only the last one).
___

If you have any advice or question to improve this very simple module, go ahead wink

 
Magento Community Magento Community
Magento Community
Magento Community
 
joyously
Guru
 
Total Posts:  447
Joined:  2008-08-21
 

This seems to work pretty well!
Did you test it on a configurable product or a bundled product? Does it get confused if the simple product of a configurable or bundle is the one with the options? How about if it’s the configurable product that carries the option?  I’m just trying to think of all the possibilities.

As for sharing it, could you just attach the file you changed here, hopefully with embedded comments showing the portion that you added and where to change the file naming scheme if necessary?
Thanks for your good work!

 
Magento Community Magento Community
Magento Community
Magento Community
 
nicolas46
Sr. Member
 
Total Posts:  210
Joined:  2008-04-09
Toulouse
 

Great work
Just zip the files you changed and attach it here, maybe someone will improve your work and create a extension

 
Magento Community Magento Community
Magento Community
Magento Community
 
dagobert renouf
Jr. Member
 
Avatar
Total Posts:  26
Joined:  2008-07-03
 

Here it is guys :

There are 4 files to update and 1 to add (the jquery js file) so that’s pretty simple.
Remember the naming convention of the images label for it to work : “option_name” + “__” + “option_value”. (example: “color__blue").

I heavily commented the code for you to understand, but if you still have questions feel free to ask them here.
Also I hope you’re a fan of the dark knight.

And here we .. go !

_______

Apparently I can’t attach a file so here’s the link : http://www.lembleme.com/files/magento_change_product_image_via_select.rar

 
Magento Community Magento Community
Magento Community
Magento Community
 
surfast
Jr. Member
 
Total Posts:  2
Joined:  2008-08-26
 

What version of Magento are you running against? I am running 1.1.2

I followed your code and couldn’t get it to work. I ran up against multiple errors in the options.phtml? 

$_product_options->getItems; getitems is not a valid method I changed both getitems to getitems()

then I received errors on $_associated_images undefined variable.

I am also unclear on the image naming if I have an attribute code ="traditional" option = “Blue Dot” what would the image name be traditional_blue_dot.jpg? 

Where do the images go? Do I upload them through the product>images UI?

Thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
dagobert renouf
Jr. Member
 
Avatar
Total Posts:  26
Joined:  2008-07-03
 

you’re right for the “getitems” method, my server allows me to forget theses things, that’s why.

for the $_associated_images variable, I don’t get why, you should give me more infos.

if the option is Blue Dot just name the image “traditional__Blue Dot” (i didn’t try at all to adapt this but it does work).
Yes you must upload the image via the product>images UI

 
Magento Community Magento Community
Magento Community
Magento Community
 
surfast
Jr. Member
 
Total Posts:  2
Joined:  2008-08-26
 

It may have something to do with the fact that $_associated_images gets instantiated inside a conditional statement.  If you have no images that match $_associated_images never gets created and you get the error. What are your thoughts?

 
Magento Community Magento Community
Magento Community
Magento Community
 
dagobert renouf
Jr. Member
 
Avatar
Total Posts:  26
Joined:  2008-07-03
 

So before the conditionnal statement, we should just add:

$_associated_images = array();

right ?

MAJ : we should not add this before the conditional statement but before the big foreach loop,.

 
Magento Community Magento Community
Magento Community
Magento Community
 
An7hony
Member
 
Total Posts:  34
Joined:  2008-04-28
 

Hi does this work in Magento ver. 1.1.3.

I have installed the script and made the changes. All looks ok, except nothing happens

here is the page: http://www.store.shirtsleeves.net/oui-button-cardigan.html

can you see anything that maybe wrong?

 
Magento Community Magento Community
Magento Community
Magento Community
 
joyously
Guru
 
Total Posts:  447
Joined:  2008-08-21
 

@sixredsquares You must have fixed it because it looks like it’s working to me.

Any idea how to make the chosen option view show in the shopping cart too?

EDIT: I think my problem is some config option about using the parent image if the simple one doesn’t have one. Not sure where it is, but I’ve seen it before.

 
Magento Community Magento Community
Magento Community
Magento Community
 
qriz
Jr. Member
 
Total Posts:  9
Joined:  2008-05-21
Port Orange
 

Hey

thanks so far for this contribution…

is this working for more then 1 attribute also???

i.e. :
option 1 = Brand
option 2 = Style
option 3 = color

????

 
Magento Community Magento Community
Magento Community
Magento Community
 
Sensi
Sr. Member
 
Total Posts:  103
Joined:  2008-07-31
Paris, France
 

edit: nevermind, found another solution there. smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
jmacdoug
Sr. Member
 
Avatar
Total Posts:  117
Joined:  2007-12-03
 

All I can say is “what a beautiful theme/template”. Who did your design if you don’t mind me asking.

jeff

 
Magento Community Magento Community
Magento Community
Magento Community
 
thatcher
Jr. Member
 
Total Posts:  1
Joined:  2009-04-23
 

Dagober Renouf - This is cool what you did and thanks for supplying it smile

But my question is now that it is more than a year later is this functionality now part of the Magento core?  I am running Magento latest v1.3.2

So does anyone know if this functionality to change the display photo of a configurable product when one of the attribute options in dropdown menu is selected… for example color… is now part of the Magento core ? 

And if so How do I administer this ? 

Thanks in advance!

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top