angular ecommerce project
Introduction:
Welcome to all developers in the AngularThink blog! In today's blog post, we have Got ready to learn the step-by-step process of designing an Angular16, Bootstrap5, eCommerce project for a sports accessories store. Angular16 project having a well-designed and efficient e-commerce website is useful for online businesses. Angular is the most popular JavaScript framework used for offers a powerful and flexible solution for developing angular ecommerce template websites. builds
you can create an impressive online store that attracts customers and build conversions. In this article, we will explore the benefits of using an angular ecommerce template and how it can enhance the performance of your online store.
All developer guide you through developersa templatesa the entire code implementation, ensuring you have a clear understand and how to create a stunning Angular ecommerce Template.
By following our detailed instructions, you'll gain valuable insights into Angular 16, Bootstrap 5, and the world of angular ecommerce template. Whether beginner or an experienced developer, In blog post will you must be knowledge and skills to create an impressive online store for sports accessories.
We providing a comprehensive and easy-to-follow guide with Get ready steps to impliment your creativity and bring your eCommerce ideas to life. Let's go into the exciting world by using angular ecommerce template together!
Keep daily reading for the complete step-by-step process on Angular 16 Bootstrap 5 eCommerce project for a sports accessories store.
Angular e-commerce project Step By Step :
Step 1. Firstly if you already have angular 15 we need a setups,fresh angular 16 setup and for this we need to run the below commands,
> npm uninstall -g @angular/cli
Secondly we should also have latest node version installed on our system:
> npm install -g @angular/cli
> ng new EcomSportTemplet //Create new Angular Project
> cd EcomSportTemplet // Go inside the Angular Project Folder
> ng add @ionic/angular
3.Then we create three or As developer need create components,
> ng g c header
> ng g c footer
> ng g c Home
4. Then we just create code write into Angular16SportsTemplet/src/app/app.component.html:
< app-header >< /app-header >
< app-footer >< /app-footer >
< app-home >< /app-home >
5.angular ecommerce template Then we just need to add below code into header/header.component.html file.
<header class="header" data-header> <div class="container"> <div class="overlay" data-overlay [ngClass]="status ? 'active' : ''"></div> <a href="https://angularthink.blogspot.com/" class="logo"> <img src="assets/images/logo2.svg" width="400" height="80" alt="angularthink logo"> </a> <button class="nav-open-btn" data-nav-open-btn aria-label="Open Menu" (click)="addToggle()"> <ion-icon name="menu-outline"></ion-icon> </button> <nav class="navbar" data-navbar [ngClass]="status ? 'active' : ''"> <button class="nav-close-btn" data-nav-close-btn aria-label="Close Menu" (click)="addToggle()"> <ion-icon name="close-outline"></ion-icon> </button> <a href="https://angularthink.blogspot.com/" class="logo"> <img src="assets/images/logo.svg" width="190" height="50" alt="Footcap logo"> </a> <ul class="navbar-list"> <li class="navbar-item"> <a href="https://angularthink.blogspot.com/" class="navbar-link">Home</a> </li> <li class="navbar-item"> <a href="https://angularthink.blogspot.com/" class="navbar-link">About</a> </li> <li class="navbar-item"> <a href="https://angularthink.blogspot.com/" class="navbar-link">Products</a> </li> <li class="navbar-item"> <a href="https://angularthink.blogspot.com/" class="navbar-link">Shop</a> </li> <li class="navbar-item"> <a href="https://angularthink.blogspot.com/" class="navbar-link">Blog</a> </li> <li class="navbar-item"> <a href="https://angularthink.blogspot.com/" class="navbar-link">Contact</a> </li> </ul> <ul class="nav-action-list"> <li> <button class="nav-action-btn"> <ion-icon name="search-outline" aria-hidden="true"></ion-icon> <span class="nav-action-text">Search</span> </button> </li> <li> <a href="https://angularthink.blogspot.com/" class="nav-action-btn"> <ion-icon name="person-outline" aria-hidden="true"></ion-icon> <span class="nav-action-text">Login / Register</span> </a> </li> <li> <button class="nav-action-btn"> <ion-icon name="heart-outline" aria-hidden="true"></ion-icon> <span class="nav-action-text">Wishlist</span> <data class="nav-action-badge" value="5" aria-hidden="true">1</data> </button> </li> <li> <button class="nav-action-btn"> <ion-icon name="bag-outline" aria-hidden="true"></ion-icon> <data class="nav-action-text" value="318.00">Basket: <strong>$318.00</strong></data> <data class="nav-action-badge" value="4" aria-hidden="true">1</data> </button> </li> </ul> </nav> </div></header>
<header class="header" data-header>
<div class="container">
<div class="overlay" data-overlay [ngClass]="status ? 'active' : ''"></div>
<a href="https://angularthink.blogspot.com/" class="logo">
<img src="assets/images/logo2.svg" width="400" height="80"
alt="angularthink logo">
</a>
<button class="nav-open-btn" data-nav-open-btn aria-label="Open Menu"
(click)="addToggle()">
<ion-icon name="menu-outline"></ion-icon>
</button>
<nav class="navbar" data-navbar [ngClass]="status ? 'active' : ''">
<button class="nav-close-btn" data-nav-close-btn aria-label="Close Menu"
(click)="addToggle()">
<ion-icon name="close-outline"></ion-icon>
</button>
<a href="https://angularthink.blogspot.com/" class="logo">
<img src="assets/images/logo.svg" width="190" height="50"
alt="Footcap logo">
</a>
<ul class="navbar-list">
<li class="navbar-item">
<a href="https://angularthink.blogspot.com/" class="navbar-link">
Home</a>
</li>
<li class="navbar-item">
<a href="https://angularthink.blogspot.com/" class="navbar-link">
About</a>
</li>
<li class="navbar-item">
<a href="https://angularthink.blogspot.com/" class="navbar-link">
Products</a>
</li>
<li class="navbar-item">
<a href="https://angularthink.blogspot.com/" class="navbar-link">
Shop</a>
</li>
<li class="navbar-item">
<a href="https://angularthink.blogspot.com/" class="navbar-link">Blog</a>
</li>
<li class="navbar-item">
<a href="https://angularthink.blogspot.com/" class="navbar-link">Contact</a>
</li>
</ul>
<ul class="nav-action-list">
<li>
<button class="nav-action-btn">
<ion-icon name="search-outline" aria-hidden="true"></ion-icon>
<span class="nav-action-text">Search</span>
</button>
</li>
<li>
<a href="https://angularthink.blogspot.com/" class="nav-action-btn">
<ion-icon name="person-outline" aria-hidden="true"></ion-icon>
<span class="nav-action-text">Login / Register</span>
</a>
</li>
<li>
<button class="nav-action-btn">
<ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
<span class="nav-action-text">Wishlist</span>
<data class="nav-action-badge" value="5" aria-hidden="true">1</data>
</button>
</li>
<li>
<button class="nav-action-btn">
<ion-icon name="bag-outline" aria-hidden="true"></ion-icon>
<data class="nav-action-text" value="318.00">Basket: <strong>$318.00</strong></data>
<data class="nav-action-badge" value="4" aria-hidden="true">1</data>
</button>
</li>
</ul>
</nav>
</div>
</header>
6.Then we just need to add below code into Home/home.component.html file.
<main>
<article>
<!--
- #HERO
-->
<div>
<section class="section hero" style="background-image: url('assets/images/carosoul1.jpg')">
<div class="container">
<h2 class="h1 hero-title">
New Summer <strong>Sports Accesaries Collection</strong>
</h2>
<p class="hero-text">
We Are Angualr Developer Community To Start works TO help Developer As Family.
</p>
<button class="btn btn-primary">
<span>Shop Now</span>
<ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
</button>
</div>
</section>
</div>
<br>
<br>
<section class="section hero" style="background-image: url('assets/images/hero-banner.png')">
<div class="container">
<h2 class="h1 hero-title">
New Summer <strong>Sports Accesaries Collection</strong>
</h2>
<p class="hero-text">
We Are Angualr Developer Community To Start works TO help Developer As Family.
</p>
<button class="btn btn-primary">
<span>Shop Now</span>
<ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
</button>
</div>
</section>
<!--
- #COLLECTION
-->
<section class="section collection">
<div class="container">
<ul class="collection-list has-scrollbar">
<li>
<div class="collection-card" style="background-image: url('assets/images/collection-1.jpg')">
<h3 class="h4 card-title">Men Collections</h3>
<a href="https://angularthink.blogspot.com/" class="btn btn-secondary">
<span>Explore All</span>
<ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
</a>
</div>
</li>
<li>
<div class="collection-card" style="background-image: url('assets/images/collection-2.jpg')">
<h3 class="h4 card-title">Women Collections</h3>
<a href="https://angularthink.blogspot.com/" class="btn btn-secondary">
<span>Explore All</span>
<ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
</a>
</div>
</li>
<li>
<div class="collection-card" style="background-image: url('assets/images/collection-7.jpg')">
<h3 class="h4 card-title">Sports Collections</h3>
<a href="https://angularthink.blogspot.com/" class="btn btn-secondary">
<span>Explore All</span>
<ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
</a>
</div>
</li>
</ul>
</div>
</section>
<!--
- #PRODUCT
-->
<section class="section product">
<div class="container">
<h2 class="h2 section-title">Bestsellers Products</h2>
<ul class="filter-list">
<li>
<button class="filter-btn active">All</button>
</li>
<li>
<button class="filter-btn">Nike</button>
</li>
<li>
<button class="filter-btn">Adidas</button>
</li>
<li>
<button class="filter-btn">Puma</button>
</li>
<li>
<button class="filter-btn">Bata</button>
</li>
<li>
<button class="filter-btn">Apex</button>
</li>
</ul>
<ul class="product-list">
<li class="product-item">
<div class="product-card" tabindex="0">
<figure class="card-banner">
<img src="assets/images/product-1.jpg" width="312" height="350" loading="lazy"
alt="Running Sneaker Shoes" class="image-contain">
<div class="card-badge">New</div>
<ul class="card-action-list">
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-1">
<ion-icon name="cart-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-1">Add to Cart</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-2">
<ion-icon name="heart-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-2">Add to Whishlist</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-3">
<ion-icon name="eye-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-3">Quick View</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-4">
<ion-icon name="repeat-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-4">Compare</div>
</li>
</ul>
</figure>
<div class="card-content">
<div class="card-cat">
<a href="#" class="card-cat-link">Men</a> /
<a href="#" class="card-cat-link">Women</a>
</div>
<h3 class="h3 card-title">
<a href="#">Running Sneaker Shoes</a>
</h3>
<data class="card-price" value="180.85">$180.85</data>
</div>
</div>
</li>
<li class="product-item">
<div class="product-card" tabindex="0">
<figure class="card-banner">
<img src="assets/images/product-2.jpg" width="312" height="350" loading="lazy"
alt="Leather Mens Slipper" class="image-contain">
<ul class="card-action-list">
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-1">
<ion-icon name="cart-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-1">Add to Cart</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-2">
<ion-icon name="heart-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-2">Add to Whishlist</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-3">
<ion-icon name="eye-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-3">Quick View</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-4">
<ion-icon name="repeat-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-4">Compare</div>
</li>
</ul>
</figure>
<div class="card-content">
<div class="card-cat">
<a href="#" class="card-cat-link">Men</a> /
<a href="#" class="card-cat-link">Sports</a>
</div>
<h3 class="h3 card-title">
<a href="#">Leather Mens Slipper</a>
</h3>
<data class="card-price" value="190.85">$190.85</data>
</div>
</div>
</li>
<li class="product-item">
<div class="product-card" tabindex="0">
<figure class="card-banner">
<img src="assets/images/product-3.jpg" width="312" height="350" loading="lazy"
alt="Simple Fabric Shoe" class="image-contain">
<div class="card-badge">New</div>
<ul class="card-action-list">
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-1">
<ion-icon name="cart-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-1">Add to Cart</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-2">
<ion-icon name="heart-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-2">Add to Whishlist</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-3">
<ion-icon name="eye-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-3">Quick View</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-4">
<ion-icon name="repeat-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-4">Compare</div>
</li>
</ul>
</figure>
<div class="card-content">
<div class="card-cat">
<a href="#" class="card-cat-link">Men</a> /
<a href="#" class="card-cat-link">Women</a>
</div>
<h3 class="h3 card-title">
<a href="#">Simple Fabric Shoe</a>
</h3>
<data class="card-price" value="160.85">$160.85</data>
</div>
</div>
</li>
<li class="product-item">
<div class="product-card" tabindex="0">
<figure class="card-banner">
<img src="assets/images/product-4.jpg" width="312" height="350" loading="lazy"
alt="Air Jordan 7 Retro " class="image-contain">
<div class="card-badge"> -25%</div>
<ul class="card-action-list">
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-1">
<ion-icon name="cart-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-1">Add to Cart</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-2">
<ion-icon name="heart-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-2">Add to Whishlist</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-3">
<ion-icon name="eye-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-3">Quick View</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-4">
<ion-icon name="repeat-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-4">Compare</div>
</li>
</ul>
</figure>
<div class="card-content">
<div class="card-cat">
<a href="#" class="card-cat-link">Men</a> /
<a href="#" class="card-cat-link">Sports</a>
</div>
<h3 class="h3 card-title">
<a href="#">Air Jordan 7 Retro </a>
</h3>
<data class="card-price" value="170.85">$170.85 <del>$200.21</del></data>
</div>
</div>
</li>
<li class="product-item">
<div class="product-card" tabindex="0">
<figure class="card-banner">
<img src="assets/images/product-5.jpg" width="312" height="350" loading="lazy"
alt="Nike Air Max 270 SE" class="image-contain">
<div class="card-badge">New</div>
<ul class="card-action-list">
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-1">
<ion-icon name="cart-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-1">Add to Cart</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-2">
<ion-icon name="heart-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-2">Add to Whishlist</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-3">
<ion-icon name="eye-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-3">Quick View</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-4">
<ion-icon name="repeat-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-4">Compare</div>
</li>
</ul>
</figure>
<div class="card-content">
<div class="card-cat">
<a href="#" class="card-cat-link">Men</a> /
<a href="#" class="card-cat-link">Women</a>
</div>
<h3 class="h3 card-title">
<a href="#">Nike Air Max 270 SE</a>
</h3>
<data class="card-price" value="120.85">$120.85</data>
</div>
</div>
</li>
<li class="product-item">
<div class="product-card" tabindex="0">
<figure class="card-banner">
<img src="assets/images/product-6.jpg" width="312" height="350" loading="lazy"
alt="Adidas Sneakers Shoes" class="image-contain">
<ul class="card-action-list">
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-1">
<ion-icon name="cart-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-1">Add to Cart</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-2">
<ion-icon name="heart-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-2">Add to Whishlist</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-3">
<ion-icon name="eye-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-3">Quick View</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-4">
<ion-icon name="repeat-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-4">Compare</div>
</li>
</ul>
</figure>
<div class="card-content">
<div class="card-cat">
<a href="#" class="card-cat-link">Men</a> /
<a href="#" class="card-cat-link">Women</a>
</div>
<h3 class="h3 card-title">
<a href="#">Adidas Sneakers Shoes</a>
</h3>
<data class="card-price" value="100.85">$100.85</data>
</div>
</div>
</li>
<li class="product-item">
<div class="product-card" tabindex="0">
<figure class="card-banner">
<img src="assets/images/product-7.jpg" width="312" height="350" loading="lazy"
alt="Nike Basketball shoes" class="image-contain">
<ul class="card-action-list">
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-1">
<ion-icon name="cart-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-1">Add to Cart</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-2">
<ion-icon name="heart-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-2">Add to Whishlist</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-3">
<ion-icon name="eye-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-3">Quick View</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-4">
<ion-icon name="repeat-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-4">Compare</div>
</li>
</ul>
</figure>
<div class="card-content">
<div class="card-cat">
<a href="#" class="card-cat-link">Men</a> /
<a href="#" class="card-cat-link">Sports</a>
</div>
<h3 class="h3 card-title">
<a href="#">Nike Basketball shoes</a>
</h3>
<data class="card-price" value="120.85">$120.85</data>
</div>
</div>
</li>
<li class="product-item">
<div class="product-card" tabindex="0">
<figure class="card-banner">
<img src="assets/images/product-8.jpg" width="312" height="350" loading="lazy"
alt="Simple Fabric Shoe" class="image-contain">
<ul class="card-action-list">
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-1">
<ion-icon name="cart-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-1">Add to Cart</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-2">
<ion-icon name="heart-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-2">Add to Whishlist</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-3">
<ion-icon name="eye-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-3">Quick View</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-4">
<ion-icon name="repeat-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-4">Compare</div>
</li>
</ul>
</figure>
<div class="card-content">
<div class="card-cat">
<a href="#" class="card-cat-link">Men</a> /
<a href="#" class="card-cat-link">Women</a>
</div>
<h3 class="h3 card-title">
<a href="#">Simple Fabric Shoe</a>
</h3>
<data class="card-price" value="100.85">$100.85</data>
</div>
</div>
</li>
</ul>
</div>
</section>
<!--
- #CTA
-->
<section class="section cta">
<div class="container">
<ul class="cta-list">
<li>
<div class="cta-card" style="background-image: url('assets/images/cta-1.jpg')">
<p class="card-subtitle">Adidas Shoes</p>
<h3 class="h2 card-title">The Summer Sale Off 50%</h3>
<a href="https://angularthink.blogspot.com/" class="btn btn-link">
<span>Shop Now</span>
<ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
</a>
</div>
</li>
<li>
<div class="cta-card" style="background-image: url('assets/images/cta-2.jpg')">
<p class="card-subtitle">Nike Shoes</p>
<h3 class="h2 card-title">Makes Yourself Keep Sporty</h3>
<a href="https://angularthink.blogspot.com/" class="btn btn-link">
<span>Shop Now</span>
<ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
</a>
</div>
</li>
</ul>
</div>
</section>
<!--
- #SPECIAL
-->
<section class="section special">
<div class="container">
<div class="special-banner" style="background-image: url('assets/images/special-banner.jpg')">
<h2 class="h3 banner-title">New Trend Edition</h2>
<a href="#" class="btn btn-link">
<span>Explore All</span>
<ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
</a>
</div>
<div class="special-product">
<h2 class="h2 section-title">
<span class="text">Nike Special</span>
<span class="line"></span>
</h2>
<ul class="has-scrollbar">
<li class="product-item">
<div class="product-card" tabindex="0">
<figure class="card-banner">
<img src="assets/images/product-1.jpg" width="312" height="350" loading="lazy"
alt="Running Sneaker Shoes" class="image-contain">
<div class="card-badge">New</div>
<ul class="card-action-list">
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-1">
<ion-icon name="cart-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-1">Add to Cart</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-2">
<ion-icon name="heart-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-2">Add to Whishlist</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-3">
<ion-icon name="eye-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-3">Quick View</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-4">
<ion-icon name="repeat-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-4">Compare</div>
</li>
</ul>
</figure>
<div class="card-content">
<div class="card-cat">
<a href="#" class="card-cat-link">Men</a> /
<a href="#" class="card-cat-link">Women</a>
</div>
<h3 class="h3 card-title">
<a href="#">Running Sneaker Shoes</a>
</h3>
<data class="card-price" value="180.85">$180.85</data>
</div>
</div>
</li>
<li class="product-item">
<div class="product-card" tabindex="0">
<figure class="card-banner">
<img src="assets/images/product-2.jpg" width="312" height="350" loading="lazy"
alt="Leather Mens Slipper" class="image-contain">
<ul class="card-action-list">
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-1">
<ion-icon name="cart-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-1">Add to Cart</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-2">
<ion-icon name="heart-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-2">Add to Whishlist</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-3">
<ion-icon name="eye-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-3">Quick View</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-4">
<ion-icon name="repeat-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-4">Compare</div>
</li>
</ul>
</figure>
<div class="card-content">
<div class="card-cat">
<a href="#" class="card-cat-link">Men</a> /
<a href="#" class="card-cat-link">Sports</a>
</div>
<h3 class="h3 card-title">
<a href="#">Leather Mens Slipper</a>
</h3>
<data class="card-price" value="190.85">$190.85</data>
</div>
</div>
</li>
<li class="product-item">
<div class="product-card" tabindex="0">
<figure class="card-banner">
<img src="assets/images/product-3.jpg" width="312" height="350" loading="lazy"
alt="Simple Fabric Shoe" class="image-contain">
<div class="card-badge">New</div>
<ul class="card-action-list">
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-1">
<ion-icon name="cart-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-1">Add to Cart</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-2">
<ion-icon name="heart-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-2">Add to Whishlist</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-3">
<ion-icon name="eye-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-3">Quick View</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-4">
<ion-icon name="repeat-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-4">Compare</div>
</li>
</ul>
</figure>
<div class="card-content">
<div class="card-cat">
<a href="#" class="card-cat-link">Men</a> /
<a href="#" class="card-cat-link">Women</a>
</div>
<h3 class="h3 card-title">
<a href="#">Simple Fabric Shoe</a>
</h3>
<data class="card-price" value="160.85">$160.85</data>
</div>
</div>
</li>
<li class="product-item">
<div class="product-card" tabindex="0">
<figure class="card-banner">
<img src="assets/images/product-4.jpg" width="312" height="350" loading="lazy"
alt="Air Jordan 7 Retro " class="image-contain">
<div class="card-badge"> -25%</div>
<ul class="card-action-list">
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-1">
<ion-icon name="cart-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-1">Add to Cart</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-2">
<ion-icon name="heart-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-2">Add to Whishlist</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-3">
<ion-icon name="eye-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-3">Quick View</div>
</li>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-4">
<ion-icon name="repeat-outline"></ion-icon>
</button>
<div class="card-action-tooltip" id="card-label-4">Compare</div>
</li>
</ul>
</figure>
<div class="card-content">
<div class="card-cat">
<a href="#" class="card-cat-link">Men</a> /
<a href="#" class="card-cat-link">Sports</a>
</div>
<h3 class="h3 card-title">
<a href="#">Air Jordan 7 Retro </a>
</h3>
<data class="card-price" value="170.85">$170.85 <del>$200.21</del></data>
</div>
</div>
</li>
</ul>
</div>
</div>
</section>
<!--
- #SERVICE
-->
<section class="section service">
<div class="container">
<ul class="service-list">
<li class="service-item">
<div class="service-card">
<div class="card-icon">
<img src="assets/images/service-1.png" width="53" height="28" loading="lazy" alt="Service icon">
</div>
<div>
<h3 class="h4 card-title">Free Shiping</h3>
<p class="card-text">
All orders over <span>$150</span>
</p>
</div>
</div>
</li>
<li class="service-item">
<div class="service-card">
<div class="card-icon">
<img src="assets/images/service-2.png" width="43" height="35" loading="lazy" alt="Service icon">
</div>
<div>
<h3 class="h4 card-title">Quick Payment</h3>
<p class="card-text">
100% secure payment
</p>
</div>
</div>
</li>
<li class="service-item">
<div class="service-card">
<div class="card-icon">
<img src="assets/images/service-3.png" width="40" height="40" loading="lazy" alt="Service icon">
</div>
<div>
<h3 class="h4 card-title">Free Returns</h3>
<p class="card-text">
Money back in 30 days
</p>
</div>
</div>
</li>
<li class="service-item">
<div class="service-card">
<div class="card-icon">
<img src="assets/images/service-4.png" width="40" height="40" loading="lazy" alt="Service icon">
</div>
<div>
<h3 class="h4 card-title">24/7 Support</h3>
<p class="card-text">
Get Quick Support
</p>
</div>
</div>
</li>
</ul>
</div>
</section>
<!--
- #INSTA POST
-->
<section class="section insta-post">
<ul class="insta-post-list has-scrollbar">
<li class="insta-post-item">
<img src="assets/images/insta-1.jpg" width="100" height="100" loading="lazy" alt="Instagram post"
class="insta-post-banner image-contain">
<a href="https://angularthink.blogspot.com/" class="insta-post-link">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>
<li class="insta-post-item">
<img src="assets/images/insta-2.jpg" width="100" height="100" loading="lazy" alt="Instagram post"
class="insta-post-banner image-contain">
<a href="https://angularthink.blogspot.com/" class="insta-post-link">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>
<li class="insta-post-item">
<img src="assets/images/insta-3.jpg" width="100" height="100" loading="lazy" alt="Instagram post"
class="insta-post-banner image-contain">
<a href="https://angularthink.blogspot.com/" class="insta-post-link">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>
<li class="insta-post-item">
<img src="assets/images/insta-4.jpg" width="100" height="100" loading="lazy" alt="Instagram post"
class="insta-post-banner image-contain">
<a href="https://angularthink.blogspot.com/" class="insta-post-link">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>
<li class="insta-post-item">
<img src="assets/images/insta-5.jpg" width="100" height="100" loading="lazy" alt="Instagram post"
class="insta-post-banner image-contain">
<a href="https://angularthink.blogspot.com/" class="insta-post-link">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>
<li class="insta-post-item">
<img src="assets/images/insta-6.jpg" width="100" height="100" loading="lazy" alt="Instagram post"
class="insta-post-banner image-contain">
<a href="https://angularthink.blogspot.com/" class="insta-post-link">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>
<li class="insta-post-item">
<img src="assets/images/insta-7.jpg" width="100" height="100" loading="lazy" alt="Instagram post"
class="insta-post-banner image-contain">
<a href="https://angularthink.blogspot.com/" class="insta-post-link">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>
<li class="insta-post-item">
<img src="assets/images/insta-8.jpg" width="100" height="100" loading="lazy" alt="Instagram post"
class="insta-post-banner image-contain">
<a href="https://angularthink.blogspot.com/" class="insta-post-link">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>
</ul>
</section>
</article>
</main>
7.Then we just need to add below code into footer/footer.component.html file.
<footer class="footer">
<div class="footer-top section">
<div class="container">
<div class="footer-brand">
<a href="https://angularthink.blogspot.com/" class="logo">
<img src="assets/images/logo2.svg" width="460" height="80" alt="AngularThink logo">
</a>
<ul class="social-list">
<li>
<a href="https://angularthink.blogspot.com/" class="social-link">
<ion-icon name="logo-facebook"></ion-icon>
</a>
</li>
<li>
<a href="https://angularthink.blogspot.com/" class="social-link">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</li>
<li>
<a href="https://angularthink.blogspot.com/" class="social-link">
<ion-icon name="logo-pinterest"></ion-icon>
</a>
</li>
<li>
<a href="https://angularthink.blogspot.com/" class="social-link">
<ion-icon name="logo-linkedin"></ion-icon>
</a>
</li>
</ul>
</div>
<div class="footer-link-box">
<ul class="footer-list">
<li>
<p class="footer-list-title">My Account</p>
</li>
<li>
<a href="#" class="footer-link">
<ion-icon name="chevron-forward-outline"></ion-icon>
<span class="footer-link-text">My Account</span>
</a>
</li>
<li>
<a href="#" class="footer-link">
<ion-icon name="chevron-forward-outline"></ion-icon>
<span class="footer-link-text">View Cart</span>
</a>
</li>
<li>
<a href="#" class="footer-link">
<ion-icon name="chevron-forward-outline"></ion-icon>
<span class="footer-link-text">Wishlist</span>
</a>
</li>
<li>
<a href="#" class="footer-link">
<ion-icon name="chevron-forward-outline"></ion-icon>
<span class="footer-link-text">Compare</span>
</a>
</li>
<li>
<a href="#" class="footer-link">
<ion-icon name="chevron-forward-outline"></ion-icon>
<span class="footer-link-text">New Products</span>
</a>
</li>
</ul>
<div class="footer-list">
<p class="footer-list-title">Opening Time</p>
<table class="footer-table">
<tbody>
<tr class="table-row">
<th class="table-head" scope="row">Mon - Tue:</th>
<td class="table-data">8AM - 10PM</td>
</tr>
<tr class="table-row">
<th class="table-head" scope="row">Wed:</th>
<td class="table-data">8AM - 7PM</td>
</tr>
<tr class="table-row">
<th class="table-head" scope="row">Fri:</th>
<td class="table-data">7AM - 12PM</td>
</tr>
<tr class="table-row">
<th class="table-head" scope="row">Sat:</th>
<td class="table-data">9AM - 8PM</td>
</tr>
<tr class="table-row">
<th class="table-head" scope="row">Sun:</th>
<td class="table-data">Closed</td>
</tr>
</tbody>
</table>
</div>
<div class="footer-list">
<p class="footer-list-title">Newsletter</p>
<p class="newsletter-text">
Authoritatively morph 24/7 potentialities with error-free partnerships.
</p>
<form action="" class="newsletter-form">
<input type="email" name="email" required placeholder="Email Address" class="newsletter-input">
<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<p class="copyright">
© 2023 <a href="https://angularthink.blogspot.com/" class="copyright-link">AngularThink</a>. All Rights Reserved
</p>
</div>
</div>
</footer>
<footer class="footer">
<div class="footer-top section">
<div class="container">
<div class="footer-brand">
<a href="https://angularthink.blogspot.com/" class="logo">
<img src="assets/images/logo2.svg" width="460" height="80" alt="AngularThink logo">
</a>
<ul class="social-list">
<li>
<a href="https://angularthink.blogspot.com/" class="social-link">
<ion-icon name="logo-facebook"></ion-icon>
</a>
</li>
<li>
<a href="https://angularthink.blogspot.com/" class="social-link">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</li>
<li>
<a href="https://angularthink.blogspot.com/" class="social-link">
<ion-icon name="logo-pinterest"></ion-icon>
</a>
</li>
<li>
<a href="https://angularthink.blogspot.com/" class="social-link">
<ion-icon name="logo-linkedin"></ion-icon>
</a>
</li>
</ul>
</div>
<div class="footer-link-box">
<ul class="footer-list">
<li>
<p class="footer-list-title">Contact Us</p>
</li>
<li>
<address class="footer-link">
<ion-icon name="location"></ion-icon>
<span class="footer-link-text">
1266 Aurangabad Maharastra, India
</span>
</address>
</li>
<li>
<a href="tel:+557343673257" class="footer-link">
<ion-icon name="call"></ion-icon>
<span class="footer-link-text">+89755675..</span>
</a>
</li>
<li>
<a href="mailto:footcap@help.com" class="footer-link">
<ion-icon name="mail"></ion-icon>
<span href="https://angularthink.blogspot.com/" class="footer-link-text">angularthink@gmail.com</span>
</a>
</li>
</ul>
<ul class="footer-list">
<li>
<p class="footer-list-title">My Account</p>
</li>
<li>
<a href="#" class="footer-link">
<ion-icon name="chevron-forward-outline"></ion-icon>
<span class="footer-link-text">My Account</span>
</a>
</li>
<li>
<a href="#" class="footer-link">
<ion-icon name="chevron-forward-outline"></ion-icon>
<span class="footer-link-text">View Cart</span>
</a>
</li>
<li>
<a href="#" class="footer-link">
<ion-icon name="chevron-forward-outline"></ion-icon>
<span class="footer-link-text">Wishlist</span>
</a>
</li>
<li>
<a href="#" class="footer-link">
<ion-icon name="chevron-forward-outline"></ion-icon>
<span class="footer-link-text">Compare</span>
</a>
</li>
<li>
<a href="#" class="footer-link">
<ion-icon name="chevron-forward-outline"></ion-icon>
<span class="footer-link-text">New Products</span>
</a>
</li>
</ul>
<div class="footer-list">
<p class="footer-list-title">Opening Time</p>
<table class="footer-table">
<tbody>
<tr class="table-row">
<th class="table-head" scope="row">Mon - Tue:</th>
<td class="table-data">8AM - 10PM</td>
</tr>
<tr class="table-row">
<th class="table-head" scope="row">Wed:</th>
<td class="table-data">8AM - 7PM</td>
</tr>
<tr class="table-row">
<th class="table-head" scope="row">Fri:</th>
<td class="table-data">7AM - 12PM</td>
</tr>
<tr class="table-row">
<th class="table-head" scope="row">Sat:</th>
<td class="table-data">9AM - 8PM</td>
</tr>
<tr class="table-row">
<th class="table-head" scope="row">Sun:</th>
<td class="table-data">Closed</td>
</tr>
</tbody>
</table>
</div>
<div class="footer-list">
<p class="footer-list-title">Newsletter</p>
<p class="newsletter-text">
Authoritatively morph 24/7 pot error-free partnerships.
</p>
<form action="" class="newsletter-form">
<input type="email" name="email" required placeholder="Email Address" class="newsletter-input">
<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<p class="copyright">
© 2023 <a href="https://angularthink.blogspot.com/" class="copyright-link">AngularThink</a>. All Rights Reserved
</p>
</div>
</div>
</footer>
8. Now guys please add the below code inside angularshop/src/index.html file to styles and scripts:
<head>
<link rel="shortcut icon" href="assets/images/logo2/favicon.ico" type="image/x-icon">
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</head
9. Now friends we just need to add below code into header.component.ts file to get mobile button click functionality:
import { Component } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent {
//Sidebar toggle show hide function
status = false;
addToggle()
{
this.status = !this.status;
}
}
10. Style create go to style.css file
You can apply your desired CSS or use a CSS framework like Bootstrap to style your components and make them visually appealing.
Remember to import necessary modules and dependencies as needed throughout the project.
This template provides a foundation for an Angular e-commerce store. From here, you can build upon this structure, add more features, and customize the design to match your requirements for a "Sports Accessories Store".
Remember to import necessary modules and dependencies as needed throughout the project.
This template provides a foundation for an Angular e-commerce store. From here, you can build upon this structure, add more features, and customize the design to match your requirements for a "Sports Accessories Store".
Finally Friends in the end must run > ng serve command into your terminal to run the angular 16 ecommerce project (localhost:4200).
Conclusion:
Today in this blog we learn about step by step how to create angular ecommerce template , All code components file code are with code provide to in this blog .the Angular ecommerce template can serve as a building a high-performance and visually appealing online store for the power of Angular and the convenience of a pre-built template its useful for development of the project, you can save time, enhance user experience, improve website performance.
This Template is fully responsive angular ecommerce template to used any angular ecommerce template website development you're starting a new ecommerce venture or looking to revamp your existing online store, investing in an Angular ecmmerce template is a wise decision that can lead to significant business growth.
I hope in this blog is helpful for Angular developer .
0 Comments