Removing cart items with <amp-bind>

After that not-so-brief introduction to amp-bind, it's time to get back to the shopping cart. Earlier, we mentioned that a nice update to the cart would be if we could remove items via an XHR request without a full page reload. Let's build this now.

Recall that the shopping cart summary is fetched from the server via amp-list on page load. We're going to use amp-bind to trigger an amp-list fetch that will also remove an item from the cart.

Note

The product page examples in this chapter will use /ch8/product-start.html as a starting point. You can follow along with the examples by adding code to this file.

User-triggered updates with <amp-list> and <amp-bind>

With amp-bind, we can trigger amp-list to update, without a page reload, based on a user action such as tapping a button or entering some text. To do this, we must bind to the URL of amp-list with the square bracket syntax, like this: [src].

Note

This amp-bind/amp-list combination is powerful...