@blamejs/blamejs-shop 0.0.44 → 0.0.45

package/CHANGELOG.md

@@ -8,6 +8,8 @@ upgrading across more than a few patches at a time.
 
 ## v0.0.x
 
+- v0.0.45 (2026-05-22) — **Cart line items — thumbnail + product title + slug-linked anchor alongside the SKU chip.** Cart rows previously rendered only the SKU code, qty, unit, and total — the visitor had to remember what they actually added. Each line now leads with a 3.5rem rounded thumbnail (from the product's first `catalog.media` row), the product title in a bold inline label, and the SKU as a small monospace chip below. The whole product cell is an anchor back to the PDP so a visitor can re-enter the product page directly from the cart. Lines whose variant is missing media render the placeholder tile (dashed-border + the diagonal-stripe pattern the catalog empty-state uses). **Changed:** *`CART_LINE_EDITABLE` template — product cell replaces SKU-only cell* — First cell is now `<a class="cart-line__product-link" href="/products/<slug>">` wrapping a thumbnail + a `<span class="cart-line__product-meta">` that stacks the product title (bold) and SKU chip (monospace, on a `--bg-2` background). Hover on the link tints both the title and the link affordance to the accent color. The qty / unit / total / action cells are unchanged. · *`storefront.renderCart({ ..., product_lookup })` accepts a variant→product lookup* — Routes pass a `{ variant_id: { product, hero_media } }` map; lines render with the matching product's title + slug-linked URL + hero-media thumbnail. Lines without a lookup match (variant deleted, media not attached yet) fall through to a SKU-as-title display with the placeholder tile. The cart-table column header is now 'Product' instead of 'SKU'. · *`GET /cart` builds the product lookup* — After listing the cart's lines, the route walks each unique `variant_id` (cached by id so a cart with the same variant twice only hits the catalog once), pulls `catalog.variants.get` → `catalog.products.get` + `catalog.media.listForProduct`, and bundles the result for the renderer.
+
 - v0.0.44 (2026-05-22) — **Package rename — `@blamejs/blamejs-shop` (scoped under the org alongside `@blamejs/core` + `@blamejs/exceptd-skills`).** The npm package is now published under the `blamejs` organization scope as `@blamejs/blamejs-shop`. Installation switches from `npm install blamejs-shop` to `npm install @blamejs/blamejs-shop`; the import surface is unchanged — `require("@blamejs/blamejs-shop")` returns the same shop primitive set the unscoped name did. The legacy unscoped package will be deprecated on the registry with a pointer to the new name so existing operators see the upgrade path on their next install. **Changed:** *`package.json#name` → `@blamejs/blamejs-shop`* — Matches the existing org-scoped packages (`@blamejs/core`, `@blamejs/exceptd-skills`). The publish workflow already passes `--access public` to `npm publish`, which is the access mode scoped packages need to land as publicly-installable. · *Install command* — `npm install @blamejs/blamejs-shop` replaces `npm install blamejs-shop`. The `require` path follows: `var bShop = require("@blamejs/blamejs-shop");`. The entry point + export shape are byte-for-byte identical to v0.0.43 — only the resolution path changes. **Migration:** *Operator upgrade path* — Operators on the unscoped `blamejs-shop` change one line in their `package.json` dependencies: `"blamejs-shop": "^0.0.43"` → `"@blamejs/blamejs-shop": "^0.0.44"`. Every `require("blamejs-shop")` call site needs the matching update (`require("@blamejs/blamejs-shop")`). The unscoped name will be deprecated on the registry with a pointer to the new scoped path so a fresh `npm install` on the old name surfaces the migration message in npm's stderr.
 
 - v0.0.43 (2026-05-22) — **Search results — image-bearing product cards (consistent with the home grid).** The search results page rendered text-only `PRODUCT_CARD` tiles — title + price + 'View product →' link — while the home catalog grid (v0.0.42) shifted to clickable image-bearing `product-card` tiles. This release unifies the two surfaces: search results now go through the same `_buildProductCard(p)` picker so a hit lands a real hero-image tile when the product carries media, and the text-only fallback when it doesn't. The same `asset_prefix` override the home renderer accepts also works on the search renderer. **Changed:** *`storefront.renderSearch({ products, asset_prefix? })` uses `_buildProductCard`* — Same render-time picker the home grid uses — when a result product carries `hero_media`, the card renders as the image-bearing tile; without media, the text-only fallback. `asset_prefix` defaults to `/assets/` and can be overridden for operators on a different R2 binding or CDN remap. · *Search route fetches `catalog.media.listForProduct` per hit* — `GET /search` now calls the media lookup alongside the existing variants + prices loop. The first attached media row becomes `product.hero_media` on the data shape `renderSearch` consumes — same shape the home route v0.0.42 emits.

package/lib/storefront.js

@@ -711,9 +711,22 @@ var CART_LINE =
 // /cart/lines/:id/remove). HTML forms don't natively support
 // PATCH/DELETE so the framework routes use POST with verb-suffix
 // paths.
+// Editable cart line. The first cell carries a small media tile +
+// the product title + the SKU code chip below it; without media,
+// the tile drops to a dashed-border placeholder so the row's grid
+// doesn't collapse. `product_url` is the slug-linked anchor so the
+// visitor can re-enter the PDP from the cart without retyping.
 var CART_LINE_EDITABLE =
   "<tr>\n" +
-  "  <td class=\"cart-line__sku\"><code>{{sku}}</code></td>\n" +
+  "  <td class=\"cart-line__product\">\n" +
+  "    <a class=\"cart-line__product-link\" href=\"{{product_url}}\">\n" +
+  "      RAW_CART_LINE_THUMB\n" +
+  "      <span class=\"cart-line__product-meta\">\n" +
+  "        <span class=\"cart-line__product-title\">{{product_title}}</span>\n" +
+  "        <code class=\"cart-line__sku-chip\">{{sku}}</code>\n" +
+  "      </span>\n" +
+  "    </a>\n" +
+  "  </td>\n" +
   "  <td class=\"cart-line__qty\">\n" +
   "    <form method=\"post\" action=\"/cart/lines/{{line_id}}/update\" class=\"cart-line__update\">\n" +
   "      <input type=\"number\" name=\"qty\" value=\"{{qty}}\" min=\"1\" max=\"99\" class=\"cart-line__qty-input\" aria-label=\"Quantity\">\n" +
@@ -952,7 +965,7 @@ var CART_PAGE =
   "    <div class=\"cart-page__items\">\n" +
   "      <div class=\"table-scroll\">\n" +
   "        <table class=\"cart-table\">\n" +
-  "          <thead><tr><th>SKU</th><th>Quantity</th><th>Unit</th><th>Total</th><th class=\"variant-table__action-h\">Action</th></tr></thead>\n" +
+  "          <thead><tr><th>Product</th><th>Quantity</th><th>Unit</th><th>Total</th><th class=\"variant-table__action-h\">Action</th></tr></thead>\n" +
   "          <tbody>{{line_rows}}</tbody>\n" +
   "        </table>\n" +
   "      </div>\n" +
@@ -974,13 +987,27 @@ function renderCart(opts) {
   var lines  = opts.lines  || [];
   var totals = opts.totals || { subtotal_minor: 0, grand_total_minor: 0, currency: "USD" };
   var shopName = opts.shop_name || "blamejs.shop";
+  var assetPrefix = opts.asset_prefix || "/assets/";
+  // `product_lookup` is { variant_id: { product, hero_media } } — the
+  // route handler bundles it in. Lines without an entry render with
+  // a dashed-placeholder tile + the SKU as the fallback title.
+  var lookup  = opts.product_lookup || {};
   var rendered = lines.map(function (l) {
+    var match  = lookup[l.variant_id] || null;
+    var prod   = match && match.product;
+    var hero   = match && match.hero_media;
+    var imageUrl = hero ? assetPrefix + hero.r2_key : null;
+    var imageAlt = hero ? (hero.alt_text || (prod && prod.title) || l.sku) : null;
     return {
-      id:    l.id,
-      sku:   l.sku,
-      qty:   String(l.qty),
-      unit:  pricing.format(l.unit_amount_minor, l.unit_currency),
-      total: pricing.format(l.qty * l.unit_amount_minor, l.unit_currency),
+      id:             l.id,
+      sku:            l.sku,
+      qty:            String(l.qty),
+      unit:           pricing.format(l.unit_amount_minor, l.unit_currency),
+      total:          pricing.format(l.qty * l.unit_amount_minor, l.unit_currency),
+      product_title:  (prod && prod.title) || l.sku,
+      product_url:    prod ? ("/products/" + prod.slug) : "#",
+      image_url:      imageUrl,
+      image_alt:      imageAlt,
     };
   });
   var subtotal = pricing.format(totals.subtotal_minor,    totals.currency);
@@ -997,10 +1024,23 @@ function renderCart(opts) {
       asset_css_main: opts.theme.assetUrl("css/main.css"),
     });
   }
+  function _escAttr(s) {
+    return String(s == null ? "" : s)
+      .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
   var rows = rendered.map(function (l) {
+    var thumb = l.image_url
+      ? "<span class=\"cart-line__thumb\"><img src=\"" + _escAttr(l.image_url) + "\" alt=\"" + _escAttr(l.image_alt) + "\" loading=\"lazy\"></span>"
+      : "<span class=\"cart-line__thumb cart-line__thumb--empty\" aria-hidden=\"true\"></span>";
     return _render(CART_LINE_EDITABLE, {
-      sku: l.sku, qty: l.qty, unit: l.unit, total: l.total, line_id: l.id,
-    });
+      sku:            l.sku,
+      qty:            l.qty,
+      unit:           l.unit,
+      total:          l.total,
+      line_id:        l.id,
+      product_title:  l.product_title,
+      product_url:    l.product_url,
+    }).replace("RAW_CART_LINE_THUMB", thumb);
   }).join("");
   if (!rows) rows = "<tr><td colspan=\"5\" class=\"empty\">Your cart is empty.</td></tr>";
   var body = _render(CART_PAGE, {
@@ -1578,7 +1618,30 @@ function mount(router, deps) {
     }
     var lines = await deps.cart.listLines(c.id);
     var totals = pricing.totals(c, lines, {});
-    _send(res, 200, renderCart({ lines: lines, totals: totals, shop_name: shopName, theme: theme }));
+    // Build the variant_id → { product, hero_media } lookup the
+    // renderer uses to decorate each line with a thumbnail + title.
+    // Cache by variant_id so a cart with the same variant twice
+    // only hits the catalog once.
+    var productLookup = {};
+    for (var i = 0; i < lines.length; i += 1) {
+      var vId = lines[i].variant_id;
+      if (productLookup[vId]) continue;
+      var v = await deps.catalog.variants.get(vId);
+      if (!v) { productLookup[vId] = null; continue; }
+      var prod = await deps.catalog.products.get(v.product_id);
+      var media = await deps.catalog.media.listForProduct(v.product_id);
+      productLookup[vId] = {
+        product:    prod,
+        hero_media: media.length ? media[0] : null,
+      };
+    }
+    _send(res, 200, renderCart({
+      lines:           lines,
+      totals:          totals,
+      product_lookup:  productLookup,
+      shop_name:       shopName,
+      theme:           theme,
+    }));
   });
 
   // ---- checkout flow -------------------------------------------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blamejs/blamejs-shop",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "description": "Open-source framework built on blamejs. Vendored stack, zero npm runtime deps, PQC-first crypto, security-on by default.",
   "main": "lib/index.js",
   "scripts": {