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

Question

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

如您所见，我可以在按钮中添加价格，但是当我更改变体时，它会消失。 （网址会随着选择不同的变体而变化）

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，因此它就是价格，因此唯一的挑战是找到按钮上的旧价格，并覆盖它。通常是简单的东西。