NetinaShop
/
web
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

torob tags

master
mpn 2024-03-31 09:19:15 +03:30
parent 91fbacf359
commit 18e4fb0786
2 changed files with 55 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/AppsComponent/ProductData/page.jsx
View File

@ -9,7 +9,7 @@ import Image from "next/image";
import PersianNumber from "plugins/PersianNumber"; import PersianNumber from "plugins/PersianNumber";
import logo from "../../../public/images/logo.png"; import logo from "../../../public/images/logo.png";
const ProductData = ({ params }) => { const ProductData = ({ params, data }) => {
const [product, setProduct] = useState([]); const [product, setProduct] = useState([]);
const [specificationsHeader, setSpecificationsHeader] = useState([]); const [specificationsHeader, setSpecificationsHeader] = useState([]);
const [productBarDetail, setProductBarDetail] = useState(0); const [productBarDetail, setProductBarDetail] = useState(0);
@ -65,14 +65,16 @@ const ProductData = ({ params }) => {
<div className=" py-10"> <div className=" py-10">
<div className="grid xs:grid-cols-1 lg:grid-cols-8 rtl gap-6 lg:px-20"> <div className="grid xs:grid-cols-1 lg:grid-cols-8 rtl gap-6 lg:px-20">
<div className="lg:col-span-3 "> <div className="lg:col-span-3 ">
<GalleryBox file={product.files} /> <GalleryBox file={data?.product?.files} />
</div> </div>
<div className="lg:col-span-3 xs:px-5 lg:px-0 "> <div className="lg:col-span-3 xs:px-5 lg:px-0 ">
<div className="text-right mt-7"> <div className="text-right mt-7">
<h1 className="text-lg font-medium ">{product.persianName} </h1> <h1 className="text-lg font-medium ">
{data.product?.persianName}{" "}
</h1>
<p className="mb-0 text-sm text-gray-400"> <p className="mb-0 text-sm text-gray-400">
{product?.englishName}{" "} {data?.product?.englishName}{" "}
</p> </p>
</div> </div>
@ -81,13 +83,13 @@ const ProductData = ({ params }) => {
<p className="mb-0 text-sm text-white ">اصالت کالای </p> <p className="mb-0 text-sm text-white ">اصالت کالای </p>
</div> </div>
{product?.hasDiscount && ( {data?.product?.hasDiscount && (
<div className="bg-danger-100 rounded-full py-1 px-3 ml-2"> <div className="bg-danger-100 rounded-full py-1 px-3 ml-2">
<p className="mb-0 text-sm text-white ">بمب امروز </p> <p className="mb-0 text-sm text-white ">بمب امروز </p>
</div> </div>
)} )}
{!product?.warranty == "" && ( {!data?.product?.warranty == "" && (
<div className="bg-secondary-500 rounded-full py-1 px-3 ml-2"> <div className="bg-secondary-500 rounded-full py-1 px-3 ml-2">
<p className="mb-0 text-sm text-white "> <p className="mb-0 text-sm text-white ">
{product?.warranty} {product?.warranty}
@ -109,7 +111,7 @@ const ProductData = ({ params }) => {
<div> <div>
<div className="text-right mt-3 flex justify-between"> <div className="text-right mt-3 flex justify-between">
<h2 className="mb-0 text-gray-400 text-sm"> <h2 className="mb-0 text-gray-400 text-sm">
{product?.summery} {data?.product?.summery}
</h2> </h2>
</div> </div>
</div> </div>
@ -132,7 +134,7 @@ const ProductData = ({ params }) => {
<div className="p-3 h-fit border-[1px] border-gray-300 rounded-xl "> <div className="p-3 h-fit border-[1px] border-gray-300 rounded-xl ">
<div className="flex justify-center"> <div className="flex justify-center">
<div className="w-[130px]"> <div className="w-[130px]">
{product.files?.length > 0 ? ( {data?.product?.files?.length > 0 ? (
<Image <Image
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${ src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${
product.files && product.files[0].fileLocation product.files && product.files[0].fileLocation
@ -156,7 +158,7 @@ const ProductData = ({ params }) => {
</div> </div>
<div className="text-center"> <div className="text-center">
<p className="mb-0 text-sm text-gray-500"> <p className="mb-0 text-sm text-gray-500">
{product.persianName}{" "} {data?.product?.persianName}{" "}
</p> </p>
</div> </div>
<div className="w-6/12 mx-auto h-[1px] bg-gray-200 mt-4"></div> <div className="w-6/12 mx-auto h-[1px] bg-gray-200 mt-4"></div>
@ -199,7 +201,7 @@ const ProductData = ({ params }) => {
<div className="mb-0 font-bold text-sm absolute mt-[-11px] ml-[0px] right-0 mr-[13px] text-red-600 flex rtl"> <div className="mb-0 font-bold text-sm absolute mt-[-11px] ml-[0px] right-0 mr-[13px] text-red-600 flex rtl">
<del> <del>
<PersianNumber <PersianNumber
number={(product?.cost / 10).toLocaleString()} number={(data?.product?.cost / 10).toLocaleString()}
style={"text-[13px] opacity-40 "} style={"text-[13px] opacity-40 "}
/> />
</del> </del>
@ -209,7 +211,7 @@ const ProductData = ({ params }) => {
<p className="mb-0 font-bold"> <p className="mb-0 font-bold">
<PersianNumber <PersianNumber
number={( number={(
product?.costWithDiscount / 10 data?.product?.costWithDiscount / 10
).toLocaleString()} ).toLocaleString()}
/> />
</p> </p>
@ -227,7 +229,7 @@ const ProductData = ({ params }) => {
<small className="mr-1 mt-[6px]">تومان</small> <small className="mr-1 mt-[6px]">تومان</small>
</div> </div>
)} )}
<AddToCart data={product} theme={2} /> <AddToCart data={data?.product} theme={2} />
</div> </div>
</div> </div>
</div> </div>
@ -361,7 +363,7 @@ const ProductData = ({ params }) => {
<p className="mb-0 font-bold text-sm absolute ml-[33px] opacity-30 mt-[-5px] text-red-600"> <p className="mb-0 font-bold text-sm absolute ml-[33px] opacity-30 mt-[-5px] text-red-600">
<del> <del>
<PersianNumber <PersianNumber
number={(product?.cost / 10).toLocaleString()} number={(data?.product?.cost / 10).toLocaleString()}
style="!text-[11px]" style="!text-[11px]"
/> />
</del> </del>
@ -371,7 +373,7 @@ const ProductData = ({ params }) => {
<p className="mb-0 font-bold"> <p className="mb-0 font-bold">
<PersianNumber <PersianNumber
number={( number={(
product?.costWithDiscount / 10 data?.product?.costWithDiscount / 10
).toLocaleString()} ).toLocaleString()}
/> />
</p> </p>
@ -383,13 +385,13 @@ const ProductData = ({ params }) => {
{" "} {" "}
<p className="mb-0 font-bold text-lg"> <p className="mb-0 font-bold text-lg">
<PersianNumber <PersianNumber
number={(product?.cost / 10).toLocaleString()} number={(data?.product?.cost / 10).toLocaleString()}
/> />
</p> </p>
<small className="mr-1 mt-[6px]">تومان</small> <small className="mr-1 mt-[6px]">تومان</small>
</div> </div>
)} )}
<AddToCart data={product} theme={2} /> <AddToCart data={data?.product} theme={2} />
</div> </div>
</div> </div>
</div> </div>

39
src/app/products/[...id]/page.jsx
View File

@ -1,14 +1,25 @@
import ProductData from "@comp/AppsComponent/ProductData/page"; import ProductData from "@comp/AppsComponent/ProductData/page";
async function getData(id) {
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/product/${id}`);
const post = await res.json();
return post;
}
export async function generateMetadata({ params }) { export async function generateMetadata({ params }) {
const data = await getData(params.id[0]);
const decodedName = decodeURIComponent(params.id[1]); const decodedName = decodeURIComponent(params.id[1]);
console.log("dddddd", data?.product);
return { return {
title: decodedName, title: decodedName,
description: ` خرید ${decodedName}| برندهای متنوع با پایین ترین قیمت | فروشگاه اینترنتی وسمه`, description: ` خرید ${decodedName}| برندهای متنوع با پایین ترین قیمت | فروشگاه اینترنتی وسمه`,
metadataBase: new URL( metadataBase: new URL(
`https://www.vesmeh.com/categories/${params.id[0]}/${decodedName}` `https://www.vesmeh.com/categories/${params.id[0]}/${decodedName}`
), ),
product_id_meta: data?.product?.id,
keywords: [ keywords: [
"آرایشی", "آرایشی",
"بهداشت خانگی", "بهداشت خانگی",
@ -21,6 +32,19 @@ export async function generateMetadata({ params }) {
description: ` خرید ${decodedName}| برندهای متنوع با پایین ترین قیمت | فروشگاه اینترنتی وسمه`, description: ` خرید ${decodedName}| برندهای متنوع با پایین ترین قیمت | فروشگاه اینترنتی وسمه`,
url: `https://www.vesmeh.com/categories/${params.id[0]}/${decodedName}`, url: `https://www.vesmeh.com/categories/${params.id[0]}/${decodedName}`,
type: "website", type: "website",
images: [
{
url: JSON.stringify(
process.env.NEXT_PUBLIC_STORAGE_URL + "/" + data?.product?.files &&
data?.product?.files[0].fileLocation
), // Dynamic og route
width: 800,
height: 600,
},
],
locale: "en_US",
type: "website",
}, },
twitter: { twitter: {
site: "@vesmehstore", site: "@vesmehstore",
@ -28,12 +52,23 @@ export async function generateMetadata({ params }) {
title: decodedName, title: decodedName,
creator: "@vesmehstore", creator: "@vesmehstore",
}, },
other: {
product_id: data?.product?.id,
product_name: data?.product?.persianName,
product_price: data?.product?.costWithDiscount,
product_old_price: data?.product?.cost,
availability: data?.product?.stock > 0 ? "instock" : "outofstock",
guarantee: "guarantee_sample",
},
}; };
} }
const Page = ({ params }) => {
const Page = async ({ params }) => {
const data = await getData(params.id[0]);
return ( return (
<> <>
<ProductData params={params} /> <ProductData params={params} data={data} />
</> </>
); );
}; };