Removing items from the cart
Adding items to the cart is all well and good, but we'll need a way to remove items too. To achieve this we'll exploit the fact that amp-list
fetches the cart contents when our product page loads. If we can append the product ID of an item to be removed from the cart to the amp-list
URL, then the server can remove the item, and then return the cart contents as normal.
Let's set up a Remove item
link next to each item in the cart. Each link will contain the product_id
for its product. It could look something like the following, using amp-mustache
to output the product_id
as part of the href
link:
<a href="?del={{product_id}}">Remove item</a>
So that we can style it better, the actual code we'll use is this:
<div class="cart-del"><a href="?del={{product_id}}">×</a></div>
When this link is clicked, the page will reload, but with ?del=some_product_id
appended to the URL, like this:
https://theampbook.com/ch7/product.html?del...