October 2017
Intermediate to advanced
370 pages
8h 57m
English
We'll set it up so that the price depends on the size as well as the style. We'll use amp-state to initialize this information. Let's start with that (full code at /ch8/product-config.html):
<amp-state id="product"> <script type="application/json"> { "color":"red", "style":"f", "size":"s", "price":"8.99", "currentImage": "0", "m": { "sizes": { "l": "10.99", "m": "9.99", "s": "8.99" } }, "f": { "sizes": { "l": "8.99", "m": "7.99", "s": "6.99" } }, "colors": { "0":"red", "1":"black", "2":"blue", "3":"green" } } </script></amp-state>
In this setup, the properties color, style, size, and price will represent the current options, so whenever the user changes an option, we'll need to update one of these ...
Read now
Unlock full access