javascript - Shopify 电子商务网站如何根据颜色属性的变化来激活幻灯片？

Question

我已经将 WOWSLIDER 用于产品详细信息页面并且工作正常，但是当我更改颜色属性并且根据当前图像幻灯片未激活时。 截屏

我分享了源代码。请看一看。还附上了屏幕截图左侧图像在显示右侧属性的哇滑块的帮助下显示。

{% include 'sca_freegift_price' with product %}
{% include 'breadcrumbs' %}

{% assign variant = product.selected_or_first_available_variant %}

{% if collection == null or collection.handle == 'frontpage' or collection.handle == 'all' %}
  {% assign found_a_collection = false %}
  {% for c in product.collections %}
    {% if found_a_collection == false and c.handle != 'frontpage' and c.handle != 'all' %}
      {% assign found_a_collection = true %}
      {% assign collection = c %}
    {% endif %}
  {% endfor %}
{% endif %}

{% unless form_id %}
  {% assign form_id = product.id %}
{% endunless %}

<section
  class="main-product-wrap
    product-wrap
    {% if section.settings.related-products %}related-products-position-{{ section.settings.related-products-position }}{% endif %}"
  itemscope
  itemtype="http://schema.org/Product"
  data-product-id="{{ product.id }}"
  data-images-layout="{{ section.settings.images-layout }}"
  {% if section.settings.zoom %}data-zoom{% endif %}
  {% if section.settings.linked-options %}data-linked-options{% endif %}
  {% if section.settings.ajax %}data-ajax{% endif %}
  data-section-id="{{ section.id }}"
  data-section-type="product">

  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product | img_url: 'grande' }}">

  <div class="product-images">


    {% if section.settings.images-layout == 'slideshow' %}

        <div id="wowslider-container1">
    <div class="ws_images" ><ul>



      {% assign mainImage = variant.image | default: product.featured_image %}


      {% for image in product.images %}



        <li class="extraimage"><img src="{{ image | img_url: '1024x1024' }}" alt="" id="wows1_{{ forloop.index }}"/></li>


      {% endfor %}
</ul>
</div>
    <div class="ws_thumbs">
<div>
  {% for image in product.images %}
  {% if mainImage == image %}


        <a href="#" class="ws_selthumb"><img src="{{ mainImage | img_url: '1024x1024' }}" alt="" /></a>

      {% else %}
    <a href="#"><img src="{{ image | img_url: '1024x1024' }}" alt="" /></a>
  {% endif %}


    {% endfor %}
    </div>
</div>
    <div class="ws_shadow"></div>
    </div>

  <div class="product-thumbnails-outer-wrapper">
<div class="sca-fg-cat-list" style="display:none;" name="secomapp-fg-data-{{ product.id }}"> </div>
    </div>
      {% if product.images.size > 1 %}

    {% if product.tags contains "cabin" %}

    <div class="cabin-logo-container">
    <div class="product-cabin"><h5>This product is suitable to take as a cabin item on:</h5></div>

{% else %}
    {% endif %}
        {% if product.tags contains "easyjet" %}
    <div class="easyjet-cabin"><img src="https://cdn.shopify.com/s/files/1/1567/7015/files/easyjet_ca2d8259-58eb-4e77-b7f1-75e1ca187b8c.jpg?14358281107398952302"></div>      

    {% else %}
    {% endif %}

    {% if product.tags contains "ryanair" %}
    <div class="ryanair-cabin"><img src="https://cdn.shopify.com/s/files/1/1567/7015/files/ryanair_734b4c75-c1db-452f-93b1-61fc09939573.png?14358281107398952302"></div>      

    {% else %}
    {% endif %}

    {% if product.tags contains "british-airways" %}
    <div class="britishairways-cabin"><img src="https://cdn.shopify.com/s/files/1/1567/7015/files/british_airways_bf46e962-6f35-43ba-b78a-dcec0179b12b.png?14358281107398952302"></div>      

    </div>
    {% else %}
    {% endif %}

    {% endif %}

    {% else %}

      {% for image in product.images %}
        <div class="product-image">
          <img
            alt="{{ image.alt | escape }}"
            src="{{ image | img_url: '1024x1024' }}"
            data-image-id="{{ image.id }}"
          >
        </div>
      {% endfor %}

    {% endif %}



  </div>

  <div class="product-details-wrapper">

    <div class="product-details">

      {% if section.settings.vendor %}
        <a class="product-vendor" href="{{ product.vendor | url_for_vendor }}">{{ product.vendor }}</a>
      {% endif %}
      <h1 class="product-title" itemprop="name"><div style="position:relative;"> {{ product.title }} <div name="secomapp-fg-image-{{  product.id }}" style="display: none;"> {{ "icon-freegift.png" | asset_url | img_tag: "Free Gift", "sca-fg-img-label" }} </div> </div></h1>
      <p class="product-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">

        <meta itemprop="priceCurrency" content="{{ shop.currency }}">
        <meta itemprop="price" content="{{ sca_price_min | money_without_currency }}">

        <span class="product-price-minimum money">
          {{ variant.price | money }}
        </span>

        {% if variant.compare_at_price > variant.price %}
          <span class="product-price-compare money original">
              {{ variant.compare_at_price | money }}
          </span>
        {% endif %}

        {% if product.tags contains "shipped-by-supplier" %}

      <div class="supplier-delivery-icon"><img src="https://cdn.shopify.com/s/files/1/1567/7015/files/delivery.png?7054402976003297472" alt="Shipped by supplier"><a href="https://www.londonluggage.co.uk/pages/delivery"><p>Shipped by supplier</p></a></div>      
        {% else %}
    {% endif %} 


        {% if product.available %}
          <link itemprop="availability" href="http://schema.org/InStock">
        {% else %}
          <link itemprop="availability" href="http://schema.org/OutOfStock">
        {% endif %}

      </p>

      <form class="product-form"
        id="product-form-{{ form_id }}"
        action="/cart/add"
        method="post"
        data-product-form="{{ form_id }}">

        {% if sca_product_variantCount > 1 %}
         <div class="product-options">
            {% include 'product-options-dropdown' %}

            <div class="selector-wrapper no-js-required">
              <label for="product-select-{{ form_id }}"></label>
              <select
                class="product-select"
                name="id"
                id="product-select-{{ form_id }}">
                {% for variant in product.variants %}
{% unless variant.metafields.secomapp.freegifts %}
{% unless variant.title contains '(Freegifts)' %}

                  {% if variant.available %}
                    <option
                      {% if variant == selected_variant %}selected="selected"{% endif %}
                      value="{{ variant.id }}" data-variant-id="{{ variant.id }}" data-sku="{{ variant.sku }}">
                      {{ variant.title }} - {{ variant.price | money }}
                    </option>
                  {% else %}
                    <option disabled="disabled" data-variant-id="{{ variant.id }}" value="{{ variant.id }}">
                      {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                    </option>
                  {% endif %}

{%endunless%}
{%endunless%}
                {% endfor %}
              </select>
            </div>
          </div>
        {% else %}
          <input
            class="product-select"
            name="id"
            value="{{ product.variants[0].id }}"
            type="hidden"
            data-variant-title="{{ product.variants[0].title }}" />
        {% endif %}

        {% if product.available %}

          <div id="infiniteoptions-container"></div>
          <div id="uploadery-container"></div>

          <div class="product-quantity inline-input-wrapper">
            <label>{{ 'general.general.quantity' | t }}</label>
            <input type="text" name="quantity" value="1" />
          </div>
        {% endif %}

        {% if section.settings.share-buttons %}
          {% include 'share-buttons' %}
        {% endif %}

        <div class="add-to-cart">
          {% if variant.available %}
            <input type="submit" value="{{ 'products.product.add_to_cart' | t }}" />
          {% else %}
            <input type="submit" class="disabled" disabled="disabled" value="{{ 'products.product.sold_out' | t }}" />
          {% endif %}
        </div>

        <div class="product-message"></div>

      </form>

      {% if product.description != blank %}
        <div class="product-description rte" itemprop="description">
          {{ product.description }}
        </div>
      {% endif %}

    </div>
  </div>

  {% assign addToCartText = 'products.product.add_to_cart' | t %}

  {%
    include 'product-json',
    id: product.id,
    add_to_cart_text: addToCartText,
    enable_history: true
  %}
</section>

{% if section.settings.related-products %}
  {%- assign related_products_position = section.settings.related-products-position -%}
  {% include 'related-products' related_products_position: related_products_position %}
{% endif %}

<script>
  // required for splitting variants
  // see ProductView
  window.products["{{ product.id }}"] = {{ product | json }};
  FirstVariant["{{ product.id }}"] = {{ product.selected_or_first_available_variant.id | json }};
</script>

标签： javascriptshopifywowslider