order bag history

master
حسین معصومی پور 2024-11-02 19:38:46 +03:30
parent ffb3e3e922
commit 101d650a2e
7 changed files with 145 additions and 114 deletions

View File

@ -16,6 +16,8 @@ export default function CategoriesData({ params, products }) {
const CTX = useContext(AppContext); const CTX = useContext(AppContext);
const searchParams = useSearchParams(); const searchParams = useSearchParams();
console.log("products :products", products);
useEffect(() => { useEffect(() => {
if ( if (
Number(searchParams.get("page")) === 0 || Number(searchParams.get("page")) === 0 ||

View File

@ -54,10 +54,20 @@ const CategoriesHero = () => {
]; ];
return ( return (
<> <>
<div className="grid xs:grid-cols-2 lg:grid-cols-5 gap-4 xs:px-5 lg:px-20"> <div className="grid xs:grid-cols-2 lg:grid-cols-5 gap-4 xs:px-2 lg:px-20">
{categories.map((category, index) => ( {categories.map((category, index) => (
<Link href={category.url} key={index}> <Link
<div className="rounded-lg overflow-hidden relative h-64 group cursor-pointer"> href={category.url}
key={index}
className={` ${
index === categories.length - 1
? "xs:col-span-2 lg:col-span-1"
: " "
}`}
>
<div
className={`rounded-lg overflow-hidden relative xs:h-40 lg:h-64 group cursor-pointer `}
>
{/* Image as a background */} {/* Image as a background */}
<div <div
className="absolute inset-0 bg-cover bg-center transition-transform duration-300 group-hover:scale-105" className="absolute inset-0 bg-cover bg-center transition-transform duration-300 group-hover:scale-105"

View File

@ -98,6 +98,8 @@ const Navbar = ({ theme }) => {
setSearchValue(event.target.value); setSearchValue(event.target.value);
}; };
console.log(dataNav);
return ( return (
<> <>
{isDesktop && ( {isDesktop && (
@ -309,20 +311,25 @@ const Navbar = ({ theme }) => {
> >
<div className="flex rtl"> <div className="flex rtl">
{dataNav?.map((e, index) => ( {dataNav?.map((e, index) => (
<p <Link
className={`mb-0 pt-2 pb-3 px-2 tr03 cursor-pointer ${ key={index}
navItemHover == index href={`/categories/${e.id}/${e.name.split(" ").join("-")}`}
? " border-y-[5px] border-b-primary-800 border-t-transparent text-primary-900" >
: "border-y-[5px] border-y-transparent text-black" <p
} className={`mb-0 pt-2 pb-3 px-2 tr03 cursor-pointer ${
navItemHover == index
? " border-y-[5px] border-b-primary-800 border-t-transparent text-primary-900"
: "border-y-[5px] border-y-transparent text-black"
}
${theme == 0 ? "text-gray-400" : "text-gray-900"} ${theme == 0 ? "text-gray-400" : "text-gray-900"}
${theme == 0 && isScrolled ? "text-gray-900" : ""}`} ${theme == 0 && isScrolled ? "text-gray-900" : ""}`}
onMouseEnter={() => handleItemNavber(index)} onMouseEnter={() => handleItemNavber(index)}
onMouseLeave={() => setNavItemHover(null)} onMouseLeave={() => setNavItemHover(null)}
key={index} key={index}
> >
{e.name}{" "} {e.name}{" "}
</p> </p>
</Link>
))} ))}
</div> </div>
@ -413,9 +420,9 @@ const Navbar = ({ theme }) => {
{e.children.map((child, index) => ( {e.children.map((child, index) => (
<Link <Link
key={index} key={index}
href={`/categories/${child.id}/${e.name href={`/categories/${
.split(" ") child.id
.join("-")}`} }/${child.name.split(" ").join("-")}`}
> >
<p <p
key={child.id} key={child.id}

View File

@ -46,102 +46,98 @@ const BottomSheetSeeOrder = ({ id }) => {
> >
{/* {bag && bag.length > 0 && ( */} {/* {bag && bag.length > 0 && ( */}
<div className="h-[900px]"> <div className="h-[900px]">
{bag.orderProducts?.map((e) => ( <div className="p-3 text-center">
<div className="p-3 text-center"> <p className="pb-3 mb-0 text-sm rtl">
<p className="pb-3 mb-0 text-sm rtl"> <PersianNumber
<PersianNumber number={bag.orderProducts?.length}
number={bag.orderProducts?.length} style="text-xl font-bold text-base font-bold mx-2 !text-primary-500"
style="text-xl font-bold text-base font-bold mx-2 !text-primary-500" />
/> محصول موجود در سبد
محصول موجود در سبد </p>
</p>
{/* <div className="w-5/12 mx-auto h-[1px] bg-gray-200 my-3"></div> */} {/* <div className="w-5/12 mx-auto h-[1px] bg-gray-200 my-3"></div> */}
<div> <div>
{bag.orderProducts.map((e, index) => ( {bag?.orderProducts?.map((e, index) => (
<div className="group border-t-[1px] border-gray-100 w-full hover:bg-white z-40 tr03 flex rtl pt-2"> <div className="group border-t-[1px] border-gray-100 w-full hover:bg-white z-40 tr03 flex rtl pt-2">
<Link href={`/products/${e.id}/${e.persianName}`}> <Link href={`/products/${e.productId}/${e.persianName}`}>
<div className=" h-fit"> <div className=" h-fit">
{!!e.mainImage ? ( {!!e.mainImage ? (
<Image
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${e?.mainImage}`}
width={100}
height={100}
className="xs:!w-[110px] lg:!w-[130px] mx-auto !object-cover"
alt={`${e.productName} - ${e.productName}`}
/>
) : (
<div className="xs:!w-[85px] lg:!w-[85px] ">
<Image <Image
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${e?.mainImage}`} src={logo}
width={100} className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
height={100} alt="وسمه"
className="xs:!w-[110px] lg:!w-[130px] mx-auto !object-cover"
alt={`${e.productName} - ${e.productName}`}
/> />
</div>
)}
</div>
</Link>
<div className="w-full p-3 text-right">
<Link href={`/products/${e.productId}/${e.productName}`}>
<p className="mb-0 xs:text-[12px] lg:text-[11px] xl:text-[15px] max-h-[50px] tr03 ">
{e?.productName}
</p>
</Link>
<div className="flex w-full rounded-full ltr">
<div className="mt-3">
<p className="mb-0 text-sm rtl">
<PersianNumber
number={e?.count}
style={"text-sm ml-1"}
/>
عدد
</p>
</div>
<div className="w-full text-right rounded-full">
{e?.hasDiscount ? (
<div className="relative flex justify-end">
<p className="mb-0 font-bold text-sm absolute opacity-40 mt-[-7px] ml-[20px] text-red-600">
<del>
<PersianNumber
number={(e?.productFee / 10).toLocaleString()}
style={"text-[13px]"}
/>
</del>
</p>
<div className="flex rtl mt-[8px]">
{" "}
<p className="mb-0 font-bold">
<PersianNumber
number={(
e?.productFeeWithDiscount / 10
).toLocaleString()}
/>
</p>
<small className="mr-1 mt-[3px]">تومان</small>
</div>
</div>
) : ( ) : (
<div className="xs:!w-[85px] lg:!w-[85px] "> <div className="flex rtl mt-[3px]">
<Image {" "}
src={logo} <p className="mb-0 text-lg font-bold">
className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5" <PersianNumber
alt="وسمه" number={(e?.productFee / 10).toLocaleString()}
/> />
</p>
<small className="mr-1 mt-[6px]">تومان</small>
</div> </div>
)} )}
</div> </div>
</Link>
<div className="w-full p-3 text-right">
<Link href={`/products/${e.id}/${e.productName}`}>
<p className="mb-0 xs:text-[12px] lg:text-[11px] xl:text-[15px] max-h-[50px] tr03 ">
{e?.productName}
</p>
</Link>
<div className="flex w-full rounded-full ltr">
<div className="mt-3">
<p className="mb-0 text-sm rtl">
<PersianNumber
number={e?.count}
style={"text-sm ml-1"}
/>
عدد
</p>
</div>
<div className="w-full text-right rounded-full">
{e?.hasDiscount ? (
<div className="relative flex justify-end">
<p className="mb-0 font-bold text-sm absolute opacity-40 mt-[-7px] ml-[20px] text-red-600">
<del>
<PersianNumber
number={(
data?.productFee / 10
).toLocaleString()}
style={"text-[13px]"}
/>
</del>
</p>
<div className="flex rtl mt-[8px]">
{" "}
<p className="mb-0 font-bold">
<PersianNumber
number={(
e?.productFeeWithDiscount / 10
).toLocaleString()}
/>
</p>
<small className="mr-1 mt-[3px]">تومان</small>
</div>
</div>
) : (
<div className="flex rtl mt-[3px]">
{" "}
<p className="mb-0 text-lg font-bold">
<PersianNumber
number={(e?.productFee / 10).toLocaleString()}
/>
</p>
<small className="mr-1 mt-[6px]">تومان</small>
</div>
)}
</div>
</div>
</div> </div>
</div> </div>
))} </div>
</div> ))}
</div> </div>
))} </div>
</div> </div>
{/* )} */} {/* )} */}
</BottomSheet> </BottomSheet>

View File

@ -3,10 +3,14 @@ import React from "react";
export async function generateMetadata({ params }) { export async function generateMetadata({ params }) {
const decodedName = decodeURIComponent(params.id[1]); const decodedName = decodeURIComponent(params.id[1]);
const products = await fetchProducts(params?.["id"]?.[0]);
return { return {
title: decodedName, title: decodedName,
description: ` خرید ${decodedName}| برندهای متنوع با پایین ترین قیمت | فروشگاه اینترنتی وسمه`, description:
products.seo.description != ""
? products.seo.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}`
), ),
@ -22,13 +26,19 @@ export async function generateMetadata({ params }) {
}, },
openGraph: { openGraph: {
title: decodedName, title: decodedName,
description: ` خرید ${decodedName}| برندهای متنوع با پایین ترین قیمت | فروشگاه اینترنتی وسمه`, description:
products.seo.description != ""
? products.seo.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",
}, },
twitter: { twitter: {
site: "@vesmehstore", site: "@vesmehstore",
description: ` خرید ${decodedName}| برندهای متنوع با پایین ترین قیمت | فروشگاه اینترنتی وسمه`, description:
products.seo.description != ""
? products.seo.description
: ` خرید ${decodedName}| برندهای متنوع با پایین ترین قیمت | فروشگاه اینترنتی وسمه`,
title: decodedName, title: decodedName,
creator: "@vesmehstore", creator: "@vesmehstore",
}, },
@ -42,7 +52,8 @@ export async function generateMetadata({ params }) {
// minPrice // minPrice
// maxPrice // maxPrice
// sortBy // sortBy
const fetchProducts = async (categoryId, searchParams) => {
const fetchProducts = async (categoryId, searchParams = {}) => {
const { const {
brandIds: brandIdsString, brandIds: brandIdsString,
isActive, isActive,
@ -53,19 +64,23 @@ const fetchProducts = async (categoryId, searchParams) => {
const query = { const query = {
...(categoryId != 0 ? { categoryId } : {}), ...(categoryId != 0 ? { categoryId } : {}),
page: 0, page: 0,
...(!!isActive ? { isActive: !!isActive } : {}), ...(typeof isActive !== "undefined" ? { isActive: !!isActive } : {}),
...(!!specialOffer ? { specialOffer: !!specialOffer } : {}), ...(typeof specialOffer !== "undefined"
? { specialOffer: !!specialOffer }
: {}),
...params, ...params,
}; };
const brandIds = brandIdsString?.split(",") ?? []; const brandIds = brandIdsString?.split(",") ?? [];
const brandIdsQuery = const brandIdsQuery =
brandIds?.length > 0 ? `&brandIds=${brandIds?.join("&brandIds=")}` : ""; brandIds.length > 0
? `&${brandIds.map((id) => `brandIds=${id}`).join("&")}`
: "";
try { try {
const res = await fetch( const res = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/product?` + `${process.env.NEXT_PUBLIC_API_URL}/product?` +
new URLSearchParams({ ...query }) + new URLSearchParams(query).toString() +
brandIdsQuery, brandIdsQuery,
{ {
cache: "no-cache", cache: "no-cache",
@ -74,9 +89,10 @@ const fetchProducts = async (categoryId, searchParams) => {
if (!res.ok) return []; if (!res.ok) return [];
const products = await res.json(); const products = await res.json();
console.log("products++++++++++++++++++++++++++++++++", products); console.log("Fetched products:", products);
return products; return products;
} catch (error) { } catch (error) {
console.error("Error fetching products:", error);
return []; return [];
} }
}; };

View File

@ -41,7 +41,7 @@ const SideBarProfile = () => {
<Link href={"/profile/orders"}> <Link href={"/profile/orders"}>
<div className="flex justify-between p-4 rounded-full group-hover:bg-primary-200 tr03"> <div className="flex justify-between p-4 rounded-full group-hover:bg-primary-200 tr03">
<p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03"> <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
پیگیری سغارشات پیگیری سفارشات
</p> </p>
<div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div> <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
</div> </div>