AMP
  • websites

Shopping Cart

We use amp-list, to show a dynamic list of items in the cart.

amp-list needs to send the session cookie on the header of the request, so that the server can retrieve the contents of the cart on the session. For this reason, we use credentails="include", as an additional attribute.

Each row of this list, contains a button to remove items from the cart, that works in the following way:

  1. Clicking on the "remove" button, updates an state object (cartItem), which, in turn, update two hidden fields on the form form-cart-delete, and also triggers a form submission. This form will call the server to update the cart, and update the cartItemsList object with the response.
  2. The amp-list component contains the expression [src]="cartItemsList.items", so that, when the cartItemsList object changes, as a result of the previous action, the list gets refreshed with the content of the updated cart.
<amp-list credentials="include" layout="responsive" height="100px" width="500px" src="https://amp.dev/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>

Delete Items Form

As said, we use amp-form to send an XHR POST request to /delete-cart-item:

  1. The form contains two hidden input fields, bound to the cartItem object's variables. When the remove button is clicked, this object gets updated with the details of the item to remove from cart, so the form can send them on the call to the server.
  2. The form updates the cartItemsList with the response from the server, so that amp-list can be refreshed with the contents of the updated cart.
<form id="form-cart-delete" method="POST" target="_top" action-xhr="https://amp.dev/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>

Cart List Object

This object will be updated after the removal of an item, with the contents of the updated cart.

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

    }
    </script>
</amp-state>

Cart Item Object

This object acts as a proxy between the action of removing items, and the form submission.

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

    }
    </script>
</amp-state>
Bạn cần được giải thích thêm?

Nếu bạn vẫn còn thắc mắc sau khi đọc hướng dẫn trên trang này, hãy liên hệ với những người dùng AMP khác để thảo luận về trường hợp sử dụng cụ thể của bạn.

Truy cập Stack Overflow
Một tính năng chưa được giải thích?

Dự án AMP đặc biệt khuyến khích sự tham gia và đóng góp của bạn! Chúng tôi hi vọng bạn sẽ trở thành một người tham gia tích cực trong cộng đồng mã nguồn mở của chúng tôi, nhưng chúng tôi cũng chào mừng các đóng góp đơn lẻ về vấn đề mà bạn đặc biệt quan tâm.

Chỉnh sửa mẫu trên GitHub