With our category pages displaying the right products, it's time to add some ordering options within our ListProducts component. When viewing a shop online, you can normally order the products by the following:
- Title: Ascending (A - Z)
- Title: Descending (Z - A)
- Price: Ascending ($1 - $999)
- Price: Descending ($999 - $1)
However, once we have the mechanism in place, you can add any ordering criteria you want.
Start off by creating a select box in your ListProducts component with each of the preceding values. Add an extra first one of Sort products by...:
<div class="ordering">
<select>
<option>Order products</option>
<option>Title - ascending (A - Z)</option>
<option>Title - descending (Z - A)</option>
<option>Price - ascending ($1 - $999)</option>
<option...