AMP
英文
德语 法语 阿拉伯语 西班牙语 意大利语 印尼语 日语 韩语 葡萄牙语 俄语 土耳其语 中文 波兰语 越南语
  • 网站

购物车

在 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.org.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.org.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 上编辑示例