针对特定变体显示不同按钮

Question

有一个问题，在此 2 种变体产品上，单击 100 毫升选项时应该会显示“在梅西百货购买”。仅当您访问硬编码变体的 URL 时才会出现这种情况。

这是我目前的液体。

<div class="product-form__buttons">
  {%- assign variant_id_for_macy_link = 39326818664502 -%}

  <button
    id="ProductSubmitButton-{{ section_id }}"
    type="submit"
    name="add"
    class="product-form__submit button button--full-width {% if show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
    {% if product.selected_or_first_available_variant.id != variant_id_for_macy_link %}
      {%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout or product.selected_or_first_available_variant == nil -%}
        disabled
      {%- endif -%}
    {% endif %}
  >
    <span>
      {%- if product.selected_or_first_available_variant.id == variant_id_for_macy_link -%}
        <a href="https://www.macys.com" class="button button--primary" style="color: inherit; text-decoration: none;">Buy at Macy's</a>
      {%- elsif product.selected_or_first_available_variant == nil -%}
        {{ 'products.product.unavailable' | t }}
      {%- elsif product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
        {{ 'products.product.sold_out' | t }}
      {%- else -%}
        {{ 'products.product.add_to_cart' | t }}
      {%- endif -%}
    </span>
    {%- render 'loading-spinner' -%}
  </button>

  {%- if show_dynamic_checkout -%}
    {{ form | payment_button }}
  {%- endif -%}
</div>

Answer 1

Liquid 仅适用于服务器端，因此当使用 Liquid 选择变体时，您无法更改按钮。为此，您需要添加一些 JavaScript 来处理变体更改时的按钮内容。

如何做到这一点取决于处理变体选择器的代码。通常，主题开发人员会在变体更改时分派自定义事件，但如果代码被缩小，将很难获取事件的名称。

如果 URL 在变体更改时发生变化，您可以尝试使用 postate 事件。