[{"value":"image.png","id":"imagepng","hLevel":2,"level":1},{"value":"位置","id":"位置","hLevel":2,"level":1},{"value":"内容","id":"内容","hLevel":2,"level":1},{"value":"cart object","id":"cart-object","hLevel":2,"level":1},{"value":"用法","id":"用法","hLevel":2,"level":1},{"value":"购物车订单项","id":"购物车订单项","hLevel":2,"level":1},{"value":"进行结账","id":"进行结账","hLevel":2,"level":1},{"value":"从购物车中删除订单项","id":"从购物车中删除订单项","hLevel":2,"level":1},{"value":"更新订单项数量","id":"更新订单项数量","hLevel":2,"level":1},{"value":"显示购物车和订单项折扣","id":"显示购物车和订单项折扣","hLevel":2,"level":1},{"value":"显示订单项属性","id":"显示订单项属性","hLevel":2,"level":1}]

cart

cart 模板渲染了购物车（/cart）页面，该页面提供了客户购物车内容的概览。这个概览通常以表格格式显示，每个订单项各占一行。

位置

cart模板位于主题的 templates 目录中：

└── theme
    ├── layout
    ├── templates
    |   ...
    |   ├── cart.json
    |   ...
    ...

内容

你可以将 cart object 包含在 cart 模板中或模板内的某个 section 中。

cart object

你可以访问 Handlebars cart object 对象以显示购物车的详细信息。

用法

在使用购物车模板时，你应该熟悉以下内容：

使用购物车订单项
让顾客从购物车中进行结账
提供从购物车中删除订单项的选项
更新订单项数量
显示折扣
显示购物车中的订单项属性

提示

如果你使用的是 JSON templates，那么任何 HTML 或 Handlebars 代码都需要包含在模板引用的 section 中。

购物车订单项

line_item 是购物车中的一个单独行，记录了添加了哪种产品变体以及相关的数量。例如，如果客户将同一款 T 恤的中号和大号都添加到他们的购物车中，那么每款 T 恤都有自己的订单项。

cart 模板应该包含一个表格，其中每个订单项都有一行：

{{#for cart.items as |item|}}
    {{! line item info}}
{{/for}}

进行结账

要让客户继续从购物车中结帐，你需要在 cart form helper 内输出购物车订单项。

 {{#form "cart"}}
   {{#for cart.items as |item|}}
    {{! line item info}}
   {{/for}}
  
   <button type="submit" name="checkout" class="button">Checkout</button>
 {{/form}}

从购物车中删除订单项

你应该为客户提供从购物车中删除订单项的选项。你可以通过为每个订单项包含一个 <a> 元素来实现这一点，该元素的 href 属性引用了 line_item 对象的 url_to_remove 属性：

 {{#for cart.items as |item|}}
   {{! line item info}}
   
   <a href="{{ item.url_to_remove }}">Remove</a>
 {{/for}}

提示

参考购物车 API 可以了解更多关于使用 JavaScript 更改购物车的信息。

更新订单项数量

你可以利用 routes.cart_change_url 对象和 /cart/change API 通过 JavaScript 在购物车中更改商品数量。

第一步：在主题文件 theme.html 中通过 script 标签注入 routes.cart_change_url

 <html>
   <body>
     {{! content}}
     <script>
       window.routes = {
         cart_change_url: "{{ routes.cart_change_url }}",
       }
     </script>
   </body>
 </html>

第二步：订单项的 data-key 属性引用了 line_item 对象的 key 属性，然后使用 JavaScript 请求 /cart/change API 来更新订单项数量。

 {{! this is handlebars html }}
 {{#for cart.items as |item|}}
   <div class="cart_item" data-key="{{ item.key }}">
      {{! line item content}}
   </div>
 {{/for}}
  
 <script>
 fetch(`${window.routes.cart_change_url}`, {
   method: 'POST',
   headers: {
     'Content-Type': 'application/json',
     Accept: `application/json`,
   },
   body: JSON.stringify({
     id: document.querySelectorAll('.cart_item')[0].getAttribute('data-key'), // update line_item key
     quantity: 2, // update quantity
   })
 })
 </script>

显示购物车和订单项折扣

由于折扣可以适用于整个购物车或单个订单项，你应该在购物车总计摘要和单个订单项显示中显示折扣。要了解有关折扣以及如何构建折扣显示的更多信息，请参阅折扣。

显示订单项属性

当商品被添加到购物车时，它们可以包含 line_item 属性。你可以通过遍历每个属性，在购物车页面上显示这些属性：

{{#for cart.items as |item|}}
  {{#if item.properties.length > 0}}
     {{#for item.properties as |property|}}
       {{#if property.type == "text"}}
         <span>{{property.value}}</span>
       {{else if property.type == "link"}}
         <a class="button button--link" href="{{property.urls.[0]}}" target="_blank">{{property.value}}</a>
       {{/if}}
     {{/for}}
  {{/if}}
{{/for}}