Category bug fixed

arghadipmanna101 · Jul 27, 2024 · 9d9d7bc · 9d9d7bc
1 parent b09ecc2
commit 9d9d7bc
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 17 deletions.
diff --git a/css/categories.css b/css/categories.css
@@ -1,6 +1,6 @@
 .categorylist-wrapper {
   width: 100%;
-  overflow-x: scroll;
+  overflow-x:hidden;
   /* z-index: 500; */
 }
 
@@ -77,6 +77,7 @@
 #category-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
+
   gap: 40px;
   margin-top: 20px;
   margin-bottom: 20px;

diff --git a/index.html b/index.html
@@ -437,10 +437,10 @@ <h4>Login</h4>
     </header>
     <!--Header end -->
 
-    <!-- categorylist -->
-    <div id="categorylist-wrapper" class="container-fluid categorylist-wrapper">
-        <ul id="categories" class="categories"></ul>
-    </div>
+ <!-- categorylist -->
+ <div id="categorylist-wrapper" class="container-fluid categorylist-wrapper">
+    <ul id="categories" class="categories"></ul>
+</div>
 
     <!-- carousel start -->
     <div id="default-carousel" class="relative w-full" data-carousel="slide">
@@ -1178,7 +1178,7 @@ <h1>Contact Us</h1>
 
     <script src="js/bootstrap.bundle.min.js"></script>
     <script src="js/homeHeader.js"></script>
-    <script src="js/categoryjs.js"></script>
+    <!-- <script src="js/categoryjs.js"></script> -->
     <script src="js/searchIndexProducts.js"></script>
     <script src="js/fetchProductOfIndex.js"></script>
     <script src="js/index.js"></script>

diff --git a/js/categoryjs.js b/js/categoryjs.js
@@ -1,20 +1,16 @@
 document.addEventListener("DOMContentLoaded", function () {
     const categoriesList = document.getElementById("categories");
-    const categoryNamesSet = new Set();
 
     function createCategoryItem(categoryData) {
-        if (categoryNamesSet.has(categoryData.name)) {
-            return null; 
-        }
-        categoryNamesSet.add(categoryData.name);
-
+        console.log("Creating category item for:", categoryData.name);
         const categoryItem = document.createElement("li");
         categoryItem.id = categoryData.id;
 
         const icon = document.createElement("img");
         icon.src = "img/" + categoryData.icon;
 
         const nameLink = document.createElement("a");
+        nameLink.href = categoryData.name + "-/"; // find index.html
         nameLink.textContent = categoryData.name;
 
         const name = document.createElement("span");
@@ -30,6 +26,7 @@ document.addEventListener("DOMContentLoaded", function () {
         if (!categoryData.subcategories) {
             const singleItem = document.createElement("div");
             const singleLink = document.createElement("a");
+            singleLink.href = categoryData.name + "-/";
             singleLink.textContent = categoryData.name;
             singleItem.appendChild(singleLink);
             subcategoriesList.appendChild(singleItem);
@@ -49,6 +46,10 @@ document.addEventListener("DOMContentLoaded", function () {
         categoryItem.appendChild(subcategoriesList);
 
         categoryItem.addEventListener('mouseenter', function (event) {
+            const existingList = document.querySelector(`.${categoryData.id}`);
+            if (existingList) {
+                existingList.remove();
+            }
             document.querySelector('.categorylist-wrapper').appendChild(subcategoriesList);
             subcategoriesList.style.display = 'block';
         });
@@ -62,10 +63,10 @@ document.addEventListener("DOMContentLoaded", function () {
         });
 
         if (subcategoriesList && subcategoriesList.childNodes.length) {
-            subcategoriesList.addEventListener('mouseenter', function (event) {
+            subcategoriesList.addEventListener('mouseenter', function(event){
                 subcategoriesList.style.display = 'block';
             });
-
+            
             subcategoriesList.addEventListener('mouseleave', function (event) {
                 subcategoriesList.style.display = 'none';
                 document.querySelectorAll(`.${categoryData.id}`).forEach(elem => elem.remove());
@@ -78,13 +79,17 @@ document.addEventListener("DOMContentLoaded", function () {
     }
 
     function createSubcategoryItem(subcategoryData) {
+        console.log("Creating subcategory item for:", subcategoryData.name);
+        // Create the main subcategory item div
         const subcategoryItem = document.createElement("div");
 
+        // Append the subcategory name
         const subcategoryName = document.createElement("div");
         subcategoryName.textContent = subcategoryData.name;
         subcategoryName.className = subcategoryData.id;
         subcategoryItem.appendChild(subcategoryName);
 
+        // If there are subcategories, create a subsubcategories list
         if (subcategoryData.subcategories) {
             const subsubcategoriesList = document.createElement("div");
             subsubcategoriesList.id = subcategoryData.id;
@@ -94,6 +99,7 @@ document.addEventListener("DOMContentLoaded", function () {
             moreInText.textContent = `More in ${subcategoryData.name}`;
             subsubcategoriesList.appendChild(moreInText);
 
+            // Iterate over subcategories and append each subsubcategory item
             subcategoryData.subcategories.forEach(function (subsubcategoryData) {
                 const subsubcategoryItem = document.createElement("div");
                 subsubcategoryItem.textContent = subsubcategoryData;
@@ -103,6 +109,7 @@ document.addEventListener("DOMContentLoaded", function () {
             subcategoryItem.appendChild(subsubcategoriesList);
         }
 
+        // Append the side arrow span
         const sideArrow = document.createElement("span");
         sideArrow.className = 'sidearrow';
         subcategoryItem.appendChild(sideArrow);
@@ -113,11 +120,10 @@ document.addEventListener("DOMContentLoaded", function () {
     fetch('js/categoryData.json')
         .then(response => response.json())
         .then(data => {
+            console.log("Fetched data:", data);
             data.forEach(function (categoryData) {
                 const categoryItem = createCategoryItem(categoryData);
-                if (categoryItem) {
-                    categoriesList.appendChild(categoryItem);
-                }
+                categoriesList.appendChild(categoryItem);
             });
         })
         .catch(error => console.error('Error fetching category data:', error));