Announcement

**dawg1** · 01-16-11, 12:57 PM

Re: Thumbnail images and drop-down boxes

Originally posted by koala View Post

The "code" for each attribute option is going to be your image name... so basically if you have a black swatch, and the file is Black.jpg then you'd want the attribute code to be "Black"

Can I add an element to the color dir (or is there any other way) so that I can call the attribute image to its correct product? I ask because I have several products that have the same color ID or Swatch name, but obviously have different images. I'm thinking something like color_dir + product code + ID + '.jpg' ?

I hope this makes sense. I would really appreciate some help so that I can use this feature!

Thanks so much, in advance!

**pofo** · 10-22-14, 12:48 PM

Re: Thumbnail images and drop-down boxes

Ive been on the hunt for this code for a while now. I am trying to make this work on my site but it is not working. Seeing as this is an older thread my guess is that the coding has changed. I have two drop downs that I want to have this work for on each page. though both drop downs will be the same items. Here is a site that has what i'm looking for http://www.tmasc.ca/mm5/merchant.mvc...-luxury-towels.

Originally posted by pepin View Post

Sure we can do it, I was work so didnt have a chance to post the code. To be frank you actually dont have to use the attribute Images option unless you want to show them in the product display page.
take a look at my test play site
http://store.cotintheweb.com/product/wool.html

you if you select the color only the image changes actually without refreshing the entire page.

the trick is to use a small piece of javascript for onChange of the drop down box.

you can use this code if you want.

Code:

// javascript to be placed in the between <head> tags in PROD page
<script type="text/javascript" language="javascript">

function color_select(ID){
var colorElem = document.getElementById('color');
var color_dir = 'graphics/00000001/';
colorElem.src = color_dir + ID + '.jpg';
}
</script>

Now 'color is the ID i gave to the image tag in Product Display Layout like below

<mvt:if expr="NOT ISNULL l.settings:product:image">
<img id="color" src="&mvt:product:image;" alt="&mvt:product:name;">
<mvt:else>
&nbsp;
</mvt:if>

NOW in product attributes layout, add the onChange event to select options

<mvt:foreach iterator="option" array="attribute:options">
                    <!-- <img src="&mvte:option:image;" alt="&mvte:option:prompt;" title="&mvte:option:prompt;" class="swatches" /> -->
                </mvt:foreach>
                <select name="Product_Attributes[&mvt:attribute:index;]:value" onChange="color_select(this.value);">
                    <mvt:foreach iterator="option" array="attribute:options">
                        <mvt:if expr="((g.Product_Attributes[l.settings:attribute:index]:value EQ 0) AND (l.settings:option:id EQ l.settings:attribute:default_id)) OR(g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code)">
                            <option value="&mvte:option:code;" id="&mvte:option:code;" title="&mvte:option:prompt;" selected>&mvte:option:prompt;</option>
                        <mvt:else>
                            <option value="&mvte:option:code;" id="&mvte:option:code;" title="&mvte:option:prompt;">&mvte:option:prompt;</option>
                        </mvt:if>
                    </mvt:foreach>
                </select>

NOTE: i commented out the attribute image option img tag (red color), so all the color images wont be displayed
and added the onchange event (marron color)

Hope this helps
Thanks
Pepin

Announcement

Thumbnail images and drop-down boxes

Comment

Comment