AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt
  • 网站

购物车

在 Playground 中打开

我们使用 amp-list 来显示购物车中的动态商品列表。

amp-list 需要在请求的标头中发送会话 Cookie，以便服务器可以检索会话中购物车的内容。因此，我们使用 credentails="include" 作为附加属性。

此列表的每一行都包含一个用于从购物车中删除商品的按钮，其工作方式如下：

  1. 单击“删除”按钮会更新一个状态对象 (cartItem)，而该对象又会更新表单 form-cart-delete 上的两个隐藏字段，并触发表单提交。此表单将调用服务器来更新购物车，并使用响应更新 cartItemsList 对象。
  2. amp-list 组件包含表达式 [src]="cartItemsList.items"，因此当 cartItemsList 对象因先前的操作而更改时，列表会使用更新后的购物车内容进行刷新。
<amp-list credentials="include" layout="responsive" height="100px" width="500px" src="https://amp.js.cn/documentation/examples/e-commerce/shopping_cart/cart-items" [src]="cartItemsList.items" binding="no">
    <template type="amp-mustache" id="cart-items">
        {{#isEmpty}}
        <h3>Your Basket is Empty. </h3>
        {{/isEmpty}}
        {{^isEmpty}}
        {{#cartItems}}
        <div class="item-headline">{{name}} - {{price}}</div>
        <div class="item-details">
            <div class="item-attribute">Color: {{color}}</div>
            <div>Size: {{size}}</div>
            <div>Qty: {{quantity}}</div>
            <button type="button" class="delete-button" on="tap: AMP.setState({cartItem:
                            { id: '{{id}}',
                              size: '{{size}}'
                            }}), form-cart-delete.submit">X</button>
        </div>
        <br>
        {{/cartItems}}
        {{/isEmpty}}
    </template>
</amp-list>

删除商品表单

如前所述，我们使用 amp-form 向 /delete-cart-item 发送 XHR POST 请求

  1. 该表单包含两个隐藏的输入字段，它们绑定到 cartItem 对象的变量。当单击删除按钮时，此对象会使用要从购物车中删除的商品的详细信息进行更新，以便表单可以在调用服务器时发送这些信息。
  2. 表单使用来自服务器的响应更新 cartItemsList，以便可以使用更新后的购物车内容刷新 amp-list。
<form id="form-cart-delete" method="POST" target="_top" action-xhr="https://amp.js.cn/documentation/examples/e-commerce/shopping_cart/delete-cart-item" on="submit-success: AMP.setState({
            cartItemsList: event.response
        })" novalidate>
    <input type="hidden" name="id" value [value]="cartItem.id">
    <input type="hidden" name="size" value [value]="cartItem.size">
</form>

购物车列表对象

此对象将在删除商品后更新，并包含更新后的购物车内容。

<amp-state id="cartItemsList">
    <script type="application/json">
    {

    }
    </script>
</amp-state>

购物车商品对象

此对象充当删除商品操作和表单提交之间的代理。

<amp-state id="cartItem">
    <script type="application/json">
    {

    }
    </script>
</amp-state>
需要进一步解释吗？

如果本页上的解释未能涵盖您所有的问题，请随时联系其他 AMP 用户，讨论您的具体用例。

前往 Stack Overflow
功能未说明？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的长期参与者，但我们也欢迎您为自己特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例