Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

(singke) #1
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>
Free download pdf