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>
자세한 설명이 필요하신가요?

이 페이지의 설명만으로 궁금한 점이 모두 해결되지 않는다면 다른 AMP 사용자에게 문의하여 구체적인 활용 사례를 논의해 보세요.

Stack Overflow로 이동
설명이 부족한 기능을 발견하셨나요?

AMP 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.

GitHub에서 샘플 수정하기