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

Configuring product options with <amp-bind>


Another great use for amp-bind within an e-commerce application is to configure product options. We can use AMP state to store the possible product options, as well as the user-selected configuration. We can bind this state to the product details UI, updating images and styles as appropriate when different options are selected.

Our e-commerce prototype store carries one type of product: T-shirts. Naturally then, configurable options might include color, size, and style (male or female).

As is usual in web development, there are multiple ways we can build this, and each with its own strengths and weaknesses. We're going to explore two ways to do it here: a simple, minimal approach; and a more complex but feature-rich approach. We show both here because the simple approach will be good enough to use for many applications, but there is always the possibility to use the complex version if you need to.

Product configuration: basic version

In this...

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