Announcement

Collapse
No announcement yet.

Thumbnail images and drop-down boxes

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

    Thumbnail images and drop-down boxes

    We have certain products where they are available in many different colours. What I would like to do is have a drop-down box with all of the colours, and upon selecting a particular colour, a thumbnail image would appear somewhere on the page to show the colour selected.

    Is there any way to do this within Miva?

    Here is an example of a product where this would be very useful: http://www.tmasc.ca/abysstowels/abysssuperpile.html

    The Abyss Super Pile comes in 60 colours, which is a pretty staggering selection. We have created the colour chart here: http://www.tmasc.ca/abysscolours.html - which is still helpful, but I think it would be really neat to have these colours appear next to the corresponding drop-down option.

    Any thoughts? These are the best towels in the world so I'd like to do them justice :D
    Dylan Buchfink
    The Mattress & Sleep Company
    http://www.tmasc.ca/

    #2
    Re: Thumbnail images and drop-down boxes

    This will help you.
    http://blog.mivamerchant.com/1155/ad...product-pages/

    Thanks
    Pepin

    Comment


      #3
      Re: Thumbnail images and drop-down boxes

      Originally posted by pepin View Post
      Hi Pepin,

      Thank you for the link, this does look like it might be exactly what I'm looking for-- looks like I'll be playing around with my test store today!
      Dylan Buchfink
      The Mattress & Sleep Company
      http://www.tmasc.ca/

      Comment


        #4
        Re: Thumbnail images and drop-down boxes

        Is there any way to make it only show the swatch which has been selected? This method does of course work, but with 60 colours it's obviously not too practical to show all of them at all times.
        Dylan Buchfink
        The Mattress & Sleep Company
        http://www.tmasc.ca/

        Comment


          #5
          Re: Thumbnail images and drop-down boxes

          Sorry i am not following,if you are using a drop down box for the colors then basically what you have to do is show only the image for the color selected.

          Pepin

          Comment


            #6
            Re: Thumbnail images and drop-down boxes

            That is essentially what I meant. I followed the article and it's showing every colour swatch, regardless of which colour is selected...
            Dylan Buchfink
            The Mattress & Sleep Company
            http://www.tmasc.ca/

            Comment


              #7
              Re: Thumbnail images and drop-down boxes

              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


                #8
                Re: Thumbnail images and drop-down boxes

                Originally posted by pepin View Post
                Sure we can do it...

                Hope this helps
                Thanks
                Pepin
                Thank you!! I have the fundamental basics of this working now and I sincerely thank you for helping me. Obviously now I have to clean it up but at least I've figured out how to make it function:

                http://staging.tmasc.ca/abysstowels/abysssuperpile.html

                I mostly need to figure out how to make this work (in addition) to the standard product image and then I'll be all set!
                Dylan Buchfink
                The Mattress & Sleep Company
                http://www.tmasc.ca/

                Comment


                  #9
                  Re: Thumbnail images and drop-down boxes

                  your welcome,

                  Comment


                    #10
                    Re: Thumbnail images and drop-down boxes

                    Originally posted by koala View Post
                    I mostly need to figure out how to make this work (in addition) to the standard product image and then I'll be all set!

                    Well in the example i posted I am using the main product image and making it swap with different color image. Let take a look at the javascript again

                    Code:
                    <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>
                    as you can see from the above script I am saving all my images in folder 00000001 and we are declaring its path in var color_dir='graphics/0000001/

                    just an advice i suggest just using one image rather 2 the reason being there is already too much going on your webpage, plus it looks very good with big image changing on the left side.

                    let me know if you need more help, i would gladly try to help

                    hope this helps
                    Pepin

                    Comment


                      #11
                      Re: Thumbnail images and drop-down boxes

                      I appreciate the comments on the fact that there is too much going on-- we're always looking to ways that we can simplify while still having the information available. I'm always open to suggestions on where we might improve!

                      I do have one more question-- how would I change (or, add to) the product attribute template so that products without attribute thumbnails would continue to load normally (ie: without trying to load thumbnails which do not exist)? I'm sure it's some sort of if/else statement but I'm honestly not sure where to start.
                      Dylan Buchfink
                      The Mattress & Sleep Company
                      http://www.tmasc.ca/

                      Comment


                        #12
                        Re: Thumbnail images and drop-down boxes

                        what do you want to display when the product does not have attribute thumnail, what i mean is do you jsut want to display "nothing:" or just show the main product thumbnail or just say "no preview available"

                        Thanks
                        Pepin

                        Comment


                          #13
                          Re: Thumbnail images and drop-down boxes

                          I'd like to leave the main product image alone and still just show a separate thumbnail for swatches when they are available, but when a swatch isn't available I'd just like to leave it alone with "nothing"

                          I do hear what you're saying about clutter but once I have the coding figured out I have a good place to put these swatch previews that wont look too bad, especially once the images are sized more appropriately!
                          Dylan Buchfink
                          The Mattress & Sleep Company
                          http://www.tmasc.ca/

                          Comment


                            #14
                            Re: Thumbnail images and drop-down boxes

                            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
                            Last edited by pepin; 09-27-10, 07:04 PM.

                            Comment


                              #15
                              Re: Thumbnail images and drop-down boxes

                              Thank you, that worked great!
                              Dylan Buchfink
                              The Mattress & Sleep Company
                              http://www.tmasc.ca/

                              Comment

                              Working...
                              X