@osimart/create-storefront 1.0.20 → 1.0.22

package/app/services/CartServices.js

@@ -17,39 +17,112 @@ const persistCartToken = (responseData) => {
 };
 
 /**
- * Add to / remove from a cart line (a line is a variant id).
+ * A cart response's lines as a list. Lines are keyed by their line id
+ * (order_item_id); one variant can sit on several lines (different
+ * customizations, or as an add-on of another product), so nothing may look a
+ * line up by variant id.
+ */
+export function cartLines(response) {
+  return Object.entries(response?.cart || {}).map(([key, line]) => ({
+    ...line,
+    order_item_id: line?.order_item_id ?? key,
+  }));
+}
+
+/** A variant's own top-level lines summed: what "this product in the cart" means now. */
+function variantSnapshot(lines, variantId) {
+  const own = lines.filter((l) => String(l.id) === String(variantId) && !l.parent_item);
+  if (!own.length) return null;
+  return { ...own[0], quantity: own.reduce((n, l) => n + (Number(l.quantity) || 0), 0) };
+}
+
+async function post(body) {
+  const baseUrl = getBaseUrl();
+  const responseData = await apiService(`${baseUrl}store/apis/cart/update-item/`, {
+    method: "POST",
+    headers: cartHeaders(),
+    body: JSON.stringify(body),
+  });
+  return persistCartToken(responseData);
+}
+
+/**
+ * Add a variant to the cart (the only action that takes a variant id).
  *
  * `context` is optional: callers that hold the product (product page, card,
  * quick buy) pass `{ product, variant }` so the analytics event carries its
- * brand and category, which the cart payload doesn't repeat. Cart-side callers
- * (drawer, checkout) omit it and get it from what was remembered at add time.
+ * brand and category, which the cart payload doesn't repeat.
+ *
+ * `properties` are the customization answers, keyed by field key
+ * ({ cover_name: "Lara", cover_color: "<option id>", gift_wrap: true }). The
+ * backend validates and prices them; a bad answer comes back as
+ * 400 { properties: { key: message } } and nothing is added. Same variant +
+ * same answers merges into the existing line, different answers make a new one.
  *
- * This is the single place add_to_cart / remove_from_cart are reported: every
- * cart edit in the storefront goes through here, once.
+ * Signature kept from before (item_id, quantity, action, context, properties)
+ * so existing callers don't change. Any action other than "add" is forwarded
+ * to editLine with `item_id` treated as the line id.
  */
-const EditCart = async (item_id, quantity = 1, action, context, properties = null) => {
+const EditCart = async (item_id, quantity = 1, action = "add", context, properties = null) => {
+  if (action !== "add") return editLine({ order_item_id: item_id }, action, quantity);
   try {
-    const baseUrl = getBaseUrl();
-    const before = analytics.peekCartLine(item_id);
-    const body = { quantity, item_id, action };
+    const before = variantSnapshot(analytics.peekCartLines(), item_id);
+    const body = { item_id, quantity, action: "add" };
     if (properties && Object.keys(properties).length) body.properties = properties;
-    const responseData = await apiService(`${baseUrl}store/apis/cart/update-item/`, {
-      method: "POST",
-      headers: cartHeaders(),
-      body: JSON.stringify(body),
-    });
-    persistCartToken(responseData);
+    const responseData = await post(body);
     analytics.cartEdited({
       itemId: item_id,
+      variantId: item_id,
       quantity,
-      action,
+      action: "add",
       before,
-      after: responseData?.cart?.[item_id] ?? null,
+      after: variantSnapshot(cartLines(responseData), item_id),
       context,
     });
     return responseData;
   } catch (error) {
-    console.error('Cart fetch error:', error);
+    console.error('Cart update error:', error);
+    throw error;
+  }
+};
+
+/**
+ * Change one exact cart line.
+ *
+ *   edit        set the line's quantity to `quantity`
+ *   remove      take `quantity` off the line (0 deletes it)
+ *   remove_all  delete the line
+ *
+ * Add-on lines (parent_item set) follow their parent and can't be edited on
+ * their own — the backend rejects it, so callers never offer it.
+ */
+const editLine = async (line, action, quantity) => {
+  const orderItemId = line?.order_item_id;
+  if (!orderItemId) throw new Error("Missing cart line id.");
+  try {
+    const before = analytics.peekCartLine(orderItemId);
+    const body = { order_item_id: orderItemId, action };
+    if (action !== "remove_all") body.quantity = quantity;
+    const responseData = await post(body);
+    const after = responseData?.cart?.[orderItemId]
+      ?? cartLines(responseData).find((l) => String(l.order_item_id) === String(orderItemId))
+      ?? null;
+    const prev = Number(before?.quantity ?? line?.quantity) || 0;
+    const next = Number(after?.quantity) || 0;
+    // Analytics speaks add/remove; "edit" is whichever way the quantity moved.
+    if (next !== prev) {
+      analytics.cartEdited({
+        itemId: orderItemId,
+        variantId: before?.id ?? line?.id,
+        quantity: Math.abs(next - prev),
+        action: next > prev ? "add" : "remove",
+        before: before ?? line,
+        after,
+      });
+    }
+    return responseData;
+  } catch (error) {
+    console.error('Cart update error:', error);
     throw error;
   }
 };
@@ -88,6 +161,7 @@ const mergeCart = async () => {
 
 export default {
   EditCart,
+  editLine,
   fetchCart,
   mergeCart,
 };

package/app/utils/analytics.js

@@ -72,9 +72,9 @@ const state = {
   pixelIds: [],
   currency: "",
   consent: true,
-  /** Last cart the server sent, keyed by line (variant) id. */
+  /** Last cart the server sent, keyed by line id (order_item_id). */
   cart: {},
-  /** What we know about a line beyond the cart payload: brand, category… */
+  /** What we know about a variant beyond the cart payload: brand, category… (keyed by variant id) */
   lineContext: new Map(),
   /** Once-per-page guards (view_item, view_item_list). Cleared on navigation. */
   seen: new Set(),
@@ -240,12 +240,14 @@ export function productToItem(product, opts = {}) {
 }
 
 /**
- * A cart line (the server's `cart[id]` entry, keyed by variant id) -> item.
- * The payload doesn't repeat brand / category, so what the add-to-cart call
- * site knew is remembered per line and laid back over it here.
+ * A cart line -> item. `line.id` is the variant id (one variant can sit on
+ * several lines now, so lines are keyed by order_item_id); `id` is only the
+ * fallback. The payload doesn't repeat brand / category, so what the
+ * add-to-cart call site knew is remembered per variant and laid back over it.
  */
 function cartLineToItem(id, line, quantity) {
-  const known = state.lineContext.get(String(id)) ?? {};
+  const variantId = line?.id ?? id;
+  const known = state.lineContext.get(String(variantId)) ?? {};
   const productId =
     known.item_id ?? line?.product_id ?? line?.product?.id ?? line?.product?.product?.id ?? id;
   return clean({
@@ -255,7 +257,7 @@ function cartLineToItem(id, line, quantity) {
     item_category: known.item_category,
     item_category2: known.item_category2,
     item_variant: variantLabel(line) || known.item_variant,
-    variant_id: String(id),
+    variant_id: String(variantId),
     sku: line?.sku ?? known.sku,
     price: money(line?.price ?? known.price),
     quantity: quantity ?? Math.max(1, num(line?.quantity)),
@@ -499,11 +501,16 @@ function selectItem(product, override = {}) {
   log("select_item", ga);
 }
 
-/** What we last heard the cart contained for this line, before an edit. */
+/** What we last heard the cart contained for this line (order_item_id), before an edit. */
 function peekCartLine(id) {
   return state.cart[String(id)] ?? null;
 }
 
+/** Every line we last heard about, as a list (to sum a variant across lines). */
+function peekCartLines() {
+  return Object.entries(state.cart).map(([key, line]) => ({ ...line, order_item_id: line?.order_item_id ?? key }));
+}
+
 /** Remembers the server's cart. Called with every cart response. */
 function rememberCart(response) {
   if (!isClient() || !response || typeof response !== "object") return;
@@ -524,13 +531,16 @@ function resetCart() {
  * through, from product pages, cards, quick buy, the drawer and checkout — so
  * nothing is missed and nothing is counted twice.
  *
- * @param {{ itemId: string|number, quantity: number, action: "add"|"remove",
+ * `variantId` keys what the call site knew (brand, category); `itemId` is the
+ * line or variant the edit targeted.
+ *
+ * @param {{ itemId: string|number, variantId?: string|number, quantity: number, action: "add"|"remove",
  *           before: object|null, after: object|null,
  *           context?: { product?: object, variant?: object } }} edit
  */
-function cartEdited({ itemId, quantity, action, before, after, context }) {
+function cartEdited({ itemId, variantId, quantity, action, before, after, context }) {
   if (!isClient()) return;
-  const id = String(itemId);
+  const id = String(variantId ?? before?.id ?? after?.id ?? itemId);
 
   // Remember what the call site knew, for later edits made from the drawer.
   if (context?.product) {
@@ -832,6 +842,7 @@ const api = {
   viewItemList,
   selectItem,
   peekCartLine,
+  peekCartLines,
   rememberCart,
   resetCart,
   cartEdited,

package/package.json

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