update: style of show button icon product card

src/lib/data/products.ts

@@ -63,7 +63,7 @@ export const listProducts = async ({
           offset,
           region_id: region?.id,
           fields:
-            "*variants.calculated_price,+variants.inventory_quantity,+metadata,+tags",
+            "*variants.calculated_price,+variants.inventory_quantity,*metadata,+tags",
           ...queryParams,
         },
         headers,

src/modules/home/components/vt-featured-products/product-rail/index.tsx

@@ -31,21 +31,24 @@ export default async function ProductRail({
   }
 
   const classes = {
-    container: styles?.container || "content-container py-12 px-[100px] small:py-24",
+    container: styles?.container ?? "content-container py-12 px-[100px] small:py-24",
     header: {
-      container: styles?.header?.container || "flex justify-between mb-8",
-      title: styles?.header?.title || "txt-xlarge",
+      container: styles?.header?.container ?? "flex justify-between mb-8",
+      title: styles?.header?.title ?? "txt-xlarge",
+      isShowViewAll: styles?.header.isShowViewAll ?? true,
     },
-    list: styles?.list || "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",
+    list: styles?.list ?? "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",
   }
 
   return (
     <div className={classes.container}>
       <div className={classes.header.container}>
         <Text className={classes.header.title}>{collection.title}</Text>
-        <InteractiveLink href={`/collections/${collection.handle}`}>
-          View all
-        </InteractiveLink>
+        {classes.header.isShowViewAll && (
+          <InteractiveLink href={`/collections/${collection.handle}`}>
+            View all
+          </InteractiveLink>
+        )}
       </div>
       <ul className={classes.list}>
         {pricedProducts &&
@@ -55,6 +58,7 @@ export default async function ProductRail({
                 product={product} 
                 countryCode={countryCode} 
                 styles={styles?.productCard}
+                badgeText={styles?.productCard?.badgeText}
               />
             </li>
           ))}

src/modules/products/components/product-preview/price.tsx

@@ -18,7 +18,7 @@ export default async function PreviewPrice({ price }: { price: VariantPrice }) {
       )}
       <Text
         className={clx("text-ui-fg-muted", {
-          "text-ui-fg-interactive": price.price_type === "sale",
+          "text-green-700": price.price_type === "sale",
         })}
         data-testid="price"
       >

src/modules/products/components/vt-product-card/index.tsx

@@ -6,7 +6,7 @@ import PreviewPrice from "@modules/products/components/product-preview/price"
 import { getProductPrice } from "@lib/util/get-product-price"
 import { addToCart } from "@lib/data/cart"
 import VtThumbnail from "../vt-thumbnail"
-
+import { Plus, ChevronRight } from "@medusajs/icons"
 type ProductCardProps = {
   product: HttpTypes.StoreProduct
   badgeText?: string
@@ -32,7 +32,7 @@ export default function ProductCard({
     if (firstVariant.allow_backorder) return true
     return (firstVariant.inventory_quantity || 0) > 0
   })()
-
+  console.dir(product, { depth: null })
   const { cheapestPrice } = getProductPrice({ product })
 
   async function handleAddToCart() {
@@ -46,86 +46,145 @@ export default function ProductCard({
   }
 
   const description = (() => {
-    const description = product.description || ""
-    const textSlice = description.length > 120 ? description.slice(0, 117) + "…" : description
+    const prodDescription = product.description || ""
+    const textSlice =
+      prodDescription.length > 120
+        ? prodDescription.slice(0, 117) + "…"
+        : prodDescription
     return textSlice
   })()
 
   const classes = {
-    card: styles?.className || className || "relative overflow-hidden rounded-2xl border border-[#285A86] bg-ui-bg-base shadow-elevation-card-rest h-full flex flex-col",
+    card: styles?.card ?? className ?? "",
     badge: {
-      container: styles?.badge?.container || "p-4",
-      text: styles?.badge?.text || "z-20 px-3 py-1 border-[0.5px] rounded bg-[#c9e0f5] txt-compact-small-plus shadow-borders-base text-[#285A86] ",
+      container: styles?.badge?.container ?? "p-4",
+      text:
+        styles?.badge?.text ??
+        "z-20 px-3 py-1 border-[0.5px] rounded bg-[#c9e0f5] txt-compact-small-plus shadow-borders-base text-[#285A86] ",
     },
     thumbnail: {
-      className: styles?.thumbnail?.className || "rounded-none h-[240px]",
-      size: styles?.thumbnail?.size || "full",
+      className: styles?.thumbnail?.className ?? "rounded-none h-[240px]",
+      size: styles?.thumbnail?.size ?? "full",
+    },
+    subtitle: styles?.subtitle ?? "",
+    content: styles?.content ?? "p-6 flex flex-col flex-1",
+    title: styles?.title ?? "mt-2 text-ui-fg-base",
+    price: styles?.price ?? "mt-2 flex items-baseline gap-2",
+    reviews: {
+      container: styles?.reviews?.container ?? undefined,
+      stars: styles?.reviews?.stars ?? "flex gap-1",
+      star: styles?.reviews?.star ?? "text-[#C4622C] text-xl leading-none",
+      emptyStar:
+        styles?.reviews?.emptyStar ??
+        "text-[#C4622C] text-xl opacity-30 leading-none",
+      text: styles?.reviews?.text ?? "txt-small text-ui-fg-subtle",
+      rating: styles?.reviews?.rating,
+      count: styles?.reviews?.count,
     },
-    content: styles?.content || "p-6 flex flex-col flex-1",
-    title: styles?.title || "mt-2 text-ui-fg-base",
-    price: styles?.price || "mt-2 flex items-baseline gap-2",
     button: {
-      addToCart: styles?.button?.addToCart || "flex-1",
-      moreInfo: styles?.button?.moreInfo || "w-full",
+      addToCart: styles?.button?.addToCart ?? "flex-1",
+      moreInfo: styles?.button?.moreInfo ?? "w-full",
+      isShowIcon: styles?.button?.isShowIcon ?? true,
     },
   }
 
   return (
-    <div
-      className={clx(
-        classes.card
-      )}
-    >
-      <div className="relative">
-        {badgeText && (
-          <div className={classes.badge.container}>
-            <span className={classes.badge.text}>
-              {badgeText}
-            </span>
-          </div>
-        )}
-        <VtThumbnail
-          thumbnail={product.thumbnail}
-          className={classes.thumbnail.className}
-          images={product.images}
-          size={classes.thumbnail.size}
-          isFeatured
-        />
-      </div>
+    <div className={clx(classes.card)}>
+      <LocalizedClientLink href={`/products/${product.handle}`} className="block">
+        <div className="relative">
+          {badgeText && (
+            <div className={classes.badge.container}>
+              <span className={classes.badge.text}>{badgeText}</span>
+            </div>
+          )}
+          <VtThumbnail
+            thumbnail={product.thumbnail}
+            className={classes.thumbnail.className}
+            images={product.images}
+            size={classes.thumbnail.size}
+            isFeatured
+          />
+        </div>
+      </LocalizedClientLink>
 
       <div className={classes.content}>
-        {product.collection && (
+        {classes.subtitle && product.collection && (
           <LocalizedClientLink
             href={`/collections/${product.collection.handle}`}
             className="txt-small text-ui-fg-muted hover:text-ui-fg-subtle"
           >
-            {product.collection.title}
+            {product.subtitle}
           </LocalizedClientLink>
         )}
 
-        <Heading
-          level="h3"
-          className={classes.title}
-          data-testid="product-card-title"
-        >
-          {product.title}
-        </Heading>
+        <LocalizedClientLink href={`/products/${product.handle}`} className="block">
+          <Heading
+            level="h3"
+            className={classes.title}
+            data-testid="product-card-title"
+          >
+            {product.title}
+          </Heading>
+        </LocalizedClientLink>
 
         <div className={classes.price}>
           {cheapestPrice && <PreviewPrice price={cheapestPrice} />}
         </div>
-        <Text className="mt-1 txt-compact-small text-ui-fg-muted">
-          inkl. MwSt. zzgl. Versandkosten
-        </Text>
+        {(classes.reviews.rating !== undefined ||
+          classes.reviews.count !== undefined) && (
+          <div
+            className={
+              classes.reviews.container || "mt-2 flex items-center gap-3"
+            }
+          >
+            <div className="relative inline-block">
+              <div className={classes.reviews.stars}>
+                {Array.from({ length: 5 }).map((_, i) => (
+                  <span
+                    key={`star-empty-${i}`}
+                    className={classes.reviews.emptyStar}
+                  >
+                    ★
+                  </span>
+                ))}
+              </div>
+              <div
+                className="absolute inset-0 overflow-hidden"
+                style={{
+                  width: `${Math.max(
+                    0,
+                    Math.min(
+                      100,
+                      (((classes.reviews.rating as number) ?? 0) / 5) * 100
+                    )
+                  )}%`,
+                }}
+              >
+                <div className={classes.reviews.stars}>
+                  {Array.from({ length: 5 }).map((_, i) => (
+                    <span
+                      key={`star-fills-${i}`}
+                      className={classes.reviews.star}
+                    >
+                      ★
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </div>
+            {typeof classes.reviews.count === "number" && (
+              <span className={classes.reviews.text}>
+                {classes.reviews.count} Reviews
+              </span>
+            )}
+          </div>
+        )}
 
-        <div className="my-4">
+        {/* <div className="my-4">
           <Divider />
-        </div>
+        </div> */}
 
-        <Text className="txt-small text-ui-fg-subtle">{description}</Text>
-        <Text className="mt-1 txt-small text-ui-fg-muted">
-          Lieferzeit: {deliveryTime}
-        </Text>
+        <Text className="txt-small text-[#285A86] my-4">{description}</Text>
 
         <div className="flex gap-3 mt-auto">
           <Button
@@ -133,20 +192,15 @@ export default function ProductCard({
             disabled={!inStock}
             variant="primary"
             className={classes.button.addToCart}
-            data-testid="product-card-add-to-cart"
           >
-            Add to cart
+            Add to cart {classes.button.isShowIcon && <Plus />}
           </Button>
           <LocalizedClientLink
             href={`/products/${product.handle}`}
             className="flex-1"
           >
-            <Button
-              variant="secondary"
-              className={classes.button.moreInfo}
-              data-testid="product-card-more-info"
-            >
-              More Info
+            <Button variant="secondary" className={classes.button.moreInfo}>
+              More Info {classes.button.isShowIcon && <ChevronRight />}
             </Button>
           </LocalizedClientLink>
         </div>

src/vibentec/configloader.ts

@@ -2,7 +2,7 @@ import fs from "fs"
 import path from "path"
 import { jsonFileNames } from "./devJsonFileNames";
 
-const fileName = jsonFileNames.namVibentec;
+const fileName = jsonFileNames.namDrsquatch;
 
 export async function loadDesignConfig() {
   const filePath = path.join(process.cwd(), "config", fileName)