Category: Bootstrap 5

Vue 3 Ecommerce Template Free – Jassa Shop

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Vue 3 Ecommerce Template Free – Jassa Shop.

Guys in this post, we will cover below things in Vue 3 Ecommerce Template Free – Jassa Shop:

Vuejs Bootstrap 5 Responsive Template Creation.
Implement Bootstrap 5 Toggle Navigation in Vue 3 Application.
Implement Bootstrap 5 Carousel Slider in Vue 3 Application.

Ecommerce Template Working in Vuejs

Vue 3 and Bootstrap 5 came and if you are new then you must check below two links:

Friends now I proceed onwards and here is the working code snippet and use this carefully to avoid the mistakes:

1. Firstly friends we need fresh vue 3 setup and for this we need to run below commands . Secondly we should also have latest node version installed on our system. With below we will have bootstrap 5 modules in our Vue 3 application:

npm install -g @vue/cli

vue create vueboot5

cd vueboot5

npm i bootstrap@next

npm i @popperjs/core

npm run serve //http://localhost:8080/

2. Now friends we need to add below code into vueboot5/src/App.vue file to check the final output on browser:

<template>
    <!-- Start Top Nav -->
 <nav class="navbar navbar-expand-lg bg-dark navbar-light d-none d-lg-block" id="templatemo_nav_top">
  <div class="container text-light">
      <div class="w-100 d-flex justify-content-between">
          <div>
              <i class="fa fa-envelope mx-2"></i>
              <a class="navbar-sm-brand text-light text-decoration-none" href="#">info@company.com</a>
              <i class="fa fa-phone mx-2"></i>
              <a class="navbar-sm-brand text-light text-decoration-none" href="#">010-000-0000</a>
          </div>
          <div>
              <a class="text-light" href="#" target="_blank" rel="sponsored"><i class="fab fa-facebook-f fa-sm fa-fw me-2"></i></a>
              <a class="text-light" href="#" target="_blank"><i class="fab fa-instagram fa-sm fa-fw me-2"></i></a>
              <a class="text-light" href="#" target="_blank"><i class="fab fa-twitter fa-sm fa-fw me-2"></i></a>
              <a class="text-light" href="#" target="_blank"><i class="fab fa-linkedin fa-sm fa-fw"></i></a>
          </div>
      </div>
  </div>
</nav>
<!-- Close Top Nav -->


<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-light shadow">
  <div class="container d-flex justify-content-between align-items-center">

      <a class="navbar-brand text-success logo h1 align-self-center" href="#">
          Jassa
      </a>

      <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#templatemo_main_nav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>

      <div class="align-self-center collapse navbar-collapse flex-fill  d-lg-flex justify-content-lg-between" id="templatemo_main_nav">
          <div class="flex-fill">
              <ul class="nav navbar-nav d-flex justify-content-between mx-lg-auto">
                  <li class="nav-item">
                      <a class="nav-link" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">About</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Shop</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Contact</a>
                  </li>
              </ul>
          </div>
          <div class="navbar align-self-center d-flex">
              <div class="d-lg-none flex-sm-fill mt-3 mb-4 col-7 col-sm-auto pr-3">
                  <div class="input-group">
                      <input type="text" class="form-control" id="inputMobileSearch" placeholder="Search ...">
                      <div class="input-group-text">
                          <i class="fa fa-fw fa-search"></i>
                      </div>
                  </div>
              </div>
              <a class="nav-icon d-none d-lg-inline" href="#" data-bs-toggle="modal" data-bs-target="#templatemo_search">
                  <i class="fa fa-fw fa-search text-dark mr-2"></i>
              </a>
              <a class="nav-icon position-relative text-decoration-none" href="#">
                  <i class="fa fa-fw fa-cart-arrow-down text-dark mr-1"></i>
                  <span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark">7</span>
              </a>
              <a class="nav-icon position-relative text-decoration-none" href="#">
                  <i class="fa fa-fw fa-user text-dark mr-3"></i>
                  <span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark">+99</span>
              </a>
          </div>
      </div>

  </div>
</nav>
<!-- Close Header -->

<!-- Modal -->
<div class="modal fade bg-white" id="templatemo_search" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
      <div class="w-100 pt-1 mb-5 text-right">
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form action="" method="get" class="modal-content modal-body border-0 p-0">
          <div class="input-group mb-2">
              <input type="text" class="form-control" id="inputModalSearch" name="q" placeholder="Search ...">
              <button type="submit" class="input-group-text bg-success text-light">
                  <i class="fa fa-fw fa-search text-white"></i>
              </button>
          </div>
      </form>
  </div>
</div>



<!-- Start Banner Hero -->
<div id="template-mo-jassa-hero-carousel" class="carousel slide" data-bs-ride="carousel">
  <ol class="carousel-indicators">
      <li data-bs-target="#template-mo-jassa-hero-carousel" data-bs-slide-to="0" class="active"></li>
      <li data-bs-target="#template-mo-jassa-hero-carousel" data-bs-slide-to="1"></li>
      <li data-bs-target="#template-mo-jassa-hero-carousel" data-bs-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
      <div class="carousel-item active">
          <div class="container">
              <div class="row p-5">
                  <div class="mx-auto col-md-8 col-lg-6 order-lg-last">
                      <img class="img-fluid" src="https://therichpost.com/wp-content/uploads/2021/05/banner_img_01.jpg" alt="">
                  </div>
                  <div class="col-lg-6 mb-0 d-flex align-items-center">
                      <div class="text-align-left align-self-center">
                          <h1 class="h1 text-success"><b>Jassa</b> eCommerce</h1>
                          <h3 class="h2">Lorem Ipsum Lorem Ipsum</h3>
                          <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                            when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                          </p>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="carousel-item">
          <div class="container">
              <div class="row p-5">
                  <div class="mx-auto col-md-8 col-lg-6 order-lg-last">
                      <img class="img-fluid" src="https://therichpost.com/wp-content/uploads/2021/05/banner_img_02.jpg" alt="">
                  </div>
                  <div class="col-lg-6 mb-0 d-flex align-items-center">
                      <div class="text-align-left">
                          <h1 class="h1">Lorem Ipsum</h1>
                          <h3 class="h2">Lorem Ipsum Lorem Ipsum</h3>
                          <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                            when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                          </p>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="carousel-item">
          <div class="container">
              <div class="row p-5">
                  <div class="mx-auto col-md-8 col-lg-6 order-lg-last">
                      <img class="img-fluid" src="https://therichpost.com/wp-content/uploads/2021/05/banner_img_03.jpg" alt="">
                  </div>
                  <div class="col-lg-6 mb-0 d-flex align-items-center">
                      <div class="text-align-left">
                          <h1 class="h1">Lorem Ipsum</h1>
                          <h3 class="h2">Lorem Ipsum Lorem Ipsum </h3>
                          <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                            when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                          </p>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <a class="carousel-control-prev text-decoration-none w-auto ps-3" href="#template-mo-jassa-hero-carousel" role="button" data-bs-slide="prev">
      <i class="fas fa-chevron-left"></i>
  </a>
  <a class="carousel-control-next text-decoration-none w-auto pe-3" href="#template-mo-jassa-hero-carousel" role="button" data-bs-slide="next">
      <i class="fas fa-chevron-right"></i>
  </a>
</div>
<!-- End Banner Hero -->


<!-- Start Categories of The Month -->
<section class="container py-5">
  <div class="row text-center pt-3">
      <div class="col-lg-6 m-auto">
          <h1 class="h1">Categories of The Month</h1>
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          </p>
      </div>
  </div>
  <div class="row">
      <div class="col-12 col-md-4 p-5 mt-3">
          <a href="#"><img src="https://therichpost.com/wp-content/uploads/2021/05/category_img_01.jpg" class="rounded-circle img-fluid border"></a>
          <h5 class="text-center mt-3 mb-3">Watches</h5>
          <p class="text-center"><a class="btn btn-success">Go Shop</a></p>
      </div>
      <div class="col-12 col-md-4 p-5 mt-3">
          <a href="#"><img src="https://therichpost.com/wp-content/uploads/2021/05/category_img_02.jpg" class="rounded-circle img-fluid border"></a>
          <h2 class="h5 text-center mt-3 mb-3">Shoes</h2>
          <p class="text-center"><a class="btn btn-success">Go Shop</a></p>
      </div>
      <div class="col-12 col-md-4 p-5 mt-3">
          <a href="#"><img src="https://therichpost.com/wp-content/uploads/2021/05/category_img_03.jpg" class="rounded-circle img-fluid border"></a>
          <h2 class="h5 text-center mt-3 mb-3">Accessories</h2>
          <p class="text-center"><a class="btn btn-success">Go Shop</a></p>
      </div>
  </div>
</section>
<!-- End Categories of The Month -->


<!-- Start Featured Product -->
<section class="bg-light">
  <div class="container py-5">
      <div class="row text-center py-3">
          <div class="col-lg-6 m-auto">
              <h1 class="h1">Featured Product</h1>
              <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
              </p>
          </div>
      </div>
      <div class="row">
          <div class="col-12 col-md-4 mb-4">
              <div class="card h-100">
                  <a href="#">
                      <img src="https://therichpost.com/wp-content/uploads/2021/05/feature_prod_01.jpg" class="card-img-top" alt="...">
                  </a>
                  <div class="card-body">
                      <ul class="list-unstyled d-flex justify-content-between">
                          <li>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-muted fa fa-star"></i>
                              <i class="text-muted fa fa-star"></i>
                          </li>
                          <li class="text-muted text-right">$240.00</li>
                      </ul>
                      <a href="#" class="h2 text-decoration-none text-dark">Lorem Ipsum</a>
                      <p class="card-text">
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt in culpa qui officia deserunt.
                      </p>
                      <p class="text-muted">Reviews (24)</p>
                  </div>
              </div>
          </div>
          <div class="col-12 col-md-4 mb-4">
              <div class="card h-100">
                  <a href="#">
                      <img src="https://therichpost.com/wp-content/uploads/2021/05/feature_prod_02.jpg" class="card-img-top" alt="...">
                  </a>
                  <div class="card-body">
                      <ul class="list-unstyled d-flex justify-content-between">
                          <li>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-muted fa fa-star"></i>
                              <i class="text-muted fa fa-star"></i>
                          </li>
                          <li class="text-muted text-right">$480.00</li>
                      </ul>
                      <a href="#" class="h2 text-decoration-none text-dark">Lorem Ipsum</a>
                      <p class="card-text">
                        Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum
                      </p>
                      <p class="text-muted">Reviews (48)</p>
                  </div>
              </div>
          </div>
          <div class="col-12 col-md-4 mb-4">
              <div class="card h-100">
                  <a href="#">
                      <img src="https://therichpost.com/wp-content/uploads/2021/05/feature_prod_03.jpg" class="card-img-top" alt="...">
                  </a>
                  <div class="card-body">
                      <ul class="list-unstyled d-flex justify-content-between">
                          <li>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-warning fa fa-star"></i>
                          </li>
                          <li class="text-muted text-right">$360.00</li>
                      </ul>
                      <a href="#" class="h2 text-decoration-none text-dark">Lorem Ipsum</a>
                      <p class="card-text">
                        Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum.
                      </p>
                      <p class="text-muted">Reviews (74)</p>
                  </div>
              </div>
          </div>
      </div>
  </div>
</section>
<!-- End Featured Product -->


<!-- Start Footer -->
<footer class="bg-dark" id="tempaltemo_footer">
  <div class="container">
      <div class="row">

          <div class="col-md-4 pt-5">
              <h2 class="h2 text-success border-bottom pb-3 border-light logo">Jassa Shop</h2>
              <ul class="list-unstyled text-light footer-link-list">
                  <li>
                      <i class="fas fa-map-marker-alt fa-fw"></i>
                      India
                  </li>
                  <li>
                      <i class="fa fa-phone fa-fw"></i>
                      <a class="text-decoration-none" href="#">000-000-0000</a>
                  </li>
                  <li>
                      <i class="fa fa-envelope fa-fw"></i>
                      <a class="text-decoration-none" href="#">info@company.com</a>
                  </li>
              </ul>
          </div>

          <div class="col-md-4 pt-5">
              <h2 class="h2 text-light border-bottom pb-3 border-light">Products</h2>
              <ul class="list-unstyled text-light footer-link-list">
                  <li><a class="text-decoration-none" href="#">Luxury</a></li>
                  <li><a class="text-decoration-none" href="#">Sport Wear</a></li>
                  <li><a class="text-decoration-none" href="#">Men's Shoes</a></li>
                  <li><a class="text-decoration-none" href="#">Women's Shoes</a></li>
                  <li><a class="text-decoration-none" href="#">Popular Dress</a></li>
                  <li><a class="text-decoration-none" href="#">Gym Accessories</a></li>
                  <li><a class="text-decoration-none" href="#">Sport Shoes</a></li>
              </ul>
          </div>

          <div class="col-md-4 pt-5">
              <h2 class="h2 text-light border-bottom pb-3 border-light">Further Info</h2>
              <ul class="list-unstyled text-light footer-link-list">
                  <li><a class="text-decoration-none" href="#">Home</a></li>
                  <li><a class="text-decoration-none" href="#">About Us</a></li>
                  <li><a class="text-decoration-none" href="#">Shop Locations</a></li>
                  <li><a class="text-decoration-none" href="#">FAQs</a></li>
                  <li><a class="text-decoration-none" href="#">Contact</a></li>
              </ul>
          </div>

      </div>

      <div class="row text-light mb-4">
          <div class="col-12 mb-3">
              <div class="w-100 my-3 border-top border-light"></div>
          </div>
          <div class="col-auto me-auto">
              <ul class="list-inline text-left footer-icons">
                  <li class="list-inline-item border border-light rounded-circle text-center">
                      <a class="text-light text-decoration-none" target="_blank" href="#"><i class="fab fa-facebook-f fa-lg fa-fw"></i></a>
                  </li>
                  <li class="list-inline-item border border-light rounded-circle text-center">
                      <a class="text-light text-decoration-none" target="_blank" href="#"><i class="fab fa-instagram fa-lg fa-fw"></i></a>
                  </li>
                  <li class="list-inline-item border border-light rounded-circle text-center">
                      <a class="text-light text-decoration-none" target="_blank" href="#"><i class="fab fa-twitter fa-lg fa-fw"></i></a>
                  </li>
                  <li class="list-inline-item border border-light rounded-circle text-center">
                      <a class="text-light text-decoration-none" target="_blank" href="#"><i class="fab fa-linkedin fa-lg fa-fw"></i></a>
                  </li>
              </ul>
          </div>
          <div class="col-auto">
              <label class="sr-only" for="subscribeEmail">Email address</label>
              <div class="input-group mb-2">
                  <input type="text" class="form-control bg-dark border-light" id="subscribeEmail" placeholder="Email address">
                  <div class="input-group-text btn-success text-light">Subscribe</div>
              </div>
          </div>
      </div>
  </div>

  <div class="w-100 bg-black py-3">
      <div class="container">
          <div class="row pt-2">
              <div class="col-12">
                  <p class="text-left text-light">
                      Copyright &copy; 2021 Company Name 
                      | Designed by <a rel="sponsored" href="#" target="_blank">Jassa</a>
                  </p>
              </div>
          </div>
      </div>
  </div>

</footer>
<!-- End Footer -->
</template>

<script>

//importing bootstrap 5 Modules
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
import "./App.css";

export default {}
</script>

3. Now friends please create new file “App.css” inside vueboot5/src folder and add below code inside it:

body, ul, li, p, a, label, input, div {
    font-family: 'Roboto', sans-serif;
    font-size: 18px !important;
    font-weight: 300 !important;
  }
  .h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 48px !important;
    font-weight: 200 !important;
  }
  .h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 30px !important;
    font-weight: 300;
  }
  .h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 22px !important;
  }
  /* General */
  .logo { font-weight: 500 !important;}
  .text-warning {  color: #ede861 !important;}
  .text-muted { color: #bcbcbc !important;}
  .text-success { color: #59ab6e !important;}
  .text-light { color: #cfd6e1 !important;}
  .bg-dark { background-color: #212934 !important;}
  .bg-light { background-color: #e9eef5 !important;}
  .bg-black { background-color: #1d242d !important;}
  .bg-success { background-color: #59ab6e !important;}
  .btn-success {
    background-color: #59ab6e !important;
    border-color: #56ae6c !important;
  }
  .pagination .page-link:hover {color: #000;}
  .pagination .page-link:hover, .pagination .page-link.active {
    background-color: #69bb7e;
    color: #fff;
  }
  /* Nav */
  #templatemo_nav_top { min-height: 40px;}
  #templatemo_nav_top * { font-size: 12px !important;}
  #templatemo_main_nav a { color: #212934;}
  #templatemo_main_nav a:hover { color: #69bb7e;}
  #templatemo_main_nav .navbar .nav-icon { margin-right: 20px;}
  
  /* Hero Carousel */
  #template-mo-jassa-hero-carousel { background: #efefef !important;}
  /* Accordion */
  .templatemo-accordion a { color: #000;}
  .templatemo-accordion a:hover { color: #333d4a;}
  /* Shop */
  .shop-top-menu a:hover { color: #69bb7e !important;}
  /* Product */
  .product-wap { box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);}
  .product-wap .product-color-dot.color-dot-red { background:#f71515;}
  .product-wap .product-color-dot.color-dot-blue { background:#6db4fe;}
  .product-wap .product-color-dot.color-dot-black { background:#000000;}
  .product-wap .product-color-dot.color-dot-light { background:#e0e0e0;}
  .product-wap .product-color-dot.color-dot-green { background:#0bff7e;}
  .card.product-wap .card .product-overlay {
    background: rgba(0,0,0,.2);
    visibility: hidden;
    opacity: 0;
    transition: .3s;
  }
  .card.product-wap:hover .card .product-overlay {
    visibility: visible;
    opacity: 1;
  }
  .card.product-wap a { color: #000;}
  #carousel-related-product .slick-slide:focus { outline: none !important;}
  #carousel-related-product .slick-dots li button:before {
    font-size: 15px;
    margin-top: 20px;
  }
  /* Brand */
  .brand-img {
    filter: grayscale(100%);
    opacity: 0.5;
    transition: .5s;
  }
  .brand-img:hover {
    filter: grayscale(0%);
    opacity: 1;
  }
  /* Carousel Hero */
  #template-mo-jassa-hero-carousel .carousel-indicators li {
    margin-top: -50px;
    background-color: #59ab6e;
  }
  #template-mo-jassa-hero-carousel .carousel-control-next i,
  #template-mo-jassa-hero-carousel .carousel-control-prev i {
    color: #59ab6e !important;
    font-size: 2.8em !important;
  }
  /* Carousel Brand */
  .tempaltemo-carousel .h1 {
    font-size: .5em !important;
    color: #000 !important;
  }
  /* Services */
  .services-icon-wap {transition: .3s;}
  .services-icon-wap:hover, .services-icon-wap:hover i {color: #fff;}
  .services-icon-wap:hover {background: #69bb7e;}
  /* Contact map */
  .leaflet-control a, .leaflet-control { font-size: 10px !important;}
  .form-control { border: 1px solid #e8e8e8;}
  /* Footer */
  #tempaltemo_footer a { color: #dcdde1;}
  #tempaltemo_footer a:hover { color: #68bb7d;}
  #tempaltemo_footer ul.footer-link-list li { padding-top: 10px;}
  #tempaltemo_footer ul.footer-icons li {
    width: 2.6em;
    height: 2.6em;
    line-height: 2.6em;
  }
  #tempaltemo_footer ul.footer-icons li:hover {
    background-color: #cfd6e1;
    transition: .5s;
  }
  #tempaltemo_footer ul.footer-icons li:hover i {
    color: #212934;
    transition: .5s;
  }
  #tempaltemo_footer .border-light { border-color: #2d343f !important;}
  /*
  // Extra small devices (portrait phones, less than 576px)
  // No media query since this is the default in Bootstrap
  */
  /* Small devices (landscape phones, 576px and up)*/
  .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {
    font-size: 12px !important;
  }
  .product-wap .product-color-dot {
    width: 6px;
    height: 6px;
  }
  
  @media (min-width: 576px) {
    .tempaltemo-carousel .h1 { font-size: 1em !important;}
  }
  
  /*// Medium devices (tablets, 768px and up)*/
  @media (min-width: 768px) {
    #templatemo_main_nav .navbar-nav {max-width: 450px;}
   }
  
  /* Large devices (desktops, 992px and up)*/
  @media (min-width: 992px) {
    #templatemo_main_nav .navbar-nav {max-width: 550px;}
    #template-mo-jassa-hero-carousel .carousel-item {min-height: 30rem !important;}
    .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {font-size: 18px !important;}
    .product-wap .product-color-dot {
      width: 12px;
      height: 12px;
    }
  }
  
  /* Extra large devices (large desktops, 1200px and up)*/
  @media (min-width: 1200px) {}

4. Now friends we need to add below code into vueboot5/public/index.html file for icons:

...
<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;700;900&display=swap">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>

Now we are done friends and If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

May 27, 2021

Angular 12 Ecommerce Template Free – Jassa Shop

Hello friends, welcome back to my blog. Today this blog post I will tell you, Angular 12 Ecommerce Template Free – Jassa Shop.

In this post, guys we will cover below things:

Bootstrap 5 Angular 12 Free Template Creation.
Angular 12 Bootstrap 5 Responsive Navbar.
Bootstrap 5 Carousel Slider in Angular 12.

Angular Bootstrap Responsive Template

Angular12 came and Bootstrap5 also and if you are new then you must check below two links:

Friends now I proceed onwards and here is the working code snippet and please use carefully this to avoid the mistakes:

1. Firstly friends we need fresh angular 12 setup and for this we need to run below commands but if you already have angular 12 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

npm install -g @angular/cli 

ng new angularboot5 //Create new Angular Project

cd angularboot5 // Go inside the Angular Project Folder

2. Now friends we need to run below commands into our project terminal to install bootstrap 5 modules into our angular application:

npm install bootstrap

3. Now friends we just need to add below code into angularboot5/src/app/app.component.html file to get final out on the web browser:

 <!-- Start Top Nav -->
 <nav class="navbar navbar-expand-lg bg-dark navbar-light d-none d-lg-block" id="templatemo_nav_top">
  <div class="container text-light">
      <div class="w-100 d-flex justify-content-between">
          <div>
              <i class="fa fa-envelope mx-2"></i>
              <a class="navbar-sm-brand text-light text-decoration-none" href="#">info@company.com</a>
              <i class="fa fa-phone mx-2"></i>
              <a class="navbar-sm-brand text-light text-decoration-none" href="#">010-000-0000</a>
          </div>
          <div>
              <a class="text-light" href="#" target="_blank" rel="sponsored"><i class="fab fa-facebook-f fa-sm fa-fw me-2"></i></a>
              <a class="text-light" href="#" target="_blank"><i class="fab fa-instagram fa-sm fa-fw me-2"></i></a>
              <a class="text-light" href="#" target="_blank"><i class="fab fa-twitter fa-sm fa-fw me-2"></i></a>
              <a class="text-light" href="#" target="_blank"><i class="fab fa-linkedin fa-sm fa-fw"></i></a>
          </div>
      </div>
  </div>
</nav>
<!-- Close Top Nav -->


<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-light shadow">
  <div class="container d-flex justify-content-between align-items-center">

      <a class="navbar-brand text-success logo h1 align-self-center" href="#">
          Jassa
      </a>

      <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#templatemo_main_nav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>

      <div class="align-self-center collapse navbar-collapse flex-fill  d-lg-flex justify-content-lg-between" id="templatemo_main_nav">
          <div class="flex-fill">
              <ul class="nav navbar-nav d-flex justify-content-between mx-lg-auto">
                  <li class="nav-item">
                      <a class="nav-link" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">About</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Shop</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Contact</a>
                  </li>
              </ul>
          </div>
          <div class="navbar align-self-center d-flex">
              <div class="d-lg-none flex-sm-fill mt-3 mb-4 col-7 col-sm-auto pr-3">
                  <div class="input-group">
                      <input type="text" class="form-control" id="inputMobileSearch" placeholder="Search ...">
                      <div class="input-group-text">
                          <i class="fa fa-fw fa-search"></i>
                      </div>
                  </div>
              </div>
              <a class="nav-icon d-none d-lg-inline" href="#" data-bs-toggle="modal" data-bs-target="#templatemo_search">
                  <i class="fa fa-fw fa-search text-dark mr-2"></i>
              </a>
              <a class="nav-icon position-relative text-decoration-none" href="#">
                  <i class="fa fa-fw fa-cart-arrow-down text-dark mr-1"></i>
                  <span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark">7</span>
              </a>
              <a class="nav-icon position-relative text-decoration-none" href="#">
                  <i class="fa fa-fw fa-user text-dark mr-3"></i>
                  <span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark">+99</span>
              </a>
          </div>
      </div>

  </div>
</nav>
<!-- Close Header -->

<!-- Modal -->
<div class="modal fade bg-white" id="templatemo_search" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
      <div class="w-100 pt-1 mb-5 text-right">
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form action="" method="get" class="modal-content modal-body border-0 p-0">
          <div class="input-group mb-2">
              <input type="text" class="form-control" id="inputModalSearch" name="q" placeholder="Search ...">
              <button type="submit" class="input-group-text bg-success text-light">
                  <i class="fa fa-fw fa-search text-white"></i>
              </button>
          </div>
      </form>
  </div>
</div>



<!-- Start Banner Hero -->
<div id="template-mo-jassa-hero-carousel" class="carousel slide" data-bs-ride="carousel">
  <ol class="carousel-indicators">
      <li data-bs-target="#template-mo-jassa-hero-carousel" data-bs-slide-to="0" class="active"></li>
      <li data-bs-target="#template-mo-jassa-hero-carousel" data-bs-slide-to="1"></li>
      <li data-bs-target="#template-mo-jassa-hero-carousel" data-bs-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
      <div class="carousel-item active">
          <div class="container">
              <div class="row p-5">
                  <div class="mx-auto col-md-8 col-lg-6 order-lg-last">
                      <img class="img-fluid" src="https://therichpost.com/wp-content/uploads/2021/05/banner_img_01.jpg" alt="">
                  </div>
                  <div class="col-lg-6 mb-0 d-flex align-items-center">
                      <div class="text-align-left align-self-center">
                          <h1 class="h1 text-success"><b>Jassa</b> eCommerce</h1>
                          <h3 class="h2">Lorem Ipsum Lorem Ipsum</h3>
                          <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                            when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                          </p>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="carousel-item">
          <div class="container">
              <div class="row p-5">
                  <div class="mx-auto col-md-8 col-lg-6 order-lg-last">
                      <img class="img-fluid" src="https://therichpost.com/wp-content/uploads/2021/05/banner_img_02.jpg" alt="">
                  </div>
                  <div class="col-lg-6 mb-0 d-flex align-items-center">
                      <div class="text-align-left">
                          <h1 class="h1">Lorem Ipsum</h1>
                          <h3 class="h2">Lorem Ipsum Lorem Ipsum</h3>
                          <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                            when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                          </p>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="carousel-item">
          <div class="container">
              <div class="row p-5">
                  <div class="mx-auto col-md-8 col-lg-6 order-lg-last">
                      <img class="img-fluid" src="https://therichpost.com/wp-content/uploads/2021/05/banner_img_03.jpg" alt="">
                  </div>
                  <div class="col-lg-6 mb-0 d-flex align-items-center">
                      <div class="text-align-left">
                          <h1 class="h1">Lorem Ipsum</h1>
                          <h3 class="h2">Lorem Ipsum Lorem Ipsum </h3>
                          <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                            when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                          </p>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <a class="carousel-control-prev text-decoration-none w-auto ps-3" href="#template-mo-jassa-hero-carousel" role="button" data-bs-slide="prev">
      <i class="fas fa-chevron-left"></i>
  </a>
  <a class="carousel-control-next text-decoration-none w-auto pe-3" href="#template-mo-jassa-hero-carousel" role="button" data-bs-slide="next">
      <i class="fas fa-chevron-right"></i>
  </a>
</div>
<!-- End Banner Hero -->


<!-- Start Categories of The Month -->
<section class="container py-5">
  <div class="row text-center pt-3">
      <div class="col-lg-6 m-auto">
          <h1 class="h1">Categories of The Month</h1>
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          </p>
      </div>
  </div>
  <div class="row">
      <div class="col-12 col-md-4 p-5 mt-3">
          <a href="#"><img src="https://therichpost.com/wp-content/uploads/2021/05/category_img_01.jpg" class="rounded-circle img-fluid border"></a>
          <h5 class="text-center mt-3 mb-3">Watches</h5>
          <p class="text-center"><a class="btn btn-success">Go Shop</a></p>
      </div>
      <div class="col-12 col-md-4 p-5 mt-3">
          <a href="#"><img src="https://therichpost.com/wp-content/uploads/2021/05/category_img_02.jpg" class="rounded-circle img-fluid border"></a>
          <h2 class="h5 text-center mt-3 mb-3">Shoes</h2>
          <p class="text-center"><a class="btn btn-success">Go Shop</a></p>
      </div>
      <div class="col-12 col-md-4 p-5 mt-3">
          <a href="#"><img src="https://therichpost.com/wp-content/uploads/2021/05/category_img_03.jpg" class="rounded-circle img-fluid border"></a>
          <h2 class="h5 text-center mt-3 mb-3">Accessories</h2>
          <p class="text-center"><a class="btn btn-success">Go Shop</a></p>
      </div>
  </div>
</section>
<!-- End Categories of The Month -->


<!-- Start Featured Product -->
<section class="bg-light">
  <div class="container py-5">
      <div class="row text-center py-3">
          <div class="col-lg-6 m-auto">
              <h1 class="h1">Featured Product</h1>
              <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
              </p>
          </div>
      </div>
      <div class="row">
          <div class="col-12 col-md-4 mb-4">
              <div class="card h-100">
                  <a href="#">
                      <img src="https://therichpost.com/wp-content/uploads/2021/05/feature_prod_01.jpg" class="card-img-top" alt="...">
                  </a>
                  <div class="card-body">
                      <ul class="list-unstyled d-flex justify-content-between">
                          <li>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-muted fa fa-star"></i>
                              <i class="text-muted fa fa-star"></i>
                          </li>
                          <li class="text-muted text-right">$240.00</li>
                      </ul>
                      <a href="#" class="h2 text-decoration-none text-dark">Lorem Ipsum</a>
                      <p class="card-text">
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt in culpa qui officia deserunt.
                      </p>
                      <p class="text-muted">Reviews (24)</p>
                  </div>
              </div>
          </div>
          <div class="col-12 col-md-4 mb-4">
              <div class="card h-100">
                  <a href="#">
                      <img src="https://therichpost.com/wp-content/uploads/2021/05/feature_prod_02.jpg" class="card-img-top" alt="...">
                  </a>
                  <div class="card-body">
                      <ul class="list-unstyled d-flex justify-content-between">
                          <li>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-muted fa fa-star"></i>
                              <i class="text-muted fa fa-star"></i>
                          </li>
                          <li class="text-muted text-right">$480.00</li>
                      </ul>
                      <a href="#" class="h2 text-decoration-none text-dark">Lorem Ipsum</a>
                      <p class="card-text">
                        Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum
                      </p>
                      <p class="text-muted">Reviews (48)</p>
                  </div>
              </div>
          </div>
          <div class="col-12 col-md-4 mb-4">
              <div class="card h-100">
                  <a href="#">
                      <img src="https://therichpost.com/wp-content/uploads/2021/05/feature_prod_03.jpg" class="card-img-top" alt="...">
                  </a>
                  <div class="card-body">
                      <ul class="list-unstyled d-flex justify-content-between">
                          <li>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-warning fa fa-star"></i>
                          </li>
                          <li class="text-muted text-right">$360.00</li>
                      </ul>
                      <a href="#" class="h2 text-decoration-none text-dark">Lorem Ipsum</a>
                      <p class="card-text">
                        Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum.
                      </p>
                      <p class="text-muted">Reviews (74)</p>
                  </div>
              </div>
          </div>
      </div>
  </div>
</section>
<!-- End Featured Product -->


<!-- Start Footer -->
<footer class="bg-dark" id="tempaltemo_footer">
  <div class="container">
      <div class="row">

          <div class="col-md-4 pt-5">
              <h2 class="h2 text-success border-bottom pb-3 border-light logo">Jassa Shop</h2>
              <ul class="list-unstyled text-light footer-link-list">
                  <li>
                      <i class="fas fa-map-marker-alt fa-fw"></i>
                      India
                  </li>
                  <li>
                      <i class="fa fa-phone fa-fw"></i>
                      <a class="text-decoration-none" href="#">000-000-0000</a>
                  </li>
                  <li>
                      <i class="fa fa-envelope fa-fw"></i>
                      <a class="text-decoration-none" href="#">info@company.com</a>
                  </li>
              </ul>
          </div>

          <div class="col-md-4 pt-5">
              <h2 class="h2 text-light border-bottom pb-3 border-light">Products</h2>
              <ul class="list-unstyled text-light footer-link-list">
                  <li><a class="text-decoration-none" href="#">Luxury</a></li>
                  <li><a class="text-decoration-none" href="#">Sport Wear</a></li>
                  <li><a class="text-decoration-none" href="#">Men's Shoes</a></li>
                  <li><a class="text-decoration-none" href="#">Women's Shoes</a></li>
                  <li><a class="text-decoration-none" href="#">Popular Dress</a></li>
                  <li><a class="text-decoration-none" href="#">Gym Accessories</a></li>
                  <li><a class="text-decoration-none" href="#">Sport Shoes</a></li>
              </ul>
          </div>

          <div class="col-md-4 pt-5">
              <h2 class="h2 text-light border-bottom pb-3 border-light">Further Info</h2>
              <ul class="list-unstyled text-light footer-link-list">
                  <li><a class="text-decoration-none" href="#">Home</a></li>
                  <li><a class="text-decoration-none" href="#">About Us</a></li>
                  <li><a class="text-decoration-none" href="#">Shop Locations</a></li>
                  <li><a class="text-decoration-none" href="#">FAQs</a></li>
                  <li><a class="text-decoration-none" href="#">Contact</a></li>
              </ul>
          </div>

      </div>

      <div class="row text-light mb-4">
          <div class="col-12 mb-3">
              <div class="w-100 my-3 border-top border-light"></div>
          </div>
          <div class="col-auto me-auto">
              <ul class="list-inline text-left footer-icons">
                  <li class="list-inline-item border border-light rounded-circle text-center">
                      <a class="text-light text-decoration-none" target="_blank" href="#"><i class="fab fa-facebook-f fa-lg fa-fw"></i></a>
                  </li>
                  <li class="list-inline-item border border-light rounded-circle text-center">
                      <a class="text-light text-decoration-none" target="_blank" href="#"><i class="fab fa-instagram fa-lg fa-fw"></i></a>
                  </li>
                  <li class="list-inline-item border border-light rounded-circle text-center">
                      <a class="text-light text-decoration-none" target="_blank" href="#"><i class="fab fa-twitter fa-lg fa-fw"></i></a>
                  </li>
                  <li class="list-inline-item border border-light rounded-circle text-center">
                      <a class="text-light text-decoration-none" target="_blank" href="#"><i class="fab fa-linkedin fa-lg fa-fw"></i></a>
                  </li>
              </ul>
          </div>
          <div class="col-auto">
              <label class="sr-only" for="subscribeEmail">Email address</label>
              <div class="input-group mb-2">
                  <input type="text" class="form-control bg-dark border-light" id="subscribeEmail" placeholder="Email address">
                  <div class="input-group-text btn-success text-light">Subscribe</div>
              </div>
          </div>
      </div>
  </div>

  <div class="w-100 bg-black py-3">
      <div class="container">
          <div class="row pt-2">
              <div class="col-12">
                  <p class="text-left text-light">
                      Copyright &copy; 2021 Company Name 
                      | Designed by <a rel="sponsored" href="#" target="_blank">Jassa</a>
                  </p>
              </div>
          </div>
      </div>
  </div>

</footer>
<!-- End Footer -->

4. Now friends we just need to add below code into angularboot5/angular.json file:

"styles": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": [
              ...
               "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]

5. Now friends we just need to add below code into angularboot5/src/app/app.component.css file to add custom styles:

body, ul, li, p, a, label, input, div {
    font-family: 'Roboto', sans-serif;
    font-size: 18px !important;
    font-weight: 300 !important;
  }
  .h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 48px !important;
    font-weight: 200 !important;
  }
  .h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 30px !important;
    font-weight: 300;
  }
  .h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 22px !important;
  }
  /* General */
  .logo { font-weight: 500 !important;}
  .text-warning {  color: #ede861 !important;}
  .text-muted { color: #bcbcbc !important;}
  .text-success { color: #59ab6e !important;}
  .text-light { color: #cfd6e1 !important;}
  .bg-dark { background-color: #212934 !important;}
  .bg-light { background-color: #e9eef5 !important;}
  .bg-black { background-color: #1d242d !important;}
  .bg-success { background-color: #59ab6e !important;}
  .btn-success {
    background-color: #59ab6e !important;
    border-color: #56ae6c !important;
  }
  .pagination .page-link:hover {color: #000;}
  .pagination .page-link:hover, .pagination .page-link.active {
    background-color: #69bb7e;
    color: #fff;
  }
  /* Nav */
  #templatemo_nav_top { min-height: 40px;}
  #templatemo_nav_top * { font-size: 12px !important;}
  #templatemo_main_nav a { color: #212934;}
  #templatemo_main_nav a:hover { color: #69bb7e;}
  #templatemo_main_nav .navbar .nav-icon { margin-right: 20px;}
  
  /* Hero Carousel */
  #template-mo-jassa-hero-carousel { background: #efefef !important;}
  /* Accordion */
  .templatemo-accordion a { color: #000;}
  .templatemo-accordion a:hover { color: #333d4a;}
  /* Shop */
  .shop-top-menu a:hover { color: #69bb7e !important;}
  /* Product */
  .product-wap { box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);}
  .product-wap .product-color-dot.color-dot-red { background:#f71515;}
  .product-wap .product-color-dot.color-dot-blue { background:#6db4fe;}
  .product-wap .product-color-dot.color-dot-black { background:#000000;}
  .product-wap .product-color-dot.color-dot-light { background:#e0e0e0;}
  .product-wap .product-color-dot.color-dot-green { background:#0bff7e;}
  .card.product-wap .card .product-overlay {
    background: rgba(0,0,0,.2);
    visibility: hidden;
    opacity: 0;
    transition: .3s;
  }
  .card.product-wap:hover .card .product-overlay {
    visibility: visible;
    opacity: 1;
  }
  .card.product-wap a { color: #000;}
  #carousel-related-product .slick-slide:focus { outline: none !important;}
  #carousel-related-product .slick-dots li button:before {
    font-size: 15px;
    margin-top: 20px;
  }
  /* Brand */
  .brand-img {
    filter: grayscale(100%);
    opacity: 0.5;
    transition: .5s;
  }
  .brand-img:hover {
    filter: grayscale(0%);
    opacity: 1;
  }
  /* Carousel Hero */
  #template-mo-jassa-hero-carousel .carousel-indicators li {
    margin-top: -50px;
    background-color: #59ab6e;
  }
  #template-mo-jassa-hero-carousel .carousel-control-next i,
  #template-mo-jassa-hero-carousel .carousel-control-prev i {
    color: #59ab6e !important;
    font-size: 2.8em !important;
  }
  /* Carousel Brand */
  .tempaltemo-carousel .h1 {
    font-size: .5em !important;
    color: #000 !important;
  }
  /* Services */
  .services-icon-wap {transition: .3s;}
  .services-icon-wap:hover, .services-icon-wap:hover i {color: #fff;}
  .services-icon-wap:hover {background: #69bb7e;}
  /* Contact map */
  .leaflet-control a, .leaflet-control { font-size: 10px !important;}
  .form-control { border: 1px solid #e8e8e8;}
  /* Footer */
  #tempaltemo_footer a { color: #dcdde1;}
  #tempaltemo_footer a:hover { color: #68bb7d;}
  #tempaltemo_footer ul.footer-link-list li { padding-top: 10px;}
  #tempaltemo_footer ul.footer-icons li {
    width: 2.6em;
    height: 2.6em;
    line-height: 2.6em;
  }
  #tempaltemo_footer ul.footer-icons li:hover {
    background-color: #cfd6e1;
    transition: .5s;
  }
  #tempaltemo_footer ul.footer-icons li:hover i {
    color: #212934;
    transition: .5s;
  }
  #tempaltemo_footer .border-light { border-color: #2d343f !important;}
  /*
  // Extra small devices (portrait phones, less than 576px)
  // No media query since this is the default in Bootstrap
  */
  /* Small devices (landscape phones, 576px and up)*/
  .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {
    font-size: 12px !important;
  }
  .product-wap .product-color-dot {
    width: 6px;
    height: 6px;
  }
  
  @media (min-width: 576px) {
    .tempaltemo-carousel .h1 { font-size: 1em !important;}
  }
  
  /*// Medium devices (tablets, 768px and up)*/
  @media (min-width: 768px) {
    #templatemo_main_nav .navbar-nav {max-width: 450px;}
   }
  
  /* Large devices (desktops, 992px and up)*/
  @media (min-width: 992px) {
    #templatemo_main_nav .navbar-nav {max-width: 550px;}
    #template-mo-jassa-hero-carousel .carousel-item {min-height: 30rem !important;}
    .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {font-size: 18px !important;}
    .product-wap .product-color-dot {
      width: 12px;
      height: 12px;
    }
  }
  
  /* Extra large devices (large desktops, 1200px and up)*/
  @media (min-width: 1200px) {}

6. Now friends we just need to add below code into angularboot5/src/index.html file to add fontawesome icons:

<!DOCTYPE html>
<html lang="">
  <head>
   ...
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;700;900&display=swap">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
 
  </head>
...

Friends in the end must run ng serve command into your terminal to run the angular 12 project (localhost:4200).

Guys click here to check the Angular 12 Bootstrap 5 Free Templates.

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

May 26, 2021

Reactjs Bootstrap 5 Ecommerce Testing Project – Part 2 Cart Page

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Reactjs Bootstrap 5 Ecommerce Testing Project – Part 2 Cart Page.

Guy’s before starting this post please check part 1 for basics setup.

Bootstrap 5 Ecommerce Cart Page

For reactjs and bootstrap5 new comers, please check the below links:

Friends now I proceed onwards and here is the working code snippet and please use this carefully to avoid the mistakes:

1. Now guy’s we will create `Cart.js` file inside src/views folder and add below code inside it:

import React from 'react';

class Cart extends React.Component
{
  render()
  {
    return (
        <div className="cart">
         
         <section class="py-5">
                <div class="container px-4 px-lg-5 my-5">
                <div class="row">
                <div class="col-lg-12 p-5 bg-white rounded shadow-sm mb-5">

                   
                    <div class="table-responsive">
                    <table class="table">
                        <thead>
                        <tr>
                            <th scope="col" class="border-0 bg-light">
                            <div class="p-2 px-3 text-uppercase">Product</div>
                            </th>
                            <th scope="col" class="border-0 bg-light">
                            <div class="py-2 text-uppercase">Price</div>
                            </th>
                            <th scope="col" class="border-0 bg-light">
                            <div class="py-2 text-uppercase">Quantity</div>
                            </th>
                            <th scope="col" class="border-0 bg-light">
                            <div class="py-2 text-uppercase">Remove</div>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <th scope="row" class="border-0">
                            <div class="p-2">
                                <img src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="" width="70" class="img-fluid rounded shadow-sm" />
                                <div class="ms-3 d-inline-block align-middle">
                                <h5 class="mb-0"> <a href="#" class="text-dark d-inline-block align-middle">Product 1</a></h5>
                                </div>
                            </div>
                            </th>
                            <td class="border-0 align-middle"><strong>$79.00</strong></td>
                            <td class="border-0 align-middle"><strong>3</strong></td>
                            <td class="border-0 align-middle"><a href="#" class="text-dark"><i class="bi bi-trash"></i></a></td>
                        </tr>
                        <tr>
                            <th scope="row">
                            <div class="p-2">
                                <img src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="" width="70" class="img-fluid rounded shadow-sm" />
                                <div class="ms-3 d-inline-block align-middle">
                                <h5 class="mb-0"><a href="#" class="text-dark d-inline-block">Product 2</a></h5>
                                </div>
                            </div>
                            </th>
                            <td class="align-middle"><strong>$79.00</strong></td>
                            <td class="align-middle"><strong>3</strong></td>
                            <td class="align-middle"><a href="#" class="text-dark"><i class="bi bi-trash"></i></a>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">
                            <div class="p-2">
                                <img src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="" width="70" class="img-fluid rounded shadow-sm" />
                                <div class="ms-3 d-inline-block align-middle">
                                <h5 class="mb-0"> <a href="#" class="text-dark d-inline-block">Product 3</a></h5>
                                </div>
                            </div>
                            </th>
                            <td class="align-middle"><strong>$79.00</strong></td>
                            <td class="align-middle"><strong>3</strong></td>
                            <td class="align-middle"><a href="#" class="text-dark"><i class="bi bi-trash"></i></a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    </div>
                   
                </div>
                </div>

                <div class="row py-5 p-4 bg-white rounded shadow-sm">
                <div class="col-lg-6">
                    <div class="bg-light rounded-pill px-4 py-3 text-uppercase fw-bold">Coupon code</div>
                    <div class="p-4">
                    <p class="mb-4"><em>If you have a coupon code, please enter it in the box below</em></p>
                    <div class="input-group mb-4 border rounded-pill p-2">
                        <input type="text" placeholder="Apply coupon" aria-describedby="button-addon3" class="form-control border-0" />
                        <div class="input-group-append border-0">
                        <button id="button-addon3" type="button" class="btn btn-dark px-4 rounded-pill"><i class="fa fa-gift mr-2"></i>Apply coupon</button>
                        </div>
                    </div>
                    </div>
                    <div class="bg-light rounded-pill px-4 py-3 text-uppercase fw-bold">Instructions for seller</div>
                    <div class="p-4">
                    <p class="mb-4"><em>If you have some information for the seller you can leave them in the box below</em></p>
                    <textarea name="" cols="30" rows="2" class="form-control"></textarea>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="bg-light rounded-pill px-4 py-3 text-uppercase fw-bold">Order summary </div>
                    <div class="p-4">
                    <p class="mb-4"><em>Shipping and additional costs are calculated based on values you have entered.</em></p>
                    <ul class="list-unstyled mb-4">
                        <li class="d-flex justify-content-between py-3 border-bottom"><strong class="text-muted">Order Subtotal </strong><strong>$390.00</strong></li>
                        <li class="d-flex justify-content-between py-3 border-bottom"><strong class="text-muted">Shipping and handling</strong><strong>$10.00</strong></li>
                        <li class="d-flex justify-content-between py-3 border-bottom"><strong class="text-muted">Tax</strong><strong>$0.00</strong></li>
                        <li class="d-flex justify-content-between py-3 border-bottom"><strong class="text-muted">Total</strong>
                        <h5 class="fw-bold">$400.00</h5>
                        </li>
                    </ul><a href="#" class="btn btn-dark rounded-pill py-2 d-md-block">Procceed to checkout</a>
                    </div>
                </div>
                </div>

            </div>
            </section>
        </div>
      
    )
  }
}
export default Cart;

2. Guy’s for the main output, we need to add below code into our src/App.js file or if you have fresh setup then you can replace src/App.js file code with below code:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './App.css';
import { BrowserRouter as Router, Route, Link  } from 'react-router-dom'
import Header from './layouts/Header'; //Include Heder
import Footer from './layouts/Footer'; //Include Footer
import Home from './views/Home'; //Iclude Home
import Single from './views/Single'; //Include Single
import Cart from './views/Cart'; //Include Single

function App() {
  return (
    <div className="App">
     
      <Router>
          <Header></Header>
          <Route exact path='/' component={Home} />
          <Route exact path='/home' component={Home} />
          <Route exact path='/singleitem' component={Single} />
          <Route exact path='/cart' component={Cart} />
      </Router>
     <Footer></Footer>
    </div>
  );
}

export default App;

3. Guy’s for some custom styles we will add below code inside src/App.css file:

.home a, .cart a{
  text-decoration: none;
  color: #212529;
}
#inputQuantity{
  max-width: 3rem;
}

4. Now guy’s we need to below code inside src/layouts/Header.js file for cart page linking:

import React from 'react';
import { Link } from 'react-router-dom';
class Header extends React.Component
{
  render()
  {
    return (
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container px-4 px-lg-5">
            <Link class="navbar-brand" to={'/home'}>TheRich Shop</Link>
           
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-4">
                
                    <li class="nav-item"><Link class="nav-link active" to={'/home'}>Home</Link></li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Shop</a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li><a class="dropdown-item"  >All Products</a></li>
                            <li><hr class="dropdown-divider" /></li>
                            <li><a class="dropdown-item" >Popular Items</a></li>
                            <li><a class="dropdown-item"  >New Arrivals</a></li>
                        </ul>
                    </li>
                </ul>
                
                    
                    <Link class="btn btn-outline-dark" to={'/cart'}>
                    <i class="bi-cart-fill me-1"></i>
                    Cart
                    <span class="badge bg-dark text-white ms-1 rounded-pill">0</span>
                    </Link>
               
            </div>
        </div>
      </nav>
      
    )
  }
}
export default Header;

Now we are done friends and in next part we will do checkout page. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

May 26, 2021

Angular 12 Bootstrap 5 Ecommerce Testing Project – Part 3 Cart Page

Hello to all welcome back on my blog therichpost.com. Today in this blog post, I am going to tell you, Angular 12 Bootstrap 5 Ecommerce Testing Project – Part 3 Cart Page.

Guys before starting this please check part 1 and part 2 for basic setup like project setup, bootstrap installation, components building.

Post working information and working video:

In this post, we will make bootstrap 5 responsive cart page.
In next part, we will do checkout page.

Angular Ecommerce Project Cart Page

Guys Angular12 and Bootstrap5 came and if you are new in both or want to learn more about them then please check below tutorial links:

Guy’s here is working code snippet and please follow it carefully to avoid the mistakes:

1. Guy’s very first we need to run below command into our project terminal to generate cart files:

ng g c cart

ng serve --o //run project

2. Now guy’s, now we need to add below code into our angularecom/src/app/app-routing.module.ts file to cart page route:

...
import { CartComponent } from './cart/cart.component';

const routes: Routes = [
    ...
    { path: 'cart', component: CartComponent }
];

3. Now guy’s, now we need to add below code into our angularecom/src/app/header/header.component.html file(check highlighted text) to cart page link:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container px-4 px-lg-5">
        <a class="navbar-brand" [routerLink]="['']" >TheRich Shop</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-4">
                <li class="nav-item"><a class="nav-link active" aria-current="page" [routerLink]="['']" >Home</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Shop</a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" [routerLink]="['']" >All Products</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" [routerLink]="['']" >Popular Items</a></li>
                        <li><a class="dropdown-item" [routerLink]="['']" >New Arrivals</a></li>
                    </ul>
                </li>
            </ul>
           
                <a class="btn btn-outline-dark" [routerLink]="['/cart']">
                    <i class="bi-cart-fill me-1"></i>
                    Cart
                    <span class="badge bg-dark text-white ms-1 rounded-pill">0</span>
                </a>
           
        </div>
    </div>
  </nav>

4. Now guy’s, now we need to add below code into our angularecom/src/app/cart/cart.component.html file:

<section class="py-5">
    <div class="container px-4 px-lg-5 my-5">
    <div class="row">
      <div class="col-lg-12 p-5 bg-white rounded shadow-sm mb-5">

        <!-- Shopping cart table -->
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th scope="col" class="border-0 bg-light">
                  <div class="p-2 px-3 text-uppercase">Product</div>
                </th>
                <th scope="col" class="border-0 bg-light">
                  <div class="py-2 text-uppercase">Price</div>
                </th>
                <th scope="col" class="border-0 bg-light">
                  <div class="py-2 text-uppercase">Quantity</div>
                </th>
                <th scope="col" class="border-0 bg-light">
                  <div class="py-2 text-uppercase">Remove</div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row" class="border-0">
                  <div class="p-2">
                    <img src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="" width="70" class="img-fluid rounded shadow-sm">
                    <div class="ms-3 d-inline-block align-middle">
                      <h5 class="mb-0"> <a href="#" class="text-dark d-inline-block align-middle">Product 1</a></h5>
                    </div>
                  </div>
                </th>
                <td class="border-0 align-middle"><strong>$79.00</strong></td>
                <td class="border-0 align-middle"><strong>3</strong></td>
                <td class="border-0 align-middle"><a href="#" class="text-dark"><i class="bi bi-trash"></i></a></td>
              </tr>
              <tr>
                <th scope="row">
                  <div class="p-2">
                    <img src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="" width="70" class="img-fluid rounded shadow-sm">
                    <div class="ms-3 d-inline-block align-middle">
                      <h5 class="mb-0"><a href="#" class="text-dark d-inline-block">Product 2</a></h5>
                    </div>
                  </div>
                </th>
                <td class="align-middle"><strong>$79.00</strong></td>
                <td class="align-middle"><strong>3</strong></td>
                <td class="align-middle"><a href="#" class="text-dark"><i class="bi bi-trash"></i></a>
                </td>
              </tr>
              <tr>
                <th scope="row">
                  <div class="p-2">
                    <img src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="" width="70" class="img-fluid rounded shadow-sm">
                    <div class="ms-3 d-inline-block align-middle">
                      <h5 class="mb-0"> <a href="#" class="text-dark d-inline-block">Product 3</a></h5>
                    </div>
                  </div></th>
                  <td class="align-middle"><strong>$79.00</strong></td>
                  <td class="align-middle"><strong>3</strong></td>
                  <td class="align-middle"><a href="#" class="text-dark"><i class="bi bi-trash"></i></a>
                  </td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- End -->
      </div>
    </div>

    <div class="row py-5 p-4 bg-white rounded shadow-sm">
      <div class="col-lg-6">
        <div class="bg-light rounded-pill px-4 py-3 text-uppercase fw-bold">Coupon code</div>
        <div class="p-4">
          <p class="mb-4"><em>If you have a coupon code, please enter it in the box below</em></p>
          <div class="input-group mb-4 border rounded-pill p-2">
            <input type="text" placeholder="Apply coupon" aria-describedby="button-addon3" class="form-control border-0">
            <div class="input-group-append border-0">
              <button id="button-addon3" type="button" class="btn btn-dark px-4 rounded-pill"><i class="fa fa-gift mr-2"></i>Apply coupon</button>
            </div>
          </div>
        </div>
        <div class="bg-light rounded-pill px-4 py-3 text-uppercase fw-bold">Instructions for seller</div>
        <div class="p-4">
          <p class="mb-4"><em>If you have some information for the seller you can leave them in the box below</em></p>
          <textarea name="" cols="30" rows="2" class="form-control"></textarea>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="bg-light rounded-pill px-4 py-3 text-uppercase fw-bold">Order summary </div>
        <div class="p-4">
          <p class="mb-4"><em>Shipping and additional costs are calculated based on values you have entered.</em></p>
          <ul class="list-unstyled mb-4">
            <li class="d-flex justify-content-between py-3 border-bottom"><strong class="text-muted">Order Subtotal </strong><strong>$390.00</strong></li>
            <li class="d-flex justify-content-between py-3 border-bottom"><strong class="text-muted">Shipping and handling</strong><strong>$10.00</strong></li>
            <li class="d-flex justify-content-between py-3 border-bottom"><strong class="text-muted">Tax</strong><strong>$0.00</strong></li>
            <li class="d-flex justify-content-between py-3 border-bottom"><strong class="text-muted">Total</strong>
              <h5 class="fw-bold">$400.00</h5>
            </li>
          </ul><a href="#" class="btn btn-dark rounded-pill py-2 d-md-block">Procceed to checkout</a>
        </div>
      </div>
    </div>

  </div>
  </section>

Guy’s in the end please run ng serve command(if forgot) to check the output on browser(localhost:4200) and if you will have any query then feel free to comment below.

Guy’s I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

May 26, 2021

Vue 3 Bootstrap 5 Accordion with Dynamic Items

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Vue 3 Bootstrap 5 Accordion with Dynamic Items.

Guy’s with this post we will learn below things:

Make custom array data in Vue 3.
Generate dynamic content v-for looping.
Generate dynamic ID’s & Classes to html elements in Vue 3.
Bootstrap 5 accordion with dynamic data.

Vuejs Accordion Working with Dynamic Items

Vue 3 and Bootstrap 5 came and if you are new then you must check below two links:

Friends now I proceed onwards and here is the working code snippet and use this carefully to avoid the mistakes:

1. Firstly friends we need fresh vue 3 setup and for this we need to run below commands . Secondly we should also have latest node version installed on our system. With below we will have bootstrap 5 modules in our Vue 3 application:

npm install -g @vue/cli

vue create vueboot5

cd vueboot5

npm i bootstrap

npm i @popperjs/core

npm run serve //http://localhost:8080/

2. Now friends we need to add below code into vueboot5/src/App.vue file to check the final output on browser:

<template>
   <div class="container p-5">
    <div class="accordion" id="accordionExample">
        <div class="accordion-item" v-for="(item, index) in items" :key="item.id">
          <h2 class="accordion-header" :id="'heading'+item">
            <button class="accordion-button" :class="{ 'collapsed': index !== 0 }" type="button" data-bs-toggle="collapse" :data-bs-target="'#collapse'+item" aria-expanded="true" :aria-controls="'collapse'+item">
              Accordion Item {{item}}
            </button>
          </h2>
          <div :id="'collapse'+item" class="accordion-collapse collapse" :class="{ 'show': index === 0 }" :aria-labelledby="'heading'+item" data-bs-parent="#accordionExample">
            <div class="accordion-body">
              <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
            </div>
          </div>
        </div>
       
       
      </div>
     
    </div>
</template>

<script>

//importing bootstrap 5 Modules
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";

export default {
   //Custom array data to make accordion dynamic
   data () {
        return{
          items: [
            'One',
            'Two',
            'Three',
            'Four',
            'Five',
            'Six',
            'Seven',
            'Eight'
          ]
        }
   }
}
</script>

Now we are done friends and If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

May 25, 2021

Reactjs Bootstrap 5 Ecommerce Testing Project – Part 1

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Reactjs Bootstrap 5 Ecommerce Testing Project – Part 1.

Guys with this post we will learn below things:

Routing in Reactjs.
Installation of Bootstrap 5 in Reactjs.
Layout Creation & Importing in Component File.
Views Creations & Linking with Routes.
Bootstrap 5 Responsive Navigation in Reactjs.
In Next Part of this Post, We will get Products from Web API.

Working Video of Ecommerce Project Part 1

**Reactjs Bootstrap Product Single Page**

Reactjs Ecommerce Project Folder Structure — **React Ecommerce Project Folder Structure**

For reactjs and bootstrap5 new comers, please check the below links:

Friends now I proceed onwards and here is the working code snippet and please use this carefully to avoid the mistakes:

1. Firstly, we need fresh reactjs setup, react router, bootstrap 5 and for that, we need to run below commands into out terminal and also we should have latest node version installed on our system:

npx create-react-app reactproject

cd reactproject

npm install react-router-dom

npm install bootstrap@next --save

npm i @popperjs/core 

npm start //For start project

2. Now guy’s we will create `layouts` folder in `src` folder and then we will create `Header.js` file inside src/layouts folder and add below code inside it:

import React from 'react';
import { Link } from 'react-router-dom';
class Header extends React.Component
{
  render()
  {
    return (
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container px-4 px-lg-5">
            <Link class="navbar-brand" to={'/home'}>TheRich Shop</Link>
           
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-4">
                
                    <li class="nav-item"><Link class="nav-link active" to={'/home'}>Home</Link></li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Shop</a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li><a class="dropdown-item"  >All Products</a></li>
                            <li><hr class="dropdown-divider" /></li>
                            <li><a class="dropdown-item" >Popular Items</a></li>
                            <li><a class="dropdown-item"  >New Arrivals</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
      </nav>
      
    )
  }
}
export default Header;

3. Now guy’s we will create `Footer.js` file inside src/layouts folder and add below code inside it:

import React from 'react';

class Footer extends React.Component
{
  render()
  {
    return (
        <footer class="py-5 bg-dark">
            <div class="container"><p class="m-0 text-center text-white">Copyright © Your Website 2021</p></div>
        </footer>
      
    )
  }
}
export default Footer;

4. Now guy’s we will create `views` folder in `src` folder and then we will create `Home.js` file inside src/views folder and add below code inside it:

import React from 'react';
import { Link } from 'react-router-dom';
class Home extends React.Component
{
  render()
  {
    return (
        <div className="home">
            <header class="bg-dark py-5">
                <div class="container px-4 px-lg-5 my-5">
                    <div class="text-center text-white">
                        <h1 class="display-4 fw-bolder"> Reactjs shop in style</h1>
                        <p class="lead fw-normal text-white-50 mb-0">With this shop hompeage template</p>
                    </div>
                </div>
            </header>
           
            <section class="py-5">
                <div class="container px-4 px-lg-5 mt-5">
                    <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
                        <div class="col mb-5">
                            <div class="card h-100">
                              
                                <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="..." />
                             
                                <div class="card-body p-4">
                                    <div class="text-center">
                                       
                                    <Link to={'/singleitem'}><h5 class="fw-bolder">Fancy Product</h5></Link>
                                      
                                        $40.00 - $80.00
                                    </div>
                                </div>
                               
                                <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                    <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
                                </div>
                            </div>
                        </div>
                        <div class="col mb-5">
                            <div class="card h-100">
                              
                                <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="..." />
                             
                                <div class="card-body p-4">
                                    <div class="text-center">
                                       
                                    <Link to={'/singleitem'}><h5 class="fw-bolder">Fancy Product</h5></Link>
                                      
                                        $40.00 - $80.00
                                    </div>
                                </div>
                               
                                <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                    <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
                                </div>
                            </div>
                        </div>
                        <div class="col mb-5">
                            <div class="card h-100">
                              
                                <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="..." />
                             
                                <div class="card-body p-4">
                                    <div class="text-center">
                                       
                                    <Link to={'/singleitem'}><h5 class="fw-bolder">Fancy Product</h5></Link>
                                      
                                        $40.00 - $80.00
                                    </div>
                                </div>
                               
                                <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                    <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
                                </div>
                            </div>
                        </div>
                        <div class="col mb-5">
                            <div class="card h-100">
                              
                                <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="..." />
                             
                                <div class="card-body p-4">
                                    <div class="text-center">
                                       
                                    <Link to={'/singleitem'}><h5 class="fw-bolder">Fancy Product</h5></Link>
                                      
                                        $40.00 - $80.00
                                    </div>
                                </div>
                               
                                <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                    <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
                                </div>
                            </div>
                        </div>
                        <div class="col mb-5">
                            <div class="card h-100">
                              
                                <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="..." />
                             
                                <div class="card-body p-4">
                                    <div class="text-center">
                                       
                                    <Link to={'/singleitem'}><h5 class="fw-bolder">Fancy Product</h5></Link>
                                      
                                        $40.00 - $80.00
                                    </div>
                                </div>
                               
                                <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                    <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
                                </div>
                            </div>
                        </div>
                        <div class="col mb-5">
                            <div class="card h-100">
                              
                                <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="..." />
                             
                                <div class="card-body p-4">
                                    <div class="text-center">
                                       
                                    <Link to={'/singleitem'}><h5 class="fw-bolder">Fancy Product</h5></Link>
                                      
                                        $40.00 - $80.00
                                    </div>
                                </div>
                               
                                <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                    <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
                                </div>
                            </div>
                        </div>
                        <div class="col mb-5">
                            <div class="card h-100">
                              
                                <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="..." />
                             
                                <div class="card-body p-4">
                                    <div class="text-center">
                                       
                                    <Link to={'/singleitem'}><h5 class="fw-bolder">Fancy Product</h5></Link>
                                      
                                        $40.00 - $80.00
                                    </div>
                                </div>
                               
                                <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                    <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
                                </div>
                            </div>
                        </div>
                        <div class="col mb-5">
                            <div class="card h-100">
                              
                                <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="..." />
                             
                                <div class="card-body p-4">
                                    <div class="text-center">
                                       
                                    <Link to={'/singleitem'}><h5 class="fw-bolder">Fancy Product</h5></Link>
                                      
                                        $40.00 - $80.00
                                    </div>
                                </div>
                               
                                <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                    <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
      
    )
  }
}
export default Home;

5. Now guy’s we will create `Single.js` file inside src/views folder and add below code inside it:

import React from 'react';

class Single extends React.Component
{
  render()
  {
    return (
        <div className="single">
         
            <section class="py-5">
                <div class="container px-4 px-lg-5 my-5">
                    <div class="row gx-4 gx-lg-5 align-items-center">
                        <div class="col-md-6"><img class="card-img-top mb-5 mb-md-0" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage600x700.jpg" alt="..." /></div>
                        <div class="col-md-6">
                            <div class="small mb-1">SKU: BST-498</div>
                            <h1 class="display-5 fw-bolder">Shop item template</h1>
                            <div class="fs-5 mb-5">
                                <span class="text-decoration-line-through">$45.00</span>
                                <span>$40.00</span>
                            </div>
                            <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorem quidem modi. Nam sequi consequatur obcaecati excepturi alias magni, accusamus eius blanditiis delectus ipsam minima ea iste laborum vero?</p>
                            <div class="d-flex">
                                <input class="form-control text-center me-3" id="inputQuantity" type="num" value="1" />
                                <button class="btn btn-outline-dark flex-shrink-0" type="button">
                                    <i class="bi-cart-fill me-1"></i>
                                    Add to cart
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <section class="py-5 bg-light">
                <div class="container px-4 px-lg-5 mt-5">
                    <h2 class="fw-bolder mb-4">Related products</h2>
                    <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
                        <div class="col mb-5">
                            <div class="card h-100">
                               
                                <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="..." />
                               
                                <div class="card-body p-4">
                                    <div class="text-center">
                                       
                                        <a  ><h5 class="fw-bolder">Fancy Product</h5></a>
                                        
                                        $40.00 - $80.00
                                    </div>
                                </div>
                               
                                <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                    <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
                                </div>
                            </div>
                        </div>
                        <div class="col mb-5">
                            <div class="card h-100">
                               
                                <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="..." />
                               
                                <div class="card-body p-4">
                                    <div class="text-center">
                                       
                                        <a  ><h5 class="fw-bolder">Fancy Product</h5></a>
                                        
                                        $40.00 - $80.00
                                    </div>
                                </div>
                               
                                <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                    <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
                                </div>
                            </div>
                        </div>
                        <div class="col mb-5">
                            <div class="card h-100">
                               
                                <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="..." />
                               
                                <div class="card-body p-4">
                                    <div class="text-center">
                                       
                                        <a  ><h5 class="fw-bolder">Fancy Product</h5></a>
                                        
                                        $40.00 - $80.00
                                    </div>
                                </div>
                               
                                <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                    <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
                                </div>
                            </div>
                        </div>
                        <div class="col mb-5">
                            <div class="card h-100">
                               
                                <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="..." />
                               
                                <div class="card-body p-4">
                                    <div class="text-center">
                                       
                                        <a  ><h5 class="fw-bolder">Fancy Product</h5></a>
                                        
                                        $40.00 - $80.00
                                    </div>
                                </div>
                               
                                <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                    <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
      
    )
  }
}
export default Single;

6. Finally for the main output, we need to add below code into our src/App.js file or if you have fresh setup then you can replace src/App.js file code with below code:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './App.css';
import { BrowserRouter as Router, Route, Link  } from 'react-router-dom'
import Header from './layouts/Header'; //Include Heder
import Footer from './layouts/Footer'; //Include Footer
import Home from './views/Home'; //Include Home
import Single from './views/Single'; //Include Single

function App() {
  return (
    <div className="App">
     
      <Router>
          <Header></Header>
          <Route exact path='/' component={Home} />
          <Route exact path='/home' component={Home} />
          <Route exact path='/singleitem' component={Single} />
       
      </Router>
     <Footer></Footer>
    </div>
  );
}

export default App;

7. Guy’s for some custom styles we will add below code inside src/App.css file:

.home a{
  text-decoration: none;
  color: #212529;
}
#inputQuantity{
  max-width: 3rem;
}

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

May 24, 2021

Vue 3 Routing Working Example

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Vue 3 Routing Working Example.

Guy’s this post will be very helpful for the beginners. With this post we will learn how to create components layout files(header, footer), view files(home, about). Linking components to routes path. This will also help for making well structure project. Also I have used Bootstrap 5 for responsiveness and good looks.

Vue Routing Working Video

Vuejs folder structure — **For better understanding please see this folder structure**

Vue3 and Bootstrap 5 came and if you are new then you must check below two links:

Friends now I proceed onwards and here is the working code snippet and use this carefully to avoid the mistakes:

1. Firstly friends we need fresh vue 3 setup and for this we need to run below commands . Secondly we should also have latest node version installed on our system. With below we will have vue router, bootstrap 5(optional, if you don’t want then you can skip this) modules in our Vue 3 application:

npm install -g @vue/cli

vue create vuerouting

cd vuerouting

npm i vue-router@next

npm i bootstrap@next

npm i @popperjs/core

npm run serve //http://localhost:8080/

2. Now friends we need to create new file `Header.vue` inside src/components folder and add below code inside it, in this I am calling the router links which will navigate to views:

<template>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container px-4 px-lg-5">
      <router-link class="navbar-brand" to="/">TheRich Shop</router-link>
      
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-4">
               
                <li class="nav-item"><router-link class="nav-link active" to="/">Home</router-link></li>
                 <li class="nav-item"><router-link class="nav-link" to="/about">About</router-link></li>
             
            </ul>
           
        </div>
    </div>
  </nav>
</template>

3. Now friends we need to create new file `Footer.vue` inside src/components folder and add below code inside it:

<template>
    <div class="container-fluid text-center bg-light p-5 fixed-bottom">
    <p>Footer</p>
</div>
</template>

4. Now friends we need to create new folder `views` inside `src` folder and after it create new file `Home.vue` inside src/views folder and add below code inside it:

<template>
  <h1>Home Page</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
</template>

5. Now friends we need to create new file `About.vue` inside src/views folder and add below code inside it:

<template>
  <h1>About Page</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
      
</template>

6. Now friends we need to create new folder `router` inside `src` folder and after it create new file `index.js` inside src/router folder and add below code inside it:

import { createWebHistory, createRouter } from "vue-router";
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

7. Now friends we need to add below code inside src/main.js file to call the routing:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

8. Now friends we need to add below code into src/App.vue file to check the final output on browser:

<template>
   <Header></Header>
   <div class="container p-5">
    <router-view />
    </div>
    <Footer></Footer>
</template>

<script>

//importing bootstrap 5 Modules
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
import Header from './components/Header'
import Footer from './components/Footer'
export default {
  
components: {
    Header,
    Footer
  }
}
</script>

Now we are done friends and If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks.

May 24, 2021

Angular 12 Bootstrap 5 Ecommerce Testing Project – Part 2

Hello to all welcome back on my blog therichpost.com. Today in this blog post, I am going to tell you Angular 12 Bootstrap 5 Ecommerce Testing Project – Part 2.

Guys before starting this please check part 1 for basic setup like project setup, bootstrap installation, components building.

Post working information and working video:

In this post we will get products from web api and guys you can also use this web api into your demo projects.
We will do Angular 12 dynamic routing based upon ID for single product page.
Angular ngFor with items slicing for realted product section.
In next part we will do add to cart functionality.

Angular Ecommerce Project Working Video

Angular Bootstrap Product Single Page Dynamically — **Bootstrap Angular Product Single Page Dynamically**

Guys Angular12 and Bootstrap5 came and if you are new in both or want to learn more about them then please check below tutorial links:

Guy’s here is working code snippet and please follow it carefully to avoid the mistakes:

1. Now guy’s, now we need to add or replace below code into our angularecom/src/app/app-routing.module.ts file to make single item route dynamic:

...
const routes: Routes = [
    //Dynamic item page route
    { path: 'item-page/:id', component: SingleitemComponent }
];
...

2. Now guy’s, now we need to add below code into our angularecom/src/app/app-module.ts file:

...
import { HttpClientModule } from '@angular/common/http';

...
@NgModule({
  ...
  imports: [
   ...
    HttpClientModule
  ],

3. Now guys, now we need to add below code into our angularecom/src/app/home/home.component.ts file to make request for getting api data:

...
import { HttpClient } from '@angular/common/http';

export class HomeComponent implements OnInit {
  ...
  products : any;
  constructor(private http: HttpClient){
    //get request
     this.http.get('https://www.testjsonapi.com/products/').subscribe(data => {
       //data storing for use in html component
       this.products = data;
           }, error => console.error(error));
 } 

 

}

4. Now guys, now we need to add below code into our angularecom/src/app/home/home.component.html file:

<header class="bg-dark py-5">
    <div class="container px-4 px-lg-5 my-5">
        <div class="text-center text-white">
            <h1 class="display-4 fw-bolder">Shop in style</h1>
            <p class="lead fw-normal text-white-50 mb-0">With this shop hompeage template</p>
        </div>
    </div>
  </header>
<!--main page-->
<section class="py-5">
    <div class="container px-4 px-lg-5 mt-5">
        <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">

            <!-- Angular ngFor loop for getting dynamic data in looping -->
            <div class="col mb-5" *ngFor="let data of products">
                <div class="card h-100">
                    <!-- Product image-->
                    <img class="card-img-top" src={{data.product_image}} alt={{data.product_title}}>
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name with dynamic route linking-->
                            <a routerLink="/item-page/{{data.id}}"><h5 class="fw-bolder">{{data.product_title}}</h5></a>
                            <!-- Product price-->
                            {{data.product_price}}
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </section>

5. Now guys, now we need to add below code into our angularecom/src/app/singleitem/singleitem.component.ts file. In this we will get dynamic ID and show single item accoding to that ID:

...
import {Router, ActivatedRoute, Params} from '@angular/router'; //ActivatedRoute module to get dynamicid from route
import { HttpClient } from '@angular/common/http';

export class SingleitemComponent implements OnInit {
  ...
  id:any;
  product:any;
  products:any;

  constructor(private activatedRoute: ActivatedRoute, private http: HttpClient) {

    //getting and storing dynamic ID
    this.id = this.activatedRoute.snapshot.paramMap.get('id');

    //Single Product WEB API
    this.http.get('https://www.testjsonapi.com/product/'+this.id).subscribe(data => {
      //data storing for use in html component
      this.product = data;
          }, error => console.error(error));
    
  }

  ngOnInit(): void {
    //get request for all the products for realted product section.
    this.http.get('https://www.testjsonapi.com/products/').subscribe(data => {
      //data storing for use in html component
      this.products = data;
          }, error => console.error(error));

     
  }

}

6. Now guys, now we need to add below code into our angularecom/src/app/singleitem/singleitem.component.html file:

<!--single page-->
<section class="py-5">
    <div class="container px-4 px-lg-5 my-5">
        <div class="row gx-4 gx-lg-5 align-items-center">
            <div class="col-md-6"><img class="card-img-top mb-5 mb-md-0" src={{product?.product_image}} alt={{product?.product_title}}></div>
            <div class="col-md-6">
                <div class="small mb-1">SKU: BST-498</div>
                <h1 class="display-5 fw-bolder">{{product?.product_title}}</h1>
                <div class="fs-5 mb-5">
                  
                    <span>{{product?.product_price}}</span>
                </div>
                <p class="lead">{{product?.product_description}}</p>
                <div class="d-flex">
                    <input class="form-control text-center me-3" id="inputQuantity" type="num" value="1" style="max-width: 3rem">
                    <button class="btn btn-outline-dark flex-shrink-0" type="button">
                        <i class="bi-cart-fill me-1"></i>
                        Add to cart
                    </button>
                </div>
            </div>
        </div>
    </div>
  </section>
  

  <!-- Realted Product Section -->
  <section class="py-5 bg-light">
    <div class="container px-4 px-lg-5 mt-5">
        <h2 class="fw-bolder mb-4">Related products</h2>
        <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">

            <!-- Products looping and Slice code show only 4 products -->
            <div class="col mb-5" *ngFor="let data of products | slice:0:4 ">
                <div class="card h-100">
                    <!-- Product image-->
                    <img class="card-img-top" src={{data.product_image}} alt={{data.product_title}}>
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <h5 class="fw-bolder">{{data.product_title}}</h5>
                            <!-- Product price-->
                            {{data.product_price}}
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </section>

Guy’s in the end please run ng serve command to check the out on browser(localhost:4200) and if you will have any query then feel free to comment below.

Guy’s I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

May 24, 2021

Angular 12 Bootstrap 5 Carousel Slider Working with Dynamic Data
Hello friends, welcome back to my blog. Today in this blog post will tell you, Angular 12 Bootstrap 5 Carousel Slider Working with Dynamic Data.

Carousel Slider With Dynamic Items Working

Angular 12 Bootstrap 5 Carousel Slider Working with Dynamic Data

Angular12 came and Bootstrap 5 also and if you are new then you must check below two links:
1. Angular12 Basic Tutorials
2. Bootstrap 5
Friends now I proceed onwards and here is the working code snippet and please use carefully this to avoid the mistakes:

1. Firstly friends we need fresh angular 12 setup and for this we need to run below commands but if you already have angular 12 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:
```
npm install -g @angular/cli 

ng new angularboot5 //Create new Angular Project

cd angularboot5 // Go inside the Angular Project Folder
```
2. Now friends we need to run below command into our project terminal to install bootstrap 5 modules into our angular 12 application:
```
npm install bootstrap
```
3. Now friends we just need to add below code into angulardir/angular.json file:
```
"styles": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": [
              ...
               "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]
```
4. Now guy’s we need to run below command to start our angular 12 application:
```
ng srve --o
```
5. Now friends we just need to add below code into angularboot5/src/app/app.component.ts file for demo query data:
```
...
export class AppComponent {
  ...

  //Domo data slider
 data = [
    { img: "https://therichpost.com/wp-content/uploads/2021/05/bootstrap5-carousel-slider-img1.jpg", title: "Slide 1" },
    { img: "https://therichpost.com/wp-content/uploads/2021/05/bootstrap5-carousel-slider-img2.jpg", title: "Slide 2" },
    { img: "https://therichpost.com/wp-content/uploads/2021/05/bootstrap5-carousel-slider-img3.jpg", title: "Slide 3" }
  ];
}
```
6. Now friends we just need to add below code into angularboot5/src/app/app.component.html file:
```
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">

      
      <div class="carousel-item" *ngFor="let result of data; let i = index" [ngClass]="{'active': i === 1}">
       <img src={{result.img}} title={{result.title}} />
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
```
Friends in the end must run ng serve command (If forgot) into your terminal to run the angular 12 project(localhost:4200).

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks
May 23, 2021

Reactjs Data Binding Working Example

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Reactjs Data Binding Working Example.

Guys in this working post, I am binding two select inputs. for proper understanding please check this video first.

React Data Binding

For reactjs new comers, please check the below link:

Reactjs Basic Tutorials

Bootstrap 5 Tutorials

Friends now I proceed onwards and here is the working code snippet and please use this carefully to avoid the mistakes:

1. Firstly, we need fresh reactjs setup and for that, we need to run below commands into out terminal and also we should have latest node version installed on our system:

npx create-react-app reacttricks

cd reacttricks

2. Now we need to run below commands into our project terminal to get bootstrap(optional, I am using to make application looks good) and related modules into our reactjs application:

npm install bootstrap --save

npm start //For start project

3. Finally for the main output, we need to add below code into our reacttricks/src/App.js file or if you have fresh setup then you can replace reacttricks/src/App.js file code with below code:

import React from 'react';

import "./App.css";
class App extends React.Component {
  constructor() {
    super();
    this.state = { value: 10 };
  }

  //select onchange event to get and set value
  handleChange = (e) => {
    this.setState({ value: e.target.value });
  };
  render() {
    return (
      <div className="container p-5">
       <h1 className="mb-4">therichpost.com</h1>
       <div class="mb-3">
         <label class="form-label">Grade</label>
           <select id="grade" value={this.state.value}
             onChange={this.handleChange} class="form-select mb-5">
                <option value="select Grade">  Select Grade  </option>
                <option value="10">O</option>
                <option value="9">A+</option>
                <option value="8">A</option>
                <option value="7">B+</option>
                <option value="6">B</option>
                <option value="0">RA</option>
            </select>
      </div>

      <div class="mb-3">
         <label class="form-label">Credit</label>
          <select id="credit" value={this.state.value} class="form-select">
                    <option disabled={this.state.value != "select Grade" ? true : false} value="select Credit">  Select Credit  </option>
                    <option disabled={this.state.value != 10 ? true : false} value="10">10</option>
                    <option disabled={this.state.value != 9 ? true : false} value="9">9</option>
                    <option disabled={this.state.value != 8 ? true : false} value="8">8</option>
                    <option disabled={this.state.value != 7 ? true : false} value="7">7</option>
                    <option disabled={this.state.value != 6 ? true : false} value="6">6</option>
                    <option disabled={this.state.value != 0 ? true : false} value="0">0</option>
          </select>  
      </div>   
      
      </div>
    );
  }
}

export default App;

4. Guys now we need to add below code into our reacttricks/src/App.css file to set custom styles:

#credit option:disabled{
    display: none;
}

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

May 22, 2021

Category: Bootstrap 5

1. Firstly friends we need fresh vue 3 setup and for this we need to run below commands . Secondly we should also have latest node version installed on our system. With below we will have bootstrap 5 modules in our Vue 3 application:

2. Now friends we need to add below code into vueboot5/src/App.vue file to check the final output on browser:

3. Now friends please create new file “App.css” inside vueboot5/src folder and add below code inside it:

4. Now friends we need to add below code into vueboot5/public/index.html file for icons:

1. Firstly friends we need fresh angular 12 setup and for this we need to run below commands but if you already have angular 12 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

2. Now friends we need to run below commands into our project terminal to install bootstrap 5 modules into our angular application:

3. Now friends we just need to add below code into angularboot5/src/app/app.component.html file to get final out on the web browser:

4. Now friends we just need to add below code into angularboot5/angular.json file:

5. Now friends we just need to add below code into angularboot5/src/app/app.component.css file to add custom styles:

6. Now friends we just need to add below code into angularboot5/src/index.html file to add fontawesome icons:

1. Now guy’s we will create `Cart.js` file inside src/views folder and add below code inside it:

2. Guy’s for the main output, we need to add below code into our src/App.js file or if you have fresh setup then you can replace src/App.js file code with below code:

3. Guy’s for some custom styles we will add below code inside src/App.css file:

4. Now guy’s we need to below code inside src/layouts/Header.js file for cart page linking:

1. Guy’s very first we need to run below command into our project terminal to generate cart files:

2. Now guy’s, now we need to add below code into our angularecom/src/app/app-routing.module.ts file to cart page route:

3. Now guy’s, now we need to add below code into our angularecom/src/app/header/header.component.html file(check highlighted text) to cart page link:

4. Now guy’s, now we need to add below code into our angularecom/src/app/cart/cart.component.html file:

1. Firstly friends we need fresh vue 3 setup and for this we need to run below commands . Secondly we should also have latest node version installed on our system. With below we will have bootstrap 5 modules in our Vue 3 application:

2. Now friends we need to add below code into vueboot5/src/App.vue file to check the final output on browser:

1. Firstly, we need fresh reactjs setup, react router, bootstrap 5 and for that, we need to run below commands into out terminal and also we should have latest node version installed on our system:

2. Now guy’s we will create `layouts` folder in `src` folder and then we will create `Header.js` file inside src/layouts folder and add below code inside it:

3. Now guy’s we will create `Footer.js` file inside src/layouts folder and add below code inside it:

4. Now guy’s we will create `views` folder in `src` folder and then we will create `Home.js` file inside src/views folder and add below code inside it:

5. Now guy’s we will create `Single.js` file inside src/views folder and add below code inside it:

6. Finally for the main output, we need to add below code into our src/App.js file or if you have fresh setup then you can replace src/App.js file code with below code:

7. Guy’s for some custom styles we will add below code inside src/App.css file:

1. Firstly friends we need fresh vue 3 setup and for this we need to run below commands . Secondly we should also have latest node version installed on our system. With below we will have vue router, bootstrap 5(optional, if you don’t want then you can skip this) modules in our Vue 3 application:

2. Now friends we need to create new file `Header.vue` inside src/components folder and add below code inside it, in this I am calling the router links which will navigate to views:

3. Now friends we need to create new file `Footer.vue` inside src/components folder and add below code inside it:

4. Now friends we need to create new folder `views` inside `src` folder and after it create new file `Home.vue` inside src/views folder and add below code inside it:

5. Now friends we need to create new file `About.vue` inside src/views folder and add below code inside it:

6. Now friends we need to create new folder `router` inside `src` folder and after it create new file `index.js` inside src/router folder and add below code inside it:

7. Now friends we need to add below code inside src/main.js file to call the routing:

8. Now friends we need to add below code into src/App.vue file to check the final output on browser:

1. Now guy’s, now we need to add or replace below code into our angularecom/src/app/app-routing.module.ts file to make single item route dynamic:

2. Now guy’s, now we need to add below code into our angularecom/src/app/app-module.ts file:

3. Now guys, now we need to add below code into our angularecom/src/app/home/home.component.ts file to make request for getting api data:

4. Now guys, now we need to add below code into our angularecom/src/app/home/home.component.html file:

5. Now guys, now we need to add below code into our angularecom/src/app/singleitem/singleitem.component.ts file. In this we will get dynamic ID and show single item accoding to that ID:

6. Now guys, now we need to add below code into our angularecom/src/app/singleitem/singleitem.component.html file:

1. Firstly friends we need fresh angular 12 setup and for this we need to run below commands but if you already have angular 12 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

2. Now friends we need to run below command into our project terminal to install bootstrap 5 modules into our angular 12 application:

3. Now friends we just need to add below code into angulardir/angular.json file:

4. Now guy’s we need to run below command to start our angular 12 application:

5. Now friends we just need to add below code into angularboot5/src/app/app.component.ts file for demo query data:

6. Now friends we just need to add below code into angularboot5/src/app/app.component.html file:

1. Firstly, we need fresh reactjs setup and for that, we need to run below commands into out terminal and also we should have latest node version installed on our system:

2. Now we need to run below commands into our project terminal to get bootstrap(optional, I am using to make application looks good) and related modules into our reactjs application:

3. Finally for the main output, we need to add below code into our reacttricks/src/App.js file or if you have fresh setup then you can replace reacttricks/src/App.js file code with below code:

4. Guys now we need to add below code into our reacttricks/src/App.css file to set custom styles: