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

另外，您已经将您的液体代码放入一个手柄模板中--液态被呈现在服务器端，因此在向您的客户端提供页面之前，对购物车总数的评估就会发生。如果购物者更改了他们的购物车总数，模板将不会在服务器级别上得到重新评估，因此消息不会是动态的。

相反，您应该向模板中添加一个新变量，如{{{ shippingMessageHTML }}}，然后编辑填充模板的脚本文件，使其具有同名变量。

(注:看起来你在使用布鲁克林或它的相关主题之一。这个主题家族命名了填充模板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!'
};

这样，当数据与cart模板合并时，将在计算中使用最新的cart总数。只要您在data对象中使用的变量与您在CartTemplate中设置的变量的名称相匹配，就可以了！

(如果您想知道{{ variable }}和{{{ variable }}}之间有什么区别，工具栏模板语言将双大括号解释为文本，三大括号解释为HTML。因此，如果您想将span或任何内容放入您的消息中，请使用三重大括号。如果您的消息将永远是平面文本，您可以使用双或三)