时间戳

首页 > 解决方案 > Shopify 变体价格现在正确显示

shopify - Shopify 变体价格现在正确显示

问题描述

这似乎是如此简单，但无论出于何种原因，我都看不到森林中的树木。所以我在屏幕截图 1 中看到了当前情况，我为一个产品设置了三个不同的变体。这些产品的尺寸基于 ML……但由于某种原因，所有 3 个变体都显示在按钮上，而不是选择的那个。

按钮面

我目前用来提取的代码是：

{% if current_variant.available %}
    <button type="submit" name="add" class="border--none">
        <span class="display--block padding--1 palette--background-color--green palette--color--white text-transform--uppercase letter-spacing--2px font-size--15px palette--color--white">
            add to bag &nbsp; | &nbsp; 

        <strong>
          {% for variant in product.variants %}

            {{ variant.price | money_without_trailing_zeros }}

          {% endfor %}


          </strong>

      </span>

    </button>
{% else %}

标签： shopifyvariant

解决方案

仅使用 Liquid 无法实现您想要实现的目标。Liquid 只是一种在服务器端呈现的模板语言。它不会在客户端更新。

您只想在按钮中显示所选变体的价格，但 Liquid 在服务器端没有关于此的信息，您只需遍历所有可用变体的价格。因此，您会在按钮中看到所有价格。

要解决此问题，请使用 Liquid 使用第一个可用或选择的变体价格，并在客户端使用 JavaScript 更新剩余价格。

如果 URL 中有有效的 ?variant= 查询参数，则返回当前选择的变体的变体对象。如果没有选定的变体，则返回第一个可用的变体。

这样做，你的代码会像

  <button type="submit" name="add" class="border--none">
    <span class="display--block padding--1 palette--background-color--green palette--color--white text-transform--uppercase letter-spacing--2px font-size--15px palette--color--white">
      add to bag &nbsp; | &nbsp; 
      <strong>
        {{ product.selected_or_first_available_variant.price | money_without_trailing_zeros }}
      </strong>
    </span>
  </button>

然后在变体更改时通过 JavaScript 更改价格，这取决于您的主题。

有关选定或第一个可用变体的更多信息

推荐阅读