category , subcategory, product url changes

This commit is contained in:
2025-09-01 13:13:39 +05:30
parent 7336ad10c4
commit 5168f630b3
14 changed files with 2084 additions and 1856 deletions

View File

@@ -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,44 +25,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>