Shopify在“添加到购物车”按钮中添加产品价格

Question

我要在“添加到购物车”按钮中添加价格。

如您所见，我能够在按钮内添加价格，但是当我更改变体时，它就会消失。 （URL随选择其他变体而变化）

GIF that shows the problem

有什么建议吗？

当前代码为：

<button
      {% if product.empty? %}type="button"{% else %}type="submit"{% endif %}
      name="add"
      id="AddToCart-{{ section_id }}"
      class="btn btn--full add-to-cart{% if enable_dynamic_buttons %} btn--secondary{% endif %}"
      {% unless current_variant.available %} disabled="disabled"{% endunless %}>
      <span id="AddToCartText-{{ section_id }}"  data-default-text="{{ default_text }}">
        {{ button_text }} {{ current_variant.price | money }}
      </span>
    </button>

Answer 1

答案是使用Javascript。首次渲染页面时，Liquid渲染会在按钮上定价。但是，当您更改变体时，没有Liquid呈现，因此您只能使用Javascript。我敢肯定，到现在，经过10多年的发展，您可以找到一些可以完成您需要做的事的例子。

当变体更改时，通常会运行一些“知道”变体的Javascript，因此也就是价格，因此唯一的挑战是在按钮上找到旧价格并覆盖它。通常是简单的东西。