Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
AMP: Building Accelerated Mobile Pages

You're reading from   AMP: Building Accelerated Mobile Pages Create lightning-fast mobile pages by leveraging AMP technology

Arrow left icon
Product type Paperback
Published in Oct 2017
Publisher Packt
ISBN-13 9781786467317
Length 370 pages
Edition 1st Edition
Languages
Tools
Concepts
Arrow right icon
Author (1):
Arrow left icon
Ruadhan O'Donoghue Ruadhan O'Donoghue
Author Profile Icon Ruadhan O'Donoghue
Ruadhan O'Donoghue
Arrow right icon
View More author details
Toc

Table of Contents (17) Chapters Close

Preface 1. Ride the Lightning with AMP FREE CHAPTER 2. Building Your First AMP Page 3. Making an Impression - Layout and Page Design in AMP 4. Engaging Users with Interactive AMP Components 5. Building Rich Media Pages in AMP 6. Making Contact - Forms in AMP 7. Dynamic Content and Data-Driven Interaction 8. Programming in AMP - amp-bind 9. When AMP Is Not Enough - Enter the iframe 10. Ads and Analytics in AMP 11. AMP Deployment and Your Web Presence 12. AMP - Where It's At and Where It's Going 13. AMP Components 14. Actions and Events 15. amp-bind Whitelisted Functions 16. amp-bind Permitted Attribute Bindings

Showcasing products with <amp-carousel>


When it comes to e-commerce, amp-carousel really shines. We saw amp-carousel briefly in the last chapter, where we used it to build a horizontal navigation menu. This time, we'll make use of it to showcase products. For our examples, we'll have a products listing page, and a product detail page. Each product will have a name, a description, a price, and several images.

In our product listing page, we'll show just a thumbnail image, the product name, and the price. eBay was an AMP early-adopter, and we can look to its AMP implementation for inspiration. It contains several carousels promoting different categories of products; we'll build something similar. We can also take UX design cues from other e-commerce retailers, such as Amazon and AliExpress. Our product listing page will contain carousel lists of similar products. We'll then add a product page, and we'll see how various AMP media components can be used to present the product.

E-commerce...

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime