Dropdown Image Option

[The Diaper Lady]

Under the option section of the products I see "Opt" with the description of Allows you to add image option for the dropdown image option. Click select to browse for images.

I take this that we can have the image change for each option we have. i.e. I have shirts with dropdown selections of red, blue, yellow. if a customer chooses red, then a red shirt image appears, if blue then a blue shirt appears. Correct?

This function does not appear to work as there is no "select" for me to click on. i my admin just missing this feature or is it coming soon?

Thanks!

[MagnetMan]

You will need to upload a pic of each of the option images you need ... i.e a red shirt image, a blue shirt image etc.

Then under the options tab for the relevant product go the Opt. column relating to the option (red, blue etc) and follow to where you uploaded the the images. Select your corresponding image and bob's uncle!

Good luck

[The Diaper Lady]

Originally Posted by MagnetMan

You will need to upload a pic of each of the option images you need ... i.e a red shirt image, a blue shirt image etc.

Then under the options tab for the relevant product go the Opt. column relating to the option (red, blue etc) and follow to where you uploaded the the images. Select your corresponding image and bob's uncle!

Good luck

Yes I understand that but my admn appears to be missing that Select link to select my image. Do you have it? Maybe for some reason just my admin is missing it.

[MagnetMan]

OK ... Here's how I got it to work.

On the product page under the options tab, in the top part (options name) create an option (eg colors) and select dropImage from the drop down box

Then press "insert"

You will now see the option you just created in a box below.

In that "new" box, press insert again. You should then get a "select" line under the options column. Follow that through to where your images are and ... voila!

Fingers crossed!

[The Diaper Lady]

Originally Posted by MagnetMan

OK ... Here's how I got it to work.

On the product page under the options tab, in the top part (options name) create an option (eg colors) and select dropImage from the drop down box

Then press "insert"

You will now see the option you just created in a box below.

In that "new" box, press insert again. You should then get a "select" line under the options column. Follow that through to where your images are and ... voila!

Fingers crossed!

AHHHH!!! I totally missed the dropimage in the dropdown box. I got it! Thanks!

[The Diaper Lady]

Oh man! I just did one of my products and it doesn't quite work the way i thought it did. my current cart has this feature. when you select a color/print option it changes the main product picture to that color/print. It looks like 3dcart actually places a seperate image next to the color/print dropdown. Oh well.

[GonzaloGil]

There is a way to use the drop-image option to change the main image, it requires a javascript and template change...5-10 mins of work (more or less)

Edit:

assets/templates/common/js/listing.js

(Make a backup first, also if you want to retain the normal drop-down image behavior then simply make a copy of the file and name it listing2.js)

Edit the file, find the line 183, should say:

// change main image
//SetSrc(what,"large",GetValue(what,"image_" + what.elements[i].options[what.elements[i].selectedIndex].value));

Change to:

// change main image
SetSrc(what,"large",GetValue(what,"image_" + what.elements[i].options[what.elements[i].selectedIndex].value));

(Basically remove the // from the front of sersrc)

Also remove the previous line:

SetSrc(what,"img_" + fieldnamemod,GetValue(what,"image_" + what.elements[i].options[what.elements[i].selectedIndex].value));

(erase it from file).

Next, if you do want to keep both behaviors, instead of editing your listing_0.html, make a copy of the file, and name it listing_1.html, if you already have a _1, name it _2, (if you have a _2 already name it _3, etc.)

On the very top of listing_x, you'll see

<script language="JavaScript" src="assets/templates/common/js/listing.js" type="text/JavaScript"></script>

If you did make a copy of listing.js, make sure you change this to listing2.js or whatever. If you didnt, then you can leave the file that line as is.

Now, still on listing_x.html file, search for:

<img name="img_[oname]" src="assets/templates/common/images/spacer.gif">

Remove that line. (That's the place holder for the small image, which we don't need any more.)

I hope that's clear, if not, let me know , post the link to an item after you are done!

[The Diaper Lady]

Thanks for that info Gonzalo!

You guys are actually working on redesigning my store. Can I ask the design team to do this for me, too!?!