Shopify 显示距离免费送货有多近

Question

我正在尝试使用标准木材拉车系统展示某人距离免费送货有多近。该代码应检查客户的金额是否为 30 美元或更少，然后显示他们还需要花费多少才能实现免费送货，如果他们的金额超过 30 美元，则表明他们已达到免费送货门槛。

这是我当前的购物车代码

<!-- /snippets/ajax-cart-template.liquid -->
{% comment %}

  This snippet provides the default handlebars.js templates for
  the ajax cart plugin. Use the raw liquid tags to keep the
  handlebar.js template tags as available hooks.

{% endcomment %}
  <script id="CartTemplate" type="text/template">

  {% raw %}
    <form action="/cart" method="post" novalidate class="cart ajaxcart">
      <div class="ajaxcart__inner">
        {{#items}}
        <div class="ajaxcart__product">
          <div class="ajaxcart row" data-line="{{line}}">

              <div class="grid__item desktop-4 tablet-2 mobile-1">
                <a href="{{url}}" class="ajaxcart__product-image"><img src="{{img}}" alt=""></a>
              </div>
              <div class="desktop-8 tablet-4 mobile-2">
                <p>
                  <a href="{{url}}" class="ajaxcart__product-name">{{name}}</a>
                  {{#if variation}}
                    <span class="ajaxcart__product-meta">{{variation}}</span>
                  {{/if}}
                  {{#properties}}
                    {{#each this}}
                      {{#if this}}
                        <span class="ajaxcart__product-meta">{{@key}}: {{this}}</span>
                      {{/if}}
                    {{/each}}
                  {{/properties}}
                  {% endraw %}{% if settings.cart_vendor_enable %}{% raw %}
                    <span class="ajaxcart__product-meta">{{ vendor }}</span>
                  {% endraw %}{% endif %}{% raw %}
                </p>
                <p><strong>{{{price}}}</strong></p>

                <div class="display-table">
                  <div class="display-table-cell">
                    <div class="ajaxcart__qty">
                      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus quantity-increment" data-id="{{id}}" data-qty="{{itemMinus}}" data-line="{{line}}">
                        <span>&minus;</span>
                      </button>
                      <input type="text" name="updates[]" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{id}}" data-line="{{line}}" aria-label="quantity" pattern="[0-9]*">
                      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus quantity-increment" data-id="{{id}}" data-line="{{line}}" data-qty="{{itemAdd}}">                        
                        <span>+</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>

          </div>
        </div>
        {{/items}}

        {% endraw %}{% if settings.cart_notes_enable %}{% raw %}
          <div>
            <label for="CartSpecialInstructions">{% endraw %}{{ 'cart.general.note' | t }}{% raw %}</label>
            <textarea name="note" class="input-full" id="CartSpecialInstructions">{{ note }}</textarea>
          </div>
        {% endraw %}{% endif %}{% raw %}
      </div>
      <div class="ajaxcart__footer row">

          <div class="desktop-half tablet-half mobile-half">
            <p><strong>{% endraw %}{{ 'cart.general.subtotal' | t }}{% raw %}</strong></p>
          </div>
          <div class="desktop-half tablet-half mobile-half">
            <p class="text-right"><strong>{{{totalPrice}}}</strong></p>
          </div>
        <p class="text-center">{% endraw %}{{ 'cart.general.currency_disclaimer' | t }}{% raw %}</p>
        <p class="text-center">{% endraw %}{{ section.settings.hello }}{% raw %}</p>
        <p class="text-center">{% endraw %}{{ 'cart.general.shipping_at_checkout' | t }}{% raw %}</p>
        <p class="text-center">
            {% endraw %}
            {% if totalPrice <= 30 %}
            You’re just {{{30 | minus: totalPrice}}} away from FREE shipping.
            {% else %}
            You've qualified for Free Shipping.
            {% endif %}
            {% raw %}
        </p>
        <button type="submit" class="cart__checkout" name="checkout">
          {% endraw %}{{ 'cart.general.checkout' | t }}{% raw %} &rarr;
        </button>
        {% endraw %}{% if additional_checkout_buttons %}
          <div class="additional_checkout_buttons">{{ content_for_additional_checkout_buttons }}</div>
        {% endif %}{% raw %}
      </div>
    </form>
  {% endraw %}
  </script>
  <script id="AjaxQty" type="text/template">
  {% raw %}
    <div class="ajaxcart__qty">
      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus icon-fallback-text" data-id="{{id}}" data-qty="{{itemMinus}}">
        <span class="icon icon-minus" aria-hidden="true"></span>
        <span class="fallback-text">&minus;</span>
      </button>
      <input type="text" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{id}}" aria-label="quantity" pattern="[0-9]*">
      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus icon-fallback-text" data-id="{{id}}" data-qty="{{itemAdd}}">
        <span class="icon icon-plus" aria-hidden="true"></span>
        <span class="fallback-text">+</span>
      </button>
    </div>
  {% endraw %}
  </script>
  <script id="JsQty" type="text/template">
  {% raw %}
    <div class="js-qty">
      <button type="button" class="js-qty__adjust js-qty__adjust--minus quantity-increment" data-id="{{id}}" data-qty="{{itemMinus}}">
        <span>&minus;</span>
      </button>
      <input type="text" class="js-qty__num" value="{{itemQty}}" min="1" data-id="{{id}}" aria-label="quantity" pattern="[0-9]*" name="{{inputName}}" id="{{inputId}}">
      <button type="button" class="js-qty__adjust js-qty__adjust--plus quantity-increment" data-id="{{id}}" data-qty="{{itemAdd}}">
        <span>+</span>
      </button>
    </div>
  {% endraw %}
  </script>

Answer 1

您写道：

        {% endraw %}
        {% if totalPrice <= 30 %}
        You’re just {{{30 | minus: totalPrice}}} away from FREE shipping.
        {% else %}
        You've qualified for Free Shipping.
        {% endif %}
        {% raw %}

这是正确的...如果您提供 0.30 美元的免费送货服务

Shopify 将价格存储为整数，而不是浮点数 - 因此价格变量中的值表示美分，而不是美元。如果您想与 $30.00 进行比较，则需要与 3000 进行比较，而不是 30

此外，您已将 Liquid 代码放入 Handlebars 模板中 - Liquid 是在服务器端呈现的，因此购物车总数的评估发生在将页面提供给您的客户之前。如果购物者更改了购物车总数，则不会在服务器级别重新评估模板，因此消息不会是动态的。

您应该做的是向您的模板添加一个新变量，例如 {{{ shippingMessageHTML }}}，然后编辑填充模板的脚本文件以具有同名变量。

示例：（注意：看起来您正在使用 Brooklyn 或其相关主题之一。此主题系列将填充该模板的函数命名为 buildCart，该模板通常位于名为 ajax-cart 的资产文件中，app 或 theme。扩展名将是 .js 或 .js.liquid)

找到函数底部附近的代码部分，它应该如下所示：

// Gather all cart data and add to DOM
data = {
  items: items,
  note: cart.note,
  totalPrice: Shopify.formatMoney(cart.total_price, settings.moneyFormat),
  totalCartDiscount: cart.total_discount === 0 ? 0 : {{ 'cart.general.savings_html' | t: savings: '[savings]' | json }}.replace('[savings]', Shopify.formatMoney(cart.total_discount, settings.moneyFormat))
};

在 data 对象的末尾，添加您的消息 HTML。示例：

// Gather all cart data and add to DOM
data = {
  items: items,
  note: cart.note,
  totalPrice: Shopify.formatMoney(cart.total_price, settings.moneyFormat),
  totalCartDiscount: cart.total_discount === 0 ? 0 : {{ 'cart.general.savings_html' | t: savings: '[savings]' | json }}.replace('[savings]', Shopify.formatMoney(cart.total_discount, settings.moneyFormat)), 
  //Note: we added a comma after the previous line before adding this new one
  shippingMessageHTML: cart.total_price < 3000 ? 'Want free shipping? It\'s only ' + Shopify.formatMoney(3000 - cart.total_price, settings.moneyFormat) + ' away!' : 'Yahoo! No pay-for-shipping for you!'
};

因此，当数据与您的购物车模板合并时，最新的购物车总数将用于计算。只要您在 data 对象中使用的变量与您在 CartTemplate 中设置的变量名称匹配，您就可以开始了！

（如果您想知道 {{ variable }} 和 {{{ variable }}} 之间的区别是什么，Handlebars 模板语言将双花括号解释为文本，将三花括号解释为 HTML。所以如果你想在你的消息中加入 span 或任何东西，使用三重大括号。如果你的消息只是纯文本，你可以使用双或三)

Shopify 显示距离免费送货有多近

Shopify show how close to free shipping

ajax

cart

liquid

shopify