Change product images based on option

[iAmYourLeader]

Lets say I have a bicycle in 3 different colors (red, blue, and green, for instance). So, the buyer must choose one of these 3 options to purchase the bicycle.

Is there a way to change the product image when the buyer clicks on a certain option? For example, if the default image is the red bike, and the buyer clicks on the option for "green", the product image will automatically change to the green bike?

[Pack Secure]

This may help.

https://support.3dcart.com/Knowledge...ticle/View/390

[iAmYourLeader]

How does that help? I'm looking to do it without the "dropimage" selection, e.g., if I have radio buttons displaying the options, I want the product picture to change when a different option is selected.

[jleclair]

Think of it from a programmatic approach. In order for the page to bring in different images for an option, they must be specified somewhere. 3dcart has chosen the drop image option to supply these links.

Setting up the drop images in your admin panel, and linking an image file to each option then passes them(and by them i mean the paths to the linked images) as parameters to the page as the template is rendered and sent to the client.

From there, javascript can locate these parameter paths, and update the image dependent upon what option is selected.

This is the only option to pass these parameters in using the constructs that 3dcart provides. So you can either use the dropImage, or find your own way to pass the image parameters to the page when it is rendered. One option may be to use an extra field and just insert a json string with the applicable data. Once on page, you can parse the json string and write some js behavior to mimic what the drop image did.

Another option is to set up the drop image, and rewrite how the options are presented. It can get a bit tricky, but if you have a decent knowledge of how to code something up this alley you should be fine.

Please see https://pixelpro.3dcartstores.com/Ad...ment_p_29.html for an example of how this can be done. The "size" attribute as far as 3dcart is concerned is actually a drop down. The colors for each shirt is a drop image, yet they are rewritten into button swatches to make them easier to use and present to the customer. (there is also support for disabling out of stock option combinations as well on there)

I hope this answer shed some light on your options and what you can do. Feel free to contact me anytime if you have any more questions. [email protected]

Thanks.

[mtbottens]

Json in extra fields? My mind is blown. Nice tip :)

[iAmYourLeader]

Is there a way to do it from the listing template, under the "radiobuttons" section? It seems like I should be able to, but I'm just not sure how to access the photos that I want to link to each radio button.

[jleclair]

as stated before. the only built in mechanism 3dcart provides is via the dropimage. if you want to do it any other way (radios or whatever) you need to code it in yourself. if you are unfamiliar with how to do that, your next step may be to determine how important that is to you and possibly seek hiring an outside developer.