Dynamic changing of product image when a radio choice is selected.
In addition a thumbnail of the alternative image is placed against the radio item.
To use this all you need to do is to place the supplementary image name in the choices
HTML for Name field within curly brackets. E.g. Blue{widget_blue.jpg}
The popup code and a thumbnail image against the radio button is then created automatically.
Updated 24-12-03 to allow for multiple items per line.
Author Norman Rouxel rouxel@attglobal.net
SETUP
Add the following code to Act_Primary.html (just above the tag.
Replace Act_ProductImage.html (in Site1) with the following
Replace Act_VariantRadioButton.html (in Site1) with the following
In all Product Templates you intend to use with such products
add the following code after the line NETQUOTEVAR:PRODUCTFORMBEGIN
In Actinic / Advanced / Custom Properties click the "+" sign and create a variable called ICONSCALE.
Create another called ICONSPERLINE.
Go to Design / Options / Site Defaults / Properties. Click the "+" sign and select ICONSCALE.
Set it's Value to 5 (for one-fifth size icons - or whatever scale down factor you want).
If using Business uncheck Searchable and check Use as CUSTOMVAR.
Click the "+" sign and select ICONSPERLINE.
Set it's Value to 1 (for one icon per line - or whatever number across that you want).
If using Business uncheck Searchable and check Use as CUSTOMVAR.
That's setup done.
OPERATION
When you have a product that you want to replace the image depending on a radio button selection
do the following.
Set the product to use the image that corresponds to the 1st choice.
For each choice in the HTML for Name field add the image file name within { and }
(leave out any path name, it will be deduced from the path to the main product image)
e.g.
Main Product uses Images\widget_blue.jpg
You have an Attribute called Colour
Choice 1 uses Blue{widget_blue.jpg}
Choice 2 uses Green{widget_green.jpg}
Choice 3 uses Yellow{widget_yellow.jpg}
etc.
Save these additional images in Site1\PreviewHTML (so they'll appear on site previews).
Make sure that these additional images are loaded via Advanced / Additional Files.
(I've not been able to find a way to persuade Actinic to automatically upload these)
That's that.
NOTES.
The code works in Preview and on Live sites.
All images should be the same size.
If you don't have an image for a choice I'd recommend you use a dummy blank image.
The scale down factor for the radio button icon can be set by changing Custom Property
ICONSCALE (if using Business remember to uncheck Searchable and check Use as CUSTOMVAR)
at either the Catalog, Section or Product levels.
The number of these choices across the page can be changed via the Custom Property
ICONSPERLINE (if using Business remember to uncheck Searchable and check Use as CUSTOMVAR)
at either the Catalog, Section or Product levels.
Tested with IE6, Netscape 7 and Opera 7.