October 2017
Intermediate to advanced
370 pages
8h 57m
English
Now we just need to set up the sort and filter options for the user. We'll use amp-selector for these. First, the color filter:
<amp-selector class="style-chooser" on="select:AMP.setState({filter: event.targetOption})"> <span class="none" option="none" selected></span> <span class="red" option="red" ></span> <span class="green" option="green"></span> <span class="blue" option="blue"></span> <span class="yellow" option="yellow"></span> <span class="black" option="black"></span></amp-selector>
When a color is selected, AMP.setState() sets the filter property to the chosen option.
The selector for sorting by price is similar, but with only two options this time, up (low-to-high), and down (high-to-low): ...
Read now
Unlock full access