Merge pull request #4 from tusharladva07/main

Cart Count Buttoon Added
mahdi-eth · Dec 9, 2024 · 0df3acf · 0df3acf
2 parents 9c5bc29 + 8141297
commit 0df3acf
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 7 deletions.
diff --git a/ProductsPage/MainPage/index.html b/ProductsPage/MainPage/index.html
@@ -70,15 +70,19 @@
                     <i role="button" class="bi bi-house-door-fill text-danger fs-32 ps-2 d-block d-sm-none">
                     </i>
                 </a>
-
                 <span onclick="window.open('http://127.0.0.1:5500/Cart/index.html','_self','resizable=yes')">
-                    <button type="button" class="btn btn-outline-danger">
-                        <svg class="" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-                            class="bi bi-bag-fill" viewBox="0 0 16 16">
+                    <span class="icon-container">
+                        <!-- SVG Icon -->
+                        <svg class="bi bi-bag-fill" xmlns="http://www.w3.org/2000/svg" fill="rgba(var(--bs-danger-rgb),var(--bs-bg-opacity))" viewBox="0 0 16 16">
                             <path
                                 d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5z">
                             </path>
                         </svg>
+
+                        <!-- Badge -->
+                        <span id="cartCount">0</span>
+                    </span>
+                    <button type="button" class="btn btn-outline-danger">
                         Purchase
                     </button>
                 </span>

diff --git a/ProductsPage/defaultScript.js b/ProductsPage/defaultScript.js
@@ -3,6 +3,7 @@ import books from "../DataBase/Data.js";
 export const sortElement = document.querySelector(".sorted-by");
 export const dropdownItems = document.querySelectorAll("#dropdownItem");
 export const main = document.querySelector("#thumb");
+export let cartCountid = document.getElementById("cartCount");
 
 export const categorieSelector = [
   ...document.querySelectorAll("#categorieSelector"),
@@ -13,7 +14,7 @@ dropdownItems.forEach((el) => {
     sortElement.innerHTML = ` : ${e.target.innerHTML}`;
   });
 });
-
+  getCartCount()
 export default function productMaker(bookData) {
   bookData.forEach((book) => {
     main.innerHTML += `<div class="thumb-wrapper flex-column shadow">
@@ -136,17 +137,24 @@ window.addEventListener("click", (el) => {
     };
     dataState.push(data);
     localStorage.setItem("data", JSON.stringify(dataState));
+    getCartCount();
   }
+
 });
 
 // added to cart , alert section
 
+
+
+// Replace the alert with showNotification
 window.addEventListener("click", (el) => {
   if (el.target.innerText == "Add to Cart ") {
-    alert(`${el.target.parentElement.children[0].innerText} Added to cart!`);
+    const bookName = el.target.parentElement.children[0].innerText;
+    el.stopImmediatePropagation();
   }
 });
 
+
 // bi-list section
 
 const biList = document.querySelector(".bi-list");
@@ -166,3 +174,16 @@ closeListBtn.addEventListener("click", () => {
   }, 500);
 });
 
+function getCartCount() {
+  let dataState = JSON.parse(localStorage.getItem("data")) || [];
+
+if (localStorage.getItem("data") == null) {
+  dataState = [];
+}
+  let cartCountList = 0;
+  localStorage.setItem("data", JSON.stringify(dataState));
+  cartCountList = dataState?.length;
+  if (cartCountList != null && cartCountList != undefined) {
+    cartCountid.innerHTML = cartCountList;
+  }
+}
diff --git a/ProductsPage/style.css b/ProductsPage/style.css
@@ -51,4 +51,26 @@
 	z-index: 1;
 	transition: all ease .5s;
 	top: -40rem;
-}
+}
+.icon-container {
+  position: relative;
+  display: inline-block;
+  width: 28px; 
+  height: 32px;
+}
+
+#cartCount {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-color: red;
+  color: white;
+  font-size: 12px;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+}