Announcement

Collapse
No announcement yet.

Need Pro Advice on Swatch Drop Down List

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Need Pro Advice on Swatch Drop Down List

    I am in the process of adding a new line of bracelets to our website. When they choose the starter bracelet at the product level they have two drop downs with the option of adding two additional charms out of a selection of 48 charms. I would like to some how modify the Swatch-Drop Down function so that the image will appear under the drop down or under the main image where the additional images are. This way I dont have 48 small images that they will just get lost looking at.

    Hope I explained this well

    Thanks in advance

    Shane
    Last edited by pofo; 10-22-14, 11:38 AM.

    #2
    Re: Need Pro Advice on Swatch Drop Down List

    I was able to do a drawing on how we would like this to work so it is less confusing.
    This is how the site looks at the moment with the swatches in the normal location.


    We would like it to display in one of these ways. If you have any advice or know some code that may work for us.



    or




    thanks

    shane

    Comment


      #3
      Re: Need Pro Advice on Swatch Drop Down List

      Miva Merchant provided an example method via the following thread:
      http://extranet.mivamerchant.com/for...tive-attribute

      It will not quite work exactly the way you have specified in the second screenshot, so you will need to play around with it.

      Comment


        #4
        Re: Need Pro Advice on Swatch Drop Down List

        thank you it's a very good start in the right dirsction, I am sure someone would know some code that will allow only the picked attribute image to appear

        Comment


          #5
          Re: Need Pro Advice on Swatch Drop Down List

          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

          Comment


            #6
            Re: Need Pro Advice on Swatch Drop Down List

            any ideas would be grate

            Comment

            Working...
            X