Shopify 在 checkout.liquid 中获取购物车信息答案

【问题标题】：Shopify get cart information inside checkout.liquidShopify 在 checkout.liquid 中获取购物车信息
【发布时间】：2019-12-13 23:18:28
【问题描述】：

我正在使用 shopify 购买按钮 js 在我的网站上创建商品并将其添加到购物车中，并在结帐时将用户重定向到我的 shopify 网站。

现在，在结帐页面上，我想在 checkout.liquid 中检索有关购物车及其 lineitem 的信息，但是当我尝试通过调用 /cart.js 以及 Shopify.getCart() 与他们的 jquery 时购物车总是空的包装。

以下是我尝试过的：

checkout.liquid 内部

尝试 1：

{{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' | script_tag }}
{{ 'api.jquery.js' | shopify_asset_url | script_tag }}
<script type="text/javascript">
  $(function() {
      console.log(Shopify.getCart());
  });
</script>

尝试 2：

<script type = "text/javascript" >
    $(function() {
        $.getJSON('/cart.js', function(cart) {
            console.log(cart);
        });
    }); 
</script>

关于如何获取这些信息的任何想法？谢谢

【问题讨论】：

标签： javascript shopify

【解决方案1】：

似乎没有直接的方法可以在客户端检索这些值。我最终在服务器端渲染数据并使用 jQuery 解析它们。

<div class="data" style="display:none;">
  <span class="taxAmount">{{ checkout.tax_price | money_without_currency | remove: ',' }}</span>
  <span class="grandTotal">{{ checkout.total_price | money_without_currency | remove: ',' }}</span>
  <span class="currency">{{ shop.currency }}</span>

  {% for line_item in checkout.line_items %}
        <div class="lineItem">
          <span class="name">{{ line_item.product.title }}</span>
          <span class="sku">{{ line_item.sku }}</span>
          <span class="quantity">{{ line_item.quantity }}</span>
          <span class="unitPrice">{{ line_item.price | money_without_currency | remove: ',' }}</span>
          <span class="salePrice">{{ line_item.price | money_without_currency | remove: ',' }}</span>
          <span class="totalPrice">{{ line_item.price | times: line_item.quantity | money_without_currency | remove: ',' }}</span>
          <span class="imageUrl">{{ line_item.image | image_url }}</span>
        </div>
  {% endfor %}
</div>

<script type="text/javascript">
  $(function() {
        $('.data .lineItem').each(function() {
            "sku": $(this).find('.sku').text(),
            "name": $(this).find('.name').text()
            // do my stuff
        });
  });

【讨论】：