Change main image with order options selection

Questions and answers about ShopSite Custom Templates

Change main image with order options selection

Postby MgmtSpec » Sun Dec 07, 2014 8:44 pm

Hello,

I'm looking for a solution to
1) Select a drop down color/finish option and change main image
2) Select a qty by 10s up to 100
3) There may be as many as 33 finish options

While it appears this could be done with "Advanced" options this generates 10 x number of finishes for image inputs. So I would need to enter the same image
10 times for each finish color - even though it will be the same image. Then do this for all colors meaning potentially 300 data entries.

I've looked at trying to use JS but seems it would require image file name in the 'value' portion which is of course needed for the shopping cart to pass values and cost.

Here is the a site with the same product offerings as my client and essentially what we are trying to do.
http://www.atilaminates.com/product/americana/

Appreciate any suggestions.
MgmtSpec
 
Posts: 200
Joined: Mon Apr 30, 2007 8:25 am

Re: Change main image with order options selection

Postby ShopSite Lauren » Mon Dec 08, 2014 10:19 am

You could use JavaScript or jQuery to change the main image when a drop down menu change has the same name/text as one of the extra product images. If you do this, then the option name/text would need to have some matching text to the image file name. For example:

1. Images with detailed file names. Lets say that you have 10 finishes for a product, and in the extra more info image fields you include all 10 images:
1234-cast-iron.jpg
1234-bronze.jpg
1234-gold.jpg
1234-silver.jpg
1234-black.jpg
1234-white.jpg
1234-antique-black.jpg
1234-antique-white.jpg
1234-red.jpg
1234-blue.jpg

... and setup your ordering options, something like the following. Don't use the Advanced Ordering Options.

Code: Select all
Large
Small (-10);-10

Cast Iron
Bronze
Gold
Silver
Black
White
Antique Black
Antique White
Red
Blue


2. Custom script to convert option selected to image file name format. You would need to write custom javascript to grab the selected option name, such as "Antique White." In that same script, you will want to strip everything after the ; since you could have price variations that you don't need, then convert all the text to lowercase "antique white" and replace spaces with dashes "antique-white." That script can then check to see if any of the extra more info images' file names have "antique-white" in them, and if they do, replace the main product image with that extra image instead.
- ShopSite Lauren
Contact me for help with any of your
custom ShopSite template questions.
ShopSite Lauren
 
Posts: 887
Joined: Fri Aug 11, 2006 1:35 pm
Location: Orem, UT

Re: Change main image with order options selection

Postby MgmtSpec » Sun Dec 14, 2014 3:23 pm

Thanks - I was thinking along that line but a hang-up is limit on extra more info images? Aren't they limited to 20? I'd have as many as 33 finish options. Wanting to avoid making 33 separate products - one for each finish.
MgmtSpec
 
Posts: 200
Joined: Mon Apr 30, 2007 8:25 am

Re: Change main image with order options selection

Postby ShopSite Lauren » Mon Dec 15, 2014 9:18 am

You could use an extra product field. Put all images into 1 extra product field (as an array or something), or use PHP to 'look for' matching product images in the /media folder (or a sub folder, whichever is easier) using the product's SKU or something like that.
- ShopSite Lauren
Contact me for help with any of your
custom ShopSite template questions.
ShopSite Lauren
 
Posts: 887
Joined: Fri Aug 11, 2006 1:35 pm
Location: Orem, UT


Return to Custom Template Questions

Who is online

Users browsing this forum: No registered users and 31 guests

cron