javascript - Shopify 产品页面 - 将光滑滑块更新为选定的变体

Question

我在 Shopify 的 Boundless 主题的产品页面上添加了一个光滑的滑块，它可以正确显示产品图像。我遇到问题的部分是使滑块更新以匹配所选变体。这是相关的JS：

productVariantCallback: function(variant) {
      var $pageLink = $(selectors.pageLink, this.$container);

      if (variant) {
        if (variant.featured_image) {
           var newImg = variant.featured_image;
          var el = $(selectors.variantImage)[0];

          var $slider=$('#product-slides');
          if( $slider.length ) {
            var newImgBase = newImg.src.substring(0, newImg.src.lastIndexOf('.')).split(':').pop();

            if( $slider.hasClass('slick-initialized') ) {
              var newIndex =   $('#product-slides.slick-initialized img[src^="' + newImgBase + '"]')

              .closest('.slick-slide')
              .last()
              .data('slick-index');
              console.log( 'Goto slide ' + newIndex );
              $slider.slickGoTo( newIndex, true  );
            } else { 
              var newIndex =   $('#product-slides img').index( $('#product-slides img[src^="' + newImgBase + '"]'));
              Shopify.sliderInitAt = newIndex ;
            }
          }

// more code, but I don't believe it is relevant to the issue

和相关的液体块：

<div itemscope itemtype="http://schema.org/Product" data-section-id="{{ section.id }}" data-section-type="product" data-history-state>

  {% assign current_variant = product.selected_or_first_available_variant %}

  {% assign featured_image = current_variant.featured_image | default: product.featured_image %}

  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ featured_image | img_url: 'grande' }}">
  <meta itemprop="name" content="{{ product.title }}{% if product.variants.size > 1 and product.selected_variant %} - {{ current_variant.title }}{% endif %}">

  <div class="page-width--wide" itemprop="offers" itemscope itemtype="http://schema.org/Offer" style="margin-top:20px;">

    {% assign first_image = featured_image %}

    {% if product.images.size > 1 and section.settings.skip_first_product_image and first_image == product.featured_image %}
      {% assign first_image = product.images[1] %}
    {% endif %}

   
    {% if product.images.size > 0 %}
      <div class="grid__item medium-up--three-fifths mobile-grid">
        <div id="product-slides">
            {% for image in product.images %}
            <div>
              <img class="product__photo--variant lazyload"
                   src="{{ image | img_url: 'master' }}"
                   data-src="{{ img_url }}"
                   data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
                   data-aspectratio="{{ image.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ image.alt | escape }}">
            </div>
          {% endfor %}
          </div>
        
          <div class="slider-nav" style="margin-bottom:10px;">
            {% for image in product.images %}
            <div>
              <img class="product__photo--variant lazyload"
                   src="{{ image | img_url: 'master' }}"
                   data-src="{{ img_url }}"
                   data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
                   data-aspectratio="{{ image.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ image.alt | escape }}">
            </div>
            {% endfor %}
        </div>

        <noscript>
          <img class="product__photo--variant" src="{{ first_image | img_url: '2048x2048' }}" alt="{{ image.alt | escape }}">
        </noscript>
      </div>
    
    {% endif %}

    <div class="grid__item medium-up--two-fifths mobile-grid">
      <div class="grid grid--no-gutters product__details-content">
        <div class="grid__item">
         
            {% form 'product', product, id:form_id, class:form_class, data-cart-form: '' %}
          
          <select name="id" id="ProductSelect-{{ section.id }}">
              {% for variant in product.variants %}
                <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} {% unless variant.available %} disabled="disabled" {% endunless %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} - {% if variant.available %}{{ variant.price | money_with_currency }}{% else %}{{ 'products.product.sold_out' | t }}{% endif %}</option>
              {% endfor %}
            </select>

          {% endform %}
        </div>
      </div>
    </div>
  </div>
</div>

编码根本不是我的领域，所以当我说的时候我不知道我在说什么：我认为可能是我的图像需要在液体端进行索引，然后在 JS 端引用

标签： javascripthtmlshopifyliquid