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

在“收藏”页面和“特色产品”部分的产品卡上，我有带有图像的每个产品的产品卡，在图像下方，我有产品变体的色样

当图像悬停在上方时，它显示第二个产品图像：

{{product.images[1]| img_url:'300x400'，比例：3，裁剪：'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 -->

---

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

<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><!-- /# -->

{product.variants%中的变量为%0}
{{variant.title}}
{%endfor%}

这将需要JS逻辑，以便从select中找到正确的选项

---

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

将带有变量图像URL值的属性添加到色样链接，例如

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

---

您好，我刚刚尝试过，但它不起作用，我也不确定是在application.js中还是在同一液体页面上的{%javascript%}中添加这个变量var variantImg=$（“[data variant 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（函数（）{$（'.card image img'）.attr（'src'，$（this.data（“variant img”）；}）

非常感谢您再次提供帮助！我刚刚尝试并更新了这里的代码，但我正在努力具体选择特定的图像，因为我是jQuery新手，目前还没有任何更改，我不确定我做错了什么对不起，有一种类型，您需要将

variantImageSrc

替换为

variantImgSrc

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

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