Merge branch 'Weaverse:main' into main

dangthang1903 · web-flow · commit 5b50d83e260e · 2025-08-06T16:19:43.000+07:00
diff --git a/app/components/layout/cart-drawer.tsx b/app/components/layout/cart-drawer.tsx
@@ -1,4 +1,4 @@
-import { HandbagIcon, XIcon } from "@phosphor-icons/react";
+import { ShoppingBagIcon, XIcon } from "@phosphor-icons/react";
 import * as Dialog from "@radix-ui/react-dialog";
 import { type CartReturn, useAnalytics } from "@shopify/hydrogen";
 import clsx from "clsx";
@@ -23,7 +23,7 @@ export function CartDrawer() {
           to="/cart"
           className="relative flex items-center justify-center w-8 h-8 focus:ring-border"
         >
-          <HandbagIcon className="w-5 h-5" />
+          <ShoppingBagIcon className="w-5 h-5" />
         </Link>
       }
     >
@@ -34,17 +34,17 @@ export function CartDrawer() {
               onClick={() => publish("custom_sidecart_viewed", { cart })}
               className="relative flex items-center justify-center w-8 h-8 focus:ring-border"
             >
-              <HandbagIcon className="w-5 h-5" />
+              <ShoppingBagIcon className="w-5 h-5" />
               {cart?.totalQuantity > 0 && (
                 <div
                   className={clsx(
-                    "cart-count",
+                    // "cart-count",
                     "absolute top-0 -right-1.5",
                     "flex items-center text-center justify-center min-w-4.5 h-4.5 px-1 rounded-full",
-                    "text-[13px] leading-none text-center font-medium",
+                    "text-[12px] leading-none text-center font-normal",
                     "transition-colors duration-300",
-                    "group-hover/header:bg-(--color-header-text)",
-                    "group-hover/header:text-(--color-header-bg)"
+                    // "group-hover/header:bg-(--color-header-text)",
+                    // "group-hover/header:text-(--color-header-bg)"
                   )}
                 >
                   <span className="-mr-px">{cart?.totalQuantity}</span>
diff --git a/app/components/layout/desktop-menu.tsx b/app/components/layout/desktop-menu.tsx
@@ -2,6 +2,7 @@ import * as Menubar from "@radix-ui/react-menubar";
 import { useThemeSettings } from "@weaverse/hydrogen";
 import clsx from "clsx";
 import { useState } from "react";
+import { useNavigate } from "react-router";
 import { Image } from "~/components/image";
 import Link from "~/components/link";
 import { useShopMenu } from "~/hooks/use-shop-menu";
@@ -12,6 +13,7 @@ export function DesktopMenu() {
   const { headerMenu } = useShopMenu();
   const { openMenuBy } = useThemeSettings();
   const [value, setValue] = useState<string | null>(null);
+  const navigate = useNavigate();
 
   if (headerMenu?.items?.length) {
     const items = headerMenu.items as unknown as SingleMenuItem[];
@@ -43,11 +45,15 @@ export function DesktopMenu() {
                       setValue(id);
                     }
                   }}
+                  onPointerDown={hasSubmenu ? (e) => {
+                    // Allow navigation on left click while preserving submenu behavior
+                    if (e.button === 0 && !e.ctrlKey && !e.metaKey) {
+                      navigate(to);
+                    }
+                  } : undefined}
                 >
                   {hasSubmenu ? (
-                    <>
-                      <span>{title}</span>
-                    </>
+                    <span>{title}</span>
                   ) : (
                     <Link to={to} className="transition-none">
                       {title}
@@ -106,23 +112,23 @@ function MegaMenu({ items }: { items: SingleMenuItem[] }) {
         resource?.image && children.length === 0 ? (
           <SlideIn
             key={id}
-            className="flex flex-col gap-5 group/item overflow-hidden"
+            className="group/item overflow-hidden"
             style={{ "--idx": idx } as React.CSSProperties}
           >
-            <Image
-              sizes="auto"
-              data={resource.image}
-              className="group-hover/item:scale-[1.03] transition-transform duration-300 max-w-72 w-72 aspect-square"
-              width={300}
-            />
             <Link
               to={to}
               prefetch="intent"
-              className={clsx([
-                "text-left",
-                "font-normal uppercase",
-              ])}
+              className={clsx(["text-left", "font-normal uppercase", "flex flex-col gap-5"])}
             >
+              <div className="relative overflow-hidden max-w-72 w-72 aspect-square">
+                <Image
+                  sizes="auto"
+                  data={resource.image}
+                  className="w-full h-full object-cover"
+                  width={300}
+                />
+                <div className="absolute inset-0 bg-black opacity-0 group-hover/item:opacity-20 transition-opacity duration-300"></div>
+              </div>
               <span>{title}</span>
             </Link>
           </SlideIn>
diff --git a/app/components/layout/footer.tsx b/app/components/layout/footer.tsx
@@ -165,6 +165,7 @@ export function Footer() {
                       variant="primary"
                       type="submit"
                       loading={fetcher.state === "submitting"}
+                      className="uppercase"
                     >
                       {newsletterButtonText}
                     </Button>
diff --git a/app/components/product/add-to-cart-button.tsx b/app/components/product/add-to-cart-button.tsx
@@ -50,7 +50,7 @@ export function AddToCartButton({
             />
             <Button
               type="submit"
-              variant="secondary"
+              variant="primary"
               className={cn(
                 className,
                 "px-6 py-5"
diff --git a/app/components/product/product-card.tsx b/app/components/product/product-card.tsx
@@ -50,6 +50,7 @@ export function ProductCard({
     pcardQuickShopButtonText,
     pcardQuickShopAction,
     pcardQuickShopPanelType,
+    pcardBadgesPosition,
     pcardShowSaleBadges,
     pcardShowBestSellerBadges,
     pcardShowNewBadges,
@@ -73,6 +74,19 @@ export function ProductCard({
     .filter(Boolean)
     .some(({ key, value }) => key === "best_seller" && value === "true");
 
+  // Helper function to get badge position classes
+  const getBadgePositionClasses = (position: string = "top-right") => {
+    switch (position) {
+      case "top-left":
+        return "flex gap-1 absolute top-2.5 left-2.5";
+      case "top-center":
+        return "flex gap-1 absolute top-2.5 left-1/2 -translate-x-1/2";
+      case "top-right":
+      default:
+        return "flex gap-1 absolute top-2.5 right-2.5";
+    }
+  };
+
   let [image, secondImage] = images.nodes;
   if (selectedVariant) {
     if (selectedVariant.image) {
@@ -140,7 +154,7 @@ export function ProductCard({
               )}
             </Link>
           )}
-          <div className="flex gap-1 absolute top-2.5 right-2.5">
+          <div className={getBadgePositionClasses(pcardBadgesPosition)}>
             {pcardShowSaleBadges && (
               <SaleBadge
                 price={minVariantPrice as MoneyV2}
diff --git a/app/components/product/quick-shop.tsx b/app/components/product/quick-shop.tsx
@@ -11,7 +11,6 @@ import { useThemeSettings } from "@weaverse/hydrogen";
 import clsx from "clsx";
 import { useEffect, useState } from "react";
 import { useFetcher, Link } from "react-router";
-import { Button } from "~/components/button";
 import { AddToCartButton } from "~/components/product/add-to-cart-button";
 import { ProductMedia } from "~/components/product/product-media";
 import { QuickShopVariants } from "~/components/product/quick-shop-variants";
@@ -340,19 +339,35 @@ export function QuickShopTrigger({ productHandle }: { productHandle: string }) {
         <button
           type="button"
           className={clsx(
-            "absolute inset-x-4 bottom-4 !opacity-0 -translate-y-1.5 -translate-x-2 lg:group-hover:!opacity-100 lg:group-hover:translate-x-0 lg:group-hover:translate-y-2 !transition-all duration-500",
-            "border px-4 py-2",
-            "text-(--btn-secondary-text)",
-            "bg-(--btn-secondary-bg)",
-            "border-(--btn-secondary-bg)",
-            "hover:bg-(--btn-secondary-text)",
-            "hover:text-(--btn-secondary-bg)",
-            "hover:border-(--btn-secondary-text)",
-            "inline-flex items-center justify-center rounded-none",
-            "text-base leading-tight font-normal whitespace-nowrap",
+            // Mobile/Tablet: Always visible circular button at bottom right
+            "absolute bottom-4 right-4 w-12 h-12 md:opacity-100",
+            "bg-white rounded-full",
+            "flex items-center justify-center p-0",
+            // Desktop: Hide initially, show on hover with text
+            "lg:opacity-0 lg:inset-x-4 lg:w-auto lg:h-auto lg:rounded-none",
+            "lg:px-6 lg:py-3",
+            "lg:text-(--btn-secondary-text) lg:bg-(--btn-secondary-bg) lg:border-(--btn-secondary-bg)",
+            "lg:-translate-y-1.5 lg:-translate-x-2",
+            "lg:group-hover:opacity-100 lg:group-hover:translate-x-0 lg:group-hover:translate-y-2",
+            "lg:font-normal lg:whitespace-nowrap",
           )}
         >
-          Quick shop
+          {/* Shopping bag icon for mobile/tablet */}
+          <svg 
+            className="w-5 h-5 text-[#29231E] lg:hidden" 
+            fill="none" 
+            stroke="currentColor" 
+            viewBox="0 0 24 24"
+          >
+            <path 
+              strokeLinecap="round" 
+              strokeLinejoin="round" 
+              strokeWidth={1.5} 
+              d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" 
+            />
+          </svg>
+          {/* Text for desktop */}
+          <span className="hidden lg:inline uppercase">Quick shop</span>
         </button>
       </Dialog.Trigger>
       <Dialog.Portal>
diff --git a/app/sections/collection-filters/layout-switcher.tsx b/app/sections/collection-filters/layout-switcher.tsx
@@ -22,10 +22,10 @@ export function LayoutSwitcher({
   return (
     <div
       className={cn(
-        "flex",
-        "[&>button]:text-[#b7b7b7] [&>button]:border-[#b7b7b7]",
-        '[&>button[data-active="true"]]:text-[#696662]',
-        '[&>button[data-active="true"]]:border-[#696662]',
+        "flex flex-row-reverse md:flex-row",
+        "[&>button]:text-[#F2F0EE] [&>button]:border-[#F2F0EE]",
+        '[&>button[data-active="true"]]:text-[#A79D95]',
+        '[&>button[data-active="true"]]:border-[#A79D95]',
         className,
       )}
     >
@@ -38,7 +38,7 @@ export function LayoutSwitcher({
             type="button"
             data-active={gridSizeMobile === col}
             onClick={() => onGridSizeChange(col, "mobile")}
-            className="border w-12 h-12 flex lg:hidden items-center justify-center"
+            className="border w-12 h-12 flex md:hidden items-center justify-center"
           >
             <Icon className="w-[50px] h-[50px]" />
           </button>
@@ -54,7 +54,7 @@ export function LayoutSwitcher({
             type="button"
             data-active={gridSizeDesktop === col}
             onClick={() => onGridSizeChange(col, "desktop")}
-            className="border w-12 h-12 hidden lg:flex items-center justify-center"
+            className="border w-12 h-12 hidden md:flex items-center justify-center"
           >
             <Icon className="w-[50px] h-[50px]" />
           </button>
@@ -67,14 +67,14 @@ export function LayoutSwitcher({
 function LayoutList(props: IconProps) {
   return (
     <svg
-      width="22"
-      height="22"
-      viewBox="0 0 22 22"
+      width="50"
+      height="50"
+      viewBox="0 0 50 50"
       fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <rect width="22" height="22" />
+      <rect x="14" y="14" width="22" height="22" fill="currentColor" />
     </svg>
   );
 }
diff --git a/app/sections/collection-filters/products-pagination.tsx b/app/sections/collection-filters/products-pagination.tsx
@@ -157,7 +157,7 @@ function ProductsLoadedOnScroll(props: ProductsLoadedOnScrollProps) {
     <div
       className={clsx([
         "w-full gap-x-4 gap-y-6 lg:gap-y-10",
-        "grid grid-cols-(--cols-mobile) lg:grid-cols-(--cols-desktop)",
+        "grid grid-cols-(--cols-mobile) md:grid-cols-(--cols-desktop)",
       ])}
     >
       {nodes.map((product: ProductCardFragment) => (
diff --git a/app/sections/collection-filters/tools-bar.tsx b/app/sections/collection-filters/tools-bar.tsx
@@ -32,7 +32,7 @@ export function ToolsBar({
   return (
     <div className="py-4">
       <div className="gap-4 md:gap-8 flex w-full items-center justify-between">
-        <div className="space-y-2 md:block hidden">
+        <div className="space-y-4 md:block hidden">
           <h3 className="uppercase">{collection.title}</h3>
           {showProductsCount && (
             <span className="text-center hidden md:inline uppercase">
@@ -41,7 +41,7 @@ export function ToolsBar({
           )}
         </div>
         {(enableSort || (enableFilter && filtersPosition === "drawer")) && (
-          <div className="flex flex-col w-full gap-2 justify-end md:w-fit">
+          <div className="flex flex-col w-full gap-4 justify-end md:w-fit">
             <div className="flex w-full justify-between items-end md:justify-end md:w-fit gap-2">
               <LayoutSwitcher
                 gridSizeDesktop={gridSizeDesktop}
diff --git a/app/sections/collection-list-dynamic/collection-items.tsx b/app/sections/collection-list-dynamic/collection-items.tsx
@@ -261,7 +261,7 @@ let CollectionItems = forwardRef<HTMLDivElement, CollectionItemsProps>(
         ref={scope}
         {...rest}
         className={clsx(
-          "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[var(--gap)] w-full pb-8",
+          "grid grid-cols-2 md:grid-cols-3 gap-[var(--gap)] w-full pb-8",
         )}
         style={style}
       >
diff --git a/app/sections/featured-products/product-items.tsx b/app/sections/featured-products/product-items.tsx
@@ -9,7 +9,7 @@ import clsx from "clsx";
 import { ArrowLeft, ArrowRight } from "@phosphor-icons/react";
 import "swiper/css";
 import "swiper/css/navigation";
-import { Link } from "react-router";
+import Link from "~/components/link";
 
 type ItemsPerRowType = "2" | "3" | "4" | "5";
 type GapType = 8 | 12 | 16 | 20 | 24 | 28 | 32;
@@ -189,7 +189,8 @@ const ProductItems = forwardRef<HTMLDivElement, ProductItemsProps>(
               <div className="flex justify-center mt-8">
                 <Link 
                   to={`/collections/${collectionHandle}`}
-                  className="button inline-flex items-center justify-center rounded-none relative text-base leading-tight font-normal whitespace-nowrap focus-visible:outline-hidden transition-colors border px-4 py-3 text-(--btn-outline-text) bg-transparent border-(--btn-outline-border) hover:bg-(--btn-outline-background) hover:text-background hover:border-(--btn-outline-text)"
+                  variant="outline"
+                  className="uppercase"
                 >
                   See More Products
                 </Link>
diff --git a/app/sections/highlights/badge.tsx b/app/sections/highlights/badge.tsx
@@ -105,7 +105,7 @@ let HighlightsBadge = forwardRef<HTMLDivElement, HighlightsBadgeProps & Hydrogen
       <div 
         ref={ref}
         {...rest}
-        className={"flex flex-col items-center gap-0 px-4 py-8 md:gap-5 md:px-8 md:py-16"}
+        className={"flex flex-col justify-center items-center gap-0 px-4 py-8 md:gap-5 md:px-8 md:py-16 aspect-[5/3]"}
       >
         {renderIcon(iconType)}
         {children}
diff --git a/app/sections/image-with-text/content.tsx b/app/sections/image-with-text/content.tsx
@@ -60,8 +60,8 @@ const ImageWithTextContent = forwardRef<
       className={cn(
         variants({ gap, contentPosition }),
         imageCount > 1 &&
-          "absolute inset-0 flex z-1",
-        imageCount <= 1 && "flex-1"
+          "absolute inset-0 flex z-1 w-full",
+        imageCount <= 1 && "md:w-1/2 w-full aspect-square"
       )}
       data-content-with-images={imageCount}
     >
diff --git a/app/sections/image-with-text/images.tsx b/app/sections/image-with-text/images.tsx
@@ -23,7 +23,7 @@ let ImageWithTextImages = forwardRef<HTMLDivElement, ImageWithTextImageProps>(
       <div
         ref={ref}
         {...rest}
-        className={cn("w-full h-full flex", imageCount  <= 1 ? "flex-1" : "")}
+        className={cn("w-full h-full flex", imageCount  <= 1 ? "md:w-1/2 w-full aspect-square" : "")}
       >
         {children}
       </div>
diff --git a/app/sections/slideshow/slide.tsx b/app/sections/slideshow/slide.tsx
@@ -27,7 +27,7 @@ const variants = cva("w-full h-full flex justify-center items-end", {
     verticalPadding: {
       none: "",
       small: "py-4 md:py-6 lg:py-8",
-      medium: "py-8 md:py-12 lg:py-16",
+      medium: "py-16 md:py-16 lg:py-20",
       large: "py-12 md:py-24 lg:py-32",
     },
     gap: {
@@ -159,7 +159,7 @@ const Slide = forwardRef<HTMLDivElement, SlideProps>((props, ref) => {
       <div className={cn(variants({ width, gap, verticalPadding }))}>
         <div className="flex flex-col md:flex-row gap-4 md:gap-6 max-w-full">
           {/* Left Column */}
-          <div className="flex flex-col gap-(--gap) w-1/2">
+          <div className="flex flex-col gap-(--gap) w-full md:w-1/2">
             {headingContent && (
               <Heading
                 content={headingContent}
@@ -187,7 +187,7 @@ const Slide = forwardRef<HTMLDivElement, SlideProps>((props, ref) => {
           </div>
           
           {/* Right Column */}
-          <div className="flex flex-col gap-(--gap) w-1/2 [&_.paragraph]:mx-[unset]">
+          <div className="flex flex-col gap-(--gap) w-full md:w-1/2 [&_.paragraph]:mx-[unset]">
             {paragraphContent && (
               <Paragraph
                 content={paragraphContent}
diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts
@@ -822,6 +822,19 @@ export const themeSchema: HydrogenThemeSchema = {
           type: "heading",
           label: "Badges",
         },
+        {
+          type: "toggle-group",
+          name: "pcardBadgesPosition",
+          label: "Badges position",
+          configs: {
+            options: [
+              { value: "top-left", label: "Top left" },
+              { value: "top-center", label: "Top center" },
+              { value: "top-right", label: "Top right" },
+            ],
+          },
+          defaultValue: "top-right",
+        },
         {
           type: "switch",
           label: "Show sale badges",

Original file line number	Diff line number	Diff line change
`@@ -165,6 +165,7 @@ export function Footer() {`
`165`	`165`	`variant="primary"`
`166`	`166`	`type="submit"`
`167`	`167`	`loading={fetcher.state === "submitting"}`
	`168`	`+ className="uppercase"`
`168`	`169`	`>`
`169`	`170`	`{newsletterButtonText}`
`170`	`171`	`</Button>`
Original file line number	Diff line number	Diff line change
`@@ -157,7 +157,7 @@ function ProductsLoadedOnScroll(props: ProductsLoadedOnScrollProps) {`
`157`	`157`	`<div`
`158`	`158`	`className={clsx([`
`159`	`159`	`"w-full gap-x-4 gap-y-6 lg:gap-y-10",`
`160`		`- "grid grid-cols-(--cols-mobile) lg:grid-cols-(--cols-desktop)",`
	`160`	`+ "grid grid-cols-(--cols-mobile) md:grid-cols-(--cols-desktop)",`
`161`	`161`	`])}`
`162`	`162`	`>`
`163`	`163`	`{nodes.map((product: ProductCardFragment) => (`
Original file line number	Diff line number	Diff line change
`@@ -261,7 +261,7 @@ let CollectionItems = forwardRef<HTMLDivElement, CollectionItemsProps>(`
`261`	`261`	`ref={scope}`
`262`	`262`	`{...rest}`
`263`	`263`	`className={clsx(`
`264`		`- "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[var(--gap)] w-full pb-8",`
	`264`	`+ "grid grid-cols-2 md:grid-cols-3 gap-[var(--gap)] w-full pb-8",`
`265`	`265`	`)}`
`266`	`266`	`style={style}`
`267`	`267`	`>`