Как отобразить вариант изображения, когда образец цвета наведен на Shopify?

Question

На карточке товара на странице коллекций и в разделе рекомендуемых товаров у меня есть карточки товаров для каждого товара с изображением и под изображением, у меня есть образцы цветов вариантов, которые есть у товаров.

Когда изображение отображается, оно показывает 2-е изображение продукта: {{ product.images[1] | img_url: '300x400', scale: 3, crop: 'center' }} относится ко 2-му изображению из массива изображений продукта.

Однако, когда наведен образец цвета, я хочу, чтобы показанное изображение изменилось на вариант изображения при наведении курсора.

Код для изображения карты продукта:

{% 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

Добавьте атрибут со значением URL варианта изображения к ссылке на образец цвета, например,

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

Затем добавьте 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"));
});

Answer 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 logi c, чтобы выбрать правильный опция из выбора.

Вы должны быть в состоянии повторно использовать logi c для события изменения и применить его к событию при наведении, за исключением изменения основного значения выбора.