如何在 Shopify 上的產品卡中添加指向產品變體的鏈接（顯示在登錄頁面和 collections 頁面上）？

Question

在登錄頁面和 collections 頁面上，在每個產品下方，我希望顏色變體鏈接到所選顏色的變體，例如，如果我單擊紅色，它會將我帶到選擇紅色變體的產品頁面。 我設法添加了顏色變體，但我不知道如何將它們鏈接到變體。 這些產品也有尺寸，因為它們是衣服，所以我希望默認選擇 XS 尺寸。

單擊紅色變體時，進入產品頁面，其中選擇了 XS 和紅色的變體。 單擊黑色變體后，進入產品頁面並選擇了變體 XS 和黑色。 單擊黑色變體時，進入產品頁面並選擇變體 XS 和白色。

如何動態添加一個鏈接，該鏈接重定向到點擊 XS + 顏色的產品頁面？

資料來源： https://cropshopboutique.com/

到目前為止，我為 colors 提供的代碼是：

顏色選項-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>

顏色變體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 }}">

特色產品.liquid

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