Image Swapping based on attributes in osCommerce

Posted on February 7, 2010 by Gary — 9 Comments ↓

I was tasked by a customer to create some sort of image swapping device for a tshirt store. With some thought my idea was to use a piece of javascript based on the attribute selection which updates the image.

Then my customer decided he only wanted to upload 1 image rather than multiple images.

In the end I decided to do it in a different way, using only 1 image, can you guess how? Here's a video;

Posted in Makeover

Gary

And to give a bit more of a clue of how this is done, here is a screenshot showing a tartan t-shirt – remember that the actual tshirt image DOES NOT CHANGE…
http://www.marketingsmile.com Luke

with css? one single image with the 3 colors, different position of the image at every attribute selection?
Gary

Hi Luke – that's a pretty good guess and is certainly one way to do it. This wy is a little different;

the tshirt image has transparent areas (it's a .png) and the javascript code takes the value of the selection and loads in a background image using .css
http://www.divebombonline.com Dive

Can you explain in more detail. I am not to familiar with css or java.
Gary

Not really. It's a case of dive in and do it yourself, or pay to have it done. It would take me half a day to explain how it works.
Dive

Can you point me in the right direction
http://jarrodchristman.com Jarrod1937

@Dive
There are a ton of ways to do this. It depends on the setup you have and so forth. Basically you can do a raw image swap using something like:

Option1
Option2

var imagecontainer=document.getElementById('prodimage');

function typechange()
{
var selectedOption=document.getElementById('selectmenu').value;

…
code to get image file names here based on option value
…

imagecontainer.src="grabbedimagefilename.jpg";

}

And simply attach the function to the dropdown menu using an onchange event or something similar. Here I attached it directly to the select menu, but you can add event handlers dynamically via javascript. Though the real trick of the implementation is:
1.) How are you going to store the other images and associate them with the other product options/attributes?
2.) How are you going to grab that associated data and query for the image filename when getting the option value?

#2 is easy enough assuming you know AJAX programming. #1 you may want to think about to make sure you do it properly (scales well and is expandable). I've been working on a customized version of Osc for so long I don't want to make any assumptions on your particular code base. Keep in mind you can do what Gary did and use javascript to swap the background image, which may be better for keeping a consistent layout while swapping images. Though you can do that just as well with a raw image swap too using a div of a set size and overflow set to hidden, which will keep the browser from redrawing as the image is being swapped.
http://jarrodchristman.com Jarrod1937

It seems instead of escaping my input as i initially assumed it would, it's completely filtered out my html tags. Here is a second attempt to submit it:

@Dive
There are a ton of ways to do this. It depends on the setup you have and so forth. Basically you can do a raw image swap using something like:

[left arrow]img src="baseimage.jpg" id="prodimage"/[right arrow]

[left arrow]select name="whatever" id="selectmenu" onchange="typechange();"[right arrow]
[left arrow]option value="base"[right arrow]Option1[left arrow]/option[right arrow]
[left arrow]option value="2"[right arrow]Option2[left arrow]/option[right arrow]
[left arrow]/select[right arrow]

[left arrow]script type="text/javascript"[right arrow]
var imagecontainer=document.getElementById('prodimage');

function typechange()
{
var selectedOption=document.getElementById('selectmenu').value;

…
code to get image file names here based on option value
…

imagecontainer.src="grabbedimagefilename.jpg";

}
[left arrow]/script[right arrow]

And simply attach the function to the dropdown menu using an onchange event or something similar. Here I attached it directly to the select menu, but you can add event handlers dynamically via javascript. Though the real trick of the implementation is:
1.) How are you going to store the other images and associate them with the other product options/attributes?
2.) How are you going to grab that associated data and query for the image filename when getting the option value?

#2 is easy enough assuming you know AJAX programming. #1 you may want to think about to make sure you do it properly (scales well and is expandable). I've been working on a customized version of Osc for so long I don't want to make any assumptions on your particular code base. Keep in mind you can do what Gary did and use javascript to swap the background image, which may be better for keeping a consistent layout while swapping images. Though you can do that just as well with a raw image swap too using a div of a set size and overflow set to hidden, which will keep the browser from redrawing as the image is being swapped.

P.S. All left arrows have been replaced by [left arrow], same for all right arrows.
http://www.divebombonline.com Dive

@Jarrod1937
I appreciate the replie Jarrod, but I am new to programming. I am trying to customize a osc template that I have. What would be the simplest way to go about this.

Buy Gary A Beer?
Buying me a "beer" helps me to keep my contributions updated and keep this blog alive - and you get a link from my homepage to your site. Cheers!