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