@osimart/create-storefront 1.0.21 → 1.0.22

package/app/composables/UseThemeGroup.js

@@ -115,6 +115,8 @@ const DEFAULTS = {
 
     // cart
     HEADER_CART_COUNT: "BADGE",
+    HEADER_CART_BADGE_BG: null,
+    HEADER_CART_BADGE_TEXT: null,
 
     // chrome
     HEADER_SHOW_ACCOUNT: true,
@@ -453,6 +455,8 @@ const DEFAULTS = {
     CART_DRAWER_EMPTY_BTN_STYLE: "THEME",
     CART_DRAWER_RECS_ADD_STYLE: "THEME",
     CART_DRAWER_QTY_SIZE: 30,
+    CART_DRAWER_SHOW_REMOVE: true,
+    CART_DRAWER_REMOVE_COLOR: null,
     CART_DRAWER_RECS_CARD_BACKGROUND: null,
     CART_DRAWER_RECS_PRICE_POSITION: "BELOW",
     CART_DRAWER_RECS_NAME_LINES: 2,

package/app/composables/useContentTree.js

@@ -438,9 +438,21 @@ export function useContentTree(section, options = {}) {
         if (bleed) {
           for (const [k, val] of Object.entries(paddingOf(v))) box[k.replace("--cb-p", "--card-p")] = val;
         }
+        // Quick buy's colour swatches follow the card's Swatches block.
+        const findSw = (list) => {
+          for (const c of list ?? []) {
+            if (c.type === "CARD_SWATCHES") return c;
+            const hit = findSw(c.children);
+            if (hit) return hit;
+          }
+          return null;
+        };
+        const swatchRadius = findSw(children)?.swRadius;
+        if (swatchRadius) kids = kids.map((c) => (c.type === "CARD_IMAGE" ? { ...c, swatchRadius } : c));
         return {
           ...base,
           ...flexOf(v),
+          swatchRadius,
           children: kids,
           sizeClasses: ["w-fill"],
           sizeVars: {},
@@ -579,9 +591,15 @@ export function useContentTree(section, options = {}) {
           box: boxOf(v, { background: false }),
           max: num(v.MAX, 5),
           square: upper(v.SHAPE, "CIRCLE") === "SQUARE",
+          // Own radius (0 = sharp) over the shape's; the card's quick buy uses it too.
+          swRadius: has(v.RADIUS) ? `${num(v.RADIUS, 0)}px` : upper(v.SHAPE, "CIRCLE") === "SQUARE" ? "2px" : undefined,
           // COLOR: the colour option only; ALL: every option (sizes as text).
           show: upper(v.SHOW, "ALL"),
-          swatchVars: { "--cb-sw": `${num(v.SIZE, 16)}px`, "--cb-sw-gap": `${num(v.GAP, 6)}px` },
+          swatchVars: {
+            "--cb-sw": `${num(v.SIZE, 16)}px`,
+            "--cb-sw-gap": `${num(v.GAP, 6)}px`,
+            ...(has(v.RADIUS) ? { "--cb-sw-r": `${num(v.RADIUS, 0)}px` } : {}),
+          },
         };
 
       case "CARD_BUTTON":
@@ -753,8 +771,16 @@ export function useContentTree(section, options = {}) {
     return {
       ...base,
       ...sizeOf(v, "WIDTH", "WIDTH_MOBILE", "FILL"),
-      box: boxOf(v, { background: false }),
+      // Background too: their Text-look settings carry BG_COLOR (Title,
+      // Description, Breadcrumbs…); blocks without it just leave it unset.
+      box: boxOf(v),
       ...(textDefault ? textLook(v, textDefault) : {}),
+      // Text parts always fill their row (no Width setting), so the text box
+      // — capped by MAX_WIDTH — would sit at the start even with the section
+      // centred. ContentNode lines it up instead: the block's own Alignment,
+      // else its group's (the inherited --cb-col-align).
+      textPart: !!textDefault,
+      selfVars: textDefault ? compact({ "--cb-self-align": COL_ALIGN[upper(v.ALIGNMENT, "")] }) : {},
       component: markRaw(component),
     };
   }

package/app/composables/useProductItems.js

@@ -1,3 +1,4 @@
+import { isColorType } from "#osi/composables/useProductVariants";
 /**
  * PRODUCT_LIST's items — products in the one shape the card template reads.
  *
@@ -147,7 +148,8 @@ export function useProductItems(section, products, options = {}) {
     return Number(product.remaining_stock) <= 0;
   }
 
-  const isColorName = (name) => ["color", "colour"].includes(String(name).toLowerCase());
+  // By the option's display_type (the name only for older rows).
+  const isColorOption = (type) => isColorType(type);
 
   /**
    * Every option (Color, Size, …) with the values that have a variant behind
@@ -163,10 +165,10 @@ export function useProductItems(section, products, options = {}) {
           const value = (variant.values ?? []).find((v) => v.type === type.id);
           if (!value || seen.has(value.id)) continue;
           seen.add(value.id);
-          const color = isColorName(type.name) ? value.hex_code || "" : "";
+          const color = isColorOption(type) ? value.hex_code || "" : "";
           values.push({ key: value.id, name: value.name || value.value || "", color });
         }
-        return { key: type.id, name: type.name, isColor: isColorName(type.name), values };
+        return { key: type.id, name: type.name, isColor: isColorOption(type), values };
       })
       .filter((option) => option.values.length);
   }

package/app/composables/useProductVariants.js

@@ -17,6 +17,37 @@
  * @param {object|Ref|(() => object)} product pass a getter — the card is
  *   rendered in a v-for and the product prop changes identity on re-fetch.
  */
+/**
+ * Is this option (a vary_by type / a filter) drawn as colour swatches?
+ * Its display_type decides ("COLOR" — case doesn't matter). Only a row from an
+ * older API with no display_type at all falls back to the name (Color /
+ * Colour), so a type named "Color" set to buttons shows buttons.
+ */
+export function isColorType(type) {
+  const display = type?.display_type;
+  if (display !== undefined && display !== null && display !== "") {
+    return String(display).toLowerCase() === "color";
+  }
+  return ["color", "colour"].includes(String(type?.name ?? "").toLowerCase());
+}
+
+/**
+ * Sold out for a picked variant — the product page's rule: the variant's own
+ * stock decides once one is picked (one that doesn't track inventory is always
+ * available); before that, the product's status, then its stock.
+ */
+export function isVariantSoldOut(product, variant = null) {
+  const out = (n) => n !== null && n !== undefined && Number(n) <= 0;
+  if (variant?.id) {
+    if (!variant.track_inventory) return false;
+    return out(variant.remaining_stock);
+  }
+  const status = product?.status;
+  if (status === "In Stock" || status === "On Demand") return false;
+  if (status === "Out of Stock") return true;
+  return out(product?.remaining_stock);
+}
+
 export function useProductVariants(product) {
   const p = computed(() => toValue(product) ?? {});
 
@@ -32,7 +63,7 @@ export function useProductVariants(product) {
   );
 
   const colorType = computed(
-    () => variantTypes.value.find((type) => type.name === "Color") ?? null
+    () => variantTypes.value.find((type) => isColorType(type)) ?? null
   );
 
   /** Distinct colour values that actually have a variant behind them. */

package/app/logic/components/CartDrawer.js

@@ -114,6 +114,7 @@ export default function useLogic() {
     if (s.CART_DRAWER_RECS_CARD_BACKGROUND) style["--recs-card-bg"] = s.CART_DRAWER_RECS_CARD_BACKGROUND;
     if (s.CART_DRAWER_RECS_PRICE_COLOR) style["--recs-price-color"] = s.CART_DRAWER_RECS_PRICE_COLOR;
     if (s.CART_DRAWER_RECS_LINE_COLOR) style["--recs-line"] = s.CART_DRAWER_RECS_LINE_COLOR;
+    if (s.CART_DRAWER_REMOVE_COLOR) style["--cart-remove-color"] = s.CART_DRAWER_REMOVE_COLOR;
     // Quantity buttons (inside each cart line): picked up by .osi-qty-btn below.
     const q = buttonVars("CART_DRAWER_QTY");
     for (const [k, v] of Object.entries(q)) style[k.replace("--btn-", "--qty-")] = v;
@@ -137,6 +138,8 @@ export default function useLogic() {
   const increase = (item) => edit(increaseItem, item);
   const decrease = (item) => edit(decreaseItem, item);
   const remove = (item) => edit(removeItem, item);
+  // Unset (older themes) counts as shown.
+  const showRemove = computed(() => settings.value.CART_DRAWER_SHOW_REMOVE !== false);
 
   function close() {
     toggleCartSidebar(false);
@@ -261,5 +264,5 @@ export default function useLogic() {
   // rely on a page's onMounted to load the cart.
   onMounted(fetchCart);
 
-  return { settings, t, TEXT_DEFAULTS, txt, scheme, isCartSidebarVisible, toggleCartSidebar, cartItems, topLevelItems, childrenOf, cartTotal, count, fetchCart, showApiError, mediaUrl, productUrl, handleAddToCart, store, currency, money, px, has, VARIANTS, buttonVars, button, checkoutBtn, emptyBtn, addBtn, cardStyle, RATIOS, rootStyle, isUpdating, edit, increase, decrease, remove, close, go, threshold, shipping, recs, recsLoading, recsKey, pickedIds, limit, loadRecs, inCart, shownRecs, recsLayout, pricePos, adding, addRec, priceOf, analytics };
+  return { settings, t, TEXT_DEFAULTS, txt, scheme, isCartSidebarVisible, toggleCartSidebar, cartItems, topLevelItems, childrenOf, cartTotal, count, fetchCart, showApiError, mediaUrl, productUrl, handleAddToCart, store, currency, money, px, has, VARIANTS, buttonVars, button, checkoutBtn, emptyBtn, addBtn, cardStyle, RATIOS, rootStyle, isUpdating, edit, increase, decrease, remove, showRemove, close, go, threshold, shipping, recs, recsLoading, recsKey, pickedIds, limit, loadRecs, inCart, shownRecs, recsLayout, pricePos, adding, addRec, priceOf, analytics };
 }

package/app/logic/components/ProductVariantPicker.js

@@ -1,3 +1,4 @@
+import { isColorType } from "#osi/composables/useProductVariants";
 import { useProductDetail } from "#osi/composables/useProductDetail";
 
 export default function useLogic({ props }) {
@@ -30,7 +31,10 @@ export default function useLogic({ props }) {
   const pickerStyle = computed(() =>
     compact({
       "--sw-size": px(s.value.PICKER_SWATCH_SIZE) ?? "32px",
-      "--sw-radius": { SQUARE: "2px", ROUNDED: "8px" }[s.value.PICKER_SWATCH_SHAPE] ?? "999px",
+      // Own radius first (0 = sharp), else the shape's.
+      "--sw-radius":
+        px(s.value.PICKER_SWATCH_RADIUS) ??
+        ({ SQUARE: "2px", ROUNDED: "8px" }[s.value.PICKER_SWATCH_SHAPE] ?? "999px"),
       "--sw-ring": s.value.PICKER_SWATCH_RING_COLOR,
       "--pk-gap": px(s.value.PICKER_GAP) ?? "8px",
       "--pk-option-gap": px(s.value.PICKER_OPTION_GAP) ?? "16px",
@@ -53,7 +57,8 @@ export default function useLogic({ props }) {
     })
   );
 
-  const isColor = (type) => ["color", "colour"].includes(String(type?.name ?? "").toLowerCase());
+  // Swatches by the option's display_type (the name only for older rows).
+  const isColor = (type) => isColorType(type);
 
   /** How one option type is drawn. */
   function modeFor(type) {

package/app/logic/components/QuickBuy.js

@@ -16,6 +16,7 @@
  *
  * Every click inside stops at the panel: the card around it is a link.
  */
+import { isColorType, isVariantSoldOut } from "#osi/composables/useProductVariants";
 
 
 export default function useLogic({ props, emit }) {
@@ -86,9 +87,13 @@ export default function useLogic({ props, emit }) {
 
   /* ------------------------------------------------------------------- details */
 
-  const isColor = (type) => ["color", "colour"].includes(String(type.name).toLowerCase());
+  // Swatches by the option's display_type, like the product page.
+  const isColor = (type) => isColorType(type);
   const selected = computed(() => variants.selectedVariant.value);
-  const soldOut = computed(() => variants.stockFor(selected.value));
+  // The product page's rule: a picked combination that's out of stock is sold
+  // out even when the product as a whole is "In Stock".
+  const soldOut = computed(() => isVariantSoldOut(props.product, selected.value));
+  const comingSoon = computed(() => !!props.product?.coming_soon);
   // The picked option has no price: shown as unavailable, can't be added.
   const noPrice = computed(() => !!selected.value && !(Number(selected.value.price) > 0));
   const currency = computed(
@@ -178,6 +183,7 @@ export default function useLogic({ props, emit }) {
       quickShop.flashError("That combination isn't available.");
       return;
     }
+    if (soldOut.value || comingSoon.value) return;
     await quickShop.addVariant(selected.value, qty.value);
   }
 
@@ -185,10 +191,12 @@ export default function useLogic({ props, emit }) {
     quickShop.errorMessage.value ||
     (quickShop.adding.value
       ? "Adding…"
-      : soldOut.value
-        ? "Sold out"
-        : "Add to cart")   // no price: same label, the button is disabled
+      : comingSoon.value
+        ? "Coming soon"
+        : soldOut.value
+          ? "Out of stock"
+          : "Add to cart")   // no price: same label, the button is disabled
   );
 
-  return { isMobile, cartType, store, toggleCartSidebar, mediaUrl, router, variants, quickShop, shown, locked, afterClose, inline, popup, close, onAfterLeave, onKey, closeBtn, onAfterEnter, isColor, selected, soldOut, noPrice, currency, money, price, pickedName, images, track, slide, onScroll, goTo, description, descEl, descLong, descOpen, measureDesc, step, qty, dec, inc, add, ctaLabel };
+  return { isMobile, cartType, store, toggleCartSidebar, mediaUrl, router, variants, quickShop, shown, locked, afterClose, inline, popup, close, onAfterLeave, onKey, closeBtn, onAfterEnter, isColor, selected, soldOut, comingSoon, noPrice, currency, money, price, pickedName, images, track, slide, onScroll, goTo, description, descEl, descLong, descOpen, measureDesc, step, qty, dec, inc, add, ctaLabel };
 }

package/app/logic/components/SiteHeader.js

@@ -144,6 +144,8 @@ export default function useLogic() {
     style["--osi-header-icon"] = s.HEADER_ICON_COLOR || "var(--osi-text)";
     if (s.HEADER_ICON_BG) style["--osi-header-icon-bg"] = s.HEADER_ICON_BG;
     if (s.HEADER_ICON_BORDER) style["--osi-header-icon-border"] = s.HEADER_ICON_BORDER;
+    if (s.HEADER_CART_BADGE_BG) style["--osi-header-badge-bg"] = s.HEADER_CART_BADGE_BG;
+    if (s.HEADER_CART_BADGE_TEXT) style["--osi-header-badge-text"] = s.HEADER_CART_BADGE_TEXT;
     style["--osi-header-pad-y"] = `${s.HEADER_PADDING_Y}px`;
     // Side padding lives on the header itself, not on the inner box — see the
     // note on .osi-header-inner below. 16 is COMMON_STYLE_SETTINGS' PADDING_X

package/app/logic/sections/MainClassificationSection.js

@@ -332,6 +332,8 @@ export default function useLogic({ props }) {
 
       // filters
       "--pf-swatch": px(num(s.value.SWATCH_SIZE, 28)),
+      // Empty: the shape's radius (circle / square).
+      "--pf-swatch-r": px(s.value.SWATCH_RADIUS),
 
       // grid
       "--plp-cols": effectiveColumns.value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osimart/create-storefront",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "Osimart storefront platform — logic, platform pages and CLI; extended by every theme repo",
   "type": "module",
   "main": "./nuxt.config.ts",