@blamejs/blamejs-shop 0.2.20 → 0.2.21

package/CHANGELOG.md

@@ -8,6 +8,8 @@ upgrading across more than a few patches at a time.
 
 ## v0.2.x
 
+- v0.2.21 (2026-05-29) — **Related products ("You may also like") on the product page.** Product pages now show a related-products rail. The picks are the other products in the product's primary collection, ordered deterministically and capped at four, rendered with the same product-card markup the home and search grids use — identical on the edge and origin paths. The rail is hidden when a product has no related items. This surfaces existing catalog relationships to shoppers without any new data or configuration. **Added:** *Related-products rail on the PDP* — A "You may also like" section on each product page lists other active products from the same primary collection (deterministic order, up to four), using the standard product-card markup byte-identically across the edge and origin renders. Hidden when there are no related products.
+
 - v0.2.20 (2026-05-29) — **Manage a subscription yourself — pause, skip, change, or reactivate.** The subscriptions account screen previously only let a customer cancel. It now exposes the full self-service set: pause and resume, skip the next shipment, change the quantity, change the delivery frequency, and reactivate a recently-cancelled subscription within its grace window. Each action is state-gated (only the controls that apply to a subscription's current state are shown), confirm-aware where it changes billing, and reports back with a status notice. No more cancelling just to make a change. **Added:** *Subscription self-management* — `/account/subscriptions` gains Pause / Resume, Skip next shipment, Change quantity, Change frequency, and Reactivate (within the grace window) alongside Cancel. Controls are shown only when valid for the subscription's state; quantity and frequency are validated server-side; pause and cancel go through a confirmation step.
 
 - v0.2.19 (2026-05-29) — **Search results render the same product cards as the rest of the store.** A product with no image showed an outdated, text-only card on the search-results page when that page was served from the edge, while the home and category grids (and the origin-rendered search page) used the current placeholder-illustration card. The edge search page now emits the same card markup as every other grid, so a no-image product looks identical wherever it appears. A render-level parity check now pins the search page's markup byte-for-byte across the edge and origin paths so this kind of drift is caught automatically. **Fixed:** *Consistent no-image product card on search* — The edge-rendered search results page used a stale text-only card for products without a hero image; it now renders the placeholder-illustration card used across the rest of the storefront, byte-identical to the origin render.

package/lib/asset-manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.20",
+  "version": "0.2.21",
   "assets": {
     "css/admin.css": {
       "integrity": "sha384-1SIn6oAf1DjECbRfKENZasdKHJiywGdXR58wn0hsFGcdVHzUmvfgMkEz5ANIAZJ3",

package/lib/storefront.js

@@ -725,6 +725,22 @@ function _buildProductCard(p) {
   });
 }
 
+// PDP "You may also like" rail. `related` is the pre-decorated card
+// list [{ slug, title, price, image_url, image_alt }] the PDP renderer
+// builds from the same-collection picks. Reuses the catalog grid +
+// product-card markup so it inherits the storefront's card styling.
+// Returns "" when there's nothing to show so the PDP renders no empty
+// rail. Mirrored byte-for-byte by worker/render/product.js#_buildRelatedProducts.
+function _buildRelatedProducts(related) {
+  related = related || [];
+  if (related.length === 0) return "";
+  var cards = related.map(function (p) { return _buildProductCard(p); }).join("");
+  return "<section class=\"catalog-section pdp-recommendations\" aria-labelledby=\"pdp-related-title\">" +
+           "<header class=\"section-head\"><h2 id=\"pdp-related-title\" class=\"section-head__title\">You may also like</h2></header>" +
+           "<div class=\"grid\">" + cards + "</div>" +
+         "</section>";
+}
+
 var HOME_HERO =
   "<section class=\"hero hero--dark\">\n" +
   "  <div class=\"hero__bg\" aria-hidden=\"true\">\n" +
@@ -1535,7 +1551,8 @@ var PRODUCT_PAGE =
   "  RAW_BUNDLES_PLACEHOLDER\n" +
   "  RAW_REVIEWS_PLACEHOLDER\n" +
   "  RAW_QA_PLACEHOLDER\n" +
-  "</section>\n";
+  "</section>\n" +
+  "RAW_RELATED_PLACEHOLDER";
 
 // PDP gallery markup — composed once per render call from the
 // product's media rows. When media is present, the first row drives
@@ -3565,6 +3582,27 @@ function renderProduct(opts) {
     var vTitle = v.title || (Object.keys(v.options || {}).map(function (k) { return v.options[k]; }).join(" / ") || "Default");
     return { id: v.id, sku: v.sku, title: vTitle, price: priceStr };
   });
+  // "You may also like" rail — same-collection picks the route decorated
+  // with each card's hero media + first-variant price (minor units). The
+  // price string is formatted here with the page's own `fmt` so it tracks
+  // the active currency context exactly as the buy-box prices do. Mirrors
+  // the edge renderer (`worker/render/product.js`) so the section is
+  // byte-identical across substrates. Built once, shared by the theme
+  // branch's raw slot and the inline-template branch's placeholder.
+  var relatedAssetPrefix = opts.asset_prefix || "/assets/";
+  var relatedCards = (opts.related || []).map(function (r) {
+    var priceStr = Number.isInteger(r.price_minor)
+      ? fmt(r.price_minor, r.price_currency || "USD")
+      : "—";
+    return {
+      slug:      r.slug,
+      title:     r.title,
+      price:     priceStr,
+      image_url: r.hero_r2_key ? (relatedAssetPrefix + r.hero_r2_key) : null,
+      image_alt: r.hero_r2_key ? (r.hero_alt_text || r.title) : null,
+    };
+  });
+  var relatedHtml = _buildRelatedProducts(relatedCards);
   if (opts.theme) {
     return opts.theme.render("product", {
       title:          opts.product.title,
@@ -3582,6 +3620,10 @@ function renderProduct(opts) {
       qty_breaks_html: _buildQtyBreaks(opts.qty_breaks),
       wishlist_html:  _buildWishlist(opts.product.id, opts.wishlist_count),
       compare_html:   _buildCompare(opts.product.id),
+      // Pre-rendered "You may also like" rail for the theme's
+      // `{{{ related_html }}}` raw slot. Empty string when the product
+      // has no same-collection siblings to show.
+      related_html:   relatedHtml,
       asset_css_main: opts.theme.assetUrl("css/main.css"),
     });
   }
@@ -3614,7 +3656,8 @@ function renderProduct(opts) {
     .replace("RAW_COMPARE_PLACEHOLDER", compareHtml)
     .replace("RAW_BUNDLES_PLACEHOLDER", bundlesHtml)
     .replace("RAW_REVIEWS_PLACEHOLDER", reviewsHtml)
-    .replace("RAW_QA_PLACEHOLDER", qaHtml);
+    .replace("RAW_QA_PLACEHOLDER", qaHtml)
+    .replace("RAW_RELATED_PLACEHOLDER", relatedHtml);
   // Product-specific OpenGraph + Twitter Card values so shares
   // unfurl as "Operator Tee — blamejs.shop" with the SVG hero, not
   // the default shop-level description + brand logo.
@@ -6152,6 +6195,66 @@ function mount(router, deps) {
     };
   }
 
+  // "You may also like" picks for a PDP. Deterministic same-collection
+  // query so the edge (worker/data/catalog.js#listRelatedProducts) and
+  // the container produce the SAME ordered list and the rail renders
+  // byte-identically wherever the PDP is served: the source product's
+  // primary collection (lowest membership position), then the other
+  // active members of that collection ordered by membership position
+  // then product id, self excluded, capped at `limit`. The signal-based
+  // recommendations engine (co-purchase + RANDOM filler) is intentionally
+  // NOT used here — its order isn't reproducible at the edge, which has
+  // no engine handle and can't replay RANDOM(). Each pick is decorated
+  // with its first variant's current USD price (minor units) + first
+  // media row; the renderer formats the price string with the page's own
+  // currency formatter so the rail tracks the active display currency.
+  // Best-effort: a read failure (tables not migrated) returns [] so the
+  // PDP renders without the rail rather than 500-ing.
+  async function _relatedProductsFor(productId, limit) {
+    var query = function (sql, params) { return b.externalDb.query(sql, params); };
+    try {
+      var primary = (await query(
+        "SELECT collection_slug FROM collection_members WHERE product_id = ?1 " +
+        "ORDER BY position ASC, id ASC LIMIT 1",
+        [productId],
+      )).rows[0];
+      if (!primary) return [];
+      var siblingRows = (await query(
+        "SELECT cm.product_id AS pid FROM collection_members cm " +
+        "JOIN products p ON p.id = cm.product_id " +
+        "WHERE cm.collection_slug = ?1 AND cm.product_id != ?2 AND p.status = 'active' " +
+        "ORDER BY cm.position ASC, cm.product_id ASC LIMIT ?3",
+        [primary.collection_slug, productId, limit],
+      )).rows;
+      var out = [];
+      for (var i = 0; i < siblingRows.length; i += 1) {
+        var pid = siblingRows[i].pid;
+        var prod = await deps.catalog.products.get(pid);
+        if (!prod || prod.status !== "active") continue;
+        var priceMinor = null;
+        var priceCurrency = "USD";
+        var variants = await deps.catalog.variants.listForProduct(pid);
+        if (variants.length) {
+          var pr = await deps.catalog.prices.current(variants[0].id, "USD");
+          if (pr) { priceMinor = pr.amount_minor; priceCurrency = pr.currency; }
+        }
+        var media = await deps.catalog.media.listForProduct(pid);
+        var hero = media.length ? media[0] : null;
+        out.push({
+          slug:          prod.slug,
+          title:         prod.title,
+          hero_r2_key:   hero ? hero.r2_key : null,
+          hero_alt_text: hero ? (hero.alt_text || prod.title) : null,
+          price_minor:   priceMinor,
+          price_currency: priceCurrency,
+        });
+      }
+      return out;
+    } catch (_e) {
+      return [];
+    }
+  }
+
   // Resolve the cart for this request — read session_id from the
   // sealed cookie, create one (and the cart) if absent. Returns
   // the cart row OR null when the cart was just created (caller can
@@ -6660,6 +6763,10 @@ function mount(router, deps) {
     var qtyBreaks = firstVariant && firstPrice
       ? await _resolveQtyBreaks(firstVariant.sku, firstPrice.amount_minor, firstPrice.currency, ccyFmt)
       : [];
+    // "You may also like" — same-collection picks (deterministic order,
+    // mirrored at the edge). Best-effort inside the helper; an empty list
+    // hides the rail.
+    var related = await _relatedProductsFor(product.id, 4);
     var html = renderProduct(Object.assign({
       product:        product,
       variants:       variants,
@@ -6674,6 +6781,7 @@ function mount(router, deps) {
       bundle_offers:  bundleOffers,
       qty_breaks:     qtyBreaks,
       wishlist_count: wishlistCount,
+      related:        related,
       shop_name:      shopName,
       cart_count:     cartCount,
       theme:          theme,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blamejs/blamejs-shop",
-  "version": "0.2.20",
+  "version": "0.2.21",
   "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": {