Check this post in my web notes!

As we approach the finish line of building our Nuxt.js e-commerce store, we've successfully added all the necessary pages and functionality, as well as implemented meta tags for improved search engine optimization (SEO). However, there are still a few essential components and configurations we need to address before launching our online store.

In this article, we'll focus on setting up the necessary configurations that will allow Nuxt.js to generate all our pages efficiently, ensuring optimal performance and search engine indexing. Additionally, we'll cover the implementation of crucial components such as breadcrumbs, empty cart notifications, and loader, which can enhance the user experience and provide valuable information to potential customers.

1. Upgrading the e-commerce store's user experience (UX) with a dynamic Breadcrumbs component
2. Adding a Loader component to the Nuxt.js project
3. Implement Empty Cart and Wishlist Notifications with Image Placeholders

By breaking down the implementation process into these key components, we can methodically work through the necessary steps, ensuring that our Nuxt.js e-commerce store is not only functional but also offers a polished and user-friendly experience upon launch.

1. Upgrading the e-commerce store's user experience (UX) with a dynamic Breadcrumbs component

We had already created a "Breadcrumb" component and added it to the main pages, but it is the same on each page. Now we will work with props and modify Breadcrumbs so that its title is rendered depending on the page where it was added.

Open a Breadcrumbs.vue file and add props to the script part, our props will accept an array of strings.

props: {
    breadcrumbsList: {
        type: Array,
        required: true
    }
}

Then we need to modify our template, we need to update each item name and item link so that it is dynamically rendered for each page separately.

<ul class="breadcrumbs__list">
    <li class="breadcrumbs__list--item">
        <NuxtLink to="/" class="breadcrumbs--link">
            {{ breadcrumbsList[0] }}
        </NuxtLink>
    </li>
    <li class="breadcrumbs__list--item"> / </li>
    <li>
        <NuxtLink :to="`/${breadcrumbsList[1]}`" class="breadcrumbs--link">
            {{ breadcrumbsList[1] }}
        </NuxtLink>
    </li>
    <li class="breadcrumbs__list--item" v-if="breadcrumbsList[2]"> / </li>
    <li v-if="breadcrumbsList[2]">
        <NuxtLink :to="`/${breadcrumbsList[2]}`" class="breadcrumbs--link">
            {{ breadcrumbsList[2] }}
        </NuxtLink>
    </li>
</ul>

Great, now we can open a Checkout page component and add props to the Breadcrumbs. We need to add an array with three items.

<Breadcrumbs 
    :breadcrumbsList="['Home', 'Cart', 'Checkout']"
    />

Now we need to update all our Breadcrumbs implementation at each page, then please, restart the dev server and check the result. You should have a Breadcrumb with working links, and we can move on.

2. Adding a Loader component to the Nuxt.js project

A loader is a visual indicator that is displayed on a web page or application to signal that content or data is currently being loaded or processed. It provides users with feedback that the system is working and that they should wait for the desired content or action to complete.

We will have a massive amount of data on the shop page, so it is crucial to show a loader while the user is waiting for the products list to render. I found an awesome free spinner loader on the css-loader website, I will use one from the list. Copy the spinner card HTML/CSS code, then inside the common folder create a new file Loader.vue, and add the HTML part of code into the template section and CSS into the styles section.

<template>
    <div class="loader"></div>
</template>

<script>
export default {
    name: "Loader"
}
</script>

<style lang="scss" scoped>
.loader {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #25b09b;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}
</style>

Now, we can import this Loader into the shop page, and show it till the list of products is empty, when we receive the products list we will remove the loader from the page.

<div class="shop__content--loader" v-if="!productsStore.gProductsList.length">
    <Loader />
</div>
<div class="shop__content--products"
    v-if="productsStore.gProductsList.length">
...
</div>

Great, we can restart the server and check our loader, there will be 1-2 seconds when we will see the loader before the products list appears.

3. Implement Empty Cart and Wishlist Notifications with Image Placeholders

Now, there are table headers only if our cart and wishlist are empty, it's not looking great, that is why we will add some sort of notification, we will show the user for example an empty cart image with the informative title and link to the shop page.

I found some pretty free images of empty carts and empty buskets in the freepik service and I will use them. Open the wishlist page component and create an additional empty section that will be shown only if the products list is empty. That empty section will have an image, a simple subtitle, and a button that will redirect the user to the shopping page.

<section class="cart__empty" v-if="!productsList.length">
    <h3>Your wishlist is empty</h3>
    <img class="cart__empty--image" src="../../assets/images/cart/empty-wishlist.png" alt="Cart Empty">
    <button class="cart__footer--btn" @click="$router.push('/shop')">
        <NuxtIcon name="arrow-left-long-solid" size="20" class="cart__footer--icon"/>
        Continue Shopping
    </button>
</section>
<section class="cart__content" v-else>
...
</section>

The same settings we will implement to the cart and the wishlist pages. Then we need to restart our dev server once again and check the result.

This small but impactful improvement not only enhances the overall aesthetic but also provides users with clear guidance on their next steps, whether it's continuing their shopping journey or revisiting these sections at a later time.

With these final touches in place, our Nuxt.js e-commerce store is now ready for production deployment, offering a polished and user-friendly experience that not only meets but exceeds the expectations of our customers.

If you need a source code for this tutorial you can get it here.