From a186755d61e5ae82dc41599d1666a54865d74942 Mon Sep 17 00:00:00 2001 From: Dev-scott Date: Fri, 23 Jan 2026 23:44:43 +0100 Subject: [PATCH] update goodie page ui , added new section about the same goodie --- .../(client)/(routes)/goodie/[slug]/page.tsx | 304 ++++++++++++------ 1 file changed, 212 insertions(+), 92 deletions(-) diff --git a/src/app/(client)/(routes)/goodie/[slug]/page.tsx b/src/app/(client)/(routes)/goodie/[slug]/page.tsx index 6c3d5bc..426c1be 100644 --- a/src/app/(client)/(routes)/goodie/[slug]/page.tsx +++ b/src/app/(client)/(routes)/goodie/[slug]/page.tsx @@ -60,6 +60,11 @@ const Goodie = (props: any) => { const [someCollectionGoodies, setSomeCollectionGoodies] = useState( [], ); + + const [isLoadingAllGoodies, setIsLoadingAllGoodies] = useState(true) + const [allGoodies, setAllGoodies] = useState([]) + + const [isLiking, setIsLiking] = useState(false); const [hasLiked, setHasLiked] = useState(false); const [goodie, setGoodie] = useState(); @@ -103,6 +108,33 @@ const Goodie = (props: any) => { }; useEffect(() => { + + + + myAxios + .get("/goodie/all") + .then((response) => { + if (response.status === 200) { + setAllGoodies( + response.data.message, + ); + setIsLoadingAllGoodies(false); + } else { + // console.log(response.data.message); + setIsLoadingAllGoodies(false); + } + }) + .catch((error) => { + toast.error(
{error.message}
, { + icon: "🌐", + style: { textAlign: "center" }, + }); + // console.log(error); + }); + + + + myAxios .get("/goodie/" + props.slug) .then((response) => { @@ -115,7 +147,7 @@ const Goodie = (props: any) => { goodieWithDiscount && goodieWithDiscount._id == response.data.message._id ) { - // console.log("goodie with discount", goodieWithDiscount); + console.log("goodie with discount", goodieWithDiscount); setGoodie(goodieWithDiscount); } else { const sizes = response.data.message.sizes ?? []; @@ -133,6 +165,8 @@ const Goodie = (props: any) => { return aKey.localeCompare(bKey); }); + console.log("goodie response message", response.data.message) + setGoodie({ ...response.data.message, mainImage: response.data.message.images[0], @@ -164,7 +198,7 @@ const Goodie = (props: any) => { }) .catch((error) => { // console.log("error", error) - }); + }); myAxios .get( @@ -238,11 +272,10 @@ const Goodie = (props: any) => { *Size:* ${goodie?.selectedSize} ; *Quantity:* ${goodie?.quantity} ; *Price:* ${goodie?.price} ; -*PromoPrice:* ${ - goodie?.inPromo +*PromoPrice:* ${goodie?.inPromo ? calculatePromoPrice(goodie?.price, goodie?.promoPercentage) : "none" - } ; + } ; *PromoPercent:* ${goodie?.inPromo ? goodie?.promoPercentage : "none"} ; `; @@ -254,13 +287,11 @@ const Goodie = (props: any) => { }; const getCartID = () => { - let text = ` ${goodie?._id}-${goodie?.name}-${ - goodie?.fromCollection.title - }-${goodie?.selectedColor}-${goodie?.selectedSize}-${goodie?.price}-${ - goodie?.inPromo + let text = ` ${goodie?._id}-${goodie?.name}-${goodie?.fromCollection.title + }-${goodie?.selectedColor}-${goodie?.selectedSize}-${goodie?.price}-${goodie?.inPromo ? calculatePromoPrice(goodie?.price, goodie?.promoPercentage) : "none" - }`; + }`; return text; }; @@ -328,10 +359,10 @@ const Goodie = (props: any) => { name: goodie?.name, price: goodie?.price, quantity: goodie?.quantity, - total: goodie?.inPromo? calculatePromoPrice(goodie?.price, goodie?.promoPercentage) * goodie?.quantity : (goodie?.price || 0) * (goodie?.quantity || 0), + total: goodie?.inPromo ? calculatePromoPrice(goodie?.price, goodie?.promoPercentage) * goodie?.quantity : (goodie?.price || 0) * (goodie?.quantity || 0), image: goodie?.mainImage.url, _id: goodie?._id, - size: goodie?.sizes.find(({size}: {size: string}) => size === goodie?.selectedSize)?._id, + size: goodie?.sizes.find(({ size }: { size: string }) => size === goodie?.selectedSize)?._id, sizeName: goodie?.selectedSize, color: goodie?.selectedColor, inPromo: goodie?.inPromo, @@ -484,34 +515,34 @@ const Goodie = (props: any) => { style={ match700 ? { - ...(goodie?.mainImage.url.endsWith(".png") - ? { - backgroundColor: - goodie?.backgroundColors[ - goodie?.images.findIndex( - (image) => - image.url === goodie?.mainImage.url, - ) - ], - } - : {}), - width: "100%", - margin: "0", - } + ...(goodie?.mainImage.url.endsWith(".png") + ? { + backgroundColor: + goodie?.backgroundColors[ + goodie?.images.findIndex( + (image) => + image.url === goodie?.mainImage.url, + ) + ], + } + : {}), + width: "100%", + margin: "0", + } : { - ...(goodie?.mainImage.url.endsWith(".png") - ? { - backgroundColor: - goodie?.backgroundColors[ - goodie?.images.findIndex( - (image) => - image.url === goodie?.mainImage.url, - ) - ], - } - : {}), - position: "relative", - } + ...(goodie?.mainImage.url.endsWith(".png") + ? { + backgroundColor: + goodie?.backgroundColors[ + goodie?.images.findIndex( + (image) => + image.url === goodie?.mainImage.url, + ) + ], + } + : {}), + position: "relative", + } } > {goodie?.inPromo && ( @@ -630,60 +661,60 @@ const Goodie = (props: any) => { {(isLoadingGoodie || (goodie?.availableColors.length ?? 0) > 0) && ( - - - Disponible en couleur - - - {isLoadingGoodie ? ( - - ) : ( - goodie?.availableColors.map((color, i) => - color != "" ? ( - handleSelectedColorChange(color)} - > - + + Disponible en couleur + + + {isLoadingGoodie ? ( + + ) : ( + goodie?.availableColors.map((color, i) => + color != "" ? ( + handleSelectedColorChange(color)} > - {goodie?.selectedColor === color && ( - - )} - - - ) : ( - <> - ), - ) - )} + + {goodie?.selectedColor === color && ( + + )} + + + ) : ( + <> + ), + ) + )} + - - )} + )} {discounts.length > 0 && ( <> @@ -759,9 +790,9 @@ const Goodie = (props: any) => { style={ goodie?.selectedSize === size.size ? { - color: "#06C270", - borderColor: "#06C270", - } + color: "#06C270", + borderColor: "#06C270", + } : {} } className="button" @@ -789,7 +820,7 @@ const Goodie = (props: any) => { dangerouslySetInnerHTML={{ __html: goodie?.description || "", }} - style={{fontSize: '18px'}} + style={{ fontSize: '18px' }} /> )} @@ -1063,6 +1094,95 @@ const Goodie = (props: any) => { )) )} + + + + Similaire a + +     + + + {goodie?.name} + +
+ + + + + {isLoadingAllGoodies ? ( + <> + + + + + + + + + + + + + + ) : ( + allGoodies + .filter((_goodie) => { + if (_goodie?._id === goodie?._id) return false; + const currentName = goodie?.name.toLowerCase() || ""; + const otherName = _goodie?.name.toLowerCase() || ""; + + // Check for exact inclusion + if (otherName.includes(currentName)) return true; + + // Check for shared significant words + const words = currentName.split(" ").filter(w => w.length > 2); + return words.some(w => otherName.includes(w)); + }) + .map((goodie, i) => ( + + + + )))} + + +