In the last chapter, we saw how we could send and receive data to and from a server endpoint using forms. A drawback was that we couldn't fetch any data without user interaction—the user had to submit a form before any data was retrieved. While that model has its uses, it's not suitable for all situations. We couldn't, for example, show the contents of a shopping cart when the user arrived on a page—we'd have to wait for the user to interact with the page first.
In this chapter, we'll see a solution to this issue, so that we can dynamically fetch server data on page load, or when triggered by user interaction, using amp-list. We'll also explore other use cases for dynamic content and data in AMP pages.
Topics covered in Chapter 7 include the following:
- Fetching data dynamically with
amp-list - Removing items from a shopping cart
- Automatically refreshing dynamic content with
amp-live-list - Implementing a live-updating Twitter search
- Implementing a live-updating sports leaderboard
Buy "AMP: Building Accelerated Mobile Pages" on Amazon US, Amazon UK
View Examples
- Starting point for examples: product-start.html
- Sample product JSON data: related-products.json
- Sample product JSON data in single item array: related-products-results.json
- Related products
amp-listexample: related-products.html - Shopping cart built with
amp-list:product-cart.html - Shopping cart with removal of items: product.html
- Starting code for
amp-live-listexamples: amp-live-list-start.html amp-live-listexample: amp-live-list-example.html- Twitter search with live updates using
amp-live-list: amp-live-list-twitter.php - Live-updating a sports leaderboard: amp-live-list-leaderboard.php
Download code
Download all code for this chapter: ch7.zip