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;
}
}
);
})();