@osimart/create-storefront 0.0.0-stage → 1.0.0

package/app/composables/useProductCardStyle.js

@@ -0,0 +1,132 @@
+/**
+ * Product card appearance.
+ *
+ * Two rules behind the shape of this:
+ *
+ * 1. **Theme settings first, section override second.** A card that looks one
+ *    way in the homepage rail and another on the category page is a bug, not a
+ *    feature — the merchant sets it once for the store. The per-section
+ *    override exists for genuine exceptions (a compact upsell rail), and it's
+ *    a partial: only the keys it sets win.
+ *
+ * 2. **Everything ships as CSS custom properties, not classes.** One set of
+ *    markup, positions driven by variables, so adding a setting doesn't mean
+ *    another branch in the template. The three genuinely structural choices
+ *    (where the text sits, where the CTA sits, where the heart sits) are the
+ *    only ones that also produce a class.
+ *
+ * What this deliberately does NOT do is arbitrary reordering — "price above the
+ * name", "swatches between them". That needs card content to become an ordered
+ * list of blocks, which is a much bigger surface than a settings group. The
+ * ordering merchants actually ask for is a preset, not a design tool.
+ */
+
+const RATIOS = {
+  PORTRAIT: "3 / 4",
+  SQUARE: "1 / 1",
+  LANDSCAPE: "4 / 3",
+  NATURAL: "auto",
+};
+
+const ALIGN = { START: "start", CENTER: "center", END: "end" };
+
+export function useProductCardStyle(override) {
+  const theme = useThemeGroup("PRODUCT_CARD");
+
+  /** Only keys the override actually sets win — a partial, not a replacement. */
+  const settings = computed(() => {
+    const base = theme.value;
+    const patch = toValue(override) ?? {};
+    const merged = { ...base };
+
+    for (const [key, value] of Object.entries(patch)) {
+      if (value !== undefined && value !== null && value !== "") merged[key] = value;
+    }
+    return merged;
+  });
+
+  const textPosition = computed(() => settings.value.CARD_TEXT_POSITION);
+  const ctaStyle = computed(() => settings.value.CARD_CTA_STYLE);
+  const wishlistPosition = computed(() => settings.value.CARD_WISHLIST_POSITION);
+
+  const isOverlayText = computed(() => textPosition.value.startsWith("OVERLAY"));
+
+  const cardStyle = computed(() => {
+    const s = settings.value;
+    const style = {
+      "--osi-card-ratio": RATIOS[s.CARD_IMAGE_RATIO] ?? RATIOS.PORTRAIT,
+      "--osi-card-fit": s.CARD_IMAGE_FIT === "CONTAIN" ? "contain" : "cover",
+      "--osi-card-align": ALIGN[s.CARD_TEXT_ALIGN] ?? "start",
+      "--osi-card-gap": `${s.CARD_CONTENT_GAP}px`,
+      "--osi-card-pad": `${s.CARD_CONTENT_PADDING}px`,
+      "--osi-card-radius": `${s.CARD_BORDER_RADIUS}px`,
+      "--osi-card-name-size": `${s.CARD_NAME_SIZE}px`,
+      "--osi-card-price-size": `${s.CARD_PRICE_SIZE}px`,
+      // Overlay text needs a scrim or it's unreadable over a light photo.
+      "--osi-card-scrim": isOverlayText.value ? s.CARD_OVERLAY_SCRIM : "transparent",
+    };
+
+    if (s.CARD_BACKGROUND) style["--osi-card-bg"] = s.CARD_BACKGROUND;
+    if (s.CARD_TEXT_COLOR) style["--osi-card-text"] = s.CARD_TEXT_COLOR;
+
+    // Badges (CARD_BADGE_* / CARD_SALE_BADGE_* / CARD_SOLD_OUT_BADGE_*): only what's set.
+    const has = (v) => v !== undefined && v !== null && v !== "";
+    const px = (v) => (has(v) && Number.isFinite(Number(v)) ? `${Number(v)}px` : undefined);
+    const badge = {
+      "--osi-badge-bg": s.CARD_BADGE_BG,
+      "--osi-badge-color": s.CARD_BADGE_TEXT_COLOR,
+      "--osi-badge-border": s.CARD_BADGE_BORDER_COLOR,
+      "--osi-badge-bw": px(s.CARD_BADGE_BORDER_WIDTH),
+      "--osi-badge-r": px(s.CARD_BADGE_RADIUS),
+      "--osi-badge-fs": px(s.CARD_BADGE_FONT_SIZE),
+      "--osi-badge-tt": has(s.CARD_BADGE_CASE)
+        ? (String(s.CARD_BADGE_CASE).toUpperCase() === "NONE" ? "none" : "uppercase")
+        : undefined,
+      "--osi-badge-sale-bg": s.CARD_SALE_BADGE_BG,
+      "--osi-badge-sale-color": s.CARD_SALE_BADGE_TEXT_COLOR,
+      "--osi-badge-sale-border": s.CARD_SALE_BADGE_BORDER_COLOR,
+      "--osi-badge-out-bg": s.CARD_SOLD_OUT_BADGE_BG,
+      "--osi-badge-out-color": s.CARD_SOLD_OUT_BADGE_TEXT_COLOR,
+      "--osi-badge-out-border": s.CARD_SOLD_OUT_BADGE_BORDER_COLOR,
+    };
+    for (const [key, value] of Object.entries(badge)) if (has(value)) style[key] = value;
+
+    return style;
+  });
+
+  const cardClasses = computed(() => [
+    `osi-card--text-${textPosition.value.toLowerCase().replace(/_/g, "-")}`,
+    `osi-card--cta-${ctaStyle.value.toLowerCase().replace(/_/g, "-")}`,
+    `osi-card--badge-${settings.value.CARD_BADGE_POSITION.toLowerCase().replace(/_/g, "-")}`,
+    { "osi-card--cta-block": settings.value.CARD_CTA_FULL_WIDTH },
+  ]);
+
+  // Injected once per distinct stylesheet, not once per card: the fixed key
+  // dedupes in useHead, so a 24-product grid still emits one <style>.
+  const customCss = useScopedCss(
+    () => settings.value.CARD_CUSTOM_CSS,
+    "[data-osi-card]",
+    "osi-product-card-css"
+  );
+
+  return {
+    settings,
+    cardStyle,
+    cardClasses,
+    textPosition,
+    ctaStyle,
+    wishlistPosition,
+    isOverlayText,
+    customCss,
+
+    // Convenience flags the template reads directly.
+    showWishlist: computed(() => wishlistPosition.value !== "NONE"),
+    wishlistOnMedia: computed(() => wishlistPosition.value.startsWith("TOP_")),
+    wishlistWithTitle: computed(() => wishlistPosition.value === "WITH_TITLE"),
+    showCta: computed(() => ctaStyle.value !== "NONE"),
+    ctaOnMedia: computed(() => ctaStyle.value === "HOVER_OVER_IMAGE"),
+    showSwatches: computed(() => !!settings.value.CARD_SHOW_SWATCHES),
+    showQuickShop: computed(() => !!settings.value.CARD_SHOW_QUICK_SHOP),
+    showSecondImage: computed(() => !!settings.value.CARD_SHOW_SECOND_IMAGE_ON_HOVER),
+  };
+}