jQuery Фильтрация скользкой карусели не работает, когда используется синхронизация слайдеров для изображений продуктов Shopify. - PullRequest
Новая
       17

jQuery Фильтрация скользкой карусели не работает, когда используется синхронизация слайдеров для изображений продуктов Shopify.

2 голосов
/ 12 апреля 2020

Для изображений товара я хочу иметь маленькие миниатюры и избранные изображения, которые меняются в зависимости от выбранного эскиза, который я сделал с помощью функции синхронизации слайдера.

Я также хочу, чтобы на странице были только изображения товара выбранного варианта цвета (например, показывать только синий продукт, если выбран вариант синего цвета), но изображения не фильтруются.

Код для двух разделов изображения (выделенное изображение в элементе div, который имеет класс .slider-single и миниатюрные изображения находятся в div с классом .slider-nav ) 

<div class="product-images js-product-slideshow w-100 w-50-l flex flex-column flex-row-l mb4 pr4-l">
   <div class="js-slides slider-single w-100 w-85-l ph2-m ph3-l">
     {% for image in product.images %}
       <div class="w-100">
         <img src="{{ image.src | img_url: '600x', scale: 3 }}" alt="{{ image.alt | escape }}">
       </div>
     {% endfor %}
   </div>

   <div class="js-slides slider-nav w-100 w-15-l">
     {% for image in product.images %}
       <div data-product-color="{{ image.alt }}">
         <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
       </div>
     {% endfor %}
   </div>
</div>

Код для синхронизации слайдера, который работает : 

$(function() {
  $('.slider-single').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
  });

  $('.slider-nav').slick({
    slidesToShow: 4,
    asNavFor: '.slider-single',
    vertical: true,
    verticalSwiping: true,
    arrows: false,
    centerMode: true,
    focusOnSelect: true
  });
});

Код для фильтрации слайдов на основе цвета продукта (то есть, когда выбранный вариант равен alt изображения), который не работает: 

let imageSelect = {
changeImage: function(event) {
  let
    slideSelector = '.js-slides',
    $form = $(document).find(addToCartFormSelector),
    selectedVariant = productForm.getActiveVariant($form),
    color = selectedVariant.option1,
    images = $(slideSelector).find('img'),
    $slides = $(document).find(slideSelector),
    variantImageId = function() {
      let
        src = selectedVariant.featured_image.src,
        splitSrc = src.split('?v='),
        newSrc = splitSrc[1];

      return newSrc
      };

  $.each(images, function(index, image) {
    if(image.alt === color || image.src.includes(variantImageId())) {
      $(image).parent().addClass('show-slide')
    } else {
      $(image).parent().removeClass('show-slide')
    }
  })

  $slides.slick('slickFilter', '.show-slide')
},

init: function(event) {
  $(addToCartFormSelector).on('change', function(event) {
      let $slides = $(document).find(slideSelector)

      $('.slider-single').slick('slickUnfilter', '.show-slide')
      $('.slider-nav').slick('slickUnfilter', '.show-slide')
      imageSelect.changeImage()
    })
  }
}

imageSelect.init()
...