Merge pull request #263 from Weaverse/dev

Update product card content layout, update collection filters schema

Author: hta218

app/components/product/badges.tsx

@@ -77,10 +77,10 @@ export function SaleBadge({
   let { saleBadgeText = "Sale", saleBadgeColor } = useThemeSettings();
   let { amount, percentage } = calculateDiscount(price, compareAtPrice);
   let text = saleBadgeText
-    .replace("[amount]", amount.toString())
-    .replace("[percentage]", percentage.toString());
+    .replace("[amount]", amount)
+    .replace("[percentage]", percentage);
 
-  if (percentage > 0) {
+  if (percentage !== "0") {
     return (
       <Badge
         text={text}
@@ -111,9 +111,9 @@ function calculateDiscount(price: MoneyV2, compareAtPrice: MoneyV2) {
         }).withoutTrailingZeros,
         percentage: Math.round(
           ((compareAtPriceNumber - priceNumber) / compareAtPriceNumber) * 100,
-        ),
+        ).toString(),
       };
     }
   }
-  return { amount: "0", percentage: 0 };
+  return { amount: "0", percentage: "0" };
 }

app/components/product/product-card.tsx

@@ -1,4 +1,4 @@
-import { flattenConnection } from "@shopify/hydrogen";
+import { flattenConnection, Money } from "@shopify/hydrogen";
 import type {
   MoneyV2,
   ProductVariant,
@@ -12,6 +12,17 @@ import { NavLink } from "~/components/nav-link";
 import { VariantPrices } from "~/components/variant-prices";
 import { getImageAspectRatio } from "~/utils/image";
 import { BestSellerBadge, NewBadge, SaleBadge, SoldOutBadge } from "./badges";
+import { cva } from "class-variance-authority";
+
+let styleVariants = cva("", {
+  variants: {
+    alignment: {
+      left: "",
+      center: "text-center [&_.title-and-price]:items-center",
+      right: "text-right [&_.title-and-price]:items-end",
+    },
+  },
+});
 
 export function ProductCard({
   product,
@@ -21,11 +32,12 @@ export function ProductCard({
   className?: string;
 }) {
   let {
-    pcardAlignment,
     pcardBorderRadius,
     pcardBackgroundColor,
     pcardShowImageOnHover,
     pcardImageRatio,
+    pcardTitlePricesAlignment,
+    pcardAlignment,
     pcardShowVendor,
     pcardShowLowestPrice,
     pcardShowSku,
@@ -45,15 +57,18 @@ export function ProductCard({
   } = useThemeSettings();
 
   let variants = flattenConnection(product.variants);
-  let { images, badges } = product;
-  let [image, secondImage] = images.nodes;
   let selectedVariant = variants[0];
-  let isBestSellerProduct = badges
-    .filter(Boolean)
-    .some(({ key, value }) => key === "best_seller" && value === "true");
+
   if (!selectedVariant) return null;
 
   let { price, compareAtPrice } = selectedVariant;
+  let { images, badges, priceRange } = product;
+  let [image, secondImage] = images.nodes;
+  let isBestSellerProduct = badges
+    .filter(Boolean)
+    .some(({ key, value }) => key === "best_seller" && value === "true");
+  let { minVariantPrice } = priceRange;
+  let isVertical = pcardTitlePricesAlignment === "vertical";
 
   return (
     <div
@@ -119,33 +134,50 @@ export function ProductCard({
         {/* <QuickShopTrigger productHandle={product.handle} /> */}
       </div>
       <div
-        className="flex flex-col py-3"
-        style={{ alignItems: pcardAlignment }}
+        className={clsx(
+          "py-3 text-sm",
+          isVertical && styleVariants({ alignment: pcardAlignment })
+        )}
       >
         {pcardShowVendor && (
-          <div className="text-sm uppercase text-body-subtle mb-2">
+          <div className="uppercase text-body-subtle mb-2">
             {product.vendor}
           </div>
         )}
-        <div className="flex items-center gap-2 mb-1">
-          <NavLink
-            to={`/products/${product.handle}`}
-            prefetch="intent"
-            className={({ isTransitioning }) =>
-              clsx("font-bold", isTransitioning && "vt-product-image")
-            }
-          >
-            <span>{product.title}</span>
-          </NavLink>
-          {pcardShowSku && selectedVariant.sku && (
-            <span className="text-body-subtle">({selectedVariant.sku})</span>
+        <div
+          className={clsx(
+            "flex mb-1",
+            isVertical
+              ? "title-and-price flex-col gap-1"
+              : "justify-between gap-4"
+          )}
+        >
+          <div className="flex items-center gap-1.5">
+            <NavLink
+              to={`/products/${product.handle}`}
+              prefetch="intent"
+              className={({ isTransitioning }) =>
+                clsx("font-bold ", isTransitioning && "vt-product-image")
+              }
+            >
+              {product.title}
+            </NavLink>
+            {pcardShowSku && selectedVariant.sku && (
+              <span className="text-body-subtle">({selectedVariant.sku})</span>
+            )}
+          </div>
+          {pcardShowLowestPrice ? (
+            <div className="flex gap-1">
+              <span>From</span>
+              <Money withoutTrailingZeros data={minVariantPrice} />
+            </div>
+          ) : (
+            <VariantPrices
+              variant={selectedVariant as ProductVariant}
+              showCompareAtPrice={pcardShowSalePrice}
+            />
           )}
         </div>
-        <VariantPrices
-          variant={selectedVariant as ProductVariant}
-          showCompareAtPrice={pcardShowSalePrice}
-          className="mb-2"
-        />
         {/* {pcardShowOptionSwatches && <div>options here</div>} */}
       </div>
     </div>

app/sections/collection-filters/index.tsx

@@ -173,10 +173,11 @@ export let schema: HydrogenComponentSchema = {
           label: "Show description",
           defaultValue: false,
         },
-        {
-          type: "heading",
-          label: "Banner",
-        },
+      ],
+    },
+    {
+      group: "Banner",
+      inputs: [
         {
           type: "switch",
           name: "showBanner",
@@ -290,7 +291,7 @@ export let schema: HydrogenComponentSchema = {
       ],
     },
     {
-      group: "Products",
+      group: "Products grid",
       inputs: [
         {
           type: "select",

app/sections/collection-filters/products-pagination.tsx

@@ -156,7 +156,7 @@ function ProductsLoadedOnScroll(props: ProductsLoadedOnScrollProps) {
   return (
     <div
       className={clsx([
-        "w-full gap-x-1.5 gap-y-6 lg:gap-y-10",
+        "w-full gap-x-4 gap-y-6 lg:gap-y-10",
         "grid grid-cols-[--cols-mobile] lg:grid-cols-[--cols-desktop]",
       ])}
     >

app/weaverse/schema.server.ts

@@ -651,25 +651,10 @@ export let themeSchema: HydrogenThemeSchema = {
       group: "Product cards",
       inputs: [
         {
-          type: "heading",
-          label: "Layout",
-        },
-        {
-          type: "toggle-group",
-          name: "pcardAlignment",
-          label: "Content alignment",
-          configs: {
-            options: [
-              { value: "start", label: "Left", icon: "align-start-vertical" },
-              {
-                value: "center",
-                label: "Center",
-                icon: "align-center-vertical",
-              },
-              { value: "end", label: "Right", icon: "align-end-vertical" },
-            ],
-          },
-          defaultValue: "center",
+          type: "color",
+          name: "pcardBackgroundColor",
+          label: "Background color",
+          defaultValue: "",
         },
         {
           type: "range",
@@ -683,12 +668,6 @@ export let themeSchema: HydrogenThemeSchema = {
           },
           defaultValue: 0,
         },
-        {
-          type: "color",
-          name: "pcardBackgroundColor",
-          label: "Background color",
-          defaultValue: "",
-        },
         {
           type: "heading",
           label: "Image",
@@ -720,6 +699,36 @@ export let themeSchema: HydrogenThemeSchema = {
           type: "heading",
           label: "Content",
         },
+        {
+          type: "select",
+          label: "Title & prices alignment",
+          name: "pcardTitlePricesAlignment",
+          configs: {
+            options: [
+              { value: "horizontal", label: "Horizontal" },
+              { value: "vertical", label: "Vertical" },
+            ],
+          },
+          defaultValue: "horizontal",
+        },
+        {
+          type: "toggle-group",
+          name: "pcardAlignment",
+          label: "Content alignment",
+          configs: {
+            options: [
+              { value: "left", label: "Left", icon: "align-start-vertical" },
+              {
+                value: "center",
+                label: "Center",
+                icon: "align-center-vertical",
+              },
+              { value: "right", label: "Right", icon: "align-end-vertical" },
+            ],
+          },
+          defaultValue: "center",
+          condition: "pcardTitlePricesAlignment.eq.vertical",
+        },
         {
           type: "switch",
           label: "Show vendor",
@@ -743,6 +752,7 @@ export let themeSchema: HydrogenThemeSchema = {
           label: "Show sale price",
           name: "pcardShowSalePrice",
           defaultValue: true,
+          condition: "pcardShowLowestPrice.ne.true",
         },
         {
           type: "switch",