Announcement

**koala** · 09-28-10, 10:20 AM

Re: Thumbnail images and drop-down boxes

Pepin,

Sorry to bug you on this, I do have one final question (I hope!).

On products with multiple drop-down boxes, if you select an option in one of the other drop down's, the swatch which was previously selected now disappears... take a look here to see what I mean: http://www.tmasc.ca/product/abysssuperpile.html

That particular item has 5 drop down boxes. Is there a way to code this so that it will only do this onChange for that one particular drop down?

Thank you!

**nextscrubs** · 09-28-10, 11:30 AM

Re: Thumbnail images and drop-down boxes

Originally posted by pepin View Post

take a look at my test play site
http://store.cotintheweb.com/product/wool.html
Hope this helps
Thanks
Pepin

Your play site looks all broken in IE. In case you find out any solution to this, pass it on.. my site looks broken in all except IE.

**koala** · 09-28-10, 11:45 AM

Re: Thumbnail images and drop-down boxes

The broken stuff on my test site is just due to those (broken) elements not being located on the test server, but it does function properly aside from that

Your testing site does look a bit wonky in IE, I wonder if it's just a css issue of some kind?

**pepin** · 09-28-10, 04:49 PM

Re: Thumbnail images and drop-down boxes

hmmm a little tricky but still can be achieved ( :) ).

First:
-----
Thanks for pointing me about my test site looks all wacked in IE, the reason being use of LATU storehelper module, someone from this forum told me thats the best module to use if one wants to know about all the variables available in MIVA MERCHANT. the backdrop this module is it adds its own styles which make IE go BONKERS.

I made it inactive and IE is happy again.

Second
------
Now when i posted the code i didnt think that you will be needing to use more than one drop down box. well in order make this work we will change our onchange event defined to the select box in the attribute layout. please change this code

Code:

<select id="select1" name="Product_Attributes[&mvt:attribute:index;]:value" 
				onChange="color_select(this.value);">

to

Code:

<select id="select1" name="Product_Attributes[&mvt:attribute:index;]:value" 
				onChange="if(this.name.replace(/\D/g,'')==1) color_select(this.value);">

the if condition along with replace regex function does the trick. here this is how it works, First the if condition is gonna look for name of the select and remove all the non numeric characters and we get "1" and then we are telling to execute the color_select event if its equal to "1" else do nothing

NOTE: in my test site you can see this
http://store.cotintheweb.com/product/wool.html

Now in my case i am checking it with "1" because choose color is the first attribute i created. If its the same in your case then your fine to use the code as is, if not you need to change the number accordingly.

you can find out from this piece of line

as you can see that from name="Product_Attributes[1]:value" we are stripping "1"

hope this helps
Thanks
Pepin

**koala** · 09-28-10, 06:22 PM

Re: Thumbnail images and drop-down boxes

I cannot say how much I really appreciate you helping, this did the trick!

The product isn't live yet so there is no info, but this gives you an idea of what the finished selector looks like: http://www.tmasc.ca/abysstowels/abysssuperpile.html

**Patd265** · 09-29-10, 01:33 AM

Re: Thumbnail images and drop-down boxes

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

Hi Pepin,

This looks like what I need to display different sunglass color images.

The code in my Product Display Layout is:
<mvt:if expr="NOT ISNULL l.settings:product:image">
<div class="product-image"><img src="&mvt:product:image;" alt="&mvt:product:name;" /></div>
<mvt:else>
<div class="image-not-available product-image"></div>
</mvt:if>

If I change it to the code you gave above, would I then not screw up my other product pages. Or do I just add your code somehow?

Thanks
You guys have a wealth of information on here.

Pat

**pepin** · 09-29-10, 04:37 AM

Re: Thumbnail images and drop-down boxes

Hi Pat,
I cant answer that question without knowing what is going with your PROD page. The example i showed plus it was in relation to Koala question

But in most case if you are justing changing the product image it should work. I would back the page and give it try and test it out.

Good luck
Pepin

**pepin** · 09-29-10, 05:29 AM

Re: Thumbnail images and drop-down boxes

Originally posted by koala View Post

I cannot say how much I really appreciate you helping, this did the trick!

Your are welcome :)

**Danielle-PaysonLLC** · 11-16-10, 05:48 AM

Re: Thumbnail images and drop-down boxes

I am trying to do this and have found a solution but it is not working in any of the Internet Explorers. I tried doing it the way it was posted in this thread, but it did not work because I am using the attribute image field. This is the coding that I have for the drop-downs. Any ideas?

<mvt:if expr="l.settingsoption:image">
<select name="Product_Attributes[&mvt:attribute:index;]:value">
<mvt:foreach iterator="option" array="attributeoptions">
<mvt:if expr="( ( g.Product_Attributes[l.settings:attribute:index]:value EQ 0 ) AND ( l.settingsoption:id EQ l.settings:attribute:default_id ) ) OR
( g.Product_Attributes[l.settings:attribute:index]:value EQ l.settingsoption:code )">
<option value="&mvteoption:code;" selected onClick="document.getElementById('mainimage').src= 'mm5/&mvteoption:image;';">&mvteoptionprompt;</option>
<mvt:else>
<option value="&mvteoption:code;" onClick="document.getElementById('mainimage').src= 'mm5/&mvteoption:image;';">&mvteoptionprompt;</option>
</mvt:if>
</mvt:foreach>
</select>
<mvt:else>

<select name="Product_Attributes[&mvt:attribute:index;]:value">
<mvt:foreach iterator="option" array="attributeoptions">
<mvt:if expr="( ( g.Product_Attributes[l.settings:attribute:index]:value EQ 0 ) AND ( l.settingsoption:id EQ l.settings:attribute:default_id ) ) OR
( g.Product_Attributes[l.settings:attribute:index]:value EQ l.settingsoption:code )">
<option value="&mvteoption:code;" selected >&mvteoptionprompt;</option>
<mvt:else>
<option value="&mvteoption:code;" >&mvteoptionprompt;</option>
</mvt:if>
</mvt:foreach>
</select>

</mvt:if>

**pepin** · 11-18-10, 10:39 AM

Re: Thumbnail images and drop-down boxes

Question for you, I have not tested this but why not just use the option image path in the script itself rather than the miva token.

What I mean is in the javascript which goes in the head tag change the path to something like

var color_dir= 'mm5/your path to those attribute images'

and then use the onchange event on the select tag

and you might want to remove spaces in your image file names just a advice

Thanks
Pepin

**dawg1** · 11-18-10, 12:35 PM

Re: Thumbnail images and drop-down boxes

Hi Pepin! I have been reading over this post and am really excited about trying to implement it on my site. I am confused about calling the actual images though. Where does the script and/or code find which image should be used for which attribute?
I am not a coder/developer so bear with me, if you will.

Thanks!

**koala** · 11-18-10, 01:20 PM

Re: Thumbnail images and drop-down boxes

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"

**dawg1** · 11-18-10, 01:30 PM

Re: Thumbnail images and drop-down boxes

So far it's not working yet....

I am getting a syntax error unexpected ELSEIF for this line of code...

Code:

<mvt:elseif expr="l.settings:attribute:type EQ �select�">

**dawg1** · 11-19-10, 06:28 AM

Re: Thumbnail images and drop-down boxes

So, I really want to get this to work but I'm missing something and I just don't know what or where. So, in an effort to not drive myself crazy with it, I'm posting my Product Attribute Template Code. Any help would be greatly appreciated!!!

Code:

<mvt:foreach iterator="attribute" array="attributes">
 <br />
        <table cellpadding="0" cellspacing="0" border="0">
 <input type="hidden" name="Product_Attributes[&mvt:attribute:index;]:code" value="&mvte:attribute:code;">
 <mvt:if expr ="l.settings:attribute:template_code NE 0">
 <input type="hidden" name="Product_Attributes[&mvt:attribute:index;]:template_code" value="&mvte:attribute:template_code;">
 </mvt:if>
 <mvt:if expr = "l.settings:attribute:type EQ 'checkbox'">
 <tr>
  <td align="left" valign="middle">
  <mvt:if expr = "g.Product_Attributes[l.settings:attribute:index]:value">
  <input type="checkbox" name="Product_Attributes[&mvt:attribute:index;]:value" value="Yes" checked>
  <mvt:else>
  <input type="checkbox" name="Product_Attributes[&mvt:attribute:index;]:value" value="Yes">
  </mvt:if>
  <mvt:if expr="l.settings:attribute:image">
  <img src="&mvte:attribute:image;" alt="&mvt:attribute:prompt;">
  <mvt:else>
  <mvt:if expr="l.settings:attribute:required">
  <h5>&mvt:attribute:prompt;</h5>
  <mvt:else>
  &mvt:attribute:prompt;
  </mvt:if>
  </mvt:if>
  </td>
 </tr>
 <mvt:else>
 <tr>
  <td align="left" valign="top">
  <mvt:if expr="l.settings:attribute:image">
  <img src="&mvte:attribute:image;" alt="&mvt:attribute:prompt;">
  <mvt:else>
  <mvt:if expr="l.settings:attribute:required">
  <h5>&mvt:attribute:prompt;</h5>
  <mvt:else>
  &mvt:attribute:prompt;
  </mvt:if>
  </mvt:if>
  </td>
  <mvt:if expr="l.settings:attribute:type EQ 'text'">
  <td align="left" valign="top">
  <input type="text" name="Product_Attributes[&mvt:attribute:index;]:value" value="&mvte:attribute:value;" size=30>
  </td>
  <mvt:elseif expr="l.settings:attribute:type EQ 'memo'">
  <td align="left" valign="top">
  <textarea name="Product_Attributes[&mvt:attribute:index;]:value" rows=10 cols=58 wrap="on">&mvte:attribute:value;</textarea>
  </td>
  <mvt:elseif expr="l.settings:attribute:type EQ 'radio'">
  <td align="left" valign="top">
   <table cellpadding="0" cellspacing="0" border="0">
   <mvt:foreach iterator="option" array="attribute:options">
    <tr>
     <td valign = "middle">
     <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 )">
     <input type="radio" name="Product_Attributes[&mvt:attribute:index;]:value" value="&mvte:option:code;" checked>
     <mvt:else>
     <input type="radio" name="Product_Attributes[&mvt:attribute:index;]:value" value="&mvte:option:code;">
     </mvt:if>
     </td>
     <td valign = "middle">
     <mvt:if expr="l.settings:option:image">
     <!-- <img src="&mvte:option:image;" alt="&mvte:option:prompt;"/> -->
     <mvt:else>
     &mvte:option:prompt;
     </mvt:if>
     </td>
    </tr>
    </mvt:foreach>
   </table>
  </td>
  <mvt:elseif expr="l.settings:attribute:type EQ 'select'">
  <td align="left" valign="top">
  <select id="1" name="Product_Attributes[&mvt:attribute:index;]:value" onChange="if(this.name.replace(/\D/g,'')==1) 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;" selected>&mvte:option:prompt;</option>
  <mvt:else>
  <option value="&mvte:option:code;">&mvte:option:prompt;</option>
  </mvt:if>
  </mvt:foreach>
  </select>
  </td>
  </mvt:if>
 </tr>
 </mvt:if>
 </table>
 </mvt:foreach>
 <input type="hidden" name="Product_Attribute_Count" value="&mvte:global:Product_Attribute_Count;">

Thanks Again for any help!!

**dawg1** · 01-16-11, 10:37 AM

Re: Thumbnail images and drop-down boxes

Originally posted by pepin View Post

sure the easiest way to do is take the advantage of onerror attribute of the img tag and display a clear.gif (1 by 1) image.

here is the write up. Note you will need to add this to your product attribute image option tag. so please use it accordingly.

Code:

<img src="&mvte:option:image;" alt="&mvte:option:prompt;" title="&mvte:option:prompt;" onerror=" this.src='graphics/clear.gif' " />

Note the single quotes for the path of the image in this.src

so basically what this code does is it will look for an image, if no image is found it will simply load the clear.gif which is basically nothing.
you can take a look at my url again
http://store.cotintheweb.com/product/wool.html
and select blue color
one more i do like the idea of you showing the small thumbnails next to the main image.

hope this helps
Pepin

What would the img src be if you were to leave the main product image? Something like

Code:

&mvt:product:image;

?

Announcement

Thumbnail images and drop-down boxes

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment