javascript - 如何在Shopify的产品卡中显示指向产品变体的链接(显示在着陆页和集合页上)？

在每个产品下方的着陆页和集合页上，我希望颜色变体链接到具有所选颜色的变体，例如如果我单击红色，它将带我进入选择了红色变体的产品页面。我设法添加了颜色变体，但是我不知道如何将它们链接到变体。这些产品也有衣服的尺寸，因此我希望默认选择XS尺寸。

单击红色变体后，进入选择了XS和红色的变体的产品页面。
单击黑色变体后，进入选择了XS和黑色变体的产品页面。
单击黑色变体后，进入选择了XS和白色变体的产品页面。

如何动态添加点击XS +颜色重定向到产品页面的链接？



资料来源：https://cropshopboutique.com/

到目前为止，我拥有的颜色代码是：

颜色选项行液体

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

颜色变化悬停

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

最佳答案

尝试将您的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>

关于javascript - 如何在Shopify的产品卡中显示指向产品变体的链接(显示在着陆页和集合页上)？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61284505/