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...