diff --git a/app/category/[id]/page.jsx b/app/category/[id]/page.jsx new file mode 100644 index 0000000..5a20b03 --- /dev/null +++ b/app/category/[id]/page.jsx @@ -0,0 +1,19 @@ +import FaqCard from '@/components/common-components/FaqCard' +import SubcategoryList from '@/components/category/SubcategoryList' +import CategoryHero from '@/components/siddha-mala/categoryHero' + +export const metadata = { + title: 'Buy Gupta Siddha mala(1 to 14 mukhi) 100% X-Ray Certified Authentic', + description: "Generated by create next app", +} + +const Page = ({params}) => { + return ( +
+ + +
+ ) +} + +export default Page diff --git a/app/category/[id]/subcategory/[subCategoryId]/page.jsx b/app/category/[id]/subcategory/[subCategoryId]/page.jsx new file mode 100644 index 0000000..64e7915 --- /dev/null +++ b/app/category/[id]/subcategory/[subCategoryId]/page.jsx @@ -0,0 +1,21 @@ +import FaqCard from '@/components/common-components/FaqCard' +import CollectionList from '@/components/subcategory/CollectionList' +import SubcategoryHero from '@/components/subcategory/SubcategoryHero' + +export const metadata = { + title: 'Subcategory Collections - Gupta Rudraksha', + description: "Browse collections in this subcategory", +} + +const SubcategoryPage = ({params}) => { + console.log("Sub category is ", params) + return ( +
+ + + +
+ ) +} + +export default SubcategoryPage diff --git a/components/category/SubcategoryList.jsx b/components/category/SubcategoryList.jsx new file mode 100644 index 0000000..b4699e4 --- /dev/null +++ b/components/category/SubcategoryList.jsx @@ -0,0 +1,108 @@ +"use client"; + +import Link from "next/link"; +import React, { useState, useEffect } from "react"; +import { backendUrl } from "@/utils/axios"; +import axios from "axios"; +import Image from "next/image"; + +export default function SubcategoryList({ params }) { + console.log(params); + console.log(params.id); + const [subcategories, setSubcategories] = useState([]); + const [category, setCategory] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + const fetchData = async () => { + try { + // Fetch category details + const categoryResponse = await axios.get( + `${backendUrl}/products/category/` + ); + const selectedCategory = categoryResponse.data.find( + (cat) => cat.id == params.id + ); + setCategory(selectedCategory); + + // Fetch subcategories for this category + const subcategoriesResponse = await axios.get( + `${backendUrl}/admins/product/subcategories/?category_id=${params.id}` + ); + setSubcategories(subcategoriesResponse.data); + console.log("Selected sub category") + console.log(subcategoriesResponse.data); + // console.log(sub) + } catch (err) { + console.error("Error fetching data:", err); + setError("Failed to load subcategories. Please try again later."); + } finally { + setLoading(false); + } + }; + + fetchData(); + }, [params.id]); + + if (loading) { + return
Loading subcategories...
; + } + + if (error) { + return
{error}
; + } + + return ( +
+
+

+ Explore {category ? category.category_name : "Category"} Subcategories +

+ + {subcategories.length === 0 ? ( +

+ No subcategories available for this category. +

+ ) : ( +
+ {subcategories.map((subcategory) => ( +
+ +
+ {subcategory.subcategory_name} +
+
+

+ {subcategory.subcategory_name} +

+

+ Click to view collections +

+
+ +
+ ))} +
+ )} +
+
+ ); +} diff --git a/components/header/Navbar.jsx b/components/header/Navbar.jsx index 41722ba..2ea788b 100644 --- a/components/header/Navbar.jsx +++ b/components/header/Navbar.jsx @@ -101,7 +101,7 @@ const Navbar = () => { const categoryItems = category ? category.map((category) => ({ label: category.category_name, - url: `/collections/${category.id}`, + url: `/category/${category.id}`, })) : []; // Fallback to an empty array if category is undefined diff --git a/components/subcategory/CollectionList.jsx b/components/subcategory/CollectionList.jsx new file mode 100644 index 0000000..50d2b01 --- /dev/null +++ b/components/subcategory/CollectionList.jsx @@ -0,0 +1,71 @@ +"use client"; + +import Link from "next/link"; +import React, { useContext } from "react"; +import { backendUrl } from "@/utils/axios"; +import Image from "next/image"; +import { useCurrency } from "@/app/contexts/currencyContext"; +import ProductContext from "@/app/contexts/productContext"; + +export default function ExploreSiddhaMala({ params }) { + const { products, category } = useContext(ProductContext); + console.log("Products ", products) + const { formatPrice, isLoading } = useCurrency(); + + const filteredProducts = products?.filter( + (product) => product.product_subcategory?.id == params.subCategoryId + ); + console.log(filteredProducts) + const selectedCategory = filteredProducts?.length > 0 ? filteredProducts[0].product_subcategory : {"category_name": ""} + + return ( +
+
+

+ Explore{" "} + {selectedCategory ? selectedCategory.category_name : "Products"} +

+
+ {filteredProducts?.map((product) => ( +
+ +
+ {product.product_name} +
+ +
+

+ {product.product_name} +

+ {product.variants?.length > 0 ? ( +

+ {isLoading + ? "Loading..." + : formatPrice( + Math.min( + ...product.variants.map((variant) => variant.price) + ) + )} +

+ ) : ( +

+ Price on request +

+ )} +
+
+ ))} +
+
+
+ ); +} diff --git a/components/subcategory/SubcategoryHero.jsx b/components/subcategory/SubcategoryHero.jsx new file mode 100644 index 0000000..dbe07c2 --- /dev/null +++ b/components/subcategory/SubcategoryHero.jsx @@ -0,0 +1,83 @@ +"use client"; + +import React, { useState, useEffect } from "react"; +import { backendUrl } from "@/utils/axios"; +import axios from "axios"; +import Image from "next/image"; +import { motion } from "framer-motion"; + +const cleanHTML = (html) => { + if (!html) return ""; + return html.replace(/style="[^"]*color:[^;]*;?"/gi, ""); +}; + +const SubcategoryHero = ({ params }) => { + const [selectedCategory, setSubcategory] = 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]); + + // Fallback values + 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 ( +
+
+ Category Background +
+ +
+ + {selectedCategory?.subcategory_name || fallbackCategoryName} + + + +
+
+ ); +}; + +export default SubcategoryHero; diff --git a/next.config.mjs b/next.config.mjs index e46f37c..cfa4228 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,7 +1,7 @@ /** @type {import('next').NextConfig} */ const nextConfig = { images: { - domains: ["127.0.0.1","admin.guptarudraksha.com"], + domains: ["127.0.0.1","admin.guptarudraksha.com", "localhost"], }, };