[ic] displaying additional product images

Ryan Hertz interchange-users@interchange.redhat.com
Fri Mar 29 21:01:01 2002


At 06:04 PM 3/29/02 -0700, Dave Turk wrote:
>I need some advice on the best way to include pictures for product options.
>Say we are selling a faucet and it comes in chrome, brass and bronze and
>would like to show the customer what the faucet
>looks like in these different finishes. Is this ability already built in, or
>do I need to code it on a separate page.
>What about popups of a larger image when clicking on the thumb nails.
>Help
>Thanks very much
>Dave Turk


You need to code that yourself.  Here's some tidbits to get you started... 
no warranties, probably won't work off the top of my head:

In your flypage...  First, name your form where the options are displayed:
<FORM ACTION="[process-target]" METHOD=POST NAME="foobar">

  Then you can generate the select box based on the colors you have listed 
in the color column of your products database:  (something like this)
<SELECT NAME="mv_order_color" onChange="rollcolor();">
[loop arg=[item-field color]]
<OPTION VALUE="[loop-code]">[loop-code]
[/loop]
</SELECT>

Then you should name the IMG tag that would display your product image.
<IMG SRC="[item-code]" NAME="product">

And some Javascript in the head...
<!--
function rollcolor () {
document.product.src = '/foundation/images/[item-code]' + 
document.foobar.mv_order_color.options[document.foobar.mv_order_color.selectedIndex].value';
}
// -->

If your product SKU is "PF-10" and your colors are "chrome,brass,white" the 
code will change the image to PF-10chrome, PF-10brass, PF-10white, 
etc.   As Mike Heins pointed out, a modern browser will be able to guess 
the filetype based on the content -- or you can make all your images .jpg, 
or whatever you feel comfortable with.  They would have to all be the same 
size, or things would look rather funny.

It may be more convenient for you to rotate an image other than the 
product.  Personally I have a little color "swatch" that rotates based on 
color, rather than scan 100 different colors of the same item.

Of course you could always go with a simple pop-up.  :-)