Check this post in my web notes!
We established the fundamental layout structure for our e-commerce store in our previous article. However, without necessary elements like the Header and Footer, our trip wouldn't be complete. We'll configure these crucial components today in order to continue to construct our Nuxt app. Our main goal will be to create a responsive header that can change its layout so that it fits within a compressed menu on smaller displays. We'll also create an elegant Footer that links to important website papers and outside resources, improving the e-commerce platform's overall user experience.
1. Crafting Your E-Commerce Store's Header
Your e-commerce website's header acts as a central point for navigation, pointing visitors to key areas like account settings, product categories, and search capabilities. It makes important features and information easily accessible, improving user experience and enabling smooth site navigation. The header also helps to strengthen your brand identity.
So let's separate our header into 3 sections:
main links to shop, about us, or home;
awesome logo;
additional service links to log in, cart, or favorite products.
Okay, we need to create a new folder "navigation" inside the "components" folder and create an AppHeader.vue component. Then we will add a tag and 3 sections inside, 2 with tag and one with logo. I do not have a logo so I will add a simple title with the name of our store.
Also, we will add icons "cart" and "heart", you can download them from the Fontawesome service.
<template>
<header class="header">
<nav class="header__nav header__nav--left">
<ul class="nav__list">
<li class="nav__list--item">
<NuxtLink to="/" class="nav__list--link">
Home
</NuxtLink>
</li>
<li class="nav__list--item">
<NuxtLink to="/" class="nav__list--link">
Shop
</NuxtLink>
</li>
</ul>
</nav>
<div class="header__logo">
<p class="header__logo--text">
<NuxtLink to="/" class="header__logo--link">
Sherman CV
</NuxtLink>
</p>
</div>
<nav class="header__nav header__nav--right">
<ul class="nav__list">
<li class="nav__list--item">
<NuxtIcon name="cart-shopping-solid" size="20" class="nav__icon"/>
<NuxtLink to="/" class="nav__list--link">
<p>Cart</p>
</NuxtLink>
<p class="link__number">(0)</p>
</li>
<li class="nav__list--item">
<NuxtLink to="/" class="nav__list--link">
<NuxtIcon name="heart-regular" size="20" class="nav__icon"/>
</NuxtLink>
<p class="link__number">(0)</p>
</li>
</ul>
</nav>
</header>
</template>
For the CSS part, I'm pretty sure you can handle this on your own if not you can get the source code here. You simply need to position those elements in one line and add space between them like here:
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 70px;
background-color: #fff;
Nice, but we need to remember about responsiveness and update our header so that users have the best experience by using our commerce store.
First, we need to add a
section after the last , inside that menu we will add a button that will toggle our responsive menu and the content of that menu itself. Also, we will catch the click event from the button and change the showMenu state.
<menu class="menu">
<button class="menu__button" @click.prevent="showMenu = !showMenu">
<NuxtIcon name="bars-solid" size="20" class="menu__button--icon"/>
</button>
<transition name="slide-fade">
<div class="menu__content" v-if="showMenu">
<ul class="menu__list">
<li class="menu__list--item">
<NuxtLink to="/" class="menu__list--link">
Home
</NuxtLink>
</li>
<li class="menu__list--item">
<NuxtLink to="/" class="menu__list--link">
Shop
</NuxtLink>
</li>
<li class="menu__list--item">
<NuxtIcon name="cart-shopping-solid" size="20" class="menu__list--icon"/>
<NuxtLink to="/" class="menu__list--link">
<p>Cart</p>
</NuxtLink>
<p class="link__number">(0)</p>
</li>
<li class="menu__list--item">
<NuxtLink to="/" class="menu__list--link">
<NuxtIcon name="heart-regular" size="20" class="menu__list--icon"/>
</NuxtLink>
<p class="link__number">(0)</p>
</li>
</ul>
</div>
</transition>
</menu>
Yes, I forgot to mention for the smooth appearance of our menu.
.slide-fade-enter-active {
transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
transform: translateX(20px);
opacity: 0;
}
That's it, we have created our Header, and now we can move forward to our Footer.
2. Developing Your E-Commerce Footer
The footer, which is normally located at the bottom of a website page, aids in navigation and gives users access to vital information. Links to important pages such as privacy policies, terms of service, copyright notices, and contact details are frequently included. By facilitating trust, providing quick access to essential resources, and enhancing website usability, a footer improves user experience.
As with a header, with our footer the same story. We will create an AppFooter.vue component inside the "navigation" folder. In the Footer, we will have 2 sections, the top that will show links to different information related to our store and the bottom with the famous phrase "All rights reserved".
<template>
<footer class="footer">
<section class="footer__top">
<nav class="footer__top--nav footer__top--nav-left">
<h6>Services</h6>
<ul>
<li>
<NuxtLink to="/" class="footer__top--link">
Shop & Contact
</NuxtLink>
</li>
<li>
<NuxtLink to="/" class="footer__top--link">
Return & Refund
</NuxtLink>
</li>
<li>
<NuxtLink to="/" class="footer__top--link">
Online Store
</NuxtLink>
</li>
<li>
<NuxtLink to="/" class="footer__top--link">
Terms & Conditions
</NuxtLink>
</li>
</ul>
</nav>
<nav class="footer__top--nav footer__top--nav-center">
...
</nav>
<nav class="footer__top--nav footer__top--nav-center">
...
</nav>
</section>
<section class="footer__bottom">
<p>© 2024 Sherman CV. All Rights Reserved</p>
</section>
</footer>
</template>
So simple, now we will create a "pages" folder and index.vue that will represent our landing page. In the previous article, we already added our Header and Footer into the default layout, so we are ready to start our project again and check the result. with the command: "npm run dev". I'm pretty sure that you were developing your store with a dev server and have already seen the result but we need some intrigue.
Awesome! We are ready to move, and in the next article, we will put in live our most important pages.
We've made significant progress in our Nuxt.js e-commerce journey by establishing two essential elements: the Header and Footer. These components are essential for both brand identity and user navigation. We're enhancing our platform's professionalism and user experience with a responsive Header and an educational Footer.
Now that our Header and Footer are complete, we can go on to the next phase. In order to achieve our e-commerce objectives, we'll concentrate on making our key pages come to life in the upcoming piece.
If you do not want to wait for the next article from this series and want to move on, you can find the whole list of articles in my web notes.
Also, if you need a source code for this tutorial you can get it here.
Top comments (0)