category , subcategory, product url changes

components/subcategory/CollectionList.jsx

@@ -6,17 +6,27 @@ import { backendUrl } from "@/utils/axios";
 import Image from "next/image";
 import { useCurrency } from "@/app/contexts/currencyContext";
 import ProductContext from "@/app/contexts/productContext";
+import slugify from "slugify";
 
 export default function ExploreSiddhaMala({ params }) {
   const { products, category } = useContext(ProductContext);
-  console.log("Products ", products)
+  console.log("URL param:", params.subcategory);
+  //console.log("Products ", products);
   const { formatPrice, isLoading } = useCurrency();
 
   const filteredProducts = products?.filter(
-    (product) => product.product_subcategory?.id == params.subCategoryId
+    (product) =>
+      slugify(product.product_subcategory?.subcategory_name, {
+        lower: true,
+      }) === params.subcategory
   );
-  console.log(filteredProducts)
-  const selectedCategory = filteredProducts?.length > 0 ? filteredProducts[0].product_subcategory : {"category_name": ""}
+
+  console.log("subcategory product are :", filteredProducts);
+
+  const selectedCategory =
+    filteredProducts?.length > 0
+      ? filteredProducts[0].product_subcategory
+      : { category_name: "" };
 
   return (
     <section className="py-16 bg-gray-50">
@@ -26,44 +36,54 @@ export default function ExploreSiddhaMala({ params }) {
           {selectedCategory ? selectedCategory.category_name : "Products"}
         </h2>
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
-          {filteredProducts?.map((product) => (
-            <div
-              key={product.id}
-              className="bg-white shadow-lg rounded-lg overflow-hidden transition-transform transform hover:scale-105"
-            >
-              <Link href={`/products/${product.id}`}>
-                <div className="relative w-full h-64 bg-gray-200">
-                  <Image
-                    src={`${backendUrl}${product?.images[0]?.image}`}
-                    alt={product.product_name}
-                    layout="fill"
-                    objectFit="cover"
-                    className="rounded-t-lg"
-                  />
+          {filteredProducts?.map((product) => {
+            // ✅ generate slug for debugging
+            const slug = `${slugify(product.product_name, { lower: true })}-${
+              product.id
+            }`;
+            console.log("Generated slug for product:", slug);
+
+            return (
+              <div
+                key={product.id}
+                className="bg-white shadow-lg rounded-lg overflow-hidden transition-transform transform hover:scale-105"
+              >
+                <Link href={`/products/${slug}`}>
+                  <div className="relative w-full h-64 bg-gray-200">
+                    <Image
+                      src={`${backendUrl}${product?.images[0]?.image}`}
+                      alt={product.product_name}
+                      layout="fill"
+                      objectFit="cover"
+                      className="rounded-t-lg"
+                    />
+                  </div>
+                </Link>
+                <div className="p-5">
+                  <h3 className="text-lg font-semibold text-gray-900 mb-2 truncate">
+                    {product.product_name}
+                  </h3>
+                  {product.variants?.length > 0 ? (
+                    <p className="text-lg font-bold text-green-600">
+                      {isLoading
+                        ? "Loading..."
+                        : formatPrice(
+                            Math.min(
+                              ...product.variants.map(
+                                (variant) => variant.price
+                              )
+                            )
+                          )}
+                    </p>
+                  ) : (
+                    <p className="text-md font-medium text-gray-500">
+                      Price on request
+                    </p>
+                  )}
                 </div>
-              </Link>
-              <div className="p-5">
-                <h3 className="text-lg font-semibold text-gray-900 mb-2 truncate">
-                  {product.product_name}
-                </h3>
-                {product.variants?.length > 0 ? (
-                  <p className="text-lg font-bold text-green-600">
-                    {isLoading
-                      ? "Loading..."
-                      : formatPrice(
-                          Math.min(
-                            ...product.variants.map((variant) => variant.price)
-                          )
-                        )}
-                  </p>
-                ) : (
-                  <p className="text-md font-medium text-gray-500">
-                    Price on request
-                  </p>
-                )}
               </div>
-            </div>
-          ))}
+            );
+          })}
         </div>
       </div>
     </section>

components/subcategory/SubcategoryHero.jsx

@@ -1,10 +1,12 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import { backendUrl } from "@/utils/axios";
 import axios from "axios";
 import Image from "next/image";
 import { motion } from "framer-motion";
+import slugify from "slugify";
+import ProductContext from "@/app/contexts/productContext";
 
 const cleanHTML = (html) => {
   if (!html) return "";
@@ -12,48 +14,54 @@ const cleanHTML = (html) => {
 };
 
 const SubcategoryHero = ({ params }) => {
-    const [selectedCategory, setSubcategory] = useState(null);
+  const { products, category } = useContext(ProductContext);
+  console.log("SubcategoryHero mounted. Params:", params);
+  const [selectedSubcategory, setSelectedSubcategory] = useState(null);
 
-    useEffect(() => {
-        const fetchSubcategory = async () => {
-          try { 
-            const response = await axios.get(
-              `${backendUrl}/admins/product/subcategory/${params.subCategoryId}`
-            );
-            console.log(response.data)
-            const selectedSubcategory = response.data
-            setSubcategory(selectedSubcategory);
-          } catch (error) {
-            console.error("Error fetching subcategory:", error);
-          }
-        };
-        fetchSubcategory();
-    }, [params.subCategoryId]);
+  useEffect(() => {
+    if (products?.length > 0) {
+      const match = products
+        .map((p) => p.product_subcategory)
+        .find(
+          (sub) =>
+            slugify(sub?.subcategory_name || "", { lower: true }) ===
+            params.subcategory
+        );
 
-  // Fallback values
+      console.log("Matched from products:", match);
+      setSelectedSubcategory(match || null);
+    }
+  }, [products, params.subcategory]);
+
+  // Fallbacks
   const fallbackImage = "/placeholder-image.jpg";
   const fallbackDescription =
     "Explore our curated collection of spiritual items designed to enhance your journey of self-discovery and inner peace.";
   const fallbackCategoryName = "Spiritual Essentials";
 
   return (
-    <section className="relative min-h-[50vh] md:h-[80vh] py-8 md:py-0 flex items-center justify-center">
+    <section className="relative min-h-[50vh] md:h-[80vh] py-8 md:py-0 flex mt-3 justify-center">
       <div className="container mx-auto px-4">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
+          {/* Hero Image */}
           <div className="relative h-[250px] md:h-[500px] overflow-hidden rounded-lg shadow-xl">
             <Image
-              src={`${
-                selectedCategory?.image_url
-                  ? backendUrl + selectedCategory?.image_url
-                  : "/sidhi-mala/Artboard_1_bf5ccd46-7152-4355-82a8-9e9f27c1bfc2.jpg"
-              }`}
-              alt="Category Background"
-              layout="fill"
-              objectFit="cover"
+              src={
+                selectedSubcategory?.image
+                  ? `${backendUrl}${selectedSubcategory.image}`
+                  : fallbackImage
+              }
+              alt={
+                selectedSubcategory?.subcategory_name || "Category Background"
+              }
+              fill
+              style={{ objectFit: "cover" }}
               quality={100}
               priority
             />
           </div>
+
+          {/* Hero Text */}
           <div className="text-start flex justify-start flex-col h-full">
             <motion.h1
               initial={{ opacity: 0, y: -20 }}
@@ -61,7 +69,7 @@ const SubcategoryHero = ({ params }) => {
               transition={{ duration: 0.6 }}
               className="text-2xl md:text-3xl font-bold text-black mb-4"
             >
-              {selectedCategory?.subcategory_name || fallbackCategoryName}
+              {selectedSubcategory?.subcategory_name || fallbackCategoryName}
             </motion.h1>
 
             <motion.div
@@ -71,7 +79,7 @@ const SubcategoryHero = ({ params }) => {
               className="text-black text-sm md:text-base"
               dangerouslySetInnerHTML={{
                 __html: cleanHTML(
-                  selectedCategory?.description || fallbackDescription
+                  selectedSubcategory?.description || fallbackDescription
                 ),
               }}
             />
@@ -82,4 +90,4 @@ const SubcategoryHero = ({ params }) => {
   );
 };
 
-export default SubcategoryHero;
+export default SubcategoryHero;