AMP: Building Accelerated Mobile Pages

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