In this chapter, we'll explore amp-bind, a programming layer for AMP. This will allow us to enhance our e-commerce experience and create even richer and more dynamic pages that would otherwise not be possible in AMP. Specifically, we'll look at the following topics:
- How to get started with
amp-bind - Improving the shopping cart so that we can remove items without a full page reload
- Adding filtering, sorting, and autosuggest to the product search form
- Improving the product carousel
- Two different approaches to dynamically configuring product options, and adding them to the cart
Buy "AMP: Building Accelerated Mobile Pages" on Amazon US, Amazon UK
View Examples
- Starting point for the first two examples: amp-bind-start.html
- Text manipulation example: amp-bind.html
- CSS class manipulation: amp-bind-css.html
- Starting point for product page/cart examples: product-start.html
- Removing items from cart without page reload:product-cart.html
- Starting code for search example: search-start.html
- Product search with sorting and filtering: search.html
- Product search results sample JSON data: search-results-sample.json
- Product search with autosuggest: search-autosuggest.html
- Improved product carousel: product-carousel.html
- Basic product configuration options: product-config-basic.html
- Advanced product configuration options: product-config.html
Download code
Download all code for this chapter: ch8.zip