fix
parent
5501a66957
commit
eecc63f72a
|
|
@ -246,12 +246,9 @@ export default async function ProductPage({ params }) {
|
|||
showPrice={product.showPrice}
|
||||
category={product.category}
|
||||
summery={product.summery}
|
||||
brand={product.brand}
|
||||
/>
|
||||
{
|
||||
product.brand && (
|
||||
<BrandInfo brand={product.brand} />
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import graphql from "src/utils/graphql";
|
||||
import CategoriesData from "src/view/Categories";
|
||||
|
||||
|
||||
|
|
@ -61,12 +62,12 @@ query CategoriesAndBrands($locale:I18NLocaleCode,$slug:String!) {
|
|||
|
||||
`
|
||||
export async function generateMetadata({ params }) {
|
||||
const { locale, slug } = await params;
|
||||
const { locale, category } = await params;
|
||||
|
||||
// Fetch product SEO data from Strapi GraphQL API
|
||||
const data = await graphql(gql_metadata, {
|
||||
locale,
|
||||
slug,
|
||||
slug:category,
|
||||
});
|
||||
|
||||
const productSEO = data?.categories?.[0]?.seo || data?.brands?.[0]?.seo;
|
||||
|
|
|
|||
|
|
@ -287,6 +287,9 @@ const Navbar = ({ items }) => {
|
|||
setResponsiveNavBarItemStep(index);
|
||||
|
||||
setActiveStepNavbar(e.documentId);
|
||||
}else{
|
||||
setClosNavbar(false)
|
||||
router.push(e.link)
|
||||
}
|
||||
}}
|
||||
>
|
||||
|
|
@ -334,7 +337,7 @@ const Navbar = ({ items }) => {
|
|||
className="bg-primary-50 rounded-lg my-1 p-2 "
|
||||
key={index}
|
||||
>
|
||||
<p className="mb-0 text-sm">{s.name}</p>
|
||||
<p className="mb-0 text-sm">{s.title}</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -30,11 +30,12 @@ export default function ProductGallery({ images }) {
|
|||
<div className="max-w-[500px] lg:min-w-[500px]">
|
||||
<div className="aspect-w-1 aspect-h-1 w-full rounded-lg overflow-hidden">
|
||||
<Image
|
||||
|
||||
src={selectedImage.url || "/placeholder.svg"}
|
||||
alt={selectedImage.alternativeText ?? ""}
|
||||
width={500}
|
||||
height={500}
|
||||
className="object-contain cursor-pointer aspect-square "
|
||||
className="object-contain cursor-pointer aspect-square border"
|
||||
onClick={() => openLightbox(images.findIndex((img) => img.documentId === selectedImage.documentId))}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -47,7 +48,7 @@ export default function ProductGallery({ images }) {
|
|||
width={100}
|
||||
height={100}
|
||||
className={`object-cover cursor-pointer rounded-lg overflow-hidden ${
|
||||
selectedImage.documentId === image.documentId ? "ring-2 ring-primary" : ""
|
||||
selectedImage.documentId === image.documentId ? "ring-2 ring-primary/50" : ""
|
||||
}`}
|
||||
onClick={() => setSelectedImage(image)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -8,9 +8,10 @@ import Link from "next/link";
|
|||
import ContactModal from "../ContactUs";
|
||||
import { useState } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import BrandInfo from "./BrandInfo";
|
||||
|
||||
|
||||
export default function ProductInfo({ title, price, discount, showPrice, category,summery }) {
|
||||
export default function ProductInfo({ title, price, discount, showPrice, category, summery, brand }) {
|
||||
|
||||
const locale = useLocale()
|
||||
|
||||
|
|
@ -28,72 +29,83 @@ export default function ProductInfo({ title, price, discount, showPrice, categor
|
|||
setOpen(false);
|
||||
}
|
||||
|
||||
const t = useTranslations("ContactModal")
|
||||
const t = useTranslations("ContactModal")
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<div className="w-full">
|
||||
<ContactModal close={closeModal} open={open} />
|
||||
<h1 className="text-3xl font-bold">{title}</h1>
|
||||
<Link href={`/products/${category.slug}`} className="mt-4 flex items-center">
|
||||
<span className={`inline-flex items-center rounded-md bg-gray-100 px-2.5 py-0.5 text-sm font-medium text-gray-800 ltr`}>
|
||||
<CategoryIcon className="h-4 w-4 mx-1" />
|
||||
{category.title}
|
||||
</span>
|
||||
</Link>
|
||||
<p>
|
||||
{
|
||||
summery
|
||||
}
|
||||
</p>
|
||||
{showPrice && (
|
||||
<div className="mt-4">
|
||||
{discount ? (
|
||||
<div className="flex items-center">
|
||||
<span className="text-2xl font-bold text-primary">
|
||||
{locale === "ar-OM" ? (
|
||||
<>
|
||||
{discountedPrice.toFixed(2)} {currencySymbol}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{currencySymbol}
|
||||
{discountedPrice.toFixed(2)}
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
<span className="ml-2 text-lg text-gray-500 line-through">
|
||||
{locale === "ar-OM" ? (
|
||||
<>
|
||||
{price.toFixed(2)} {currencySymbol}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{currencySymbol}
|
||||
{price.toFixed(2)}
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
<span className="ml-2 inline-flex items-center rounded-md bg-red-100 px-2.5 py-0.5 text-sm font-medium text-red-800">
|
||||
{discount}% OFF
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-2xl font-bold text-primary">
|
||||
{locale === "ar-OM" ? (
|
||||
<>
|
||||
{price.toFixed(2)} {currencySymbol}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{currencySymbol}
|
||||
{price.toFixed(2)}
|
||||
</>
|
||||
)}
|
||||
<div className="flex items-start w-full justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">{title}</h1>
|
||||
<Link href={`/products/${category.slug}`} className="mt-4 flex items-center">
|
||||
<span className={`inline-flex items-center rounded-md bg-gray-100 px-2.5 py-0.5 text-sm font-medium text-gray-800 ltr`}>
|
||||
<CategoryIcon className="h-4 w-4 mx-1" />
|
||||
{category.title}
|
||||
</span>
|
||||
</Link>
|
||||
<p className="text-sm opacity-75">
|
||||
{
|
||||
summery
|
||||
}
|
||||
</p>
|
||||
{showPrice && (
|
||||
<div className="mt-4">
|
||||
{discount ? (
|
||||
<div className="flex items-center">
|
||||
<span className="text-2xl font-bold text-primary">
|
||||
{locale === "ar-OM" ? (
|
||||
<>
|
||||
{discountedPrice.toFixed(2)} {currencySymbol}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{currencySymbol}
|
||||
{discountedPrice.toFixed(2)}
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
<span className="ml-2 text-lg text-gray-500 line-through">
|
||||
{locale === "ar-OM" ? (
|
||||
<>
|
||||
{price.toFixed(2)} {currencySymbol}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{currencySymbol}
|
||||
{price.toFixed(2)}
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
<span className="ml-2 inline-flex items-center rounded-md bg-red-100 px-2.5 py-0.5 text-sm font-medium text-red-800">
|
||||
{discount}% OFF
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-2xl font-bold text-primary">
|
||||
{locale === "ar-OM" ? (
|
||||
<>
|
||||
{price.toFixed(2)} {currencySymbol}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{currencySymbol}
|
||||
{price.toFixed(2)}
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-10">
|
||||
<div>
|
||||
{
|
||||
brand && (
|
||||
<BrandInfo brand={brand} />
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-10 w-full border-t pt-10">
|
||||
{/* Replaced Button with Tailwind CSS */}
|
||||
<button onClick={openModal} className="w-full lg:w-fit px-8 ltr flex items-center justify-center py-2 bg-primary text-white rounded-md hover:bg-primary-dark transition-colors">
|
||||
<ShoppingCart className="mr-2 h-4 w-4" /> {t("cta")}
|
||||
|
|
|
|||
|
|
@ -55,13 +55,16 @@ query Products_connection(
|
|||
|
||||
const ProductRelated = ({ category, brand }) => {
|
||||
const [products, setProducts] = React.useState(null)
|
||||
|
||||
const fetchProducts = async () => {
|
||||
const { products_connection: { nodes } } = await graphql(gql, {
|
||||
categoryId: "",
|
||||
brandId: brand.documentId,
|
||||
categoryId: brand.documentId ? "" : category.documentId,
|
||||
brandId: brand.documentId ? brand.documentId : "",
|
||||
locale: "en"
|
||||
})
|
||||
|
||||
setProducts(nodes)
|
||||
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -71,12 +74,12 @@ const ProductRelated = ({ category, brand }) => {
|
|||
|
||||
const t = useTranslations("PDP")
|
||||
return (
|
||||
|
||||
<div>
|
||||
|
||||
|
||||
<div>
|
||||
|
||||
{
|
||||
products && products.length > 0 && (
|
||||
<ProductCarousel products={products} title={t("productRelated")} showMoreLink={`/products/${brand.slug}`} />
|
||||
<ProductCarousel products={products} title={t("productRelated")} showMoreLink={`/products/${brand.slug}`} />
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue