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 }}}，然后编辑填充模板的脚本文件，使其具有相同名称的变量。

实施例：（注意：看起来您正在使用布鲁克林或其相关主题之一。此主题系列命名填充该模板buildCart的函数，该函数通常位于名为ajax-cart的资产文件中，{ {1}}或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)) };对象的末尾，添加您的消息HTML。例如：

data

这样，当数据与您的购物车模板合并时，将在计算中使用最新的购物车总数。只要您在// 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!' };对象中使用的变量与您在CartTemplate中设置的变量的名称相匹配，您就可以开始了！

（如果你想知道data和{{ variable }}之间的区别是什么，Handlebars模板语言将双花括号解释为文本，将三重花括号解释为HTML。所以如果你想要在您的邮件中添加{{{ variable }}}或任何内容，请使用三重括号。如果您的邮件只是平面文字，则可以使用双倍或三倍）

Shopify显示有多接近免费送货

1 个答案: