Optimizing E-Commerce Navigation with Pagination, Sorting, and Filter Features

Check this post in my web notes!

We are making our store more and more user-friendly, and today we will make one more step in our e-commerce store improvement. In previous articles, we have already added pagination, sorting, and filters but they were only part of our template without functionality, and now it's time to fix it, so let's start with building a simple plan for today's work and continue improving our store with Nuxt.js.

Simply want to remind that you can check demo of what are we building here, and source code here.

1. Pagination. Divide product listings into manageable pages.
2. Implement sorting functionality with a user-friendly interface.
3. Implement filters based on relevant product attributes (e.g., category).

Having outlined the key areas for improvement, it's time to roll up our sleeves and dive into the implementation details. Our goal is to transform our Nuxt.js e-commerce store into a user-friendly platform by adding functionality to the previously implemented pagination, sorting, and filtering features. Let's begin by tackling the pagination functionality, which will divide our product listings into manageable, crawlable pages for an enhanced browsing experience.

1. Pagination. Divide product listings into manageable pages.

Previously we added pagination elements to our shop page, I like its design so I will not change CSS styles only pagination functionality.

What is pagination? Pagination is a technique used to divide large sets of content, such as product listings, into separate pages. This helps improve website performance by loading only a subset of the content at a time, making it easier for users to navigate through the information.

In our case products list will be our "large content" so let's modify the products array but not directly in the store state, let's modify it before rendering in the store getter. For that open products store and inside state add pagination object that will store "currentPage" and "itemsPerPage" values, then inside getters, section create new getter "gPaginatedItem" that will accept a list of items and return that list part by part. That getter will count the start and end values of our page and "slice" the items list between those values:

gPaginatedItems: (state) => (items) => {
    const start = (state.pagination.currentPage - 1) * state.pagination.itemsPerPage;
    const end = start + state.pagination.itemsPerPage;
    return items.slice(start, end);
},

Next step, we need to create actions that will simply modify the "currentPage" value, they will be used to change pages.

aSetPage(page) {
    this.pagination.currentPage = page;
},
aNextPage() {
    if (this.pagination.currentPage < this.gTotalPages) {
        this.pagination.currentPage++;
    }
},
aPrevPage() {
    if (this.pagination.currentPage > 1) {
        this.pagination.currentPage--;
    }
}

Now we can move to our shop page where we have a few changes:

• update the products list section, we need to add our getter that will use the products list as a parameter and render only one page at once;

<div class="products__content">
    <ProductCard v-for="product in productsStore.gPaginatedItems(productsStore.gProductsList)" :key="product.id" :product="product" />
</div>

• update our pagination section, add click events that will change pages (previous and next to arrows and set page to each number), implement a feature that will show first, last, and current page only;

<div class="products__pagination">
    <ul class="page">
        <li class="page__btn"><NuxtIcon name="chevron-left-solid" @click="productsStore.aPrevPage"/></li>
        <li v-if="productsStore.gCurrentPage > 2" class="page__numbers" @click="productsStore.aSetPage(1)">1</li>
        <li v-if="productsStore.gCurrentPage > 2" class="page__dots">...</li>
        <li v-for="page in displayedPages" :key="page" class="page__numbers" :class="{ active: productsStore.gCurrentPage === page }" @click="productsStore.aSetPage(page)">
            {{ page }}
        </li>
        <li v-if="productsStore.gCurrentPage < productsStore.gTotalPages - 1" class="page__dots">...</li>
        <li v-if="productsStore.gCurrentPage < productsStore.gTotalPages - 1" class="page__numbers" @click="productsStore.aSetPage(productsStore.gTotalPages)">{{ productsStore.gTotalPages }}</li>
        <li class="page__btn"><NuxtIcon name="chevron-right-solid" @click="productsStore.aNextPage"/></li>
    </ul>
</div>

Yes, that's it, now we only need to restart our Nuxt dev server, add some more testing products, and try pagination behavior.

I like how it looks and works, but we have no time for playing need to move on.

2. Implement sorting functionality with a user-friendly interface.

In our design, we already have a dropdown that has all sorting options, so we simply need to receive that option that the user chose and sort all our products but do not forget that it should be implemented with our pagination at the same time.

Open, please, products store and add a new variable "sort" with the default value "popularity". Let's use the variant where we will sort our products in actions, in this case, we need to create a new sort action and add a condition statement that will modify our products list depending on the sort value.

aSetSort(sort) {
    this.sort = sort;
    if (sort === 'LtoH') {
        return this.productsList.sort((a, b) => a.price - b.price);
    } else if (sort === 'HtoL') {
        return this.productsList.sort((a, b) => b.price - a.price);
    }
},

Also, do not forget to add a getter that will return the sort statement value. Next, we need to modify our shop page again and simply update the sort dropdown with new values:

<div class="products__header--select">
    <p>Sort by</p>
    <select v-model="sort">
        <option selected value="popularity">Popularity</option>
        <option value="LtoH">Price: Low to High</option>
        <option value="HtoL">Price: High to Low</option>
    </select>
</div>

and add setter-getter to our sort value:

sort: {
    get() {
        return this.productsStore.gSort;
    },
    set(value) {
        this.productsStore.aSetSort(value);
        this.productsStore.aSetPage(1);
    }
}

Great, restart the Nuxt dev server and check the result:

3. Implement filters based on relevant product attributes (e.g., category).

Here is our third and final part for today, we will add and configure filters for different product categories. For that, open the products store and add the "categoryFilter" variable into the state, then add the "aSetCategoryFilter" action that will simply update our filter, and depending on that filter value we will return the filtered products list. Modify the "gProductsList" getter that will filter all our items by category key and return only those which has some specific category.

gProductsList: (state) => {
    let products = state.productsList;
    if (state.categoryFilter) {
        products = products.filter(el => el.category === state.categoryFilter);
    }
    if (state.categoryFilter === 'All') {
        products = state.productsList
    }
    return products;
},

You can add as many filters as you want in that list and make it possible for users to choose the product they are looking for.

Also, we need to modify the filter itself in the shop template:

<ul class="list">
    <li class="list--item" v-for="category in categories" :key="category">
        <NuxtLink @click="setCategory(category)" class="link">{{ category }}</NuxtLink>
    </li>
</ul>

Now, any time the user presses some filter category our app will return the already filtered products list.

In this article, we optimized the e-commerce navigation experience for our Nuxt.js store by implementing three essential features: pagination, sorting, and filtering. We started by adding pagination functionality, dividing our product listings into manageable pages for better performance and user experience. Next, we implemented sorting options, allowing customers to sort products based on popularity, price from low to high, and price from high to low, enhancing user preferences. Finally, we incorporated filters based on product categories, enabling customers to quickly narrow down their search results. Throughout the implementation process, we maintained a user-friendly interface, ensuring a seamless and intuitive navigation experience. By optimizing these crucial features, we not only improved the overall usability of our e-commerce platform but also potentially increased customer satisfaction, conversions, and organic traffic.

The best variant to study something is to make it by your own, the same thing works with coding, but if you need a source code for this tutorial you can get it here.