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]

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. :confused:

[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]

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!?!

[Shift4Shop-Henry]

We've gotten quite a few recent requests for this, and - with the introduction of 3dcart version 3.2 - some slight modifications will need to be made to Gonzalo's previous posting above.

This post will hopefully offer more updated information.
As always, please be sure to work with back-ups of your files for safety purposes.

Prep work: Part I - Getting the files

You will first need to retrieve 2 files: the original listing.js file and the listing template you will be using for your product. Due to the nature of the drop image selector's placement on a listing page, we recommend using the template for listing style 2 - as this places the selector neatly to the right of the product's main image, making the selection more apparent and easier to reach.

1. FTP to your site and proceed to /web/assets/templates/common
2. look for the product listing template you'd like to use for the product and transfer it to your computer.

Again, we recommend using style 2's listing template which is listing_1.html. For reference, here is a quick preview of the styles and their respective templates:

style 1 - listing_0.html (note, this also is the template for the "default" style)
style 2 - listing_1.html
style 3 - listing_2.html
style 4 - listing_3.html

3. While still in FTP, navigate to /web/assets/templates/common/js
4. look for the listing.js file and transfer it to your computer as well.

Prep work: Part II - Find your Template's Theme Folder

1. Log into your 3dcart Online Store Manager
2. Go to "Settings =>Design =>Themes & Styles"

Under the "Current Settings" section, you will see your selected theme. Usually the themes will be named with a v3xxxx number. Make a note of the theme's name.

(This is the name of your template folder to which we'll eventually upload our two edited files.)

Part III - Editing the listing.js file

Open up the listing.js file in a text editor and look for the following code (should be near line 181)

// Have its own image per drop down
SetSrc(what,"img_" + fieldnamemod,GetValue(what,"image_" + what.elements[i].options[what.elements[i].selectedIndex].value));

Replace this section of code to reflect the following:

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

Essentially you're replacing "img_" with "large" and removing the "+fieldnamemod," portion.

Once this is complete, save the file as "listing2.js"

Note, in this case the name of the script file can be whatever you'd like. We only use the number 2 in this example to differentiate it from the original.


Part IV - Editing the HTML template

You will now need to edit the path your template uses so that it will reflect this newly edited .js file. We also need to remove the image zooming aspects of the template, since these don't appear to play very well with the drop-down image parameter we're using for this project. :)

To continue, open up your listing_x.html file in a text or HTML editor and look for the following code at the very top:

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

Replace this code with the following:

<script language="javascript" src="assets/templates/[template]/js/listing2.js" type="text/javascript"></script>

Note: in the above example, replace "[template]" with your specific template theme's folder number (i.e. assets/template/v32001/js/, etc)

Directly beneath this first line of code, you should also see a second reference to a javascript file for "Magic Zoom" this is the image zooming portion of the template which you will need to remove altogether.

(update: 10/7/2011 - You really only need to remove the "magiczoomplus.js" reference itself.)

Your final code should look something like this with the first two lines reading:

<script language="javascript" src="assets/templates/[template]/js/listing2.js" type="text/javascript"></script>
<script src="prototype.js" type="text/javascript"></script>

Now, while still in the listing_x.html file, look for the following code:

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

Remove that line completely as it is not used anymore.

Last but not least...

Now look for a portion of code that begins with:

<!--START: image1-->

Immediately after this section you'll see code similar to this:

<a href="[image1]" class="[3dzoom_class]"  id="listing_main_image_link"><img src="thumbnail.asp?file=[image1]&maxx=[image_medium_w]&maxy=0" align="middle" border="0" id="large" name="large" alt="[name]"></a><br>

Remove everything leading up to the "<img src" portion so that it looks like this:

<img src="thumbnail.asp?file=[image1]&maxx=[image_medium_w]&maxy=0" align="middle" border="0" id="large" name="large" alt="[name]"><br>

Save this file as listing_21.html

Again, the name you use for the file isn't important. We only suggest using the number 21 because it makes the Style easier to select when it comes time to applying the template to your product. (it will be shown as "Style 22")

Part V - Uploading the files

Once again, FTP back to your store. This time, navigate to your template's theme folder. (i.e. /web/assets/templates/[template]

1. Upload your edited listing_x.html file into this folder.
2. While still in this FTP directory, create a folder within the template folder, and name it "js"
3. Then, upload your edited listing2.js file to this newly created "js" folder.

Finally, from your 3dcart Online Store Manager, navigate to your product and click on its "Advanced" tab. Once there, you should see a drop down for the listing template. Click on it and select your newly edited template. (Style 22.)

Save the product and view it to see your changes.

It's a bit of a complex process which can be somewhat difficult to explain, but I hope this helps clarify it a bit.

[sportscenterisnext]

I've tried, I've tried!

I've followed these steps 3x, still not seeing the desired end results. I thought I might be missing something. Before I bring the store to it's knees, I thought I might ask those who've tried and been successful.

Within the Store Manager, Advanced tab, I'm looking to make this feature work for Listing Template > Drop Down > Style 2.

Within the Store Directory thru FTP, (/web/assets/templates/common) would I choose listing_2.html to download to my local machine to make the changes?

Thank you in advance for your assistance.

[piaf]

Style 2 is actually listing_1.html (the name and the filename are always off by one digit, go figure). :)

[Shift4Shop-Henry]

Hi sportscenterisnext,

I just got your private message regarding this and I'll try to assist where I can after I get a closer look at your site settings.

However, one thing you wrote here may have shone some light on the difficulty you're having and it might be useful for others to be aware of...

Within the Store Manager, Advanced tab, I'm looking to make this feature work for Listing Template > Drop Down > Style 2.

Within the Store Directory thru FTP, (/web/assets/templates/common) would I choose listing_2.html to download to my local machine to make the changes?

If you're trying to configure Listing Style 2, then the template you'll need to make a copy of and edit is actually listing_1.html. (instead of listing_2.html; which actually controls "Style 3")

Since we also have a "Default" style listing, the numbering convention gets a little skewed. The basic rule of thumb is that the listing template is always one digit less than its respective Style number. Here's a quick cheat sheet reference for how the styles correspond to their respective templates.

• listing_0.html controls both "Style 1" and "Default"
• listing_1.html controls "Style 2"
• listing_2.html controls "Style 3"
• listing_3.html controls "Style 4"

As I mentioned, I'll take a look at your specific settings in a moment to see where else I can be of assistance. I'll reply to your private message shortly.

[Barry]

3dCartHenry,

Since we also have a "Default" style listing, the numbering convention gets a little skewed. The basic rule of thumb is that the listing template is always one digit less than its respective Style number.

Interesting, and thanks for confirming, but, why not just let: listing_1.html control "Style 1", listing_2.html control "Style 2" etc., etc. Then let everyone know that Style 1 is the default??? Just a thought.

[Worldscrown]

Works Great

The image replacement technique worked great. Any chance of getting the code for the zoom feature to load the new image upon selection of another drop image option? That would make this feature complete. Thanks in advance.

[sherylmail]

Thanks for the great step by step instructions. :D

As a new 3dcart user, I am still a little frustrated that this feature isn't standard but your instructions made it super easy to work around the problem and get it going and it works terrific.