Как добавить ссылки на варианты продуктов в карточке продукта (отображается на целевой странице и на странице коллекций) в Shopify?

Question

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

При нажатии на красный вариант происходит переход на страницу продукта с вариантами с выбранным XS и красным. При щелчке черного варианта происходит переход на страницу продукта с выбранными вариантами XS и Black. При щелчке черного варианта происходит переход на страницу продукта с выбранными вариантами XS и White.

Как динамически добавить ссылку, которая перенаправляет на страницу продукта при нажатии цвета XS +?

Источник: https://cropshopboutique.com/

Код, который у меня есть для цветов:

color-option-row.liquid

<div class="product-option-row flex justify-between 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 %}

<a href="{{ product.url }}?variant={{ variant.id }}">
  <label for="{{ radio_id }}">
    {% if force_colors == true %}
      {% include 'option-color' with color: value %}
    {% else %}
      {{ value }}
    {% endif %}
  </label>
</a>
    {% endfor %}
  </div>
</div>

color-option-hover.liquid

{% assign has_multiple_variants = false %}
{% if product.variants.size > 1 %}
  {% assign has_multiple_variants = true %}
{% endif %}

{% assign has_multiple_options = false %}
{% if product.options.size > 1 %}
  {% assign has_multiple_options = true %}
{% endif %}

{% assign has_selected_variant = false %}
{% if product.selected_variant != nil %}
  {% assign has_selected_variant = true %}
{% endif %}

{% if has_multiple_variants %}
  {% include 'get-variants-with-quantity-json' with product: product %}
{% endif %}

{% assign can_add_to_cart = false %}
{% if has_selected_variant and product.selected_variant.available %}
  {% assign can_add_to_cart = true %}
{% elsif has_multiple_variants == false and product.available %}
  {% assign can_add_to_cart = true %}
{% endif %}

  {% if has_multiple_options or has_multiple_variants %}
    {% for option in product.options_with_values %}
      {% assign option_name = 'option' | append: option.position %}

      {% assign selected = false %}
      {% if has_selected_variant %}
        {% assign selected = product.selected_variant[option_name] %}
      {% endif %}

      {% assign default_variant = product.selected_or_first_available_variant %}

      {% if option.name == 'Color' %}
      <div class="option-colors">
        {% include 'color-option-row' with option: option, option_name: option_name, selected: selected, force_colors: true %}
      </div>

      {% elsif option.name == 'Pattern' %}
      <div class="option-patterns">
        {% include 'color-option-row' with option: option, option_name: option_name, selected: selected, force_colors: true %}
      </div>

      {% else %}
      <div class="dn">
        {% include 'color-option-row' with option: option, option_name: option_name, type: 'select', selected: selected %}
      </div>
      {% endif %}
    {% endfor %}
  {% endif %}

  <input class="js-variant-id" type="hidden" name="id" value="{{ default_variant.id }}">

Рекомендуемые товары. жидкость

<div class="product-card fl w-50 w-25-l mb3 ph1 ph3-m ph3-l">
  {% include 'product-card' %}
  {% include 'color-variant-hover' %}
</div>

Answer 1

Попробуйте обновить color-option-row.liquid до следующего:

<div class="product-option-row flex justify-between 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 -%}
    {%- break -%}
  {%- endif -%}
{%- endfor -%}

<a href="{{ productColorOptionURL }}">
  <label for="{{ radio_id }}">
    {% if force_colors == true %}
      {% include 'option-color' with color: value %}
    {% else %}
      {{ value }}
    {% endif %}
  </label>
</a>
    {% endfor %}
  </div>
</div>