Building an E-Commerce Store - Browsing Products Chapter 10
Ordering products in a category
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>Price - descending ($999 - $1)</option>
</select>
</div>
We now need to create a variable for the select box to update in the data function. Add a
new key titled ordering and add a value to each option, so interpreting the value is easier.
Construct the value by using the field and order, separated by a hyphen. For
example, Title - ascending (A - Z) would become title-asc:
<div class="ordering">
<select v-model="ordering">
<option value="">Order products</option>
<option value="title-asc">Title - ascending (A - Z)</option>
<option value="title-desc">Title - descending (Z - A)</option>
<option value="price-asc">Price - ascending ($1 - $999)</option>
<option value="price-desc">Price - descending ($999 - $1)</option>
</select>
</div>