当变体的色样悬停在 Shopify 上时，如何显示变体图像？

Question

在产品系列页面和特色产品部分的产品卡上，我有每个产品的产品卡和图像，在图像下方，我有产品具有的变体的颜色样本。

当鼠标悬停在图片上时，它会显示第二张产品图片：{{ product.images[1] | img_url: '300x400', scale: 3, crop: 'center' }} 指的是产品图片数组中的第二张图片。

但是，当鼠标悬停在色样上时，我希望特色图片在鼠标悬停时变为变体图片。

产品名片图片代码：

{% for product in collection.products %}
  <!-- this div contains both product-card snippet and color variant snippet -->
  <div class="product-card w-50 mb3" data-product-id="{{ product.id }}">

    <!-- product card snippet code  -->
    <a class="link-to-product" href="{{ product.url | within: collection }}">
      {% if product.featured_image %}
        <div class="card-image reveal mb3">
          <img src="{{ product | img_url: '300x400', scale: 3, crop: 'center' }}" alt="{{ product.title }}">
          <img class="hidden" src="{{ product.images[1] | img_url: '300x400', scale: 3, crop: 'center' }}" />
        </div>
      {% endif %}

      <div class="card-info flex flex-column items-center tc">
        <h5 class="mb2 f6 f5-ns">{{ product.title }}</h5>
        <p class="price mb3">
          {% if product.compare_at_price %}
            <span class="strike">{{ product.compare_at_price | money_with_currency }}</span>
          {% endif %}
          {{ product.price | money_with_currency }}
        </p>
      </div>
    </a>
    <!-- end of color product card snippet -->

    <!-- color variant hover snippet code  -->
    <div class="option-colors">
      <div class="product-option-row flex justify-center flex-column flex-row-ns tc tl-ns mb4">
        <div class="option-values">
          {% for value in option.values %}
            {% assign radio_id = 'option-' | append: option_name | append: '-' | append: value | handleize %}

            {%- for variant in product.variants -%}
              {%- if variant.title contains value -%}
                {%- assign productColorOptionURL = product.url | append: "?variant=" | append: variant.id -%}
                {%- assign variantImgSrc = variant.image.src | img_url: '300x400', scale: 3, crop: 'center' -%}
                {%- break -%}
              {%- endif -%}
            {%- endfor -%}

            <a href="{{ productColorOptionURL }}" data-variant-img="{{ variantImageSrc }}">
              <label for="{{ radio_id }}" class="color-swatch-list">
                {% if force_colors == true %}
                  {% include 'option-color' with color: value %}
                {% else %}
                  {{ value }}
                {% endif %}
              </label>
            </a>
          {% endfor %}
        </div>
      </div>
    </div>
    <!-- end of color variant hover snippet -->

  </div>
  <!-- main div ends -->

jQuery代码

let
  productCardContainer = '[data-product-id]',
  productVariantSwatch = '[data-variant-img]',
  productMainImage = '.card-image img';

$(productCardContainer)
  .find(productVariantSwatch).mouseover(function() {
    $(this).(productMainImage).attr('src', $(this).data("variant-img"));
})

Answer 1

最简单的解决方案是针对产品页面的主要 select 并从变体中获取图像。

<select class="main-select" name="id" style="display: none;">
  {% for variant in product.variants %}
    <option 
      value="{{variant.id}}"
      data-image="{{variant.image | img_url: '1024x'}}"
    >{{ variant.title }}</option>
  {% endfor %}
</select><!-- /# -->

这将需要 JS 逻辑才能从 select 中定位正确的选项。

除了更改主 select 值外，您应该能够重用更改事件的逻辑并将其应用于悬停事件。

Answer 2

将具有变体图像 URL 值的属性添加到色样 link，例如

<a href="{{ productColorOptionURL }}" data-variant-img="{{ variantImgSrc }}">

然后添加附加到这些颜色样本 link 的 onmouseover 事件处理程序，它将从当前悬停的元素中获取变体图像 URL 并将其设置为 src 当前特色图片的属性 <img> 元素，例如

将您的 jQuery 代码替换为：

$("[data-variant-img]").mouseover(function() {
  $(this).parents(".product-card").find(".card-image img:first").attr('src', $(this).data("variant-img"));
});

当变体的色样悬停在 Shopify 上时，如何显示变体图像？

How do I display the variant image when the color swatch of a variant is hovered on Shopify?

javascript

jquery

liquid

shopify