category , subcategory, product url changes

2025-09-01 13:13:39 +05:30
parent 7336ad10c4
commit 5168f630b3
14 changed files with 2084 additions and 1856 deletions
--- a/app/category/[name]/page.jsx
+++ b/app/category/[name]/page.jsx
--- a/app/category/[name]/subcategory/[subcategory]/page.jsx
+++ b/app/category/[name]/subcategory/[subcategory]/page.jsx
--- a/app/products/[name]/page.jsx
+++ b/app/products/[name]/page.jsx
@@ -1,19 +1,21 @@
 import AddToCardLeftSection from "@/components/products/AddToCardLeftSection";
 import AddToCardRightSection from "@/components/products/AddToCardRightSection";
 import RelatedProductCards from "@/components/products/RelatedProductCards";
-import RelatedVideos from "@/components/products/RelatedVideos";
+// import RelatedVideos from "@/components/products/RelatedVideos";
 import React from "react";

 const page = ({ params }) => {
  
+  const slug = params.name; 
+  const productId = slug.split("-").pop(); 
+
  return (
    <div className="min-h-screen bg-white">
-     
      <div className="flex gap-3 min-h-screen sm:flex-row flex-col">
-        <AddToCardLeftSection productId={params.name} />
-        <AddToCardRightSection productId={params.name}/>
+        <AddToCardLeftSection productId={productId} />
+        <AddToCardRightSection productId={productId} />
      </div>
-      <RelatedProductCards productId={params.name}/>
+      <RelatedProductCards productId={productId} />
      {/* <RelatedVideos /> */}
    </div>
  );
--- a/components/category/SubcategoryList.jsx
+++ b/components/category/SubcategoryList.jsx
@@ -5,10 +5,12 @@ import React, { useState, useEffect } from "react";
 import { backendUrl } from "@/utils/axios";
 import axios from "axios";
 import Image from "next/image";
+import slugify from "slugify";

 export default function SubcategoryList({ params }) {
-  console.log(params);
-  console.log(params.id);
+  //console.log("category params is", params);
+  //console.log("Category name:", params.name);
+
  const [subcategories, setSubcategories] = useState([]);
  const [category, setCategory] = useState(null);
  const [loading, setLoading] = useState(true);
@@ -17,23 +19,29 @@ export default function SubcategoryList({ params }) {
  useEffect(() => {
    const fetchData = async () => {
      try {
-        // Fetch category details
-        const categoryResponse = await axios.get(
-          `${backendUrl}/products/category/`
-        );
+        // Fetch all categories
+        const categoryResponse = await axios.get(`${backendUrl}/products/category/`);
+
+        // Find the category by name
        const selectedCategory = categoryResponse.data.find(
-          (cat) => cat.id == params.id
+          (cat) => cat.category_name.toLowerCase() === decodeURIComponent(params.name).toLowerCase()
        );
+
+        if (!selectedCategory) {
+          setError("Category not found.");
+          setLoading(false);
+          return;
+        }
+
        setCategory(selectedCategory);

-        // Fetch subcategories for this category
+        // Fetch subcategories using category id
        const subcategoriesResponse = await axios.get(
-          `${backendUrl}/admins/product/subcategories/?category_id=${params.id}`
+          `${backendUrl}/admins/product/subcategories/?category_id=${selectedCategory.id}`
        );
        setSubcategories(subcategoriesResponse.data);
-        console.log("Selected sub category")
-        console.log(subcategoriesResponse.data);
-        // console.log(sub)
+
+        console.log("Selected subcategories", subcategoriesResponse.data);
      } catch (err) {
        console.error("Error fetching data:", err);
        setError("Failed to load subcategories. Please try again later.");
@@ -43,7 +51,7 @@ export default function SubcategoryList({ params }) {
    };

    fetchData();
-  }, [params.id]);
+  }, [params.name]);

  if (loading) {
    return <div className="py-16 text-center">Loading subcategories...</div>;
@@ -71,7 +79,7 @@ export default function SubcategoryList({ params }) {
                key={subcategory.id}
                className="bg-white shadow-lg rounded-lg overflow-hidden transition-transform transform hover:scale-105"
              >
-                <Link href={`/category/${params.id}/subcategory/${subcategory.id}`}>
+                <Link href={`/category/${params.name}/subcategory/${slugify(subcategory.subcategory_name, { lower: true })}`}>
                  <div className="relative w-full h-64 bg-gray-200">
                    <Image
                      src={`${
--- a/components/common-components/FaqCard.jsx
+++ b/components/common-components/FaqCard.jsx
@@ -1,6 +1,6 @@
 "use client";
 import Image from "next/image";
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import {
  Accordion,
  AccordionContent,
@@ -10,10 +10,13 @@ import {
 import Link from "next/link";
 import axios from "axios";
 import { backendUrl } from "@/utils/axios";
+import slugify from "slugify";
+import ProductContext from "@/app/contexts/productContext";

-const DEFAULT_IMAGE = "/sidhi-mala/Designer_30.png"; // Default image
+const DEFAULT_IMAGE = "/sidhi-mala/Designer_30.png";

 const FaqCard = ({ params }) => {
+  const { products } = useContext(ProductContext); // ✅ get products
  const [faq, setFaq] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
@@ -21,11 +24,46 @@ const FaqCard = ({ params }) => {
  useEffect(() => {
    const fetchFaq = async () => {
      try {
-        const response = await axios.get(
-          `${backendUrl}/products/faq/${params.id}/`
+        if (!products || products.length === 0) {
+          console.log("❌ Products not loaded yet.");
+          return;
+        }
+
+        // 1️⃣ Collect all unique subcategories from products
+        const subcategories = products.map((p) => p.product_subcategory);
+
+        // 2️⃣ Find subcategory by slug
+        const matchedSub = subcategories.find(
+          (sub) =>
+            slugify(sub?.subcategory_name || "", { lower: true }) ===
+            params.subcategory
        );
-        setFaq(response.data);
+
+        console.log("✅ Matched Subcategory for FAQ:", matchedSub);
+
+        if (!matchedSub) {
+          console.warn("⚠️ No subcategory found for slug:", params.subcategory);
+          setError("Subcategory not found");
+          setLoading(false);
+          return;
+        }
+
+        // 3️⃣ Fetch FAQs using subcategory ID
+        const url = `${backendUrl}/products/faq/${matchedSub.category}/`;
+        console.log("📡 Fetching FAQ from:", url);
+
+        const faqRes = await axios.get(url);
+
+        console.log("📥 Full FAQ Response:", faqRes);
+        console.log("✅ FAQ Data:", faqRes.data);
+
+        setFaq(faqRes.data);
      } catch (err) {
+        console.error("❌ FAQ Fetch Error:", err);
+        if (err.response) {
+          console.error("⚠️ Response Status:", err.response.status);
+          console.error("⚠️ Response Data:", err.response.data);
+        }
        setError("Failed to fetch FAQs. Please try again later.");
      } finally {
        setLoading(false);
@@ -33,24 +71,19 @@ const FaqCard = ({ params }) => {
    };

    fetchFaq();
-  }, [params.id]);
+  }, [products, params.subcategory]);

-  if (loading) {
+  if (loading)
    return <p className="text-center text-xl mt-10">Loading FAQs...</p>;
-  }
-
-  if (error) {
-    return <p className="text-center text-red-600 mt-10">{error}</p>;
-  }
-
-  if (!faq || faq.length === 0) {
+  if (error) return <p className="text-center text-red-600 mt-10">{error}</p>;
+  if (!faq || faq.length === 0)
    return <p className="text-center text-xl mt-10">No FAQs available.</p>;
-  }

  const hasImage = faq.some((item) => item.image !== null);
  const imageToShow = hasImage
    ? `${backendUrl}${faq.find((item) => item.image !== null).image}`
    : DEFAULT_IMAGE;
+
  return (
    <div className="min-h-screen sm:block hidden bg-[#FFFFFF]">
      <h1 className="sm:pt-14 pb-8 font-serif mt-4 sm:text-6xl text-2xl text-zinc-800 text-center">
--- a/components/header/Navbar.jsx
+++ b/components/header/Navbar.jsx
@@ -24,9 +24,14 @@ const Navbar = () => {
    SUPPORTED_CURRENCIES,
    error,
    setUserCountry,
-    userCountry
+    userCountry,
  } = useCurrency();

+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
  const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);

  useEffect(() => {
@@ -101,7 +106,7 @@ const Navbar = () => {
  const categoryItems = category
    ? category.map((category) => ({
        label: category.category_name,
-        url: `/category/${category.id}`,
+        url: `/category/${category.category_name}`,
      }))
    : []; // Fallback to an empty array if category is undefined

@@ -118,12 +123,13 @@ const Navbar = () => {
        <div className="container mx-auto flex justify-between items-center px-4 py-2">
          <div className="flex items-center md:space-x-4">
            <button onClick={toggleSidebar} className="z-50">
-              {isSidebarOpen ? (
+              {!mounted ? null : isSidebarOpen ? (
                <IoMdClose size={28} />
              ) : (
                <Menu size={28} strokeWidth={1} />
              )}
            </button>
+
            <Link href="/">
              <Image
                src="/logo1.jpg"
--- a/components/instagram-section/Instasection.jsx
+++ b/components/instagram-section/Instasection.jsx
@@ -1,11 +0,0 @@
-import React from 'react'
-
-const Instasection = () => {
-  return (
-    <div className='h-[70vh]'>
-      
-    </div>
-  )
-}
-
-export default Instasection
--- a/components/shipping-policy/ShippingPolicy.jsx
+++ b/components/shipping-policy/ShippingPolicy.jsx
@@ -75,7 +75,7 @@ const ShippingPolicy = () => {
          experience with us.
        </p>
        <h2 className="text-2xl font-semibold mb-4 underline">
-          Delivery Services Used:
+          Delivery Services Used : Any Courier and Post Office used
        </h2>
        <p className="text-lg mt-6">
          Note: Gupta Rudraksha only uses the expedited shipping options and
--- a/components/siddha-mala/ExploreSiddhamala.jsx
+++ b/components/siddha-mala/ExploreSiddhamala.jsx
@@ -6,6 +6,7 @@ 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);
@@ -24,12 +25,19 @@ 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) => (
+          {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/${product.id}`}>
+                <Link href={`/products/${slug}`}>
                  <div className="relative w-full h-64 bg-gray-200">
                    <Image
                      src={`${backendUrl}${product?.images[0]?.image}`}
@@ -50,7 +58,9 @@ export default function ExploreSiddhaMala({ params }) {
                        ? "Loading..."
                        : formatPrice(
                            Math.min(
-                            ...product.variants.map((variant) => variant.price)
+                              ...product.variants.map(
+                                (variant) => variant.price
+                              )
                            )
                          )}
                    </p>
@@ -61,7 +71,8 @@ export default function ExploreSiddhaMala({ params }) {
                  )}
                </div>
              </div>
-          ))}
+            );
+          })}
        </div>
      </div>
    </section>
--- a/components/siddha-mala/categoryHero.jsx
+++ b/components/siddha-mala/categoryHero.jsx
@@ -14,7 +14,8 @@ const cleanHTML = (html) => {

 const CategoryHero = ({ params }) => {
  const { category } = useContext(ProductContext);
-  const selectedCategory = category?.find((cat) => cat.id == params.id);
+  const selectedCategory = category?.find((cat) => cat.category_name.toLowerCase() ===
+      decodeURIComponent(params.name).toLowerCase());

  console.log(selectedCategory);

--- a/components/subcategory/CollectionList.jsx
+++ b/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,12 +36,19 @@ 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) => (
+          {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/${product.id}`}>
+                <Link href={`/products/${slug}`}>
                  <div className="relative w-full h-64 bg-gray-200">
                    <Image
                      src={`${backendUrl}${product?.images[0]?.image}`}
@@ -52,7 +69,9 @@ export default function ExploreSiddhaMala({ params }) {
                        ? "Loading..."
                        : formatPrice(
                            Math.min(
-                            ...product.variants.map((variant) => variant.price)
+                              ...product.variants.map(
+                                (variant) => variant.price
+                              )
                            )
                          )}
                    </p>
@@ -63,7 +82,8 @@ export default function ExploreSiddhaMala({ params }) {
                  )}
                </div>
              </div>
-          ))}
+            );
+          })}
        </div>
      </div>
    </section>
--- a/components/subcategory/SubcategoryHero.jsx
+++ b/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}`
+    if (products?.length > 0) {
+      const match = products
+        .map((p) => p.product_subcategory)
+        .find(
+          (sub) =>
+            slugify(sub?.subcategory_name || "", { lower: true }) ===
+            params.subcategory
        );
-            console.log(response.data)
-            const selectedSubcategory = response.data
-            setSubcategory(selectedSubcategory);
-          } catch (error) {
-            console.error("Error fetching subcategory:", error);
-          }
-        };
-        fetchSubcategory();
-    }, [params.subCategoryId]);

-  // 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
                ),
              }}
            />
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
    "react-hot-toast": "^2.4.1",
    "react-icons": "^5.3.0",
    "react-razorpay": "^3.0.1",
+    "slugify": "^1.6.6",
    "tailwind-merge": "^2.5.2",
    "tailwindcss-animate": "^1.0.7"
  },