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.dev.org.tw/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 將 XHR POST 請求傳送至 /delete-cart-item

  1. 表單包含兩個隱藏的輸入欄位，繫結至 cartItem 物件的變數。當點擊移除按鈕時，此物件會使用要從購物車中移除的商品詳細資訊進行更新，以便表單可以在呼叫伺服器時傳送這些資訊。
  2. 表單會使用伺服器的回應更新 cartItemsList，以便 amp-list 可以使用更新後購物車的內容重新整理。
<form id="form-cart-delete" method="POST" target="_top" action-xhr="https://amp.dev.org.tw/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 上編輯範例