leadstocompany/rudarksh-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

category , subcategory, product url changes

Browse Source
This commit is contained in:
Sandip Chowdhury
2025-09-01 13:13:39 +05:30
parent 7336ad10c4
commit 5168f630b3
14 changed files with 2084 additions and 1856 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
components/subcategory/CollectionList.jsx
View File

@@ -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>