anton-z
3/24/2017 - 5:03 PM

Select product variants by clicking their images

Select product variants by clicking their images

//For Pursuit. Begignig of function.
this.flickityInstance.on( 'select', function( index ) {

          var flickity_slider = _this.flickityInstance.element;
          var videoSlides = flickity_slider.querySelectorAll("[data-product-media-type-video]");
          var modelViewerSlides = flickity_slider.querySelectorAll("[data-product-media-type-model]");
          var selectedSlide = _this.flickityInstance.selectedElement;

          var image = selectedSlide.querySelector('img').getAttribute('src').split('?')[0].replace(/(_\d+x\d+@\dx\.)|(_[0-9x]+\.)|(_\d+x\.)|(_thumb\.)|(_small\.)|(_compact\.)|(_medium\.)|(_large\.)|(_grande\.)|(_150x@2x\.)/,'.');
 
          if (typeof variantImages !== 'undefined') {
            if (typeof variantImages[image] !== 'undefined') {
               for(var i=0;i<flickity_slider.closest('.shopify-section').querySelectorAll('.single-option-selector').length;i++){
                optionValue = variantImages[image]['option-'+i];             
                if (optionValue !== null) {
                    var options = flickity_slider.closest('.shopify-section').querySelectorAll('.single-option-selector')[i].querySelectorAll('option');
                    for(var k=0;k<options.length;k++){
                      if(options[k].innerHTML === optionValue){
                        if(flickity_slider.closest('.shopify-section').querySelectorAll('.single-option-selector')[i].selectedIndex != k){
                        flickity_slider.closest('.shopify-section').querySelectorAll('.single-option-selector')[i].selectedIndex = k;
 						flickity_slider.closest('.shopify-section').querySelectorAll('.single-option-selector')[i].dispatchEvent(new Event('change', { 'bubbles': true }));
                        }
                      }
                    }
                  }
              }
            }
          }


          if(videoSlides.length > 0) {
            videoSlides.forEach(function(item,index) {
              var isVideoTag = item.querySelector('video');
              if(isVideoTag) {
                var videoId = isVideoTag.getAttribute('id');
                
                .....
1.In the Sections folder, open the product-template.liquid template and paste

{% comment %}
Place this in your product.liquid template, at the bottom.
{% endcomment %}
{% if product.variants.size > 1 %}
<script>
  var variantImages = {},
    thumbnails,
    variant,
    variantImage,
    optionValue,
    productOptions = [];
    {% for variant in product.variants %}
       variant = {{ variant | json }};
       if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
         variantImage =  variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
         variantImages[variantImage] = variantImages[variantImage] || {};
         {% for option in product.options %}
         
           {% assign option_value = variant.options[forloop.index0] %}
           {% assign option_key = 'option-' | append: forloop.index0 %}
         	
           if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
             variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
           }
           else {
             var oldValue = variantImages[variantImage][{{ option_key | json }}];
             if ( oldValue !== null && oldValue !== {{ option_value | json }} )  {
               variantImages[variantImage][{{ option_key | json }}] = null;
             }
           }
         {% endfor %}
       }
       productOptions.push(variant);
    {% endfor %}
</script> 
{% endif %}

2.Open the scripts.js file in your Assets folder and paste

  $(document).ready(function() {
  thumbnails = $('.slider_1 img[src*="/products/"]');
  if (thumbnails.length) {
    thumbnails.bind('click', function() {
      var arrImage = $(this).attr('src').split('?')[0].split('.');
      var strExtention = arrImage.pop();
      var strRemaining = arrImage.pop().replace(/_[a-zA-Z0-9@]+$/,'');
      var strNewImage = arrImage.join('.')+"."+strRemaining+"."+strExtention;
      if (typeof variantImages[strNewImage] !== 'undefined') {
          productOptions.forEach(function (value, i) {
           optionValue = variantImages[strNewImage]['option-'+i];
           if (optionValue !== null && $('.single-option-selector:eq('+i+') option').filter(function() { return $(this).text() === optionValue }).length) {
             $('.single-option-selector:eq('+i+')').val(optionValue).trigger('change');
           }
        });
      }
    });
  }
});
  
 
 
 3.Open the custom.js file in your Assets folder and paste. Its for warehouse or another maestroo themes.
 
document.addEventListener("DOMContentLoaded", function(event) { 
  var thumbnails = document.getElementsByClassName('product-gallery__thumbnail');
  if (thumbnails) {
    for(var i=0; i<thumbnails.length;i++){
      
    
    
    thumbnails[i].addEventListener('click', function(event) {    

      var arrImage = event.target.getAttribute('src').split('?')[0].split('.');
      var strExtention = arrImage.pop();
      var strRemaining = arrImage.pop().replace(/_[a-zA-Z0-9@]+$/,'');
      var strNewImage = arrImage.join('.')+"."+strRemaining+"."+strExtention;
       if (typeof variantImages !== 'undefined') {
      if (typeof variantImages[strNewImage] !== 'undefined') {
          productOptions.forEach(function (value, j) {
          var optionValue = variantImages[strNewImage]['option-'+j];
            if (optionValue !== null){
              var options_blocks = document.querySelectorAll('.product-form__option-selector .product-form__single-selector');
             // debugger;
                for(var k=0; k<options_blocks.length;k++){
                  if(optionValue === options_blocks[k].value){
                    options_blocks[k].checked = true;
                    options_blocks[k].dispatchEvent(new Event('change', { 'bubbles': true }));
                  }
                }
//                .filter(function() {
//             debugger; 
// 			return $(this).text() === optionValue 
// 			}).length) {
//              $('.single-option-selector:eq('+i+')').val(optionValue).trigger('change');
//            }
            }
        });
      }
       }
    });
  }
    }
  
});
//For Showtime 7.0 
(async () => {
    const { Core } = await importModule('Core');
    const { Swiper } = await importModule('Swiper');

    const ATTR_INITIAL_POSITION = 'initial-image-position'

    customElements.define('product-gallery', class extends Core {
        elements = {
            swiper: '[data-swiper]',
            pagination: '[data-pagination]'
        }

        subscriptions = {
            'variant:change': '_onVariantChange'
        }

        render() {
            this._initSwiper();
            this.subscribe('variant:change');
        }

        _initSwiper() {
            this.swiper = new Swiper(this.$swiper, {
                autoHeight: true,
                pagination: {
                    el: this.$pagination,
                    type: 'bullets'
                },
                breakpoints: {
                    992: {
                        allowTouchMove: false
                    }
                },
                        on: {
            slideChange: function () {
              if (typeof productOptions != "undefined") {
                if (productOptions.length > 0) {
                 
                  var current_slide = this.slides[this.activeIndex];
                  if (current_slide) {  
                  var current_slide_img = current_slide.querySelector("img");

                  if (current_slide_img) {
                    var arrImage = current_slide_img
                      .getAttribute("src")
                      .split("?")[0]
                      .split(".");
                    var strExtention = arrImage.pop();
                    var strRemaining = arrImage
                      .pop();
                      //.replace(/_[a-zA-Z0-9@]+$/, "");
                    var strNewImage =
                      arrImage.join(".") +
                      "." +
                      strRemaining +
                      "." +
                      strExtention;
                    if (typeof variantImages !== "undefined") {
                       
                      if (typeof variantImages[strNewImage] !== "undefined") {
                        productOptions.forEach(function (value, j) {
                       
                          var optionValue =
                            variantImages[strNewImage]["option-" + j];
                          if (optionValue !== null) {
                            var options_blocks = document.querySelectorAll(
                              "product-options-dropdown select option"
                            );
                            // debugger;
                              for (var k = 0; k < options_blocks.length; k++) {
        
                              if (optionValue === options_blocks[k].value) {
                                 
                              if(options_blocks[k].closest("select").value != optionValue){
                              options_blocks[k].closest("select").value = optionValue;  
                              var needed_options_block = options_blocks[k];   
                               setTimeout(() => { 
                                needed_options_block.closest("select").dispatchEvent(                                 
                                    new Event("change", { bubbles: true })                                                                
                                );
                               },100) ;
                              } 
                              }
                            }
                          }
                        });
                      }
                    }
                  }
                }
                }
              }
            }
          }
            });
            if (this.initialPosition) {
                this.swiper.slideTo(+this.initialPosition - 1)
            }
        }

        _onVariantChange({ variantImagePosition}) {
            if(variantImagePosition) {
                this.swiper.slideTo(variantImagePosition - 1);
            }
        }

        get slider() {
            return this.swiper;
        }

        get initialPosition() {
            return this.getAttribute(ATTR_INITIAL_POSITION)
        }
    })
})();
//For galleria 3.0 

(async () => {
  const { loadScript: t, loadStyle: i } = await import(
    window.theme.modules.utils
  );
  var e = await import(window.theme.modules.baseComponent);
  customElements.define(
    "slide-show",
    class extends e.default {
      elements = {
        sliderContainer: "[data-slider-container]",
        slides: "*[data-slide-variants]",
        nextButton: "[data-slider-button-next]",
        prevButton: "[data-slider-button-prev]",
        pagination: "[data-slider-pagination]",
        thumbnails: "slideshow-thumbnails",
      };
      async render() {
        await this._initSwiper();
        var t = 1e3 * this.getAttribute("autoplay-delay"),
          i = this.hasAttribute("use-autoplay") && {
            delay: t,
          },
          e = this.getAttribute("navigation-type");
        const s = {
          delay: t,
          autoplay: i,
          pagination: ("pagination" === e || "pagination_buttons" === e) && {
            el: this.$pagination,
            clickable: !0,
          },
          navigation: ("buttons" === e || "pagination_buttons" === e) && {
            nextEl: this.$nextButton,
            prevEl: this.$prevButton,
          },
          zoom: this.hasAttribute("zoom"),
          breakpoints: this.hasAttribute("desktop-no-swipe") && {
            992: {
              allowTouchMove: !1,
            },
          },
          on: {
            slideChange: function () {
              if (typeof productOptions != "undefined") {
                if (productOptions.length > 0) {
                  var current_slide = this.slides[this.activeIndex];
                  var current_slide_img = current_slide.querySelector("img");

                  if (current_slide_img) {
                    var arrImage = current_slide_img
                      .getAttribute("src")
                      .split("?")[0]
                      .split(".");
                    var strExtention = arrImage.pop();
                    var strRemaining = arrImage
                      .pop()
                      .replace(/_[a-zA-Z0-9@]+$/, "");
                    var strNewImage =
                      arrImage.join(".") +
                      "." +
                      strRemaining +
                      "." +
                      strExtention;
                    if (typeof variantImages !== "undefined") {
                      if (typeof variantImages[strNewImage] !== "undefined") {
                        productOptions.forEach(function (value, j) {
                          var optionValue =
                            variantImages[strNewImage]["option-" + j];
                          if (optionValue !== null) {
                            var options_blocks = document.querySelectorAll(
                              "product-variant-selector form-custom-select input"
                            );
                            // debugger;
                            for (var k = 0; k < options_blocks.length; k++) {
                              
                              if (optionValue === options_blocks[k].value) {
                                options_blocks[k].checked = true;
                                options_blocks[k].dispatchEvent(
                                  new Event("change", { bubbles: true })
                                );
                              }
                            }
                          }
                        });
                      }
                    }
                  }
                }
              }
            },
          },
          cssMode: (() => {
            const t = window.navigator.userAgent;
            if (/CriOS/i.test(t)) {
              var i = t.match(
                /(.+)(iPhone|iPad|iPod)(.+)OS[\s|\_](\d+)\_?(\d+)?[\_]?(\d+)?.+/i
              );
              if (i && 6 <= i.length) {
                var e = parseInt(i[4], 10),
                  i = parseInt(i[5], 10);
                if (14 <= e && 6 <= i) return !0;
              }
            }
            return !1;
          })(),
        };
        this.hasAttribute("sync-slider") &&
          ((this.syncSlider = document.getElementById(
            this.getAttribute("sync-slider")
          )),
          (s.initialSlide = this.syncSlider.getCurrentSlide())),
          (this.swiper = new window.Swiper(this.$sliderContainer, s)),
          this.hasAttribute("observe-slide-type") &&
            (this._setMediaType(this.swiper.activeIndex),
            this.swiper.on("slideChange", ({ activeIndex: t }) => {
              this._setMediaType(t);
            })),
          this.hasAttribute("zoom") &&
            this.swiper.on("zoomChange", (t, i) => {
              1 === i
                ? this.removeAttribute("zoomed")
                : this.setAttribute("zoomed", "");
            }),
          this.hasAttribute("thumbnails") &&
            this.$thumbnails &&
            this.$thumbnails.onSliderLoad(this),
          this.syncSlider &&
            this.swiper.on("slideChange", () => {
              this.syncSlider.slideTo(this.getCurrentSlide());
            }),
          this.hasAttribute("initial-slide") &&
            this.slideTo(+this.getAttribute("initial-slide"));
      }
      async _initSwiper() {
        await t(window.theme.scripts.Swiper, "swiper"),
          i(window.theme.styles.Swiper);
      }
      getCurrentSlide() {
        return this.swiper.activeIndex;
      }
      slideTo(t) {
        this.swiper.slideTo(t);
      }
      _setMediaType(t) {
        this.dataset.slideMediaType = this.swiper.slides[t].dataset.mediaType;
      }
    }
  );
})();