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

【问题标题】：How do I display the variant image when the color swatch of a variant is hovered on Shopify?当变体的色样悬停在 Shopify 上时，如何显示变体图像？
【发布时间】：2020-04-20 05:19:43
【问题描述】：

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

当图片悬停在上面时，它会显示第二张产品图片：{{ 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"));
})

【问题讨论】：

标签： javascript jquery shopify liquid

【解决方案1】：

将具有变体图像 URL 值的属性添加到色板链接，例如

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

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

用这个替换你的 jQuery 代码：

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

【讨论】：

嗨，我刚试过，它不起作用，我也不确定是在 application.js 中还是在同一流动页面上的 {% javascript %} 中添加它 var variantImg = $ ('[数据变体-img]'); $('[data-variant-img]').mouseover(function() { document.querySelector('.card-image img').src = this.dataset.variantImg;" })
我会将它添加到 .js 文件中。您之前评论中的代码在右大括号之前包含一个额外的引号。此外，特色图片选择器应该更具体并包含产品 ID，否则页面上的所有 .card-image img 将被更改。最后，在颜色样本中，您只使用variant.image.src，但您需要使用img_url 过滤器来获取图像URL，因此您需要将其替换为{%- assign variantImgSrc = variant.image.src | img_url: '300x400', scale: 3, crop: 'center' -%}，根据问题中的代码。
实际上，如果你使用 jQuery，代码可以替换为$('[data-variant-img]').mouseover(function() { $('.card-image img').attr('src', $(this).data("variant-img")); })
非常感谢您再次提供帮助！我也只是在这里尝试并更新了我的代码，但我正在努力专门选择特定的图像，因为我是 jQuery 新手，还没有任何变化，我不确定我做错了什么
对不起，有一个类型，你需要把variantImageSrc换成variantImgSrc

【解决方案2】：

最简单的解决方案是定位产品页面的主要选择并从变体中获取图像。

<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 逻辑才能从选择中定位正确的选项。

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

【讨论】：