特定商品变体按钮异常求助：100ml变体需显示Macy's购买按钮

你的问题核心在于Liquid是服务器端渲染语言：页面加载完成后，切换变体的操作由前端JavaScript完成，此时不会重新执行Liquid代码判断当前选中的变体ID，因此只有直接访问目标变体URL时，按钮才会显示正确内容，手动切换变体时按钮状态不会同步更新。

修改后的Liquid代码 #

先调整结构，给按钮添加数据属性传递目标变体ID，同时把按钮文本放在独立容器中，方便前端JS修改：

<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 %}"
    data-macy-variant-id="{{ variant_id_for_macy_link }}"
    {% 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 class="button-text-container">
      {%- 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>

添加前端JavaScript代码 #

监听Shopify变体切换的标准事件，动态更新按钮内容和状态：

document.addEventListener('DOMContentLoaded', function() {
  const submitButton = document.getElementById('ProductSubmitButton-{{ section_id }}');
  const macyVariantId = parseInt(submitButton.dataset.macyVariantId);
  const buttonTextContainer = submitButton.querySelector('.button-text-container');
  
  // 监听Shopify变体切换事件
  document.addEventListener('variant:change', function(event) {
    const selectedVariant = event.detail.variant;
    
    buttonTextContainer.innerHTML = '';
    
    if (selectedVariant.id === macyVariantId) {
      // 生成Macy's跳转链接
      const macyLink = document.createElement('a');
      macyLink.href = 'https://www.macys.com';
      macyLink.className = 'button button--primary';
      macyLink.style = 'color: inherit; text-decoration: none;';
      macyLink.textContent = 'Buy at Macy\'s';
      buttonTextContainer.appendChild(macyLink);
      submitButton.disabled = false;
    } else {
      // 处理其他变体的状态显示
      if (!selectedVariant) {
        buttonTextContainer.textContent = '{{ 'products.product.unavailable' | t }}';
        submitButton.disabled = true;
      } else if (!selectedVariant.available || {{ quantity_rule_soldout }}) {
        buttonTextContainer.textContent = '{{ 'products.product.sold_out' | t }}';
        submitButton.disabled = true;
      } else {
        buttonTextContainer.textContent = '{{ 'products.product.add_to_cart' | t }}';
        submitButton.disabled = false;
      }
    }
  });
});

关键说明 #

1. 用data-macy-variant-id把Liquid中定义的目标变体ID传递给前端JS，避免硬编码重复值
2. 监听Shopify原生的variant:change事件，这是产品页切换变体时会触发的标准事件
3. 每次变体切换后，重新判断当前变体ID，动态生成对应按钮内容并更新禁用状态

内容的提问来源于stack exchange，提问作者Adam Bell