Displaying a thumbnail image against each choice's radio button.
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 image code against the radio button is then created automatically.
In addition you can have these radio buttons spread in columns across the page,
the radio button next to or under the image and the choice name next to the
radio button or under it.
Created 02-01-04
Author Norman Rouxel rouxel@attglobal.net
SETUP
Add the following code to Act_Primary.html (just above the </HEAD> tag).
<SCRIPT LANGUAGE="JavaScript" SRC="radioiconsupport.js" TYPE="text/javascript"></SCRIPT>
Make a file in Site1 called radioiconsupport.js from the following:-
// START Icon Images on Radio Buttons
var colcount;
var colpos;
var textunder;
var buttonunder;
function radioicon(radiohtml, choicename){
var result = choicename.match(/(.*)\{(.*)\}(.*)/); // see if HTML for Name contains {.....}
if ( result != null )
{
var textsep = textunder ? '<br>' : ''; // do we want text under button
var twidth = Math.floor(100 / colcount); // how many do we want per row
document.write('<table width="' + twidth + '%" align=left>'); // start a table if appropriate width
document.write('<tr><td><img src="' + result[2] + '">'); // first cell with image
if ( buttonunder ) // where do we want the button text
{
document.write('<br>' + radiohtml + textsep + result[1] + result[3]); // button under image
}
else
{
document.write('</td><td width="100%" valign=top>'); // new cell next to image
document.write(radiohtml + textsep + result[1] + result[3]); // then radio button and description
}
document.write('</td></tr></table>'); // finally end table
if ( ++colpos >= colcount ) // have we done last column
{
document.write('<br clear=all>'); // if so, new line
colpos = 0;
}
}
else
{
document.write(radiohtml + choicename); // the unaltered choice text
}
}
// END Icon Images on Radio Buttons
Replace Act_VariantRadioButton.html (in Site1) with the following
<!-- VariantRadioButton HTML begin -->
<!-- This template is used for a product variant radio button. -->
<SPAN CLASS="actxsmall">
<script language=JavaScript>
radioicon('<INPUT TYPE=RADIO NAME="NETQUOTEVAR:ATTRIBUTEREF" VALUE="NETQUOTEVAR:CHOICESELVALUE" NETQUOTEVAR:RADIOCHECKED>', 'NETQUOTEVAR:CHOICENAME');
</script>
<noscript><INPUT TYPE=RADIO NAME="NETQUOTEVAR:ATTRIBUTEREF" VALUE="NETQUOTEVAR:CHOICESELVALUE" NETQUOTEVAR:RADIOCHECKED>NETQUOTEVAR:CHOICENAME</noscript>
</SPAN>
<!-- This template is used for a product variant radio button. -->
<!-- VariantRadioButton HTML end -->
In all Product Templates you intend to use with such products
add the following code after all occurences of the line NETQUOTEVAR:PRODUCTFORMBEGIN
<script language=JavaScript>
<!--
colcount = CUSTOMVAR:ICONSPERLINE;
colpos = 0;
buttonunder = CUSTOMVAR:BUTTONUNDER;
textunder = CUSTOMVAR:TEXTUNDER;
// -->
</script>
In Actinic / Advanced / Custom Properties click the "+" sign and create a variable called ICONSPERLINE.
Again click the "+" sign and create a variable called BUTTONUNDER.
Again click the "+" sign and create a variable called TEXTUNDER.
Go to Design / Options / Site Defaults / Properties.
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.
Click the "+" sign and select BUTTONUNDER.
If you want the Radio Button (and Choice name) under the image then set it's Value to 1.
If you want the Radio Button to the right of the image set it's value to 0.
If using Business uncheck Searchable and check Use as CUSTOMVAR.
Click the "+" sign and select TEXTUNDER.
If you want the Choice name under the Radio Button then set it's Value to 1.
If you want the Choice name to the right of the Radio Button set it's value to 0.
If using Business uncheck Searchable and check Use as CUSTOMVAR.
That's setup done.
OPERATION
When you have a product that you want to display an image against a radio button selection
do the following.
For each Choice in the HTML for Name field add the image file name within { and }
(leave out any path name, it will be uploaded via Advanced / Additional Files)
e.g.
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.
If you don't have an image for a choice I'd recommend you use a dummy blank image.
It's not a good idea to have some choices without images and some with for the same attribute.
The number of these choices across the page can be changed via the Custom Property
ICONSPERLINE, the radio button position via BUTTONUNDER and text position via TEXTUNDER.
at either the Catalog, Section or Product levels.
(if using Business remember to uncheck Searchable and check Use as CUSTOMVAR)
LAYOUT
Because of the way radio buttons are created by Actinic there is no way to detect when
the last one has been generated. If you display these buttons in columns and the final row
isn't full then the next attribute name may be displayed in the remaining position.
A work-around for this is to change Act_VariantAttributeName.html to be:-
<br clear=all><span class="actxsmall">NETQUOTEVAR:ATTRIBUTENAME</span><br>
as this will allow further attributes to line up better.
Alternatively you can put "<br clear=all>" into the User Defined Separator field
of the Attribute that uses these buttons.
Tested with IE6, Netscape 7 and Opera 7.
Comment