@osimart/create-storefront 1.0.20 → 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/useAddToCart.js

@@ -2,12 +2,14 @@ import CartServices from "#osi/services/CartServices";
 import { useToast } from "vue-toastification";
 import { useCart } from "./useCart";
 import { useSidebar } from "./useSidebar";
+import { isCustomizationError, needsPersonalization } from "./useProductCustomization";
 
 export function useAddToCart() {
   const router = useRouter();
-  const { fetchCart } = useCart();
+  const { apply: applyCart } = useCart();
   const { toggleCartSidebar } = useSidebar();
   const { cartType } = useStorefront();
+  const { productUrl } = useProductUrl();
 
   function openCartUi() {
     if (cartType.value === "PAGE") {
@@ -38,10 +40,12 @@ export function useAddToCart() {
       return;
     }
 
-    // If product has multiple variants, redirect to detail page
-    if (Array.isArray(product.product_variants) && product.product_variants.length > 1) {
-      const categorySlug = product.categories?.[0]?.category?.slugified_name || 'products';
-      router.push(`/${categorySlug}/${product.slugified_name}/`);
+    // Multiple variants, or a required personalization: picked on the product page.
+    if (
+      (Array.isArray(product.product_variants) && product.product_variants.length > 1) ||
+      needsPersonalization(product)
+    ) {
+      router.push(productUrl(product));
       return;
     }
 
@@ -58,10 +62,16 @@ export function useAddToCart() {
         variant: product.product_variants?.[0],
       });
       if (response) {
-        await fetchCart();
+        // The add already returned the whole cart.
+        applyCart(response);
         openCartUi();
       }
     } catch (error) {
+      // 400 { properties }: required personalization the list didn't know about.
+      if (isCustomizationError(error)) {
+        router.push(productUrl(product));
+        return;
+      }
       console.error("[useAddToCart] Error adding to cart:", error);
       try {
         const toast = useToast();

package/app/composables/useCart.js

@@ -1,10 +1,16 @@
-import CartServices from "#osi/services/CartServices";
+import CartServices, { cartLines } from "#osi/services/CartServices";
 import { clearCartToken } from "#osi/services/CartToken";
 
+/** A line's identity. Lines are keyed by order_item_id; `id` is the variant. */
+export const lineKey = (item) => String(item?.order_item_id ?? item ?? "");
+
 export function useCart() {
   // The raw server payload. Checkout needs it to build its order lines, so
   // it's kept rather than discarded after mapping.
   const cart = useState("cart-raw", () => null);
+  // Every line, add-ons included. Each has `order_item_id` (the line),
+  // `id` (the variant), `parent_item` (the parent line for an add-on, else
+  // null), `properties` (customization answers) and `customization_price`.
   const cartItems = useState("cart-items", () => []);
   const cartTotal = useState("cart-total", () => 0);
   const loading = useState("cart-loading", () => false);
@@ -18,22 +24,37 @@ export function useCart() {
     if (!response) return response;
     cart.value = response;
     cartTotal.value = response.total_price || 0;
-    cartItems.value = Object.entries(response.cart || {}).map(([id, item]) => ({
-      id,
-      ...item,
-    }));
+    cartItems.value = cartLines(response);
     return response;
   }
 
-  const isUpdating = (item) => {
-    const id = item?.id ?? item;
-    return updatingIds.value.includes(id);
-  };
+  /** Lines the shopper controls: products, not the add-ons hanging off them. */
+  const topLevelItems = computed(() => cartItems.value.filter((item) => !item.parent_item));
+
+  /** Add-on lines (gift wrap, box…) of one line. */
+  const childrenOf = (item) =>
+    cartItems.value.filter((child) => child.parent_item && String(child.parent_item) === lineKey(item));
+
+  /**
+   * Parents each followed by their add-ons — the order every cart list renders
+   * in. An add-on whose parent is missing (shouldn't happen) goes last rather
+   * than disappearing.
+   */
+  const orderedItems = computed(() => {
+    const parents = topLevelItems.value;
+    const parentKeys = new Set(parents.map(lineKey));
+    return [
+      ...parents.flatMap((parent) => [parent, ...childrenOf(parent)]),
+      ...cartItems.value.filter((item) => item.parent_item && !parentKeys.has(String(item.parent_item))),
+    ];
+  });
 
-  function markUpdating(id, busy) {
+  const isUpdating = (item) => updatingIds.value.includes(lineKey(item));
+
+  function markUpdating(key, busy) {
     updatingIds.value = busy
-      ? [...updatingIds.value, id]
-      : updatingIds.value.filter((existing) => existing !== id);
+      ? [...updatingIds.value, key]
+      : updatingIds.value.filter((existing) => existing !== key);
   }
 
   async function fetchCart() {
@@ -49,29 +70,44 @@ export function useCart() {
   }
 
   /**
-   * Add or remove quantity on one line. Per-line busy state, not a single
+   * Change one line, by its order_item_id. Per-line busy state, not a single
    * global flag — one slow line shouldn't freeze the controls on the others.
    *
+   *   edit        quantity = the line's new quantity
+   *   remove      quantity = how many to take off
+   *   remove_all  deletes the line (and its add-ons, server-side)
+   *
+   * Add-on lines are ignored: they follow their parent.
+   *
    * Throws on failure so the caller can decide how to surface it (the drawer
    * has useApiErrorToast, checkout has its own extractErrorMessage).
    */
   async function editItem(item, action, quantity) {
-    const id = item?.id ?? item;
-    if (!id || isUpdating(id)) return null;
+    const key = lineKey(item);
+    if (!item?.order_item_id || item.parent_item || isUpdating(key)) return null;
 
-    const step = quantity ?? item?.quantity_step ?? 1;
-    markUpdating(id, true);
+    markUpdating(key, true);
     try {
-      return apply(await CartServices.EditCart(id, step, action));
+      return apply(await CartServices.editLine(item, action, quantity));
     } finally {
-      markUpdating(id, false);
+      markUpdating(key, false);
     }
   }
 
-  const increaseItem = (item) => editItem(item, "add");
-  const decreaseItem = (item) => editItem(item, "remove");
-  // Remove is a decrease by the full quantity — the API has no delete verb.
-  const removeItem = (item) => editItem(item, "remove", item?.quantity);
+  const step = (item) => Number(item?.quantity_step) || 1;
+
+  // "add" with a variant id would add a new plain line (no customization),
+  // so increasing a line sets its quantity instead.
+  const increaseItem = (item) =>
+    editItem(item, "edit", (Number(item?.quantity) || 0) + step(item));
+  const decreaseItem = (item) => editItem(item, "remove", step(item));
+  const removeItem = (item) => editItem(item, "remove_all");
+
+  /** How many of a variant the shopper has, across all its lines. */
+  const quantityOf = (variantId) =>
+    topLevelItems.value
+      .filter((item) => String(item.id) === String(variantId))
+      .reduce((total, item) => total + (Number(item.quantity) || 0), 0);
 
   /**
    * Call only once the server has confirmed there's nothing left to pay. The
@@ -87,17 +123,22 @@ export function useCart() {
     updatingIds.value = [];
   }
 
+  // Header badge: products the shopper picked, not their add-on lines.
   const count = computed(() =>
-    cartItems.value.reduce((total, item) => total + (item.quantity || 0), 0),
+    topLevelItems.value.reduce((total, item) => total + (Number(item.quantity) || 0), 0),
   );
 
   return {
     cart,
     cartItems,
+    topLevelItems,
+    orderedItems,
+    childrenOf,
     cartTotal,
     loading,
     count,
     isUpdating,
+    quantityOf,
     fetchCart,
     editItem,
     increaseItem,
@@ -106,4 +147,4 @@ export function useCart() {
     apply,
     clear,
   };
-}
+}

package/app/composables/useCheckout.js

@@ -75,11 +75,14 @@ export function useCheckout() {
   const {
     cart: rawCart,
     cartItems,
+    orderedItems,
+    topLevelItems,
     cartTotal,
     loading: cartLoading,
     isUpdating,
     fetchCart,
-    editItem,
+    increaseItem,
+    decreaseItem,
     removeItem,
   } = useCart();
 
@@ -162,14 +165,23 @@ export function useCheckout() {
   // ================================================================
   // COMPUTED
   // ================================================================
-  // Template keeps its original names.
-  const CartItems = computed(() => cartItems.value);
+  // Template keeps its original names. Every line, each product followed by
+  // its add-on lines (gift wrap…), which render nested with no stepper.
+  const CartItems = computed(() => orderedItems.value);
+  // The products the shopper picked (thumbnails strip, item count).
+  const TopLevelItems = computed(() => topLevelItems.value);
   const total_price = computed(() => cartTotal.value);
 
   const totalItemsCount = computed(() =>
-    CartItems.value.reduce((sum, item) => sum + Number(item.quantity || 0), 0),
+    TopLevelItems.value.reduce((sum, item) => sum + Number(item.quantity || 0), 0),
   );
 
+  // Checkout re-checks each line's customization against the product's
+  // current setup. When the merchant changed it (field made required, option
+  // deleted, add-on changed) placeOrder answers { cart: "The options for X
+  // have changed…" }: shown as a banner that links to the lines.
+  const cartError = ref("");
+
   const isLoading = computed(() => cartLoading.value || needsUserInfo.value);
 
   const selectedAddress = computed(() =>
@@ -299,13 +311,26 @@ export function useCheckout() {
       toast.error(extractErrorMessage(error));
     }
   }
+  // Each targets one line by order_item_id; add-on lines are never edited
+  // directly (useCart ignores them, the template offers no controls).
   const increaseQuantity = (item) =>
-    mutateCart(() => editItem(item, "add"), "Error adding to cart:");
+    mutateCart(() => increaseItem(item), "Error adding to cart:");
   const decreaseQuantity = (item) =>
-    mutateCart(() => editItem(item, "remove"), "Error decreasing quantity:");
+    mutateCart(() => decreaseItem(item), "Error decreasing quantity:");
   const deleteItem = (item) =>
     mutateCart(() => removeItem(item), "Error removing from cart:");
 
+  /** "Review cart" on the banner: bring the line items into view. */
+  function reviewCart() {
+    const desktop = typeof window !== "undefined" && window.matchMedia("(min-width: 1024px)").matches;
+    if (!desktop) mobileSummaryOpen.value = true;
+    nextTick(() => {
+      document
+        .querySelector(desktop ? "[data-checkout-lines='rail']" : "[data-checkout-lines='mobile']")
+        ?.scrollIntoView({ behavior: "smooth", block: "center" });
+    });
+  }
+
   // ================================================================
   // REFERENCE DATA
   // ================================================================
@@ -762,6 +787,13 @@ export function useCheckout() {
     } catch (error) {
       console.error("Error placing order:", error);
       if (handleOrderPromoError(error)) return;
+      const data = errorData(error);
+      if (data && typeof data === "object" && !Array.isArray(data) && data.cart) {
+        cartError.value = [].concat(data.cart).join(" ");
+        await nextTick();
+        if (typeof window !== "undefined") window.scrollTo({ top: 0, behavior: "smooth" });
+        return;
+      }
       toast.error(extractErrorMessage(error));
     } finally {
       isCheckingOut.value = false;
@@ -859,6 +891,12 @@ export function useCheckout() {
     refreshFreeDelivery();
   });
 
+  // Any cart change (the shopper removed / re-added the line) clears the
+  // "options have changed" banner; the next attempt re-checks server-side.
+  watch(cartItems, () => {
+    cartError.value = "";
+  });
+
   watch(phoneNumberResults, (results) => {
     if (formErrors.value.mobile_number && results?.isValid) {
       clearFieldError("mobile_number");
@@ -894,12 +932,15 @@ export function useCheckout() {
 
     // cart
     CartItems,
+    TopLevelItems,
     total_price,
     totalItemsCount,
     isItemUpdating,
     increaseQuantity,
     decreaseQuantity,
     deleteItem,
+    cartError,
+    reviewCart,
 
     // user + form
     isLoggedIn,

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/useProductCustomization.js

@@ -1,52 +1,93 @@
-import { computed, reactive, watch } from "vue";
+import { computed, nextTick, reactive, watch } from "vue";
 
+// 0 is a valid NUMBER answer, so only null / undefined / false / blank are empty.
 const EMPTY = (value) =>
   value === null || value === undefined || value === false ||
   (typeof value === "string" && value.trim() === "");
 
-/** Product customization answers, scoped to the product and variant shown. */
+const sameId = (a, b) => a != null && b != null && String(a) === String(b);
+
+/**
+ * Product customization answers, scoped to the product and variant shown.
+ *
+ * `product` and `selectedVariant` are refs; the variant is the variant object
+ * (its `id` is checked against each set's excluded_variants).
+ *
+ * The backend validates and prices everything again on add to cart; the
+ * prices here are only a preview.
+ */
 export function useProductCustomization(product, selectedVariant) {
   const values = reactive({});
   const errors = reactive({});
 
+  // A set is hidden for the selected variant when it's in excluded_variants.
+  // No variant picked yet: show every set.
   const visibleSets = computed(() => {
     const variantId = selectedVariant.value?.id;
     return (product.value?.customization_sets || []).filter(
-      (set) => !variantId || !(set.excluded_variants || []).includes(variantId),
+      (set) => variantId == null || !(set.excluded_variants || []).some((id) => sameId(id, variantId)),
     );
   });
   const visibleFields = computed(() =>
     visibleSets.value.flatMap((set) => set.customization_fields || []),
   );
 
+  const hasCustomization = computed(() => visibleFields.value.length > 0);
+  const hasRequired = computed(() =>
+    (product.value?.customization_sets || []).some((set) =>
+      (set.customization_fields || []).some((field) => field.required),
+    ),
+  );
+
+  // A variant change that hides a set drops its answers (and their price);
+  // answers for fields still visible are kept.
   watch(visibleFields, (fields) => {
     const keys = new Set(fields.map((field) => field.key));
     Object.keys(values).forEach((key) => { if (!keys.has(key)) delete values[key]; });
     Object.keys(errors).forEach((key) => { if (!keys.has(key)) delete errors[key]; });
-  });
+  }, { immediate: true });
 
   function optionFor(field) {
-    return field.options?.find((option) => option.id === values[field.key]) || null;
+    return field.options?.find((option) => sameId(option.id, values[field.key])) || null;
   }
 
+  /** What a filled field costs: { delta } on the line, or { addon } as its own line. */
   function costOf(field) {
     if (EMPTY(values[field.key])) return null;
     if (field.type === "SELECT") {
       const option = optionFor(field);
       if (!option) return null;
+      // option.price_delta null means "use the field's price", not 0.
       return option.addon_variant
         ? { addon: option.addon_variant }
-        : { delta: option.price_delta ?? field.price_delta ?? 0 };
+        : { delta: Number(option.price_delta ?? field.price_delta ?? 0) || 0 };
     }
     return field.addon_variant
       ? { addon: field.addon_variant }
-      : { delta: field.price_delta || 0 };
+      : { delta: Number(field.price_delta) || 0 };
   }
 
   const deltaPerUnit = computed(() => visibleFields.value.reduce(
-    (sum, field) => sum + (Number(costOf(field)?.delta) || 0), 0,
+    (sum, field) => sum + (costOf(field)?.delta || 0), 0,
   ));
-  const addons = computed(() => visibleFields.value.map(costOf).filter((cost) => cost?.addon).map((cost) => cost.addon));
+  const addons = computed(() =>
+    visibleFields.value.map(costOf).filter((cost) => cost?.addon).map((cost) => cost.addon),
+  );
+  const addonsPerUnit = computed(() =>
+    addons.value.reduce((sum, addon) => sum + (Number(addon.price) || 0), 0),
+  );
+
+  /** Scroll the first field with an error into view. */
+  function scrollToFirstError() {
+    if (typeof document === "undefined") return;
+    const first = visibleFields.value.find((field) => errors[field.key]);
+    if (!first) return;
+    nextTick(() => {
+      const el = [...document.querySelectorAll(".osi-pdp-customization [data-key]")]
+        .find((node) => node.dataset.key === String(first.key));
+      el?.scrollIntoView({ behavior: "smooth", block: "center" });
+    });
+  }
 
   function validate() {
     Object.keys(errors).forEach((key) => delete errors[key]);
@@ -62,9 +103,12 @@ export function useProductCustomization(product, selectedVariant) {
         errors[field.key] = `${field.label} must be at most ${field.max_length} characters.`;
       }
     }
-    return Object.keys(errors).length === 0;
+    const ok = Object.keys(errors).length === 0;
+    if (!ok) scrollToFirstError();
+    return ok;
   }
 
+  /** Add-to-cart `properties`: filled, visible fields only, keyed by field key. */
   const payload = computed(() => {
     const result = {};
     for (const field of visibleFields.value) {
@@ -72,17 +116,31 @@ export function useProductCustomization(product, selectedVariant) {
       if (EMPTY(value)) continue;
       if (field.type === "CHECKBOX") result[field.key] = true;
       else if (field.type === "NUMBER") result[field.key] = Number(value);
-      else if (field.type === "SELECT") result[field.key] = value;
+      else if (field.type === "SELECT") result[field.key] = value; // the option id, not its text
       else result[field.key] = String(value).trim();
     }
     return result;
   });
 
+  /**
+   * Backend 400 { properties: { key: message } } -> messages under the fields.
+   * Returns false when nothing matched a visible field, so the caller shows
+   * the error some other way.
+   */
   function applyServerErrors(error) {
-    const serverErrors = error?.data?.properties || error?.response?._data?.properties;
+    const data = error?.data ?? error?.response?._data ?? error?.response?.data;
+    const serverErrors = data?.properties;
     if (!serverErrors) return false;
-    Object.assign(errors, serverErrors);
-    return true;
+    if (typeof serverErrors !== "object") return false;
+    const keys = new Set(visibleFields.value.map((field) => field.key));
+    let matched = false;
+    for (const [key, message] of Object.entries(serverErrors)) {
+      if (!keys.has(key)) continue;
+      errors[key] = Array.isArray(message) ? message.join(" ") : String(message);
+      matched = true;
+    }
+    if (matched) scrollToFirstError();
+    return matched;
   }
 
   function reset() {
@@ -90,5 +148,39 @@ export function useProductCustomization(product, selectedVariant) {
     Object.keys(errors).forEach((key) => delete errors[key]);
   }
 
-  return { values, errors, visibleSets, visibleFields, deltaPerUnit, addons, costOf, validate, payload, applyServerErrors, reset };
+  return {
+    values,
+    errors,
+    visibleSets,
+    visibleFields,
+    hasCustomization,
+    hasRequired,
+    deltaPerUnit,
+    addons,
+    addonsPerUnit,
+    costOf,
+    validate,
+    payload,
+    applyServerErrors,
+    scrollToFirstError,
+    reset,
+  };
+}
+
+/**
+ * A product with a required customization field can't be added from a card:
+ * the answers are picked on its page. Lists usually don't carry
+ * `customization_sets`, so this only catches what's known up front; the
+ * backend's 400 { properties } catches the rest (isCustomizationError).
+ */
+export function needsPersonalization(product) {
+  return !!product?.customization_sets?.some((set) =>
+    (set.customization_fields || []).some((field) => field.required),
+  );
+}
+
+/** Whether an add-to-cart error is a customization rejection (400 { properties }). */
+export function isCustomizationError(error) {
+  const data = error?.data ?? error?.response?._data ?? error?.response?.data;
+  return !!(data && typeof data === "object" && !Array.isArray(data) && data.properties);
 }

package/app/composables/useProductDetail.js

@@ -337,6 +337,27 @@ export function createProductDetail({ product, settings = {}, loading = false }
 
   const customization = useProductCustomization(p, exactMatchVariant);
 
+  /**
+   * Price preview with customization: per-unit fees on the line, add-on items
+   * charged as their own lines. Only a preview — the cart total from the
+   * backend is what's charged. Null until something adds to the price.
+   */
+  const customizationPreview = computed(() => {
+    const delta = customization.deltaPerUnit.value;
+    const addonUnit = customization.addonsPerUnit.value;
+    if (!(delta > 0) && !(addonUnit > 0)) return null;
+    const qty = Number(quantity.value) || 1;
+    const line = pricing.value.total?.after ?? (Number(priceRange.value?.min) || 0) * qty;
+    const total = round2(line + (delta + addonUnit) * qty);
+    return {
+      delta,
+      addons: addonUnit,
+      quantity: qty,
+      total,
+      text: { delta: formatMoney(delta), addons: formatMoney(addonUnit), total: formatMoney(total) },
+    };
+  });
+
   function selectVariant(value) {
     if (value?.isAvailable === false) return;
     variants.selectVariant(value);
@@ -748,10 +769,8 @@ export function createProductDetail({ product, settings = {}, loading = false }
       return false;
     }
 
-    if (!customization.validate()) {
-      nextTick(() => document.querySelector(".osi-pdp-customization .has-error")?.scrollIntoView({ behavior: "smooth", block: "center" }));
-      return false;
-    }
+    // Required / max length / number checks; scrolls to the first bad field.
+    if (!customization.validate()) return false;
 
     isAddingToCart.value = true;
     try {
@@ -767,10 +786,8 @@ export function createProductDetail({ product, settings = {}, loading = false }
 
       return true;
     } catch (error) {
-      if (customization.applyServerErrors(error)) {
-        nextTick(() => document.querySelector(".osi-pdp-customization .has-error")?.scrollIntoView({ behavior: "smooth", block: "center" }));
-        return false;
-      }
+      // 400 { properties: { key: message } }: shown under each field.
+      if (customization.applyServerErrors(error)) return false;
       showApiError(error, "Couldn't add that to your cart.");
       return false;
     } finally {
@@ -888,6 +905,9 @@ export function createProductDetail({ product, settings = {}, loading = false }
 
   function resetSelections() {
     variants.reset();
+    // Field keys repeat across products (e.g. "engraving"), so answers never
+    // carry over to the next product.
+    customization.reset();
     quantity.value = quantityStep.value;
     showError.value = false;
   }
@@ -930,6 +950,7 @@ export function createProductDetail({ product, settings = {}, loading = false }
 
     // customization
     customization,
+    customizationPreview,
 
     // price
     pricing,