product changes color according to attribute color

July 24, 2003

Hi,

Is there a contribution or does someone know how to setup color attributes that when the attribute is clicked, the product will change to that color of attribute?

Thanks!

July 25, 2003

Hi,

I have found out that this is a java code to alternate pictures when someone clicks an attribute but cannot get it to work.

Any java experts out there? :lol:

This is the script:

<!--

var ar = new Array();

ar[0] = new Array();

ar[0][0] = new makeOption('2-htpink.jpg', 'hot pink');

ar[0][1] = new makeOption('2-lav.jpg', 'lavender');

ar[0][2] = new makeOption('2-pink.jpg', 'Pink');

ar[0][3] = new makeOption('2-crm.jpg', 'cream');

ar[0][4] = new makeOption('2-red.jpg', 'red');

ar[0][5] = new makeOption('2-royal.jpg', 'royal');

ar[0][6] = new makeOption('2-skybl.jpg', 'sky blue');

ar[0][7] = new makeOption('2-white.jpg', 'white');

ar[0][8] = new makeOption('2-yel.jpg', 'yellow');

ar[0][9] = new makeOption('navy-2.JPG', 'navy');

function makeOption(imagesname, imagesdescriptions) {

this.imagesname = imagesname;

this.imagesdescriptions = imagesdescriptions;

}

function show(el) {

txt = (el[el.selectedIndex].text);

txt1 = txt.indexOf('(+');

if (txt1 >= 0) {

txt = txt.substring(0, txt1-1);

}

var arLength = ar.length;

for (var y=0; y<arLength; y++) {

var curAr = ar[y];

for (var i=0; i<curAr.length; i++) {

str = curAr.imagesdescriptions;

str = str.toLowerCase();

txt = txt.toLowerCase();

if (str == txt) {

document['prod_picture'].src='images/' + curAr.imagesname;

}

// End -->

Daemonj · July 25, 2003

Melinda,

What is happening or not happening (whichever is most appropriate) when you try to run the script?

In order to run it, you will need to add a call to the show() function with the id that you wish to display.

Does that help?

If not, give me a few more details and perhaps we can get this sorted out.

BTW, that is JavaScript not Java - they are entirely different. ;)

July 25, 2003

Hi,

When I click on one of the attributes nothing happens.

I don't know anything about java script or java.

Daemonj · July 25, 2003

Can you give me the statement that you have for the attributes?

If you are interested, JavaScript is very similar to PHP in syntax. If you are comfortable with PHP learning JavaScript should be relatively easy.

July 26, 2003

Jim,

Statement? I don't know.

That code is all I have.

Daemonj · July 26, 2003

You have to have a link (<a href=> tag) or something to click on that calls the show function.

You do not have anything like this?

July 26, 2003

Jim,

Not that I know of.

Daemonj · July 26, 2003

That is the problem then.

How are you displaying the different colored t-shirts? Do you have them in a row and want them clickable or do you have a single t-shirt and a drop down list of colors and want the t-shirt to change based upon the drop down selection or someting else?

July 26, 2003

I want the bows (t-shirt) to change to the color of the attribute when the attribute is clicked in the drop down box.

I have the different bow colors setup in the admin and all the graphics assembled.

Daemonj · July 26, 2003

Okay, you have to edit the code that draws the drop down box to include the onChange event with the following setting:

onChange="javascript:show($id);return;"

but replace the $id with the name of the key for the selection from the drop down.

amyno · July 31, 2003

Hey Jim,

Where does this JS go, and where exactly do I put that OnChange. I know it goes on the DropDownList, but on which PHP file. And if I have Many differnt subcategories that will need to change picturers, how would I do that? Heres my site if it would help. www.moonautoworks.com/store/catalog/ First Category, First Sub-Category, The Reducers would be one example in need of changing pictures (red, yellow, blue, silver, white).

thanks

amyno

Daemonj · July 31, 2003

The JavaScript code goes into the <head> portion of the document, just before the <body> tag. It will need to be enclosed in <script> tags.

The onChange code does indeed go to the drop-down that is created in product_info.php. If you have any contributions that display the product options elsewhere, then they will have to be modified as well.

azer · August 31, 2003

modom did u manage to make it work ?

Stevis2002 · April 6, 2005

Hi all, Did anybody actually get this working?

Maybe someone can release this as a contribution, as i know a lot of people would use this.

Cheers,

Steve

EricK · March 19, 2007

This is exactly what I'd like to do, change the main product image using the attribute dropdown.

http://www.ckbradley.com/catalog/product_i...products_id=142

Is the update made by the JavaScript "fun function" added to the standard osC JavaScript below? What else was done for this to work?

Regards,

EricK

function MM_openBrWindow(theURL,winName,features) { //v2.0
 window.open(theURL,winName,'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,res
izable=yes,copyhistory=no,width=450,height=300,screenX=150,screenY=150,top=0,left
=0');
}

function popupWindow(url)
{
 window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,res
izable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=0,left
=0')
}
function fun()
{
  // alert("change product color");
  oscsidstr="&osCsid="+document.cart_quantity.osCsid.value;
document.cart_quantity.action = "product_info.php?" + document.all["id[1]"].value+ oscsidstr;
//"product_info.php" + document.all.id[1].value;
document.cart_quantity.submit();
}

</script>

product changes color according to attribute color

Recommended Posts

Guest

Guest

Daemonj

Guest

Daemonj

Guest

Daemonj

Guest

Daemonj

Guest

Daemonj

amyno

Daemonj

azer

Stevis2002

EricK

Archived

Browse

Activity