category , subcategory, product url changes
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user