Skip to content
This repository was archived by the owner on Jan 26, 2026. It is now read-only.

Commit 9b7cf60

Browse files
dangthang1903dangthang1903
authored
Merge branch 'Weaverse:main' into main
2 parents 30f60da + ca34a1e commit 9b7cf60

File tree

14 files changed

+297
-117
lines changed

14 files changed

+297
-117
lines changed

‎app/components/cart/cart.tsx‎

Lines changed: 159 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,7 @@ function CartDetails({
6262
"grid grid-cols-1 grid-rows-[1fr_auto] px-4 pt-6",
6363
enableFreeShipping ? "h-[calc(100vh-100px)]" : "h-[100vh]",
6464
],
65-
layout === "page" && [
66-
"pb-12 w-full max-w-(--page-width) mx-auto",
67-
"grid grid-cols-1 lg:grid-cols-3 md:items-start",
68-
"gap-8 md:gap-8 lg:gap-12",
69-
]
65+
layout === "page" && ["flex lg:gap-5 gap-10"],
7066
)}
7167
>
7268
<div
@@ -75,13 +71,30 @@ function CartDetails({
7571
? `overflow-y-auto max-h-full pr-3 ${
7672
enableFreeShipping ? "pb-5" : "pb-16"
7773
}`
78-
: "lg:col-span-2 order-1 lg:order-none"
74+
: "lg:w-2/3 w-full",
7975
)}
8076
>
8177
<CartLines lines={cart?.lines?.nodes} layout={layout} />
8278
</div>
8379
<CartSummary cost={cart.cost} layout={layout}>
8480
<CartDiscounts discountCodes={cart.discountCodes} />
81+
{layout === "page" && (
82+
<div className="border-y border-line-subtle py-6 flex flex-col gap-6">
83+
<div className="flex items-center justify-between font-medium">
84+
<span className="font-normal">Subtotal</span>
85+
<span className="font-normal">
86+
{cart?.cost?.subtotalAmount?.amount ? (
87+
<Money data={cart?.cost?.subtotalAmount} />
88+
) : (
89+
"-"
90+
)}
91+
</span>
92+
</div>
93+
<span className="font-normal text-[#918379]">
94+
Shipping & taxes calculated at checkout
95+
</span>
96+
</div>
97+
)}
8598
<CartCheckoutActions checkoutUrl={cart.checkoutUrl} layout={layout} />
8699
</CartSummary>
87100
</div>
@@ -205,17 +218,15 @@ function CartLines({
205218
<div
206219
ref={scrollRef}
207220
className={clsx([
208-
"-mx-4 pb-4",
209221
y > 0 ? "border-t border-line-subtle" : "",
210-
layout === "page" && "grow md:translate-y-4 lg:col-span-2",
222+
layout === "page" && "w-full",
211223
layout === "drawer" && "transition",
212224
])}
213225
>
214226
<ul
215227
className={clsx(
216-
"grid",
217-
layout === "page" && "gap-9",
218-
layout === "drawer" && "gap-5"
228+
layout === "page" && "flex flex-col",
229+
layout === "drawer" && "grid gap-5",
219230
)}
220231
>
221232
{currentLines.map((line, index) => (
@@ -273,25 +284,28 @@ function CartSummary({
273284
className={clsx(
274285
layout === "drawer" &&
275286
"sticky bottom-0 grid gap-4 border-t border-line-subtle p-4 bg-white",
276-
layout === "page" &&
277-
"sticky top-(--height-nav) grid gap-6 p-4 md:px-6 md:translate-y-4 rounded w-full lg:col-span-1 order-2 lg:order-none"
287+
layout === "page" && "flex flex-col gap-6 px-6 pb-6 lg:w-1/3 w-full",
278288
)}
279289
>
280-
<h2 id="summary-heading" className="sr-only">
281-
Order summary
282-
</h2>
283-
<dl className="grid">
284-
<div className="flex items-center justify-between font-medium">
285-
<dt>Subtotal</dt>
286-
<dd>
287-
{cost?.subtotalAmount?.amount ? (
288-
<Money data={cost?.subtotalAmount} />
289-
) : (
290-
"-"
291-
)}
292-
</dd>
293-
</div>
294-
</dl>
290+
{layout === "page" && (
291+
<span className="font-semibold uppercase border-b border-line-subtle pb-6">
292+
Order summary
293+
</span>
294+
)}
295+
{layout === "drawer" && (
296+
<dl className="grid">
297+
<div className="flex items-center justify-between font-medium">
298+
<dt>Subtotal</dt>
299+
<dd>
300+
{cost?.subtotalAmount?.amount ? (
301+
<Money data={cost?.subtotalAmount} />
302+
) : (
303+
"-"
304+
)}
305+
</dd>
306+
</div>
307+
</dl>
308+
)}
295309
{children}
296310
</div>
297311
);
@@ -334,62 +348,123 @@ function CartLineItem({
334348
return (
335349
<li
336350
className={clsx(
337-
"grid gap-4",
338-
layout === "drawer" ? "" : "grid-cols-1 md:grid-cols-2"
351+
layout === "drawer"
352+
? "flex gap-4"
353+
: "flex items-center h-full bg-white",
339354
)}
340355
style={{
341356
display: optimisticData?.action === "remove" ? "none" : "flex",
342357
}}
343358
>
344-
<div className="shrink-0">
359+
{/* Thumbnail */}
360+
<div
361+
className={clsx(
362+
"shrink-0",
363+
layout === "drawer" ? "" : "w-[360px] h-[360px]",
364+
)}
365+
>
345366
{image && (
346367
<Image
347-
width={250}
348-
height={250}
368+
width={layout === "drawer" ? 250 : 360}
369+
height={layout === "drawer" ? 250 : 360}
349370
data={image}
350371
className={clsx(
351372
"!object-cover",
352-
layout === "drawer" ? "w-36 h-auto" : "w-full h-auto"
373+
layout === "drawer" ? "w-36 h-auto" : "w-full h-full rounded",
353374
)}
354375
alt={title}
355376
aspectRatio={getImageAspectRatio(image, "1/1")}
356377
/>
357378
)}
358379
</div>
380+
381+
{/* Info Section */}
359382
<div
360383
className={clsx(
361-
"flex flex-col justify-between grow",
362-
layout === "drawer" ? "" : "p-6"
384+
"flex flex-col",
385+
layout === "drawer" ? "grow justify-between" : "p-6 h-[360px]",
363386
)}
364387
>
365-
<div className="flex justify-between gap-4">
366-
<div className="space-y-1">
388+
{layout === "page" ? (
389+
// Page Layout - New Design
390+
<div className="flex flex-col justify-between h-full">
367391
<div>
368-
{product?.handle ? (
369-
<Link to={url} onClick={() => toggleCartDrawer(false)}>
370-
<RevealUnderline>{product?.title || ""}</RevealUnderline>
371-
</Link>
372-
) : (
373-
<p>{product?.title || ""}</p>
374-
)}
392+
{/* Title and Close Button */}
393+
<div className="flex items-center justify-between gap-1 mb-4">
394+
<div className="flex-1">
395+
{product?.handle ? (
396+
<Link to={url} onClick={() => toggleCartDrawer(false)}>
397+
<span className="font-semibold uppercase line-clamp-1">
398+
{product?.title || ""}
399+
</span>
400+
</Link>
401+
) : (
402+
<p className="font-semibold tracking-wide line-clamp-1">
403+
{product?.title || ""}
404+
</p>
405+
)}
406+
</div>
407+
<ItemRemoveButton
408+
lineId={id}
409+
className="w-4 h-4"
410+
layout={layout}
411+
/>
412+
</div>
413+
414+
{/* Variant Information */}
415+
<div className="flex flex-col font-normal">
416+
{title.split(" / ").map((option, index) => (
417+
<span key={index} className="">
418+
{option.trim()}
419+
</span>
420+
))}
421+
</div>
422+
</div>
423+
424+
{/* Quantity and Pricing */}
425+
<div className="flex items-center justify-between">
426+
<div className="">
427+
Item price: <CartLinePrice line={line} as="span" />
428+
</div>
429+
<CartLineQuantityAdjust
430+
line={line}
431+
isLastItem={isLastItem}
432+
layout={layout}
433+
/>
434+
<div className="font-medium">
435+
<CartLinePrice line={line} as="span" />
436+
</div>
375437
</div>
376-
<div className="text-sm text-gray-500 space-y-0.5">{title}</div>
377438
</div>
378-
{layout === "page" && (
439+
) : (
440+
// Drawer Layout - Original Design
441+
<>
442+
<div className="flex justify-between gap-4">
443+
<div className="space-y-1">
444+
<div>
445+
{product?.handle ? (
446+
<Link to={url} onClick={() => toggleCartDrawer(false)}>
447+
<span className="font-semibold uppercase line-clamp-1">
448+
{product?.title || ""}
449+
</span>
450+
</Link>
451+
) : (
452+
<p>{product?.title || ""}</p>
453+
)}
454+
</div>
455+
<div className="text-sm text-gray-500 space-y-0.5">{title}</div>
456+
</div>
457+
</div>
458+
<div className="flex items-center gap-2 justify-between">
459+
<CartLineQuantityAdjust
460+
line={line}
461+
isLastItem={isLastItem}
462+
layout={layout}
463+
/>
464+
<CartLinePrice line={line} as="span" />
465+
</div>
379466
<ItemRemoveButton lineId={id} className="" layout={layout} />
380-
)}
381-
</div>
382-
<div
383-
className={clsx(
384-
"flex items-center gap-2",
385-
layout === "drawer" && "justify-between"
386-
)}
387-
>
388-
<CartLineQuantityAdjust line={line} isLastItem={isLastItem} />
389-
<CartLinePrice line={line} as="span" />
390-
</div>
391-
{layout === "drawer" && (
392-
<ItemRemoveButton lineId={id} className="" layout={layout} />
467+
</>
393468
)}
394469
</div>
395470
</li>
@@ -428,9 +503,11 @@ function ItemRemoveButton({
428503
function CartLineQuantityAdjust({
429504
line,
430505
isLastItem,
506+
layout,
431507
}: {
432508
line: CartLine;
433509
isLastItem: boolean;
510+
layout: Layouts;
434511
}) {
435512
let optimisticData = useOptimisticData<OptimisticData>(line?.id);
436513
const [isOpen, setIsOpen] = useState(false);
@@ -465,24 +542,38 @@ function CartLineQuantityAdjust({
465542
</label>
466543
<div className="relative quantity-selector">
467544
<button
468-
className="flex gap-2 items-center px-3 py-2 min-w-[80px] relative bg-white"
545+
className={clsx(
546+
"flex gap-2 items-center py-2 min-w-[80px] relative bg-white",
547+
layout === "page" ? "" : "",
548+
)}
469549
onClick={(e) => {
470550
e.stopPropagation();
471551
setIsOpen(!isOpen);
472552
}}
473553
type="button"
474554
disabled={isOptimistic}
475555
>
476-
<span>QTY</span>
477-
<span className="flex-1 text-center">{optimisticQuantity}</span>
478-
<CaretDown />
556+
<span
557+
className={clsx(layout === "page" ? "text-sm font-medium" : "")}
558+
>
559+
QTY
560+
</span>
561+
<span
562+
className={clsx(
563+
"flex-1 text-center",
564+
layout === "page" ? "text-sm" : "",
565+
)}
566+
>
567+
{optimisticQuantity}
568+
</span>
569+
<CaretDown className={clsx(layout === "page" ? "w-3 h-3" : "")} />
479570
</button>
480571

481572
{isOpen && (
482573
<div
483574
className={clsx(
484575
"absolute left-0 bg-white shadow-2xl rounded-md z-10 min-w-[80px]",
485-
isLastItem ? "bottom-full mb-1" : "top-full mt-1"
576+
isLastItem ? "bottom-full mb-1" : "top-full mt-1",
486577
)}
487578
>
488579
{quantities.map((qty) => (
@@ -499,7 +590,7 @@ function CartLineQuantityAdjust({
499590
"w-full text-center px-4 py-2 text-sm hover:bg-gray-100 transition",
500591
qty === optimisticQuantity
501592
? "bg-gray-200 text-primary font-medium"
502-
: "text-gray-700"
593+
: "text-gray-700",
503594
)}
504595
type="submit"
505596
disabled={isOptimistic || qty === optimisticQuantity}
@@ -572,7 +663,7 @@ function CartEmpty({
572663
layout === "page" && [
573664
hidden ? "" : "grid",
574665
"pb-12 w-full md:items-start gap-4 md:gap-8 lg:gap-12",
575-
]
666+
],
576667
)}
577668
hidden={hidden}
578669
>
@@ -594,7 +685,7 @@ function CartEmpty({
594685
count={4}
595686
heading="Shop Best Sellers"
596687
layout={layout}
597-
sortKey="BEST_SELLING"
688+
sortKey="BEST_SELLING"
598689
/>
599690
</div>
600691
)}

‎app/components/product/product-media.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ export function ProductMedia(props: ProductMediaProps) {
224224

225225
{/* Navigation Buttons */}
226226
<div className={clsx(
227-
"absolute z-10 hidden md:flex items-center gap-2",
227+
"absolute z-[5] hidden md:flex items-center gap-2",
228228
{
229229
"bottom-6 right-6": navigationStyle === "corner",
230230
"inset-0 justify-between items-center pointer-events-none": navigationStyle === "sides"
@@ -263,7 +263,7 @@ export function ProductMedia(props: ProductMediaProps) {
263263

264264
{/* Badges Overlay */}
265265
{showBadges && badges && (
266-
<div className="absolute top-2.5 left-2.5 flex items-center gap-2 z-10">
266+
<div className="absolute top-2.5 left-2.5 flex items-center gap-2 z-[5]">
267267
{badges}
268268
</div>
269269
)}
@@ -379,7 +379,7 @@ function ProductMediaDots({ slidesCount, activeIndex, onDotClick }: ProductMedia
379379

380380
return (
381381
<div
382-
className="absolute bottom-6 left-1/2 -translate-x-1/2 z-10 flex justify-center items-center gap-0"
382+
className="absolute bottom-6 left-1/2 -translate-x-1/2 z-[5] flex justify-center items-center gap-0"
383383
style={{
384384
maxWidth: maxContainerWidth,
385385
width: 'fit-content'

0 commit comments

Comments
 (0)