From 01746f836f3d5cd32738d8f732e6091c72d43fd1 Mon Sep 17 00:00:00 2001
From: David Nuescheler <david@nuescheler.ch>
Date: Fri, 13 Feb 2026 13:58:47 -0700
Subject: [PATCH 1/9] chore: initial compare products code WIP

---
 widgets/compare-products/compare-products.css | 208 +++++++
 .../compare-products/compare-products.html    |   7 +
 widgets/compare-products/compare-products.js  | 512 ++++++++++++++++++
 3 files changed, 727 insertions(+)
 create mode 100644 widgets/compare-products/compare-products.css
 create mode 100644 widgets/compare-products/compare-products.html
 create mode 100644 widgets/compare-products/compare-products.js

diff --git a/widgets/compare-products/compare-products.css b/widgets/compare-products/compare-products.css
new file mode 100644
index 00000000..792abc31
--- /dev/null
+++ b/widgets/compare-products/compare-products.css
@@ -0,0 +1,208 @@
+/* Compare Products Widget */
+.compare-products {
+  max-width: var(--site-width);
+  margin: 0 auto;
+  padding: var(--spacing-400) var(--spacing-600);
+}
+
+.compare-products-empty {
+  margin: var(--spacing-200) 0;
+  color: var(--color-gray-700);
+  font-size: var(--body-size-m);
+}
+
+/* Product cards row */
+.compare-products-products {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: var(--spacing-400);
+  border-bottom: var(--border-m) solid var(--color-gray-300);
+  padding-bottom: var(--spacing-400);
+  margin-bottom: var(--spacing-300);
+}
+
+.compare-products-product {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--spacing-200);
+}
+
+.compare-products-product-remove {
+  position: absolute;
+  top: var(--spacing-80);
+  right: var(--spacing-80);
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 50%;
+  padding: 0;
+  background-color: var(--color-gray-200);
+  color: var(--color-charcoal);
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color 0.2s, color 0.2s;
+}
+
+.compare-products-product-remove:hover {
+  background-color: var(--color-gray-300);
+  color: var(--color-gray-800);
+}
+
+.compare-products-product-image-wrap {
+  width: 100%;
+  max-width: 280px;
+  margin-bottom: var(--spacing-200);
+  aspect-ratio: 1;
+}
+
+.compare-products-product-image-wrap img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.compare-products-product-colors {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--spacing-60);
+  margin-bottom: var(--spacing-200);
+}
+
+.compare-products-product-color {
+  width: 24px;
+  height: 24px;
+  border: var(--border-s) solid var(--color-gray-400);
+  border-radius: 50%;
+  padding: 0;
+  cursor: pointer;
+  transition: transform 0.15s, box-shadow 0.15s;
+}
+
+.compare-products-product-color:hover {
+  transform: scale(1.1);
+}
+
+.compare-products-product-color.selected {
+  border-width: 2px;
+  border-color: var(--color-charcoal);
+  box-shadow: 0 0 0 2px var(--color-background);
+}
+
+.compare-products-product-name {
+  margin: 0 0 var(--spacing-100);
+  color: var(--color-charcoal);
+  font-family: var(--heading-font-family);
+  font-size: var(--font-size-300);
+  font-weight: var(--weight-regular);
+  text-align: center;
+}
+
+.compare-products-product-price {
+  margin-bottom: var(--spacing-100);
+  text-align: center;
+  font-size: var(--body-size-m);
+}
+
+.compare-products-product-price-now {
+  font-weight: var(--weight-medium);
+  color: var(--color-charcoal);
+}
+
+.compare-products-product-price-save {
+  display: block;
+  font-size: var(--body-size-s);
+  color: var(--color-gray-700);
+}
+
+.compare-products-product-cta {
+  display: inline-block;
+  margin-top: var(--spacing-80);
+  padding: var(--spacing-100) var(--spacing-300);
+  background-color: var(--color-red);
+  color: var(--color-white);
+  font-size: var(--body-size-m);
+  font-weight: var(--weight-medium);
+  text-align: center;
+  text-decoration: none;
+  border: none;
+  border-radius: var(--rounding-s);
+  cursor: pointer;
+  transition: background-color 0.2s, opacity 0.2s;
+}
+
+.compare-products-product-cta:hover {
+  background-color: var(--color-red-dark, #b71c1c);
+  color: var(--color-white);
+}
+
+/* Features section */
+.compare-products-features {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--spacing-300);
+  align-items: start;
+}
+
+.compare-products-features-label {
+  padding-top: var(--spacing-100);
+  color: var(--color-charcoal);
+  font-family: var(--heading-font-family);
+  font-size: var(--body-size-m);
+  font-weight: var(--weight-medium);
+}
+
+.compare-products-features-table {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.compare-products-features-row {
+  display: grid;
+  grid-template-columns: subgrid;
+  align-items: stretch;
+}
+
+.compare-products-products[data-columns] {
+  grid-template-columns: repeat(var(--compare-cols, 2), 1fr);
+}
+
+.compare-products-features-table {
+  grid-column: 2;
+  display: grid;
+  grid-template-columns: minmax(120px, auto) repeat(var(--compare-cols, 2), minmax(0, 1fr));
+  gap: 0;
+}
+
+.compare-products-features-row {
+  display: contents;
+}
+
+.compare-products-features-cell {
+  padding: var(--spacing-100) var(--spacing-200);
+  border-bottom: var(--border-s) solid var(--color-gray-200);
+  font-size: var(--body-size-s);
+  color: var(--color-charcoal);
+}
+
+.compare-products-features-cell.feature-name {
+  font-weight: var(--weight-medium);
+  color: var(--color-gray-700);
+}
+
+@media (width >= 600px) {
+  .compare-products-products {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (width >= 900px) {
+  .compare-products-products {
+    grid-template-columns: repeat(var(--compare-cols, 2), 1fr);
+  }
+}
diff --git a/widgets/compare-products/compare-products.html b/widgets/compare-products/compare-products.html
new file mode 100644
index 00000000..a60311db
--- /dev/null
+++ b/widgets/compare-products/compare-products.html
@@ -0,0 +1,7 @@
+<div class="compare-products">
+  <div class="compare-products-products" role="grid"></div>
+  <div class="compare-products-features">
+    <div class="compare-products-features-label">Features</div>
+    <div class="compare-products-features-table" role="table"></div>
+  </div>
+</div>
diff --git a/widgets/compare-products/compare-products.js b/widgets/compare-products/compare-products.js
new file mode 100644
index 00000000..4cda5f57
--- /dev/null
+++ b/widgets/compare-products/compare-products.js
@@ -0,0 +1,512 @@
+import { loadCSS } from '../../scripts/aem.js';
+
+const FEATURE_KEYS = [
+  'Series',
+  'Container Capacity',
+  'Programs',
+  'Touch Screen',
+  'Timer',
+  'Pulse',
+  'Self-Detect Technology',
+  'Dishwasher Safe',
+  'Dimensions',
+  'HP',
+  'Warranty',
+];
+
+/** Map page spec labels to our feature keys */
+const SPEC_LABEL_MAP = {
+  Series: 'Series',
+  Capacity: 'Container Capacity',
+  Dimensions: 'Dimensions',
+  HP: 'HP',
+  'Dishwasher Safe': 'Dishwasher Safe',
+  Warranty: 'Warranty',
+};
+
+/**
+ * Resolve product comparison paths from window.location query
+ * (e.g. ?productComparison=/path1,/path2).
+ * @returns {string[]} Array of product paths (e.g. /us/en_us/products/ascent-x2)
+ */
+function getProductComparisonPaths() {
+  const params = new URLSearchParams(window.location.search);
+  const raw = params.get('productComparison');
+  if (!raw || typeof raw !== 'string') return [];
+  return raw
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean)
+    .map((s) => {
+      try {
+        const url = new URL(s, window.location.origin);
+        return url.pathname;
+      } catch {
+        return s;
+      }
+    });
+}
+
+const AEM_NETWORK_ORIGIN = 'https://main--vitamix--aemsites.aem.network';
+
+/**
+ * Whether to use fcors proxy (localhost, .aem.page, .aem.live).
+ * @returns {boolean}
+ */
+function useFcors() {
+  const { hostname } = window.location;
+  return hostname === 'localhost'
+    || hostname.endsWith('.aem.page')
+    || hostname.endsWith('.aem.live');
+}
+
+/**
+ * Fetch product page HTML (no .json). Uses fcors from aem.network on
+ * localhost / .aem.page / .aem.live.
+ * @param {string} path - Product path (e.g. /us/en_us/products/ascent-x2)
+ * @returns {Promise<string|null>} HTML string or null
+ */
+async function fetchProductPage(path) {
+  const pathOnly = path.startsWith('http') ? new URL(path).pathname : path;
+  const fullUrl = path.startsWith('http') ? path : `${AEM_NETWORK_ORIGIN}${pathOnly}`;
+
+  let resp;
+  if (useFcors()) {
+    const corsProxy = 'https://fcors.org/?url=';
+    const corsKey = '&key=Mg23N96GgR8O3NjU';
+    const proxyUrl = `${corsProxy}${encodeURIComponent(fullUrl)}${corsKey}`;
+    resp = await fetch(proxyUrl);
+  } else {
+    const url = path.startsWith('http') ? path : new URL(path, window.location.origin).href;
+    resp = await fetch(url);
+  }
+  if (!resp.ok) return null;
+  return resp.text();
+}
+
+/**
+ * Parse Product Specifications from main content (h3#product-specifications + ul > li).
+ * @param {Document} doc - Parsed document
+ * @returns {Object.<string, string>} Map of spec label -> value
+ */
+function parseSpecsFromPage(doc) {
+  const specs = {};
+  const heading = doc.querySelector('h3#product-specifications, [id="product-specifications"]');
+  if (!heading) return specs;
+  const list = heading.closest('div')?.querySelector('ul');
+  if (!list) return specs;
+  list.querySelectorAll(':scope > li').forEach((li) => {
+    const strong = li.querySelector('strong');
+    const label = strong?.textContent?.replace(/:$/, '').trim();
+    if (!label) return;
+    let value = '';
+    const next = strong?.nextSibling;
+    if (next?.nodeType === Node.TEXT_NODE) {
+      value = next.textContent.trim();
+    }
+    const nextP = li.querySelector('p');
+    if (nextP && (value === '' || value.length < 3)) {
+      value = nextP.textContent.trim();
+    }
+    if (value === '' && strong?.nextElementSibling) {
+      value = strong.nextElementSibling.textContent.trim();
+    }
+    if (label && value) specs[label] = value;
+  });
+  return specs;
+}
+
+/**
+ * Parse warranty text from a section heading (e.g. "10-Year Full Warranty").
+ * @param {Document} doc - Parsed document
+ * @returns {string} Warranty text or ''
+ */
+function parseWarrantyFromPage(doc) {
+  const headings = [...doc.querySelectorAll('main h3')];
+  const h = headings.find((el) => /warranty/i.test(el.textContent || ''));
+  if (!h) return '';
+  const strong = h.querySelector('strong');
+  return (strong?.textContent || h.textContent || '').trim();
+}
+
+/**
+ * Parse variant sections (main .section[data-sku][data-color]) for first image per variant.
+ * @param {Document} doc - Parsed document
+ * @param {string} baseUrl - Base URL for resolving relative image src
+ * @returns {Array<{sku:string, color:string, imageUrl:string}>}
+ */
+function parseVariantSectionsFromPage(doc, baseUrl) {
+  const variants = [];
+  doc.querySelectorAll('main .section[data-sku][data-color]').forEach((section) => {
+    const { sku, color } = section.dataset;
+    const img = section.querySelector('picture img, img');
+    let imageUrl = img?.getAttribute('src') || '';
+    if (imageUrl && !imageUrl.startsWith('http') && baseUrl) {
+      try {
+        imageUrl = new URL(imageUrl, baseUrl).href;
+      } catch {
+        // keep relative
+      }
+    }
+    variants.push({ sku, color, imageUrl });
+  });
+  return variants;
+}
+
+/**
+ * Build product object from fetched HTML (JSON-LD + parsed specs and variants).
+ * @param {string} html - Full page HTML
+ * @param {string} path - Product path
+ * @returns {Object|null} Normalized product object or null
+ */
+function parseProductFromPage(html, path) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, 'text/html');
+  const canonical = doc.querySelector('link[rel="canonical"]')?.href;
+  const baseUrl = canonical || new URL(path, window.location.origin).href;
+
+  const jsonLdScript = doc.querySelector('script[type="application/ld+json"]');
+  if (!jsonLdScript?.textContent) return null;
+  let ld;
+  try {
+    ld = JSON.parse(jsonLdScript.textContent);
+  } catch {
+    return null;
+  }
+  if (ld['@type'] !== 'Product' || !ld.name) return null;
+
+  const offers = ld.offers || [];
+  const firstOffer = offers[0];
+  const listPrice = firstOffer?.priceSpecification?.price;
+  const finalPrice = firstOffer?.price ?? listPrice;
+  const price = {
+    currency: firstOffer?.priceCurrency || 'USD',
+    regular: listPrice != null ? String(listPrice) : String(finalPrice),
+    final: String(finalPrice ?? '0'),
+  };
+
+  const pageSpecs = parseSpecsFromPage(doc);
+  const warrantyHeading = parseWarrantyFromPage(doc);
+  if (warrantyHeading) pageSpecs.Warranty = warrantyHeading;
+
+  const variantSections = parseVariantSectionsFromPage(doc, baseUrl);
+
+  const variants = offers.map((offer) => {
+    const sectionMatch = variantSections.find((v) => v.sku === offer.sku);
+    const imageUrl = sectionMatch?.imageUrl || (Array.isArray(offer.image) ? offer.image[0] : '') || ld.image?.[0] || '';
+    const colorOpt = offer.options?.find((o) => o.id === 'color');
+    return {
+      sku: offer.sku,
+      name: offer.name,
+      options: offer.options || [],
+      images: imageUrl ? [{ url: imageUrl }] : (offer.image || []).map((u) => ({ url: u })),
+      price: {
+        currency: offer.priceCurrency || 'USD',
+        regular: String(offer.priceSpecification?.price ?? offer.price ?? price.regular),
+        final: String(offer.price ?? price.final),
+      },
+      color: colorOpt?.value,
+    };
+  });
+
+  const colorValues = variants
+    .filter((v) => v.color)
+    .map((v) => ({ value: v.color, uid: v.options?.find((o) => o.id === 'color')?.uid || '' }));
+  let options;
+  if (colorValues.length) {
+    options = [{
+      id: 'color', label: 'Color', position: 1, values: colorValues,
+    }];
+  } else if (ld.custom?.options) {
+    options = [{ id: 'color', label: 'Color', values: colorValues }];
+  } else {
+    options = [];
+  }
+
+  const images = Array.isArray(ld.image) ? ld.image.map((u) => ({ url: u })) : [];
+
+  return {
+    name: ld.name,
+    path,
+    url: ld.url || baseUrl,
+    images,
+    price,
+    variants,
+    options,
+    custom: ld.custom || {},
+    specs: pageSpecs,
+  };
+}
+
+/**
+ * Fetch product by loading the live page (no .json) and parsing HTML.
+ * @param {string} path - Product path
+ * @returns {Promise<Object|null>} Normalized product object or null
+ */
+async function fetchProduct(path) {
+  const html = await fetchProductPage(path);
+  if (!html) return null;
+  return parseProductFromPage(html, path);
+}
+
+/**
+ * Get feature value for a product (page specs, then custom fallbacks).
+ * @param {Object} product - Normalized product (has .specs from page)
+ * @param {string} key - Feature label (e.g. 'Series', 'Warranty')
+ * @returns {string} Display value
+ */
+function getFeatureValue(product, key) {
+  const specs = product?.specs || {};
+  const custom = product?.custom || {};
+
+  const mapKey = SPEC_LABEL_MAP[key] || key;
+  const direct = specs[key] ?? specs[mapKey];
+  if (direct) return direct;
+
+  if (key === 'Container Capacity' && specs.Capacity) return specs.Capacity;
+  if (key === 'Series') return custom.series || custom.collection || '—';
+  if (key === 'Warranty') {
+    if (specs.Warranty) return specs.Warranty;
+    const opts = custom.options;
+    if (Array.isArray(opts) && opts.length > 0) {
+      const name = opts[0].name || '';
+      const match = name.match(/(\d+)\s*yr|(\d+)\s*year/i);
+      if (match) return `${match[1] || match[2]} Years`;
+      return name;
+    }
+    return '—';
+  }
+  return '—';
+}
+
+/**
+ * Format price for display.
+ * @param {Object} price - { currency, regular, final }
+ * @returns {{ now: string, save: string|null }}
+ */
+function formatPrice(price) {
+  if (!price || price.final == null) return { now: '', save: null };
+  const now = `$${parseFloat(price.final).toFixed(2)}`;
+  const regular = parseFloat(price.regular);
+  const finalVal = parseFloat(price.final);
+  const save = regular > finalVal
+    ? `Save $${(regular - finalVal).toFixed(2)} | Was $${regular.toFixed(2)}`
+    : null;
+  return { now, save };
+}
+
+/**
+ * Resolve image URL for display (variant or product level).
+ * @param {Object} product - Product JSON
+ * @param {number} variantIndex - Selected variant index
+ * @returns {string} Image URL
+ */
+function getProductImageUrl(product, variantIndex = 0) {
+  const variants = product?.variants;
+  if (Array.isArray(variants) && variants[variantIndex]?.images?.length > 0) {
+    const [{ url }] = variants[variantIndex].images;
+    return url.startsWith('http') || url.startsWith('/') ? url : new URL(url, window.location.origin).pathname;
+  }
+  const images = product?.images;
+  if (Array.isArray(images) && images.length > 0) {
+    const [{ url }] = images;
+    return url.startsWith('http') || url.startsWith('/') ? url : new URL(url, window.location.origin).pathname;
+  }
+  return '';
+}
+
+/**
+ * Simple color name to hex for swatches (optional).
+ * @param {string} name - Color name
+ * @returns {string} CSS color
+ */
+function getColorHex(name) {
+  const map = {
+    black: '#1a1a1a',
+    'shadow black': '#1a1a1a',
+    white: '#f5f5f5',
+    'polar white': '#f5f5f5',
+    gray: '#6b6b6b',
+    'nano gray': '#6b6b6b',
+    grey: '#6b6b6b',
+    blue: '#2c5282',
+    'midnight blue': '#1e3a5f',
+  };
+  const key = (name || '').toLowerCase().trim();
+  return map[key] || 'var(--color-gray-300)';
+}
+
+/**
+ * Build one product card DOM node.
+ * @param {Object} product - Product JSON
+ * @param {number} index - Index in products array (for remove)
+ * @param {Function} onRemove - Callback when remove is clicked
+ * @returns {HTMLElement}
+ */
+function buildProductCard(product, index, onRemove) {
+  const col = document.createElement('div');
+  col.className = 'compare-products-product';
+  col.dataset.index = String(index);
+
+  const removeBtn = document.createElement('button');
+  removeBtn.type = 'button';
+  removeBtn.className = 'compare-products-product-remove';
+  removeBtn.setAttribute('aria-label', `Remove ${product.name} from comparison`);
+  removeBtn.textContent = '×';
+  removeBtn.addEventListener('click', () => onRemove(index));
+
+  const imgWrap = document.createElement('div');
+  imgWrap.className = 'compare-products-product-image-wrap';
+  const img = document.createElement('img');
+  img.src = getProductImageUrl(product, 0);
+  img.alt = '';
+  img.loading = 'lazy';
+  imgWrap.appendChild(img);
+
+  const colorsWrap = document.createElement('div');
+  colorsWrap.className = 'compare-products-product-colors';
+  const options = product?.options?.find((o) => o.id === 'color');
+  const variants = product?.variants || [];
+  if (options?.values?.length) {
+    options.values.forEach((opt, i) => {
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = `compare-products-product-color ${i === 0 ? 'selected' : ''}`;
+      btn.setAttribute('aria-label', opt.value);
+      btn.title = opt.value;
+      btn.style.backgroundColor = getColorHex(opt.value);
+      btn.dataset.variantIndex = String(i);
+      btn.addEventListener('click', () => {
+        colorsWrap.querySelectorAll('.compare-products-product-color').forEach((c) => c.classList.remove('selected'));
+        btn.classList.add('selected');
+        const idx = parseInt(btn.dataset.variantIndex, 10);
+        img.src = getProductImageUrl(product, idx);
+      });
+      colorsWrap.appendChild(btn);
+    });
+  }
+
+  const nameEl = document.createElement('h3');
+  nameEl.className = 'compare-products-product-name';
+  nameEl.textContent = product.name || '';
+
+  const priceEl = document.createElement('div');
+  priceEl.className = 'compare-products-product-price';
+  const price = product?.price || variants[0]?.price;
+  const { now, save } = formatPrice(price);
+  priceEl.innerHTML = `<span class="compare-products-product-price-now">Now ${now}</span>`;
+  if (save) {
+    const saveEl = document.createElement('span');
+    saveEl.className = 'compare-products-product-price-save';
+    saveEl.textContent = save;
+    priceEl.appendChild(saveEl);
+  }
+
+  const cta = document.createElement('a');
+  cta.className = 'compare-products-product-cta';
+  const { path: productPath, url: productUrl } = product || {};
+  cta.href = productPath || productUrl || '#';
+  cta.textContent = 'VIEW DETAILS';
+
+  col.append(removeBtn, imgWrap, colorsWrap, nameEl, priceEl, cta);
+  return col;
+}
+
+/**
+ * Build features table body (feature rows with one cell per product).
+ * @param {Object[]} products - Array of product JSON
+ * @param {HTMLElement} tableEl - Table container
+ * @param {number} columnCount - Number of product columns
+ */
+function buildFeaturesTable(products, tableEl, columnCount) {
+  tableEl.style.setProperty('--compare-cols', String(columnCount));
+  tableEl.innerHTML = '';
+
+  FEATURE_KEYS.forEach((key) => {
+    const row = document.createElement('div');
+    row.className = 'compare-products-features-row';
+    const nameCell = document.createElement('div');
+    nameCell.className = 'compare-products-features-cell feature-name';
+    nameCell.textContent = key;
+    row.appendChild(nameCell);
+    products.forEach((product) => {
+      const cell = document.createElement('div');
+      cell.className = 'compare-products-features-cell';
+      cell.textContent = getFeatureValue(product, key);
+      row.appendChild(cell);
+    });
+    tableEl.appendChild(row);
+  });
+}
+
+/**
+ * Render the full compare view: product cards + features table.
+ * @param {HTMLElement} widget - Widget root
+ * @param {Object[]} products - Array of product JSON
+ */
+function render(widget, products) {
+  const productsContainer = widget.querySelector('.compare-products-products');
+  const featuresTable = widget.querySelector('.compare-products-features-table');
+  if (!productsContainer || !featuresTable) return;
+
+  productsContainer.style.setProperty('--compare-cols', String(products.length));
+  productsContainer.innerHTML = '';
+
+  const removeProduct = (index) => {
+    const next = products.filter((_, i) => i !== index);
+    if (next.length === 0) {
+      widget.dispatchEvent(new CustomEvent('compare-products-empty'));
+      return;
+    }
+    render(widget, next);
+  };
+
+  products.forEach((product, index) => {
+    const card = buildProductCard(product, index, removeProduct);
+    productsContainer.appendChild(card);
+  });
+
+  buildFeaturesTable(products, featuresTable, products.length);
+}
+
+/**
+ * Initialize compare-products widget: read config, fetch products, render.
+ * @param {HTMLElement} widget - Widget root
+ */
+export default async function decorate(widget) {
+  const paths = getProductComparisonPaths();
+  if (paths.length === 0) {
+    widget.querySelector('.compare-products-products')?.appendChild(
+      Object.assign(document.createElement('p'), {
+        textContent: 'Add product paths to compare (productComparison).',
+        className: 'compare-products-empty',
+      }),
+    );
+    return;
+  }
+
+  const products = await Promise.all(paths.map(fetchProduct));
+  const valid = products.filter(Boolean);
+  if (valid.length === 0) {
+    widget.querySelector('.compare-products-products')?.appendChild(
+      Object.assign(document.createElement('p'), {
+        textContent: 'Could not load product data.',
+        className: 'compare-products-empty',
+      }),
+    );
+    return;
+  }
+
+  render(widget, valid);
+}
+
+// Load CSS
+const start = () => {
+  loadCSS('/widgets/compare-products/compare-products.css');
+};
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', start);
+} else {
+  start();
+}

From 6521646812ac4604f18b6f90be7e4b6432b9c055 Mon Sep 17 00:00:00 2001
From: David Nuescheler <david@nuescheler.ch>
Date: Mon, 16 Feb 2026 16:56:44 -0700
Subject: [PATCH 2/9] chore: rev2

---
 widgets/compare-products/compare-products.css | 222 +++++++++------
 .../compare-products/compare-products.html    |   9 +-
 widgets/compare-products/compare-products.js  | 263 +++++++++++++-----
 3 files changed, 329 insertions(+), 165 deletions(-)

diff --git a/widgets/compare-products/compare-products.css b/widgets/compare-products/compare-products.css
index 792abc31..a5a15a90 100644
--- a/widgets/compare-products/compare-products.css
+++ b/widgets/compare-products/compare-products.css
@@ -1,20 +1,111 @@
-/* Compare Products Widget */
+/* Compare Products Widget – layout only; typography, buttons, colors inherit from site */
+/* Swatch colors aligned with blocks/pdp/color-swatches.css */
+.compare-products .compare-products-product-color {
+  /* blacks */
+  --color-black: #000;
+  --color-shadow-black: #000;
+  --color-1100001: #100;
+  --color-1100002: #100;
+  --color-black-stainless-metal-finish: #161616;
+
+  /* grays */
+  --color-onyx: #353935;
+  --color-abalone-grey: #3b363b;
+  --color-graphite: #414141;
+  --color-nano-gray: #5b6770;
+  --color-graphite-metal-finish: #606060;
+  --color-slate: #666;
+  --color-pearl-gray: #858583;
+  --color-black-diamond: #928b8b;
+  --color-brushed-stainless: #b0b3b7;
+  --color-grey: #e5e4e2;
+  --color-platinum: #e5e4e2;
+
+  /* whites */
+  --color-white: #fff;
+  --color-polar-white: #fff;
+
+  /* browns */
+  --color-espresso: #67564e;
+  --color-copper-metal-finish: #f2a57e;
+  --color-reflection: #f2a57e;
+  --color-brushed-stainless-metal-finish: #b5aa9d;
+  --color-brushed-gold: #ccba78;
+  --color-cream: #fffdd0;
+
+  /* reds */
+  --color-red: #c03;
+  --color-candy-apple: #c00310;
+  --color-candy-apple-red: #c00310;
+  --color-ruby: #e01160;
+
+  /* oranges */
+  --color-orange: #ffa600;
+  --color-cinnamon: #d2691e;
+
+  /* yellows */
+  --color-yellow: #f7f700;
+
+  /* greens */
+  --color-sour-apple-green: #e3edb5;
+  --color-turquoise: #30d5c7;
+
+  /* blues */
+  --color-cobalt: #0047ab;
+  --color-blue: #1131d4;
+  --color-matte-navy: #00263e;
+  --color-midnight-blue: #00263e;
+
+  /* purples */
+  --color-purple: #800080;
+
+  /* undefined */
+  --color-color-not-available: ;
+}
+
 .compare-products {
   max-width: var(--site-width);
   margin: 0 auto;
   padding: var(--spacing-400) var(--spacing-600);
+  overflow-x: auto;
+  position: relative;
+  -webkit-overflow-scrolling: touch;
+}
+
+.compare-products::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 48px;
+  background: linear-gradient(to right, transparent, var(--color-background));
+  pointer-events: none;
+  z-index: 1;
+}
+
+@media (width >= 900px) {
+  .compare-products::after {
+    display: none;
+  }
+}
+
+.compare-products-scroll {
+  min-width: 900px;
+  display: grid;
+  grid-template-columns: minmax(120px, auto) repeat(var(--compare-cols, 2), 1fr);
+  gap: 0;
 }
 
 .compare-products-empty {
   margin: var(--spacing-200) 0;
-  color: var(--color-gray-700);
-  font-size: var(--body-size-m);
 }
 
-/* Product cards row */
+/* Product cards row – start after feature-label column so cards align with table data columns */
 .compare-products-products {
+  grid-column: 2 / -1;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  grid-template-columns: repeat(var(--compare-cols, 2), 1fr);
   gap: var(--spacing-400);
   border-bottom: var(--border-m) solid var(--color-gray-300);
   padding-bottom: var(--spacing-400);
@@ -33,22 +124,6 @@
   position: absolute;
   top: var(--spacing-80);
   right: var(--spacing-80);
-  width: 32px;
-  height: 32px;
-  border: none;
-  border-radius: 50%;
-  padding: 0;
-  background-color: var(--color-gray-200);
-  color: var(--color-charcoal);
-  font-size: 1.25rem;
-  line-height: 1;
-  cursor: pointer;
-  transition: background-color 0.2s, color 0.2s;
-}
-
-.compare-products-product-remove:hover {
-  background-color: var(--color-gray-300);
-  color: var(--color-gray-800);
 }
 
 .compare-products-product-image-wrap {
@@ -95,114 +170,79 @@
 
 .compare-products-product-name {
   margin: 0 0 var(--spacing-100);
-  color: var(--color-charcoal);
-  font-family: var(--heading-font-family);
-  font-size: var(--font-size-300);
-  font-weight: var(--weight-regular);
   text-align: center;
 }
 
 .compare-products-product-price {
   margin-bottom: var(--spacing-100);
   text-align: center;
-  font-size: var(--body-size-m);
 }
 
 .compare-products-product-price-now {
-  font-weight: var(--weight-medium);
-  color: var(--color-charcoal);
-}
-
-.compare-products-product-price-save {
   display: block;
-  font-size: var(--body-size-s);
-  color: var(--color-gray-700);
 }
 
-.compare-products-product-cta {
-  display: inline-block;
-  margin-top: var(--spacing-80);
-  padding: var(--spacing-100) var(--spacing-300);
-  background-color: var(--color-red);
-  color: var(--color-white);
-  font-size: var(--body-size-m);
-  font-weight: var(--weight-medium);
-  text-align: center;
-  text-decoration: none;
-  border: none;
-  border-radius: var(--rounding-s);
-  cursor: pointer;
-  transition: background-color 0.2s, opacity 0.2s;
+.compare-products-product-placeholder {
+  justify-content: center;
+  min-height: 200px;
 }
 
-.compare-products-product-cta:hover {
-  background-color: var(--color-red-dark, #b71c1c);
-  color: var(--color-white);
+.compare-products-product-placeholder-msg {
+  margin: var(--spacing-200) 0;
+  text-align: center;
 }
 
 /* Features section */
 .compare-products-features {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: var(--spacing-300);
-  align-items: start;
-}
-
-.compare-products-features-label {
-  padding-top: var(--spacing-100);
-  color: var(--color-charcoal);
-  font-family: var(--heading-font-family);
-  font-size: var(--body-size-m);
-  font-weight: var(--weight-medium);
+  grid-column: 1 / -1;
 }
 
 .compare-products-features-table {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: minmax(120px, auto) repeat(var(--compare-cols, 2), minmax(0, 1fr));
+  gap: 0;
   min-width: 0;
 }
 
 .compare-products-features-row {
-  display: grid;
-  grid-template-columns: subgrid;
-  align-items: stretch;
+  display: contents;
 }
 
-.compare-products-products[data-columns] {
-  grid-template-columns: repeat(var(--compare-cols, 2), 1fr);
+.compare-products-features-cell {
+  padding: var(--spacing-100) var(--spacing-200);
+  border: var(--border-s) solid var(--color-gray-200);
+  border-top: 0;
+  border-left: 0;
 }
 
-.compare-products-features-table {
-  grid-column: 2;
-  display: grid;
-  grid-template-columns: minmax(120px, auto) repeat(var(--compare-cols, 2), minmax(0, 1fr));
-  gap: 0;
+.compare-products-features-row:first-of-type .compare-products-features-cell {
+  border-top: var(--border-s) solid var(--color-gray-200);
 }
 
-.compare-products-features-row {
-  display: contents;
+.compare-products-features-cell.row-even {
+  background-color: var(--color-background);
 }
 
-.compare-products-features-cell {
-  padding: var(--spacing-100) var(--spacing-200);
-  border-bottom: var(--border-s) solid var(--color-gray-200);
-  font-size: var(--body-size-s);
-  color: var(--color-charcoal);
+.compare-products-features-cell.row-odd {
+  background-color: var(--color-gray-200);
 }
 
 .compare-products-features-cell.feature-name {
+  border-left: var(--border-s) solid var(--color-gray-200);
   font-weight: var(--weight-medium);
-  color: var(--color-gray-700);
 }
 
-@media (width >= 600px) {
-  .compare-products-products {
-    grid-template-columns: repeat(2, 1fr);
-  }
+.compare-products-features-cell-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25em;
+  height: 1.25em;
+  border-radius: 50%;
+  background-color: var(--color-charcoal);
+  color: var(--color-white);
+  font-size: 0.75em;
+  line-height: 1;
+  font-weight: bold;
 }
 
-@media (width >= 900px) {
-  .compare-products-products {
-    grid-template-columns: repeat(var(--compare-cols, 2), 1fr);
-  }
-}
diff --git a/widgets/compare-products/compare-products.html b/widgets/compare-products/compare-products.html
index a60311db..3fea5ed1 100644
--- a/widgets/compare-products/compare-products.html
+++ b/widgets/compare-products/compare-products.html
@@ -1,7 +1,8 @@
 <div class="compare-products">
-  <div class="compare-products-products" role="grid"></div>
-  <div class="compare-products-features">
-    <div class="compare-products-features-label">Features</div>
-    <div class="compare-products-features-table" role="table"></div>
+  <div class="compare-products-scroll">
+    <div class="compare-products-products" role="grid"></div>
+    <div class="compare-products-features">
+      <div class="compare-products-features-table" role="table"></div>
+    </div>
   </div>
 </div>
diff --git a/widgets/compare-products/compare-products.js b/widgets/compare-products/compare-products.js
index 4cda5f57..3dd76c7c 100644
--- a/widgets/compare-products/compare-products.js
+++ b/widgets/compare-products/compare-products.js
@@ -1,29 +1,88 @@
-import { loadCSS } from '../../scripts/aem.js';
+import { loadCSS, toClassName } from '../../scripts/aem.js';
 
 const FEATURE_KEYS = [
   'Series',
-  'Container Capacity',
-  'Programs',
-  'Touch Screen',
-  'Timer',
+  'Blending Programs',
+  'Variable Speed Control',
+  'Touch Buttons',
   'Pulse',
+  'Digital Timer',
   'Self-Detect Technology',
-  'Dishwasher Safe',
-  'Dimensions',
-  'HP',
+  'Tamper Indicator',
+  'Plus 15 Second Button',
   'Warranty',
+  'Dimensions (L × W × H)',
 ];
 
-/** Map page spec labels to our feature keys */
+/** Map page spec labels to our feature keys (for product specs lookup) */
 const SPEC_LABEL_MAP = {
-  Series: 'Series',
-  Capacity: 'Container Capacity',
-  Dimensions: 'Dimensions',
-  HP: 'HP',
-  'Dishwasher Safe': 'Dishwasher Safe',
+  Dimensions: 'Dimensions (L × W × H)',
   Warranty: 'Warranty',
 };
 
+const FEATURES_BY_SERIES_PATH = '/us/en_us/products/config/features-by-series.json';
+
+/**
+ * Fetch features-by-series config (same-origin only; no fcors).
+ * @returns {Promise<Object|null>} Parsed JSON or null
+ */
+async function fetchFeaturesBySeries() {
+  const url = new URL(FEATURES_BY_SERIES_PATH, window.location.origin).href;
+  const resp = await fetch(url);
+  if (!resp.ok) return null;
+  try {
+    return await resp.json();
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Get series name from product (for features-by-series lookup).
+ * @param {Object} product - Product with .custom, .name
+ * @returns {string} Series name or ''
+ */
+function getProductSeries(product) {
+  if (!product) return '';
+  const c = product.custom || {};
+  return (c.series || c.collection || product.name || '').trim();
+}
+
+/**
+ * Normalize series name for matching: remove "Vitamix", trim, strip ®™.
+ * @param {string} s - Series or product name
+ * @returns {string} Normalized string for comparison
+ */
+function normalizeSeriesForMatch(s) {
+  if (!s || typeof s !== 'string') return '';
+  let t = s
+    .replace(/\s*®\s*|\s*™\s*/gi, ' ')
+    .replace(/\bVitamix\b/gi, '')
+    .replace(/\s+/g, ' ')
+    .trim();
+  return t;
+}
+
+/**
+ * Find features row for a series in features-by-series.data.
+ * @param {Object} featuresBySeries - { data: Array<{ Series: string, ... }> }
+ * @param {string} series - Series name from product
+ * @returns {Object|null} Row object or null
+ */
+function getSeriesFeaturesRow(featuresBySeries, series) {
+  if (!featuresBySeries?.data?.length || !series) return null;
+  const data = featuresBySeries.data;
+  const norm = normalizeSeriesForMatch(series);
+  if (!norm) return null;
+  const normLower = norm.toLowerCase();
+  const exact = data.find((row) => normalizeSeriesForMatch(row.Series).toLowerCase() === normLower);
+  if (exact) return exact;
+  return data.find((row) => {
+    const rowNorm = normalizeSeriesForMatch(row.Series).toLowerCase();
+    return rowNorm === normLower || rowNorm.includes(normLower) || normLower.includes(rowNorm);
+  }) || null;
+}
+
 /**
  * Resolve product comparison paths from window.location query
  * (e.g. ?productComparison=/path1,/path2).
@@ -64,7 +123,7 @@ function useFcors() {
  * Fetch product page HTML (no .json). Uses fcors from aem.network on
  * localhost / .aem.page / .aem.live.
  * @param {string} path - Product path (e.g. /us/en_us/products/ascent-x2)
- * @returns {Promise<string|null>} HTML string or null
+ * @returns {Promise<{ html: string|null, status: number }>}
  */
 async function fetchProductPage(path) {
   const pathOnly = path.startsWith('http') ? new URL(path).pathname : path;
@@ -80,8 +139,8 @@ async function fetchProductPage(path) {
     const url = path.startsWith('http') ? path : new URL(path, window.location.origin).href;
     resp = await fetch(url);
   }
-  if (!resp.ok) return null;
-  return resp.text();
+  if (!resp.ok) return { html: null, status: resp.status };
+  return { html: await resp.text(), status: resp.status };
 }
 
 /**
@@ -241,41 +300,63 @@ function parseProductFromPage(html, path) {
 /**
  * Fetch product by loading the live page (no .json) and parsing HTML.
  * @param {string} path - Product path
- * @returns {Promise<Object|null>} Normalized product object or null
+ * @returns {Promise<{ product: Object|null, errorStatus?: number }>}
  */
 async function fetchProduct(path) {
-  const html = await fetchProductPage(path);
-  if (!html) return null;
-  return parseProductFromPage(html, path);
+  const { html, status } = await fetchProductPage(path);
+  if (!html) return { product: null, errorStatus: status };
+  const product = parseProductFromPage(html, path);
+  return { product, errorStatus: product ? undefined : status };
 }
 
 /**
- * Get feature value for a product (page specs, then custom fallbacks).
+ * Get feature value for a product (page specs, then custom fallbacks, then features-by-series).
  * @param {Object} product - Normalized product (has .specs from page)
  * @param {string} key - Feature label (e.g. 'Series', 'Warranty')
+ * @param {Object} [featuresBySeries] - Optional { data } from features-by-series.json
  * @returns {string} Display value
  */
-function getFeatureValue(product, key) {
+function getFeatureValue(product, key, featuresBySeries) {
   const specs = product?.specs || {};
   const custom = product?.custom || {};
 
   const mapKey = SPEC_LABEL_MAP[key] || key;
   const direct = specs[key] ?? specs[mapKey];
+
+  if (key === 'Dimensions (L × W × H)') {
+    const seriesRow = getSeriesFeaturesRow(featuresBySeries, getProductSeries(product));
+    if (seriesRow) {
+      const sheetVal = seriesRow[key];
+      if (sheetVal != null && String(sheetVal).trim() !== '') return String(sheetVal).trim();
+    }
+    if (direct) return direct;
+    return '—';
+  }
+
+  if (key === 'Series') {
+    const seriesRow = getSeriesFeaturesRow(featuresBySeries, getProductSeries(product));
+    if (seriesRow?.Series) return String(seriesRow.Series).trim();
+    return custom.series || custom.collection || '—';
+  }
+
   if (direct) return direct;
 
-  if (key === 'Container Capacity' && specs.Capacity) return specs.Capacity;
-  if (key === 'Series') return custom.series || custom.collection || '—';
   if (key === 'Warranty') {
-    if (specs.Warranty) return specs.Warranty;
     const opts = custom.options;
     if (Array.isArray(opts) && opts.length > 0) {
       const name = opts[0].name || '';
       const match = name.match(/(\d+)\s*yr|(\d+)\s*year/i);
       if (match) return `${match[1] || match[2]} Years`;
-      return name;
+      if (name) return name;
     }
-    return '—';
   }
+
+  const seriesRow = getSeriesFeaturesRow(featuresBySeries, getProductSeries(product));
+  if (seriesRow) {
+    const sheetVal = seriesRow[key];
+    if (sheetVal != null && String(sheetVal).trim() !== '') return String(sheetVal).trim();
+  }
+
   return '—';
 }
 
@@ -316,24 +397,38 @@ function getProductImageUrl(product, variantIndex = 0) {
 }
 
 /**
- * Simple color name to hex for swatches (optional).
- * @param {string} name - Color name
- * @returns {string} CSS color
+ * Build a placeholder card when a product failed to load.
+ * @param {string} path - Product path (for link)
+ * @param {number} index - Index (for remove)
+ * @param {Function} onRemove - Callback when remove is clicked
+ * @param {number} [errorStatus] - HTTP status when failed (e.g. 404)
+ * @returns {HTMLElement}
  */
-function getColorHex(name) {
-  const map = {
-    black: '#1a1a1a',
-    'shadow black': '#1a1a1a',
-    white: '#f5f5f5',
-    'polar white': '#f5f5f5',
-    gray: '#6b6b6b',
-    'nano gray': '#6b6b6b',
-    grey: '#6b6b6b',
-    blue: '#2c5282',
-    'midnight blue': '#1e3a5f',
-  };
-  const key = (name || '').toLowerCase().trim();
-  return map[key] || 'var(--color-gray-300)';
+function buildPlaceholderCard(path, index, onRemove, errorStatus) {
+  const col = document.createElement('div');
+  col.className = 'compare-products-product compare-products-product-placeholder';
+  col.dataset.index = String(index);
+
+  const removeBtn = document.createElement('button');
+  removeBtn.type = 'button';
+  removeBtn.className = 'button button close compare-products-product-remove';
+  removeBtn.setAttribute('aria-label', 'Remove from comparison');
+  removeBtn.textContent = '×';
+  removeBtn.addEventListener('click', () => onRemove(index));
+
+  const msg = document.createElement('p');
+  msg.className = 'compare-products-product-placeholder-msg';
+  msg.textContent = errorStatus === 404
+    ? 'Product not found (404).'
+    : 'Could not load this product.';
+
+  const link = document.createElement('a');
+  link.href = path.startsWith('http') ? path : new URL(path, window.location.origin).href;
+  link.textContent = 'Try opening the product page';
+  link.className = 'button link';
+
+  col.append(removeBtn, msg, link);
+  return col;
 }
 
 /**
@@ -350,7 +445,7 @@ function buildProductCard(product, index, onRemove) {
 
   const removeBtn = document.createElement('button');
   removeBtn.type = 'button';
-  removeBtn.className = 'compare-products-product-remove';
+  removeBtn.className = 'button button close compare-products-product-remove';
   removeBtn.setAttribute('aria-label', `Remove ${product.name} from comparison`);
   removeBtn.textContent = '×';
   removeBtn.addEventListener('click', () => onRemove(index));
@@ -374,7 +469,10 @@ function buildProductCard(product, index, onRemove) {
       btn.className = `compare-products-product-color ${i === 0 ? 'selected' : ''}`;
       btn.setAttribute('aria-label', opt.value);
       btn.title = opt.value;
-      btn.style.backgroundColor = getColorHex(opt.value);
+      const colorSlug = toClassName(opt.value);
+      btn.style.backgroundColor = colorSlug
+        ? `var(--color-${colorSlug}, var(--color-gray-300))`
+        : 'var(--color-gray-300)';
       btn.dataset.variantIndex = String(i);
       btn.addEventListener('click', () => {
         colorsWrap.querySelectorAll('.compare-products-product-color').forEach((c) => c.classList.remove('selected'));
@@ -403,7 +501,7 @@ function buildProductCard(product, index, onRemove) {
   }
 
   const cta = document.createElement('a');
-  cta.className = 'compare-products-product-cta';
+  cta.className = 'button emphasis';
   const { path: productPath, url: productUrl } = product || {};
   cta.href = productPath || productUrl || '#';
   cta.textContent = 'VIEW DETAILS';
@@ -413,26 +511,38 @@ function buildProductCard(product, index, onRemove) {
 }
 
 /**
- * Build features table body (feature rows with one cell per product).
- * @param {Object[]} products - Array of product JSON
+ * Build features table body (feature rows with one cell per product/slot).
+ * @param {{ path: string, product: Object|null }[]} slots - One slot per requested path
  * @param {HTMLElement} tableEl - Table container
- * @param {number} columnCount - Number of product columns
+ * @param {Object} [featuresBySeries] - Optional { data } from features-by-series.json for fallbacks
  */
-function buildFeaturesTable(products, tableEl, columnCount) {
+function buildFeaturesTable(slots, tableEl, featuresBySeries) {
+  const columnCount = slots.length;
   tableEl.style.setProperty('--compare-cols', String(columnCount));
   tableEl.innerHTML = '';
 
-  FEATURE_KEYS.forEach((key) => {
+  FEATURE_KEYS.forEach((key, rowIndex) => {
     const row = document.createElement('div');
-    row.className = 'compare-products-features-row';
+    row.className = `compare-products-features-row ${rowIndex % 2 ? 'row-odd' : 'row-even'}`;
     const nameCell = document.createElement('div');
-    nameCell.className = 'compare-products-features-cell feature-name';
+    nameCell.className = `compare-products-features-cell feature-name ${rowIndex % 2 ? 'row-odd' : 'row-even'}`;
     nameCell.textContent = key;
     row.appendChild(nameCell);
-    products.forEach((product) => {
+    slots.forEach((slot) => {
       const cell = document.createElement('div');
-      cell.className = 'compare-products-features-cell';
-      cell.textContent = getFeatureValue(product, key);
+      cell.className = `compare-products-features-cell ${rowIndex % 2 ? 'row-odd' : 'row-even'}`;
+      const value = slot.product
+        ? getFeatureValue(slot.product, key, featuresBySeries)
+        : '—';
+      if (value === 'Yes') {
+        const check = document.createElement('span');
+        check.className = 'compare-products-features-cell-check';
+        check.setAttribute('aria-hidden', 'true');
+        check.textContent = '✓';
+        cell.appendChild(check);
+      } else {
+        cell.textContent = value;
+      }
       row.appendChild(cell);
     });
     tableEl.appendChild(row);
@@ -442,31 +552,34 @@ function buildFeaturesTable(products, tableEl, columnCount) {
 /**
  * Render the full compare view: product cards + features table.
  * @param {HTMLElement} widget - Widget root
- * @param {Object[]} products - Array of product JSON
+ * @param {{ path: string, product: Object|null }[]} slots - One slot per requested path
+ * @param {Object} [featuresBySeries] - Optional { data } from features-by-series.json for fallbacks
  */
-function render(widget, products) {
+function render(widget, slots, featuresBySeries) {
   const productsContainer = widget.querySelector('.compare-products-products');
   const featuresTable = widget.querySelector('.compare-products-features-table');
   if (!productsContainer || !featuresTable) return;
 
-  productsContainer.style.setProperty('--compare-cols', String(products.length));
+  widget.style.setProperty('--compare-cols', String(slots.length));
   productsContainer.innerHTML = '';
 
   const removeProduct = (index) => {
-    const next = products.filter((_, i) => i !== index);
+    const next = slots.filter((_, i) => i !== index);
     if (next.length === 0) {
       widget.dispatchEvent(new CustomEvent('compare-products-empty'));
       return;
     }
-    render(widget, next);
+    render(widget, next, featuresBySeries);
   };
 
-  products.forEach((product, index) => {
-    const card = buildProductCard(product, index, removeProduct);
+  slots.forEach((slot, index) => {
+    const card = slot.product
+      ? buildProductCard(slot.product, index, removeProduct)
+      : buildPlaceholderCard(slot.path, index, removeProduct, slot.errorStatus);
     productsContainer.appendChild(card);
   });
 
-  buildFeaturesTable(products, featuresTable, products.length);
+  buildFeaturesTable(slots, featuresTable, featuresBySeries);
 }
 
 /**
@@ -485,9 +598,19 @@ export default async function decorate(widget) {
     return;
   }
 
-  const products = await Promise.all(paths.map(fetchProduct));
-  const valid = products.filter(Boolean);
-  if (valid.length === 0) {
+  const [featuresBySeries, ...slotResults] = await Promise.all([
+    fetchFeaturesBySeries(),
+    ...paths.map((path) => fetchProduct(path)),
+  ]);
+
+  const slots = slotResults.map(({ product, errorStatus }, i) => ({
+    path: paths[i],
+    product,
+    errorStatus,
+  }));
+
+  const allFailed = slots.every((slot) => !slot.product);
+  if (allFailed) {
     widget.querySelector('.compare-products-products')?.appendChild(
       Object.assign(document.createElement('p'), {
         textContent: 'Could not load product data.',
@@ -497,7 +620,7 @@ export default async function decorate(widget) {
     return;
   }
 
-  render(widget, valid);
+  render(widget, slots, featuresBySeries || undefined);
 }
 
 // Load CSS

From a62d60b9108d5bb5636c8e909298f661953d65f3 Mon Sep 17 00:00:00 2001
From: David Nuescheler <david@nuescheler.ch>
Date: Mon, 16 Feb 2026 17:01:40 -0700
Subject: [PATCH 3/9] chore: lint

---
 widgets/compare-products/compare-products.css | 41 ++++++++++---------
 widgets/compare-products/compare-products.js  |  6 +--
 2 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/widgets/compare-products/compare-products.css b/widgets/compare-products/compare-products.css
index a5a15a90..5593135b 100644
--- a/widgets/compare-products/compare-products.css
+++ b/widgets/compare-products/compare-products.css
@@ -1,5 +1,26 @@
 /* Compare Products Widget – layout only; typography, buttons, colors inherit from site */
+
 /* Swatch colors aligned with blocks/pdp/color-swatches.css */
+.compare-products-product-color {
+  width: 24px;
+  height: 24px;
+  border: var(--border-s) solid var(--color-gray-400);
+  border-radius: 50%;
+  padding: 0;
+  cursor: pointer;
+  transition: transform 0.15s, box-shadow 0.15s;
+}
+
+.compare-products-product-color:hover {
+  transform: scale(1.1);
+}
+
+.compare-products-product-color.selected {
+  border-width: 2px;
+  border-color: var(--color-charcoal);
+  box-shadow: 0 0 0 2px var(--color-background);
+}
+
 .compare-products .compare-products-product-color {
   /* blacks */
   --color-black: #000;
@@ -148,26 +169,6 @@
   margin-bottom: var(--spacing-200);
 }
 
-.compare-products-product-color {
-  width: 24px;
-  height: 24px;
-  border: var(--border-s) solid var(--color-gray-400);
-  border-radius: 50%;
-  padding: 0;
-  cursor: pointer;
-  transition: transform 0.15s, box-shadow 0.15s;
-}
-
-.compare-products-product-color:hover {
-  transform: scale(1.1);
-}
-
-.compare-products-product-color.selected {
-  border-width: 2px;
-  border-color: var(--color-charcoal);
-  box-shadow: 0 0 0 2px var(--color-background);
-}
-
 .compare-products-product-name {
   margin: 0 0 var(--spacing-100);
   text-align: center;
diff --git a/widgets/compare-products/compare-products.js b/widgets/compare-products/compare-products.js
index 3dd76c7c..ed7b4e40 100644
--- a/widgets/compare-products/compare-products.js
+++ b/widgets/compare-products/compare-products.js
@@ -55,7 +55,7 @@ function getProductSeries(product) {
  */
 function normalizeSeriesForMatch(s) {
   if (!s || typeof s !== 'string') return '';
-  let t = s
+  const t = s
     .replace(/\s*®\s*|\s*™\s*/gi, ' ')
     .replace(/\bVitamix\b/gi, '')
     .replace(/\s+/g, ' ')
@@ -70,8 +70,8 @@ function normalizeSeriesForMatch(s) {
  * @returns {Object|null} Row object or null
  */
 function getSeriesFeaturesRow(featuresBySeries, series) {
-  if (!featuresBySeries?.data?.length || !series) return null;
-  const data = featuresBySeries.data;
+  const { data } = featuresBySeries || {};
+  if (!data?.length || !series) return null;
   const norm = normalizeSeriesForMatch(series);
   if (!norm) return null;
   const normLower = norm.toLowerCase();

From e60aeb026946b12f99bc0034c22bf183d2875b39 Mon Sep 17 00:00:00 2001
From: David Nuescheler <david@nuescheler.ch>
Date: Wed, 18 Feb 2026 11:43:27 -0700
Subject: [PATCH 4/9] chore: comparison table

---
 blocks/table/table.css | 81 ++++++++++++++++++++++++++++++++++++++++++
 blocks/table/table.js  | 61 +++++++++++++++++++++++++++++--
 scripts/scripts.js     |  1 +
 3 files changed, 140 insertions(+), 3 deletions(-)

diff --git a/blocks/table/table.css b/blocks/table/table.css
index de1df9a5..4cd4b142 100644
--- a/blocks/table/table.css
+++ b/blocks/table/table.css
@@ -33,3 +33,84 @@
 .table.striped tbody tr:nth-child(odd) {
   background-color: var(--color-gray-200);
 }
+
+/* Comparison variant: heading row + heading column, 2x first column width */
+.table.comparison .table-comparison-scroll {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.table.comparison .table-comparison-scroll table {
+  width: 100%;
+  min-width: 600px;
+  table-layout: fixed;
+  border-collapse: collapse;
+  border: 1px solid #e0e0e0;
+}
+
+.table.comparison .table-comparison-scroll th,
+.table.comparison .table-comparison-scroll td {
+  padding: 16px 12px;
+  border: 1px solid #e0e0e0;
+  vertical-align: top;
+}
+
+.table.comparison .table-comparison-scroll thead th {
+  background-color: #ececec;
+  font-weight: 700;
+  text-align: center;
+  color: #333;
+}
+
+.table.comparison .table-comparison-scroll tbody th {
+  background-color: #fff;
+  font-weight: 600;
+  text-align: left;
+  color: #333;
+  vertical-align: middle;
+}
+
+.table.comparison .table-comparison-scroll thead th:first-child {
+  text-align: left;
+  color: #6c757d;
+  font-weight: 600;
+}
+
+/* Heading column: small image left, text right, vertically centered */
+.table.comparison .table-comparison-scroll tbody th .table-comparison-cell-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.table.comparison .table-comparison-scroll tbody th .table-comparison-cell-content picture,
+.table.comparison .table-comparison-scroll tbody th .table-comparison-cell-content img {
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  margin: 0;
+}
+
+.table.comparison .table-comparison-scroll tbody th .table-comparison-cell-content img {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+}
+
+.table.comparison .table-comparison-scroll tbody th .table-comparison-cell-content a {
+  color: #06c;
+  text-decoration: none;
+  flex: 1;
+  min-width: 0;
+}
+
+.table.comparison .table-comparison-scroll tbody th .table-comparison-cell-content a:hover {
+  text-decoration: underline;
+}
+
+.table.comparison .table-comparison-scroll tbody td {
+  background-color: #fff;
+  text-align: center;
+  color: #333;
+}
diff --git a/blocks/table/table.js b/blocks/table/table.js
index afe00f81..02ad8c4e 100644
--- a/blocks/table/table.js
+++ b/blocks/table/table.js
@@ -20,18 +20,74 @@ function buildRowWithRowHeaders(row) {
   return tr;
 }
 
+function buildComparisonTable(rows) {
+  const table = document.createElement('table');
+  const colCount = rows[0]?.children?.length || 0;
+
+  // colgroup: first column 2x width of others (2/(n+1) vs 1/(n+1))
+  if (colCount > 0) {
+    const colgroup = document.createElement('colgroup');
+    const firstPct = (200 / (1 + colCount)).toFixed(2);
+    const otherPct = (100 / (1 + colCount)).toFixed(2);
+    const firstCol = document.createElement('col');
+    firstCol.style.width = `${firstPct}%`;
+    colgroup.appendChild(firstCol);
+    for (let i = 1; i < colCount; i += 1) {
+      const col = document.createElement('col');
+      col.style.width = `${otherPct}%`;
+      colgroup.appendChild(col);
+    }
+    table.appendChild(colgroup);
+  }
+
+  const thead = document.createElement('thead');
+  if (rows.length > 0) {
+    thead.appendChild(buildRow(rows[0], 'th'));
+  }
+
+  const tbody = document.createElement('tbody');
+  rows.slice(1).forEach((row) => {
+    const tr = document.createElement('tr');
+    [...row.children].forEach((col, index) => {
+      const cell = document.createElement(index === 0 ? 'th' : 'td');
+      if (index === 0) {
+        cell.setAttribute('scope', 'row');
+        const wrap = document.createElement('div');
+        wrap.className = 'table-comparison-cell-content';
+        wrap.innerHTML = col.innerHTML;
+        cell.appendChild(wrap);
+      } else {
+        cell.innerHTML = col.innerHTML;
+      }
+      tr.appendChild(cell);
+    });
+    tbody.appendChild(tr);
+  });
+
+  table.append(thead, tbody);
+  return table;
+}
+
 export default function decorate(block) {
   const table = document.createElement('table');
   const rows = [...block.children];
   const hasRowHeaders = block.classList.contains('row-headers');
+  const isComparison = block.classList.contains('comparison');
 
-  if (hasRowHeaders) {
+  if (isComparison) {
+    const comparisonTable = buildComparisonTable(rows);
+    const scrollWrapper = document.createElement('div');
+    scrollWrapper.className = 'table-comparison-scroll';
+    scrollWrapper.appendChild(comparisonTable);
+    block.replaceChildren(scrollWrapper);
+  } else if (hasRowHeaders) {
     // build table with row headers (first column is header)
     const tbody = document.createElement('tbody');
     rows.forEach((row) => {
       tbody.appendChild(buildRowWithRowHeaders(row));
     });
     table.appendChild(tbody);
+    block.replaceChildren(table);
   } else {
     // build table head
     const thead = document.createElement('thead');
@@ -46,7 +102,6 @@ export default function decorate(block) {
     });
 
     table.append(thead, tbody);
+    block.replaceChildren(table);
   }
-
-  block.replaceChildren(table);
 }
diff --git a/scripts/scripts.js b/scripts/scripts.js
index d121f91e..ab097c68 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -621,6 +621,7 @@ function decorateFullWidthBlocks(main) {
  */
 function decorateButtons(main) {
   main.querySelectorAll('p a[href]').forEach((a) => {
+    if (a.closest('[data-button-decoration="disabled"]')) return;
     a.title = a.title || a.textContent;
     const p = a.closest('p');
     const text = a.textContent.trim();

From 15905f56418616d85f777da97fed9e14a64f3876 Mon Sep 17 00:00:00 2001
From: David Nuescheler <david@nuescheler.ch>
Date: Fri, 20 Feb 2026 07:57:51 -0700
Subject: [PATCH 5/9] chore: refactor

---
 blocks/table/table.css                        |  54 ++-
 blocks/table/table.js                         |  91 +++-
 widgets/compare-products/compare-products.css |  11 +
 widgets/compare-products/compare-products.js  | 428 +++++++++++++++++-
 4 files changed, 552 insertions(+), 32 deletions(-)

diff --git a/blocks/table/table.css b/blocks/table/table.css
index 4cd4b142..1dcac7cf 100644
--- a/blocks/table/table.css
+++ b/blocks/table/table.css
@@ -77,35 +77,36 @@
   font-weight: 600;
 }
 
-/* Heading column: small image left, text right, vertically centered */
-.table.comparison .table-comparison-scroll tbody th .table-comparison-cell-content {
+/* Heading column: flex on <p>, image left, text right, vertically centered */
+.table.comparison .table-comparison-scroll tbody th .table-comparison-cell-content p {
   display: flex;
   align-items: center;
   gap: 12px;
+  margin: 0;
 }
 
-.table.comparison .table-comparison-scroll tbody th .table-comparison-cell-content picture,
-.table.comparison .table-comparison-scroll tbody th .table-comparison-cell-content img {
+.table.comparison .table-comparison-scroll tbody th .table-comparison-cell-content p picture,
+.table.comparison .table-comparison-scroll tbody th .table-comparison-cell-content p img {
   flex-shrink: 0;
   width: 48px;
   height: 48px;
   margin: 0;
 }
 
-.table.comparison .table-comparison-scroll tbody th .table-comparison-cell-content img {
+.table.comparison .table-comparison-scroll tbody th .table-comparison-cell-content p img {
   width: 48px;
   height: 48px;
   object-fit: contain;
 }
 
-.table.comparison .table-comparison-scroll tbody th .table-comparison-cell-content a {
+.table.comparison .table-comparison-scroll tbody th .table-comparison-cell-content p a {
   color: #06c;
   text-decoration: none;
   flex: 1;
   min-width: 0;
 }
 
-.table.comparison .table-comparison-scroll tbody th .table-comparison-cell-content a:hover {
+.table.comparison .table-comparison-scroll tbody th .table-comparison-cell-content p a:hover {
   text-decoration: underline;
 }
 
@@ -114,3 +115,42 @@
   text-align: center;
   color: #333;
 }
+
+.table.comparison .table-comparison-scroll thead tr.table-comparison-row-header-empty th,
+.table.comparison .table-comparison-scroll tbody tr.table-comparison-row-header-empty th,
+.table.comparison .table-comparison-scroll tbody tr.table-comparison-row-header-empty td {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+/* Comparison table: colors row – round swatches from pdp/color-swatches.css */
+.table.comparison .table-comparison-scroll .table-comparison-color-swatches {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.table.comparison .table-comparison-scroll .table-comparison-color-swatch {
+  width: 24px;
+  height: 24px;
+  border: 1px solid #333f48;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.table.comparison .table-comparison-scroll .table-comparison-color-inner {
+  width: 16px;
+  height: 16px;
+  border: 1px solid #333f48;
+  border-radius: 50%;
+}
+
+.table.comparison .table-comparison-scroll .table-comparison-color-text {
+  font-size: 0.9em;
+  color: #666;
+}
diff --git a/blocks/table/table.js b/blocks/table/table.js
index 02ad8c4e..74decde2 100644
--- a/blocks/table/table.js
+++ b/blocks/table/table.js
@@ -1,3 +1,40 @@
+import { toClassName } from '../../scripts/aem.js';
+
+const COLOR_SWATCHES_CSS_PATH = '/blocks/pdp/color-swatches.css';
+
+/**
+ * Fetch color-swatches.css, parse --color-* names and the rule body, inject a scoped
+ * <style> so .table.comparison .table-comparison-color-swatch gets the same variables,
+ * and return the set of color names for matching.
+ * @returns {Promise<Set<string>>}
+ */
+async function loadColorSwatchesForTable() {
+  const base = typeof window.hlx?.codeBasePath === 'string' ? window.hlx.codeBasePath : '';
+  const url = `${base}${COLOR_SWATCHES_CSS_PATH}`;
+  const res = await fetch(url);
+  if (!res.ok) return new Set();
+  const css = await res.text();
+
+  const names = new Set([...css.matchAll(/--color-([a-z0-9-]+):/g)].map((m) => m[1]));
+
+  const open = css.indexOf('{');
+  if (open === -1) return names;
+  let depth = 1;
+  let pos = open + 1;
+  while (depth && pos < css.length) {
+    if (css[pos] === '{') depth += 1;
+    else if (css[pos] === '}') depth -= 1;
+    pos += 1;
+  }
+  const body = css.slice(open + 1, pos - 1);
+
+  const style = document.createElement('style');
+  style.textContent = `.table.comparison .table-comparison-color-swatch { ${body} }`;
+  document.head.appendChild(style);
+
+  return names;
+}
+
 function buildRow(row, cellType = 'td') {
   const tr = document.createElement('tr');
   [...row.children].forEach((col) => {
@@ -42,12 +79,18 @@ function buildComparisonTable(rows) {
 
   const thead = document.createElement('thead');
   if (rows.length > 0) {
-    thead.appendChild(buildRow(rows[0], 'th'));
+    const headerRow = buildRow(rows[0], 'th');
+    const firstHeaderCell = headerRow.querySelector('th');
+    if (firstHeaderCell && !firstHeaderCell.querySelector('img') && !firstHeaderCell.textContent.trim()) {
+      headerRow.classList.add('table-comparison-row-header-empty');
+    }
+    thead.appendChild(headerRow);
   }
 
   const tbody = document.createElement('tbody');
   rows.slice(1).forEach((row) => {
     const tr = document.createElement('tr');
+    let rowHeaderEmpty = false;
     [...row.children].forEach((col, index) => {
       const cell = document.createElement(index === 0 ? 'th' : 'td');
       if (index === 0) {
@@ -56,11 +99,13 @@ function buildComparisonTable(rows) {
         wrap.className = 'table-comparison-cell-content';
         wrap.innerHTML = col.innerHTML;
         cell.appendChild(wrap);
+        rowHeaderEmpty = !wrap.querySelector('img') && !wrap.textContent.trim();
       } else {
         cell.innerHTML = col.innerHTML;
       }
       tr.appendChild(cell);
     });
+    if (rowHeaderEmpty) tr.classList.add('table-comparison-row-header-empty');
     tbody.appendChild(tr);
   });
 
@@ -68,6 +113,47 @@ function buildComparisonTable(rows) {
   return table;
 }
 
+function createColorSwatch(slug, label) {
+  const swatch = document.createElement('div');
+  swatch.className = 'table-comparison-color-swatch';
+  swatch.title = label || slug;
+  const inner = document.createElement('div');
+  inner.className = 'table-comparison-color-inner';
+  inner.style.backgroundColor = `var(--color-${slug})`;
+  swatch.appendChild(inner);
+  return swatch;
+}
+
+function replaceColorsRowWithSwatches(table, colorNames) {
+  if (!colorNames?.size) return;
+  const tbody = table.querySelector('tbody');
+  if (!tbody) return;
+  tbody.querySelectorAll('tr').forEach((tr) => {
+    tr.querySelectorAll('td').forEach((td) => {
+      const text = td.textContent.trim();
+      const tokens = text.split(',').map((t) => t.trim()).filter(Boolean);
+      if (tokens.length === 0) return;
+      const hasMatchingColor = tokens.some((t) => colorNames.has(toClassName(t)));
+      if (!hasMatchingColor) return;
+      const swatchContainer = document.createElement('div');
+      swatchContainer.className = 'table-comparison-color-swatches';
+      tokens.forEach((token) => {
+        const slug = toClassName(token);
+        if (colorNames.has(slug)) {
+          swatchContainer.appendChild(createColorSwatch(slug, token));
+        } else {
+          const span = document.createElement('span');
+          span.className = 'table-comparison-color-text';
+          span.textContent = token;
+          swatchContainer.appendChild(span);
+        }
+      });
+      td.textContent = '';
+      td.appendChild(swatchContainer);
+    });
+  });
+}
+
 export default function decorate(block) {
   const table = document.createElement('table');
   const rows = [...block.children];
@@ -76,6 +162,9 @@ export default function decorate(block) {
 
   if (isComparison) {
     const comparisonTable = buildComparisonTable(rows);
+    loadColorSwatchesForTable().then((colorNames) => {
+      replaceColorsRowWithSwatches(comparisonTable, colorNames);
+    });
     const scrollWrapper = document.createElement('div');
     scrollWrapper.className = 'table-comparison-scroll';
     scrollWrapper.appendChild(comparisonTable);
diff --git a/widgets/compare-products/compare-products.css b/widgets/compare-products/compare-products.css
index 5593135b..956df929 100644
--- a/widgets/compare-products/compare-products.css
+++ b/widgets/compare-products/compare-products.css
@@ -247,3 +247,14 @@
   font-weight: bold;
 }
 
+/* When compare-products param filtered columns: table reflows so visible columns share width */
+.widget-container.compare-products-columns-filtered .table.comparison .table-comparison-scroll table {
+  table-layout: auto;
+  width: 100%;
+}
+
+.widget-container.compare-products-columns-filtered .table.comparison .table-comparison-scroll th.compare-products-column-visible,
+.widget-container.compare-products-columns-filtered .table.comparison .table-comparison-scroll td.compare-products-column-visible {
+  min-width: 120px;
+}
+
diff --git a/widgets/compare-products/compare-products.js b/widgets/compare-products/compare-products.js
index ed7b4e40..f7154bd7 100644
--- a/widgets/compare-products/compare-products.js
+++ b/widgets/compare-products/compare-products.js
@@ -1,5 +1,17 @@
 import { loadCSS, toClassName } from '../../scripts/aem.js';
 
+const DEBUG = typeof window !== 'undefined' && (
+  new URLSearchParams(window.location.search).has('compare-products-debug')
+  || new URLSearchParams(window.location.search).has('compare-products')
+);
+
+function debug(...args) {
+  if (DEBUG) {
+    // eslint-disable-next-line no-console
+    console.log('[compare-products]', ...args);
+  }
+}
+
 const FEATURE_KEYS = [
   'Series',
   'Blending Programs',
@@ -20,14 +32,27 @@ const SPEC_LABEL_MAP = {
   Warranty: 'Warranty',
 };
 
-const FEATURES_BY_SERIES_PATH = '/us/en_us/products/config/features-by-series.json';
+const FEATURES_BY_SERIES_PATH_DEFAULT = '/us/en_us/products/config/features-by-series.json';
+
+/**
+ * Get features-by-series path for current locale (e.g. /ca/fr_ca/... -> /ca/fr_ca/products/config/...).
+ * @returns {string}
+ */
+function getFeaturesBySeriesPath() {
+  const match = window.location.pathname.match(/^(\/[^/]+\/[^/]+)\//);
+  if (match) {
+    return `${match[1]}/products/config/features-by-series.json`;
+  }
+  return FEATURES_BY_SERIES_PATH_DEFAULT;
+}
 
 /**
  * Fetch features-by-series config (same-origin only; no fcors).
  * @returns {Promise<Object|null>} Parsed JSON or null
  */
 async function fetchFeaturesBySeries() {
-  const url = new URL(FEATURES_BY_SERIES_PATH, window.location.origin).href;
+  const path = getFeaturesBySeriesPath();
+  const url = new URL(path, window.location.origin).href;
   const resp = await fetch(url);
   if (!resp.ok) return null;
   try {
@@ -49,7 +74,7 @@ function getProductSeries(product) {
 }
 
 /**
- * Normalize series name for matching: remove "Vitamix", trim, strip ®™.
+ * Normalize series name for matching: remove "Vitamix", trailing " Series", trim, strip ®™.
  * @param {string} s - Series or product name
  * @returns {string} Normalized string for comparison
  */
@@ -58,6 +83,8 @@ function normalizeSeriesForMatch(s) {
   const t = s
     .replace(/\s*®\s*|\s*™\s*/gi, ' ')
     .replace(/\bVitamix\b/gi, '')
+    .replace(/\s+series\s*$/gi, '')
+    .replace(/\s+série\s*$/gi, '')
     .replace(/\s+/g, ' ')
     .trim();
   return t;
@@ -106,6 +133,83 @@ function getProductComparisonPaths() {
     });
 }
 
+/**
+ * Product paths from ?compare-products= (comma-separated; each replaces that product's series column).
+ * @returns {string[]} Array of product paths (e.g. ['/us/en_us/products/ascent-x2', ...]); empty if not set
+ */
+function getCompareProductsParamPaths() {
+  const params = new URLSearchParams(window.location.search);
+  const raw = params.get('compare-products');
+  debug('getCompareProductsParamPaths: raw=', raw);
+  if (!raw || typeof raw !== 'string') return [];
+  let decoded = raw;
+  try {
+    decoded = decodeURIComponent(raw);
+  } catch {
+    // keep raw if invalid encoding
+  }
+  const paths = decoded
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean)
+    .map((s) => {
+      try {
+        if (s.startsWith('http')) return new URL(s).pathname;
+        const url = new URL(s, window.location.origin);
+        return url.pathname;
+      } catch {
+        return s.startsWith('/') ? s : `/${s}`;
+      }
+    });
+  debug('getCompareProductsParamPaths: parsed paths=', paths);
+  return paths;
+}
+
+/** True when ?compare-products= was set (single or multiple paths). */
+function getCompareProductsParam() {
+  return getCompareProductsParamPaths().length > 0;
+}
+
+/** Map row header text (EN/FR) to FEATURE_KEYS for table column replacement */
+const ROW_LABEL_TO_FEATURE = {
+  series: 'Series',
+  série: 'Series',
+  'blending programs': 'Blending Programs',
+  'programmes de fusion': 'Blending Programs',
+  'variable speed control': 'Variable Speed Control',
+  'commande de vitesse variable': 'Variable Speed Control',
+  'touch buttons': 'Touch Buttons',
+  'boutons tactiles': 'Touch Buttons',
+  pulse: 'Pulse',
+  impulsion: 'Pulse',
+  'digital timer': 'Digital Timer',
+  'minuteur numérique': 'Digital Timer',
+  'self-detect technology': 'Self-Detect Technology',
+  "technologie d'autodétection": 'Self-Detect Technology',
+  'tamper indicator': 'Tamper Indicator',
+  "indicateur de falsification": 'Tamper Indicator',
+  'plus 15 second': 'Plus 15 Second Button',
+  '+15 secondes': 'Plus 15 Second Button',
+  warranty: 'Warranty',
+  garantie: 'Warranty',
+  dimensions: 'Dimensions (L × W × H)',
+  couleurs: 'Colors',
+  colors: 'Colors',
+};
+
+/** Feature keys that use series-level data from the original table; do not replace cell content. */
+const SERIES_INHERITED_FEATURE_KEYS = new Set([
+  'Blending Programs',
+  'Variable Speed Control',
+  'Touch Buttons',
+  'Pulse',
+  'Digital Timer',
+  'Self-Detect Technology',
+  'Tamper Indicator',
+  'Plus 15 Second Button',
+  'Dimensions (L × W × H)',
+]);
+
 const AEM_NETWORK_ORIGIN = 'https://main--vitamix--aemsites.aem.network';
 
 /**
@@ -129,6 +233,8 @@ async function fetchProductPage(path) {
   const pathOnly = path.startsWith('http') ? new URL(path).pathname : path;
   const fullUrl = path.startsWith('http') ? path : `${AEM_NETWORK_ORIGIN}${pathOnly}`;
 
+  debug('fetchProductPage: path=', path, 'fullUrl=', fullUrl, 'useFcors=', useFcors());
+
   let resp;
   if (useFcors()) {
     const corsProxy = 'https://fcors.org/?url=';
@@ -139,8 +245,12 @@ async function fetchProductPage(path) {
     const url = path.startsWith('http') ? path : new URL(path, window.location.origin).href;
     resp = await fetch(url);
   }
+
+  debug('fetchProductPage: path=', path, 'status=', resp.status, 'ok=', resp.ok);
   if (!resp.ok) return { html: null, status: resp.status };
-  return { html: await resp.text(), status: resp.status };
+  const html = await resp.text();
+  debug('fetchProductPage: path=', path, 'htmlLength=', html?.length);
+  return { html, status: resp.status };
 }
 
 /**
@@ -225,14 +335,21 @@ function parseProductFromPage(html, path) {
   const baseUrl = canonical || new URL(path, window.location.origin).href;
 
   const jsonLdScript = doc.querySelector('script[type="application/ld+json"]');
-  if (!jsonLdScript?.textContent) return null;
+  if (!jsonLdScript?.textContent) {
+    debug('parseProductFromPage: no JSON-LD script', path);
+    return null;
+  }
   let ld;
   try {
     ld = JSON.parse(jsonLdScript.textContent);
-  } catch {
+  } catch (e) {
+    debug('parseProductFromPage: JSON parse error', path, e);
+    return null;
+  }
+  if (ld['@type'] !== 'Product' || !ld.name) {
+    debug('parseProductFromPage: not Product or no name', path, '@type=', ld['@type'], 'name=', ld?.name);
     return null;
   }
-  if (ld['@type'] !== 'Product' || !ld.name) return null;
 
   const offers = ld.offers || [];
   const firstOffer = offers[0];
@@ -303,9 +420,14 @@ function parseProductFromPage(html, path) {
  * @returns {Promise<{ product: Object|null, errorStatus?: number }>}
  */
 async function fetchProduct(path) {
+  debug('fetchProduct: start', path);
   const { html, status } = await fetchProductPage(path);
-  if (!html) return { product: null, errorStatus: status };
+  if (!html) {
+    debug('fetchProduct: no html', path, 'status=', status);
+    return { product: null, errorStatus: status };
+  }
   const product = parseProductFromPage(html, path);
+  debug('fetchProduct: parsed', path, 'product=', product ? { name: product.name, series: getProductSeries(product) } : null);
   return { product, errorStatus: product ? undefined : status };
 }
 
@@ -376,6 +498,261 @@ function formatPrice(price) {
   return { now, save };
 }
 
+/**
+ * Find which table column index (1-based, 0 = row header) matches the given series.
+ * Uses first table's first tbody row and, for labels, the second table's thead (series names like "Séries Ascent et Venturist").
+ * @param {HTMLElement} container - .widget-container (section that has tables + widget)
+ * @param {string} series - Product series name
+ * @returns {number} 1-based column index or 1 if no match
+ */
+function findColumnIndexForSeries(container, series) {
+  const tables = container.querySelectorAll('.table.comparison .table-comparison-scroll table');
+  const firstTable = tables[0];
+  if (!firstTable) {
+    debug('findColumnIndexForSeries: no first table');
+    return 1;
+  }
+  const firstDataRow = firstTable.querySelector('tbody tr');
+  if (!firstDataRow) {
+    debug('findColumnIndexForSeries: no first tbody tr');
+    return 1;
+  }
+  const headerTable = tables[1] || firstTable;
+  const theadRow = headerTable.querySelector('thead tr');
+  const bodyCells = [...firstDataRow.children];
+  const targetNorm = normalizeSeriesForMatch(series).toLowerCase();
+  debug('findColumnIndexForSeries: series=', series, 'targetNorm=', targetNorm, 'cellCount=', bodyCells.length);
+  if (!targetNorm) return 1;
+  for (let i = 1; i < bodyCells.length; i += 1) {
+    let columnText = (firstDataRow.children[i]?.textContent || '').trim();
+    if (theadRow?.children[i]) {
+      const thText = (theadRow.children[i].textContent || '').trim();
+      if (thText) columnText = `${thText} ${columnText}`;
+    }
+    const cellNorm = normalizeSeriesForMatch(columnText).toLowerCase();
+    if (!cellNorm) continue;
+    if (cellNorm === targetNorm || cellNorm.includes(targetNorm) || targetNorm.includes(cellNorm)) {
+      debug('findColumnIndexForSeries: match at column', i, 'cellText=', columnText.slice(0, 60));
+      return i;
+    }
+  }
+  debug('findColumnIndexForSeries: no match, using column 1');
+  return 1;
+}
+
+/**
+ * Create color swatches DOM for comparison table (same structure as table block).
+ * @param {Object} product - Product with options[].values (color names)
+ * @returns {DocumentFragment}
+ */
+function createColorSwatchesForProduct(product) {
+  const frag = document.createDocumentFragment();
+  const wrap = document.createElement('div');
+  wrap.className = 'table-comparison-color-swatches';
+  const colorOpt = product?.options?.find((o) => o.id === 'color');
+  const values = colorOpt?.values || [];
+  values.forEach((opt) => {
+    const label = opt.value || '';
+    const slug = toClassName(label);
+    const swatch = document.createElement('div');
+    swatch.className = 'table-comparison-color-swatch';
+    swatch.title = label;
+    const inner = document.createElement('div');
+    inner.className = 'table-comparison-color-inner';
+    inner.style.backgroundColor = slug ? `var(--color-${slug}, #888)` : '#888';
+    swatch.appendChild(inner);
+    wrap.appendChild(swatch);
+  });
+  frag.appendChild(wrap);
+  return frag;
+}
+
+/**
+ * Replace one column in all comparison tables with the specific product's data.
+ * @param {HTMLElement} container - .widget-container (section that has tables + widget)
+ * @param {number} columnIndex - Column index (0 = row header, 1 = first product)
+ * @param {Object} product - Parsed product from fetchProduct
+ * @param {Object} [featuresBySeries] - Optional features-by-series config
+ */
+function replaceColumnWithProduct(container, columnIndex, product, featuresBySeries) {
+  const tables = container.querySelectorAll('.table.comparison .table-comparison-scroll table');
+  if (!tables.length) return;
+
+  const productUrl = product.path?.startsWith('http') ? product.path : new URL(product.path || '', window.location.origin).href;
+  const imageUrl = getProductImageUrl(product, 0);
+  const { now: priceNow, save: priceSave } = formatPrice(product?.price || product?.variants?.[0]?.price);
+  const priceText = priceSave ? `Now ${priceNow} | ${priceSave}` : `From ${priceNow}`;
+  const learnMoreText = 'En savoir plus'; // could be localized
+
+  tables.forEach((table, tableIndex) => {
+    const theadRow = table.querySelector('thead tr');
+    const isFirstTable = tableIndex === 0;
+
+    if (isFirstTable && theadRow) {
+      const th = theadRow.children[columnIndex];
+      if (th) {
+        th.innerHTML = '';
+        if (imageUrl) {
+          const picture = document.createElement('picture');
+          const img = document.createElement('img');
+          img.loading = 'lazy';
+          img.alt = product.name || '';
+          img.src = imageUrl;
+          img.width = 320;
+          img.height = 440;
+          picture.appendChild(img);
+          th.appendChild(picture);
+        }
+      }
+    }
+
+    const bodyRows = table.querySelectorAll('tbody tr');
+    bodyRows.forEach((row, rowIndex) => {
+      const cells = [...row.children];
+      const cell = cells[columnIndex];
+      if (!cell || cell.tagName !== 'TD') return;
+
+      if (isFirstTable && row.classList.contains('table-comparison-row-header-empty') && rowIndex === 0) {
+        cell.innerHTML = `
+          <p><strong>${(product.name || '').replace(/</g, '&lt;')}</strong></p>
+          <p>${priceText.replace(/</g, '&lt;')}</p>
+          <p><strong><a href="${productUrl.replace(/"/g, '&quot;')}">${learnMoreText}</a></strong></p>
+        `;
+        return;
+      }
+
+      const headerCell = row.querySelector('th');
+      const headerText = (headerCell?.textContent || '').trim().toLowerCase();
+      const normalized = headerText.replace(/\s+/g, ' ').trim();
+      const featureKey = ROW_LABEL_TO_FEATURE[normalized]
+        || Object.keys(ROW_LABEL_TO_FEATURE).find((k) => normalized.includes(k));
+
+      if (featureKey === 'Colors') {
+        cell.textContent = '';
+        cell.appendChild(createColorSwatchesForProduct(product));
+        return;
+      }
+
+      if (featureKey === 'Series') {
+        const p = document.createElement('p');
+        p.textContent = product.name || '—';
+        cell.textContent = '';
+        cell.appendChild(p);
+        return;
+      }
+
+      if (featureKey && SERIES_INHERITED_FEATURE_KEYS.has(featureKey)) {
+        return;
+      }
+
+      if (featureKey && featureKey !== 'Colors') {
+        const value = getFeatureValue(product, featureKey, featuresBySeries);
+        if (value === 'Yes') {
+          cell.innerHTML = '<p><span class="icon icon-check"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20"><title>Check</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg></span></p>';
+        } else {
+          cell.textContent = value || '—';
+          if (!cell.querySelector('p')) {
+            const p = document.createElement('p');
+            p.textContent = cell.textContent;
+            cell.textContent = '';
+            cell.appendChild(p);
+          }
+        }
+      }
+    });
+  });
+}
+
+/**
+ * Hide table columns whose index is not in the used set (keeps row header column 0 and selected product columns).
+ * @param {HTMLElement} container - .widget-container
+ * @param {Set<number>} usedColumnIndices - Column indices to keep (e.g. 0, 1, 2, 5)
+ */
+function hideUnusedColumns(container, usedColumnIndices) {
+  const tables = container.querySelectorAll('.table.comparison .table-comparison-scroll table');
+  tables.forEach((table) => {
+    const colgroup = table.querySelector('colgroup');
+    if (colgroup) {
+      [...colgroup.children].forEach((col, index) => {
+        if (usedColumnIndices.has(index)) {
+          col.classList.add('compare-products-column-visible');
+        } else {
+          col.style.display = 'none';
+        }
+      });
+    }
+    [...table.querySelectorAll('thead tr'), ...table.querySelectorAll('tbody tr')].forEach((tr) => {
+      [...tr.children].forEach((cell, index) => {
+        if (usedColumnIndices.has(index)) {
+          cell.classList.add('compare-products-column-visible');
+        } else {
+          cell.style.display = 'none';
+        }
+      });
+    });
+  });
+  debug('hideUnusedColumns: kept columns', [...usedColumnIndices].sort((a, b) => a - b));
+}
+
+/**
+ * When compare-products=path[,path2,...] is set: inject each product into its matching series column, hide other columns, then remove widget.
+ * @param {HTMLElement} widget - Widget root
+ * @returns {Promise<boolean>} true if the param was set and handling was done
+ */
+async function handleCompareProductsParam(widget) {
+  const paths = getCompareProductsParamPaths();
+  debug('handleCompareProductsParam: paths=', paths);
+  if (paths.length === 0) {
+    debug('handleCompareProductsParam: no paths, skip');
+    return false;
+  }
+
+  const container = widget.closest('.widget-container');
+  debug('handleCompareProductsParam: container=', container ? 'found' : 'NOT FOUND (need .widget-container on page)');
+  if (!container) return false;
+
+  debug('handleCompareProductsParam: fetching featuresBySeries and', paths.length, 'products');
+  const featuresBySeries = await fetchFeaturesBySeries();
+  const results = await Promise.all(paths.map((path) => fetchProduct(path)));
+  debug('handleCompareProductsParam: results=', results.map((r, i) => ({ path: paths[i], hasProduct: !!r.product, errorStatus: r.errorStatus })));
+
+  const usedColumnIndices = new Set([0]);
+  let anyReplaced = false;
+  results.forEach(({ product }, i) => {
+    if (!product) {
+      debug('handleCompareProductsParam: skip path (no product)', paths[i]);
+      return;
+    }
+    const series = getProductSeries(product);
+    const columnIndex = findColumnIndexForSeries(container, series);
+    debug('handleCompareProductsParam: replace column', 'path=', paths[i], 'series=', series, 'columnIndex=', columnIndex);
+    usedColumnIndices.add(columnIndex);
+    replaceColumnWithProduct(container, columnIndex, product, featuresBySeries || undefined);
+    anyReplaced = true;
+  });
+
+  if (anyReplaced) {
+    hideUnusedColumns(container, usedColumnIndices);
+    container.classList.add('compare-products-columns-filtered');
+    container.dataset.compareProductsVisible = String(usedColumnIndices.size - 1);
+  }
+
+  debug('handleCompareProductsParam: done, anyReplaced=', anyReplaced, 'visibleColumns=', usedColumnIndices.size - 1);
+  removeWidgetWrapperLater(widget);
+  return true;
+}
+
+/**
+ * Remove the widget wrapper on the next task so widget block can finish (it uses wrapper after we return).
+ * @param {HTMLElement} widget - Widget root
+ */
+function removeWidgetWrapperLater(widget) {
+  setTimeout(() => {
+    const wrapper = widget.closest('.widget-wrapper');
+    if (wrapper) wrapper.remove();
+  }, 0);
+}
+
 /**
  * Resolve image URL for display (variant or product level).
  * @param {Object} product - Product JSON
@@ -584,39 +961,42 @@ function render(widget, slots, featuresBySeries) {
 
 /**
  * Initialize compare-products widget: read config, fetch products, render.
+ * If ?compare-products=path is set, inject that product into the matching series column in the page tables and hide the widget.
+ * Otherwise use ?productComparison=path1,path2 to show the widget comparison grid.
  * @param {HTMLElement} widget - Widget root
  */
 export default async function decorate(widget) {
-  const paths = getProductComparisonPaths();
-  if (paths.length === 0) {
-    widget.querySelector('.compare-products-products')?.appendChild(
-      Object.assign(document.createElement('p'), {
-        textContent: 'Add product paths to compare (productComparison).',
-        className: 'compare-products-empty',
-      }),
-    );
+  const paths = getCompareProductsParamPaths();
+  debug('decorate: compare-products paths=', paths.length ? paths : 'none');
+  const handled = await handleCompareProductsParam(widget);
+  debug('decorate: handled=', handled);
+  if (handled) return;
+
+  if (getCompareProductsParam()) {
+    removeWidgetWrapperLater(widget);
+    return;
+  }
+
+  const comparisonPaths = getProductComparisonPaths();
+  if (comparisonPaths.length === 0) {
+    removeWidgetWrapperLater(widget);
     return;
   }
 
   const [featuresBySeries, ...slotResults] = await Promise.all([
     fetchFeaturesBySeries(),
-    ...paths.map((path) => fetchProduct(path)),
+    ...comparisonPaths.map((path) => fetchProduct(path)),
   ]);
 
   const slots = slotResults.map(({ product, errorStatus }, i) => ({
-    path: paths[i],
+    path: comparisonPaths[i],
     product,
     errorStatus,
   }));
 
   const allFailed = slots.every((slot) => !slot.product);
   if (allFailed) {
-    widget.querySelector('.compare-products-products')?.appendChild(
-      Object.assign(document.createElement('p'), {
-        textContent: 'Could not load product data.',
-        className: 'compare-products-empty',
-      }),
-    );
+    removeWidgetWrapperLater(widget);
     return;
   }
 

From 9d0b19babc31a36db9b255edb9737faa6f193e1c Mon Sep 17 00:00:00 2001
From: David Nuescheler <david@nuescheler.ch>
Date: Fri, 20 Feb 2026 08:09:51 -0700
Subject: [PATCH 6/9] chore: lint

---
 widgets/compare-products/compare-products.js | 111 +++++++++++--------
 1 file changed, 66 insertions(+), 45 deletions(-)

diff --git a/widgets/compare-products/compare-products.js b/widgets/compare-products/compare-products.js
index f7154bd7..e21921b7 100644
--- a/widgets/compare-products/compare-products.js
+++ b/widgets/compare-products/compare-products.js
@@ -35,7 +35,8 @@ const SPEC_LABEL_MAP = {
 const FEATURES_BY_SERIES_PATH_DEFAULT = '/us/en_us/products/config/features-by-series.json';
 
 /**
- * Get features-by-series path for current locale (e.g. /ca/fr_ca/... -> /ca/fr_ca/products/config/...).
+ * Get features-by-series path for current locale.
+ * E.g. /ca/fr_ca/... -> /ca/fr_ca/products/config/...
  * @returns {string}
  */
 function getFeaturesBySeriesPath() {
@@ -134,8 +135,9 @@ function getProductComparisonPaths() {
 }
 
 /**
- * Product paths from ?compare-products= (comma-separated; each replaces that product's series column).
- * @returns {string[]} Array of product paths (e.g. ['/us/en_us/products/ascent-x2', ...]); empty if not set
+ * Product paths from ?compare-products= (comma-separated).
+ * Each path replaces that product's series column.
+ * @returns {string[]} Array of product paths; empty if not set
  */
 function getCompareProductsParamPaths() {
   const params = new URLSearchParams(window.location.search);
@@ -187,7 +189,7 @@ const ROW_LABEL_TO_FEATURE = {
   'self-detect technology': 'Self-Detect Technology',
   "technologie d'autodétection": 'Self-Detect Technology',
   'tamper indicator': 'Tamper Indicator',
-  "indicateur de falsification": 'Tamper Indicator',
+  'indicateur de falsification': 'Tamper Indicator',
   'plus 15 second': 'Plus 15 Second Button',
   '+15 secondes': 'Plus 15 Second Button',
   warranty: 'Warranty',
@@ -500,7 +502,7 @@ function formatPrice(price) {
 
 /**
  * Find which table column index (1-based, 0 = row header) matches the given series.
- * Uses first table's first tbody row and, for labels, the second table's thead (series names like "Séries Ascent et Venturist").
+ * Uses first table's first tbody row and second table's thead for labels.
  * @param {HTMLElement} container - .widget-container (section that has tables + widget)
  * @param {string} series - Product series name
  * @returns {number} 1-based column index or 1 if no match
@@ -530,8 +532,12 @@ function findColumnIndexForSeries(container, series) {
       if (thText) columnText = `${thText} ${columnText}`;
     }
     const cellNorm = normalizeSeriesForMatch(columnText).toLowerCase();
-    if (!cellNorm) continue;
-    if (cellNorm === targetNorm || cellNorm.includes(targetNorm) || targetNorm.includes(cellNorm)) {
+    const matches = cellNorm && (
+      cellNorm === targetNorm
+      || cellNorm.includes(targetNorm)
+      || targetNorm.includes(cellNorm)
+    );
+    if (matches) {
       debug('findColumnIndexForSeries: match at column', i, 'cellText=', columnText.slice(0, 60));
       return i;
     }
@@ -567,6 +573,28 @@ function createColorSwatchesForProduct(product) {
   return frag;
 }
 
+/**
+ * Resolve image URL for display (variant or product level).
+ * @param {Object} product - Product JSON
+ * @param {number} variantIndex - Selected variant index
+ * @returns {string} Image URL
+ */
+function getProductImageUrl(product, variantIndex = 0) {
+  const variants = product?.variants;
+  if (Array.isArray(variants) && variants[variantIndex]?.images?.length > 0) {
+    const [{ url }] = variants[variantIndex].images;
+    return url.startsWith('http') || url.startsWith('/')
+      ? url : new URL(url, window.location.origin).pathname;
+  }
+  const images = product?.images;
+  if (Array.isArray(images) && images.length > 0) {
+    const [{ url }] = images;
+    return url.startsWith('http') || url.startsWith('/')
+      ? url : new URL(url, window.location.origin).pathname;
+  }
+  return '';
+}
+
 /**
  * Replace one column in all comparison tables with the specific product's data.
  * @param {HTMLElement} container - .widget-container (section that has tables + widget)
@@ -578,9 +606,12 @@ function replaceColumnWithProduct(container, columnIndex, product, featuresBySer
   const tables = container.querySelectorAll('.table.comparison .table-comparison-scroll table');
   if (!tables.length) return;
 
-  const productUrl = product.path?.startsWith('http') ? product.path : new URL(product.path || '', window.location.origin).href;
+  const productUrl = product.path?.startsWith('http')
+    ? product.path
+    : new URL(product.path || '', window.location.origin).href;
   const imageUrl = getProductImageUrl(product, 0);
-  const { now: priceNow, save: priceSave } = formatPrice(product?.price || product?.variants?.[0]?.price);
+  const priceOrVariant = product?.price || product?.variants?.[0]?.price;
+  const { now: priceNow, save: priceSave } = formatPrice(priceOrVariant);
   const priceText = priceSave ? `Now ${priceNow} | ${priceSave}` : `From ${priceNow}`;
   const learnMoreText = 'En savoir plus'; // could be localized
 
@@ -664,7 +695,8 @@ function replaceColumnWithProduct(container, columnIndex, product, featuresBySer
 }
 
 /**
- * Hide table columns whose index is not in the used set (keeps row header column 0 and selected product columns).
+ * Hide table columns whose index is not in the used set.
+ * Keeps row header column 0 and selected product columns.
  * @param {HTMLElement} container - .widget-container
  * @param {Set<number>} usedColumnIndices - Column indices to keep (e.g. 0, 1, 2, 5)
  */
@@ -695,7 +727,19 @@ function hideUnusedColumns(container, usedColumnIndices) {
 }
 
 /**
- * When compare-products=path[,path2,...] is set: inject each product into its matching series column, hide other columns, then remove widget.
+ * Remove the widget wrapper on the next task so widget block can finish.
+ * @param {HTMLElement} widget - Widget root
+ */
+function removeWidgetWrapperLater(widget) {
+  setTimeout(() => {
+    const wrapper = widget.closest('.widget-wrapper');
+    if (wrapper) wrapper.remove();
+  }, 0);
+}
+
+/**
+ * When compare-products=path[,path2,...] is set: inject each product into its matching
+ * series column, hide other columns, then remove widget.
  * @param {HTMLElement} widget - Widget root
  * @returns {Promise<boolean>} true if the param was set and handling was done
  */
@@ -708,7 +752,10 @@ async function handleCompareProductsParam(widget) {
   }
 
   const container = widget.closest('.widget-container');
-  debug('handleCompareProductsParam: container=', container ? 'found' : 'NOT FOUND (need .widget-container on page)');
+  debug(
+    'handleCompareProductsParam: container=',
+    container ? 'found' : 'NOT FOUND (need .widget-container on page)',
+  );
   if (!container) return false;
 
   debug('handleCompareProductsParam: fetching featuresBySeries and', paths.length, 'products');
@@ -737,42 +784,16 @@ async function handleCompareProductsParam(widget) {
     container.dataset.compareProductsVisible = String(usedColumnIndices.size - 1);
   }
 
-  debug('handleCompareProductsParam: done, anyReplaced=', anyReplaced, 'visibleColumns=', usedColumnIndices.size - 1);
+  debug(
+    'handleCompareProductsParam: done, anyReplaced=',
+    anyReplaced,
+    'visibleColumns=',
+    usedColumnIndices.size - 1,
+  );
   removeWidgetWrapperLater(widget);
   return true;
 }
 
-/**
- * Remove the widget wrapper on the next task so widget block can finish (it uses wrapper after we return).
- * @param {HTMLElement} widget - Widget root
- */
-function removeWidgetWrapperLater(widget) {
-  setTimeout(() => {
-    const wrapper = widget.closest('.widget-wrapper');
-    if (wrapper) wrapper.remove();
-  }, 0);
-}
-
-/**
- * Resolve image URL for display (variant or product level).
- * @param {Object} product - Product JSON
- * @param {number} variantIndex - Selected variant index
- * @returns {string} Image URL
- */
-function getProductImageUrl(product, variantIndex = 0) {
-  const variants = product?.variants;
-  if (Array.isArray(variants) && variants[variantIndex]?.images?.length > 0) {
-    const [{ url }] = variants[variantIndex].images;
-    return url.startsWith('http') || url.startsWith('/') ? url : new URL(url, window.location.origin).pathname;
-  }
-  const images = product?.images;
-  if (Array.isArray(images) && images.length > 0) {
-    const [{ url }] = images;
-    return url.startsWith('http') || url.startsWith('/') ? url : new URL(url, window.location.origin).pathname;
-  }
-  return '';
-}
-
 /**
  * Build a placeholder card when a product failed to load.
  * @param {string} path - Product path (for link)
@@ -961,7 +982,7 @@ function render(widget, slots, featuresBySeries) {
 
 /**
  * Initialize compare-products widget: read config, fetch products, render.
- * If ?compare-products=path is set, inject that product into the matching series column in the page tables and hide the widget.
+ * If ?compare-products=path is set, inject that product into the matching series column.
  * Otherwise use ?productComparison=path1,path2 to show the widget comparison grid.
  * @param {HTMLElement} widget - Widget root
  */

From d5c39bda3909a4fcc9933598028da93edd7c4d01 Mon Sep 17 00:00:00 2001
From: David Nuescheler <david@nuescheler.ch>
Date: Sat, 21 Feb 2026 08:36:55 -0700
Subject: [PATCH 7/9] chore: add/remove products

---
 widgets/compare-products/compare-products.css |  63 +++-
 widgets/compare-products/compare-products.js  | 320 ++++++++++++++++--
 2 files changed, 347 insertions(+), 36 deletions(-)

diff --git a/widgets/compare-products/compare-products.css b/widgets/compare-products/compare-products.css
index 956df929..5be807b7 100644
--- a/widgets/compare-products/compare-products.css
+++ b/widgets/compare-products/compare-products.css
@@ -122,6 +122,38 @@
   margin: var(--spacing-200) 0;
 }
 
+/* Add-a-product grid (Full Size Blenders from index.json) */
+.compare-products-products:has(.compare-products-add-heading) {
+  display: block;
+  grid-column: 1 / -1;
+}
+
+.compare-products-add-heading {
+  margin: 0 0 var(--spacing-300);
+  font-size: var(--heading-font-size-m);
+}
+
+.compare-products-add-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: var(--spacing-400);
+}
+
+.compare-products-add-card .compare-products-add-to-comparison {
+  margin-top: var(--spacing-200);
+  margin-bottom: var(--spacing-200);
+}
+
+.compare-products-add-empty {
+  margin: var(--spacing-200) 0;
+}
+
+.compare-products-add-section {
+  margin-top: var(--spacing-400);
+  padding-top: var(--spacing-400);
+  border-top: var(--border-m) solid var(--color-gray-300);
+}
+
 /* Product cards row – start after feature-label column so cards align with table data columns */
 .compare-products-products {
   grid-column: 2 / -1;
@@ -150,7 +182,7 @@
 .compare-products-product-image-wrap {
   width: 100%;
   max-width: 280px;
-  margin-bottom: var(--spacing-200);
+  margin-bottom: 0;
   aspect-ratio: 1;
 }
 
@@ -258,3 +290,32 @@
   min-width: 120px;
 }
 
+/* Remove-from-comparison button on each product column (compare-products param flow) */
+.table.comparison .table-comparison-scroll thead th.compare-products-column-with-remove {
+  position: relative;
+}
+
+.table.comparison .table-comparison-scroll .compare-products-remove-from-comparison {
+  position: absolute;
+  top: var(--spacing-80);
+  right: var(--spacing-80);
+  z-index: 1;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--color-gray-200);
+  color: var(--color-charcoal);
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.table.comparison .table-comparison-scroll .compare-products-remove-from-comparison:hover {
+  background: var(--color-gray-300);
+}
+
diff --git a/widgets/compare-products/compare-products.js b/widgets/compare-products/compare-products.js
index e21921b7..8e853143 100644
--- a/widgets/compare-products/compare-products.js
+++ b/widgets/compare-products/compare-products.js
@@ -1,4 +1,5 @@
 import { loadCSS, toClassName } from '../../scripts/aem.js';
+import { lookupProducts } from '../../blocks/plp/plp.js';
 
 const DEBUG = typeof window !== 'undefined' && (
   new URLSearchParams(window.location.search).has('compare-products-debug')
@@ -12,6 +13,12 @@ function debug(...args) {
   }
 }
 
+/** productType used to show "add a product" grid (from products index) */
+const ADD_TO_COMPARE_PRODUCT_TYPE = 'Countertop Blender';
+
+/** Show "add a product" grid until this many products are in the comparison */
+const MAX_COMPARISON_PRODUCTS = 4;
+
 const FEATURE_KEYS = [
   'Series',
   'Blending Programs',
@@ -74,6 +81,25 @@ function getProductSeries(product) {
   return (c.series || c.collection || product.name || '').trim();
 }
 
+/**
+ * Infer series from product path/title when they clearly indicate the series (avoids wrong page data).
+ * @param {Object} product - Product with .path, .name, .url
+ * @returns {string} Series name or ''
+ */
+function inferSeriesFromPathAndTitle(product) {
+  if (!product) return '';
+  const path = (product.path || product.url || '').toLowerCase();
+  const title = (product.name || product.title || '').toLowerCase();
+  const s = `${path} ${title}`;
+  if (/\bascent\s*[-]?\s*x\s*\d|\bascent\s*x2|\bascent\s*x3|\bascent\s*x4|\bascent\s*x5/.test(s)) return 'Ascent X Series';
+  if (/\bventurist\b|v1200/.test(s)) return 'Venturist Series';
+  if (/\bpropel\b/.test(s)) return 'Propel Series';
+  if (/\bexplorian\b|e310|e320/.test(s)) return 'Explorian Series';
+  if (/\bascent\b|a2500|a3500/.test(s)) return 'Ascent Series';
+  if (/\b5200\b|legacy\b/.test(s)) return 'Legacy Series';
+  return '';
+}
+
 /**
  * Normalize series name for matching: remove "Vitamix", trailing " Series", trim, strip ®™.
  * @param {string} s - Series or product name
@@ -225,6 +251,19 @@ function useFcors() {
     || hostname.endsWith('.aem.live');
 }
 
+/**
+ * Resolve image URL for display: when on localhost / .aem.page / .aem.live, load from aem.network.
+ * @param {string} url - Image URL (absolute or path)
+ * @returns {string} URL to use for img src
+ */
+function resolveImageUrlForDisplay(url) {
+  if (!url) return '';
+  if (!useFcors()) return url;
+  if (url.startsWith('http')) return url;
+  const path = url.startsWith('/') ? url : `/${url}`;
+  return `${AEM_NETWORK_ORIGIN}${path}`;
+}
+
 /**
  * Fetch product page HTML (no .json). Uses fcors from aem.network on
  * localhost / .aem.page / .aem.live.
@@ -525,6 +564,11 @@ function findColumnIndexForSeries(container, series) {
   const targetNorm = normalizeSeriesForMatch(series).toLowerCase();
   debug('findColumnIndexForSeries: series=', series, 'targetNorm=', targetNorm, 'cellCount=', bodyCells.length);
   if (!targetNorm) return 1;
+
+  const isAscentNonX = targetNorm === 'ascent' || (targetNorm.startsWith('ascent') && !targetNorm.includes('x'));
+  const isAscentX = targetNorm.includes('ascent') && targetNorm.includes('x');
+  const isVenturist = targetNorm.includes('venturist');
+
   for (let i = 1; i < bodyCells.length; i += 1) {
     let columnText = (firstDataRow.children[i]?.textContent || '').trim();
     if (theadRow?.children[i]) {
@@ -537,15 +581,39 @@ function findColumnIndexForSeries(container, series) {
       || cellNorm.includes(targetNorm)
       || targetNorm.includes(cellNorm)
     );
-    if (matches) {
-      debug('findColumnIndexForSeries: match at column', i, 'cellText=', columnText.slice(0, 60));
-      return i;
-    }
+    if (!matches) continue;
+
+    if (isAscentNonX && cellNorm.includes('ascent x')) continue;
+    if (isAscentX && cellNorm.includes('venturist')) continue;
+    if (isVenturist && cellNorm.includes('ascent x')) continue;
+
+    debug('findColumnIndexForSeries: match at column', i, 'cellText=', columnText.slice(0, 60));
+    return i;
   }
   debug('findColumnIndexForSeries: no match, using column 1');
   return 1;
 }
 
+/**
+ * Get the column header label for a column index (same source as findColumnIndexForSeries).
+ * @param {HTMLElement} container - .widget-container
+ * @param {number} columnIndex - Column index (0 = row header, 1 = first product column)
+ * @returns {string} Column label or ''
+ */
+function getColumnLabel(container, columnIndex) {
+  const tables = container.querySelectorAll('.table.comparison .table-comparison-scroll table');
+  const firstTable = tables[0];
+  const firstDataRow = firstTable?.querySelector('tbody tr');
+  const headerTable = tables[1] || firstTable;
+  const theadRow = headerTable?.querySelector('thead tr');
+  let text = (firstDataRow?.children[columnIndex]?.textContent || '').trim();
+  if (theadRow?.children[columnIndex]) {
+    const thText = (theadRow.children[columnIndex].textContent || '').trim();
+    if (thText) text = `${thText} ${text}`.trim() || text;
+  }
+  return text.trim();
+}
+
 /**
  * Create color swatches DOM for comparison table (same structure as table block).
  * @param {Object} product - Product with options[].values (color names)
@@ -595,14 +663,32 @@ function getProductImageUrl(product, variantIndex = 0) {
   return '';
 }
 
+/**
+ * Snapshot original table cell content (by table, row, column) before any replacement.
+ * @param {HTMLElement} container - .widget-container
+ * @returns {Array<Array<string[]>>} snapshot[tableIndex][rowIndex][colIndex] = cell innerHTML
+ */
+function snapshotTableContent(container) {
+  const tables = container.querySelectorAll('.table.comparison .table-comparison-scroll table');
+  return [...tables].map((table) => {
+    const rows = table.querySelectorAll('tbody tr');
+    return [...rows].map((row) => {
+      const cells = [...row.children];
+      return cells.map((cell) => (cell.tagName === 'TD' ? cell.innerHTML : ''));
+    });
+  });
+}
+
 /**
  * Replace one column in all comparison tables with the specific product's data.
+ * Series-inherited feature rows use the table's series column content (no features-by-series.json).
  * @param {HTMLElement} container - .widget-container (section that has tables + widget)
  * @param {number} columnIndex - Column index (0 = row header, 1 = first product)
  * @param {Object} product - Parsed product from fetchProduct
- * @param {Object} [featuresBySeries] - Optional features-by-series config
+ * @param {number} [sourceSeriesColumnIndex] - Product's series column; when columnIndex differs, copy feature cells from this column
+ * @param {Array<Array<string[]>>} [originalContent] - Snapshot from snapshotTableContent; used so we clone from unmodified series column
  */
-function replaceColumnWithProduct(container, columnIndex, product, featuresBySeries) {
+function replaceColumnWithProduct(container, columnIndex, product, sourceSeriesColumnIndex, originalContent) {
   const tables = container.querySelectorAll('.table.comparison .table-comparison-scroll table');
   if (!tables.length) return;
 
@@ -618,22 +704,46 @@ function replaceColumnWithProduct(container, columnIndex, product, featuresBySer
   tables.forEach((table, tableIndex) => {
     const theadRow = table.querySelector('thead tr');
     const isFirstTable = tableIndex === 0;
-
-    if (isFirstTable && theadRow) {
-      const th = theadRow.children[columnIndex];
-      if (th) {
-        th.innerHTML = '';
-        if (imageUrl) {
-          const picture = document.createElement('picture');
-          const img = document.createElement('img');
-          img.loading = 'lazy';
-          img.alt = product.name || '';
-          img.src = imageUrl;
-          img.width = 320;
-          img.height = 440;
-          picture.appendChild(img);
-          th.appendChild(picture);
-        }
+    const th = theadRow?.children[columnIndex];
+
+    if (th) {
+      th.innerHTML = '';
+      const pathToRemove = product.path;
+      if (isFirstTable && pathToRemove) {
+        th.classList.add('compare-products-column-with-remove');
+        const removeBtn = document.createElement('button');
+        removeBtn.type = 'button';
+        removeBtn.className = 'compare-products-remove-from-comparison';
+        removeBtn.setAttribute('aria-label', `Remove ${product.name || 'product'} from comparison`);
+        removeBtn.textContent = '×';
+        removeBtn.addEventListener('click', () => {
+          const current = getCompareProductsParamPaths();
+          const next = current.filter((p) => p !== pathToRemove);
+          const url = new URL(window.location.href);
+          if (next.length) {
+            url.searchParams.set('compare-products', next.join(','));
+          } else {
+            url.searchParams.delete('compare-products');
+          }
+          window.location.href = url.toString();
+        });
+        th.appendChild(removeBtn);
+      }
+      if (isFirstTable && imageUrl) {
+        const picture = document.createElement('picture');
+        const img = document.createElement('img');
+        img.loading = 'lazy';
+        img.alt = product.name || '';
+        img.src = imageUrl;
+        img.width = 320;
+        img.height = 440;
+        picture.appendChild(img);
+        th.appendChild(picture);
+      } else if (!isFirstTable || !imageUrl) {
+        const label = product.name || product.series || '—';
+        const p = document.createElement('p');
+        p.textContent = label;
+        th.appendChild(p);
       }
     }
 
@@ -672,12 +782,17 @@ function replaceColumnWithProduct(container, columnIndex, product, featuresBySer
         return;
       }
 
-      if (featureKey && SERIES_INHERITED_FEATURE_KEYS.has(featureKey)) {
+      if (sourceSeriesColumnIndex != null && sourceSeriesColumnIndex !== columnIndex && originalContent) {
+        const rowSnapshot = originalContent[tableIndex]?.[rowIndex];
+        const cloned = rowSnapshot?.[sourceSeriesColumnIndex];
+        if (cloned != null) cell.innerHTML = cloned;
         return;
       }
 
+      if (featureKey && SERIES_INHERITED_FEATURE_KEYS.has(featureKey)) return;
+
       if (featureKey && featureKey !== 'Colors') {
-        const value = getFeatureValue(product, featureKey, featuresBySeries);
+        const value = getFeatureValue(product, featureKey, undefined);
         if (value === 'Yes') {
           cell.innerHTML = '<p><span class="icon icon-check"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20"><title>Check</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg></span></p>';
         } else {
@@ -738,8 +853,8 @@ function removeWidgetWrapperLater(widget) {
 }
 
 /**
- * When compare-products=path[,path2,...] is set: inject each product into its matching
- * series column, hide other columns, then remove widget.
+ * When compare-products=path[,path2,...] is set: inject each product into the column that
+ * matches its series (so the table’s existing feature values stay correct), hide other columns.
  * @param {HTMLElement} widget - Widget root
  * @returns {Promise<boolean>} true if the param was set and handling was done
  */
@@ -758,11 +873,16 @@ async function handleCompareProductsParam(widget) {
   );
   if (!container) return false;
 
-  debug('handleCompareProductsParam: fetching featuresBySeries and', paths.length, 'products');
-  const featuresBySeries = await fetchFeaturesBySeries();
+  debug('handleCompareProductsParam: fetching', paths.length, 'products');
   const results = await Promise.all(paths.map((path) => fetchProduct(path)));
   debug('handleCompareProductsParam: results=', results.map((r, i) => ({ path: paths[i], hasProduct: !!r.product, errorStatus: r.errorStatus })));
 
+  const originalContent = snapshotTableContent(container);
+
+  const firstTable = container.querySelector('.table.comparison .table-comparison-scroll table');
+  const firstRow = firstTable?.querySelector('thead tr, tbody tr');
+  const maxColumns = firstRow ? firstRow.children.length : 0;
+
   const usedColumnIndices = new Set([0]);
   let anyReplaced = false;
   results.forEach(({ product }, i) => {
@@ -770,11 +890,16 @@ async function handleCompareProductsParam(widget) {
       debug('handleCompareProductsParam: skip path (no product)', paths[i]);
       return;
     }
-    const series = getProductSeries(product);
-    const columnIndex = findColumnIndexForSeries(container, series);
-    debug('handleCompareProductsParam: replace column', 'path=', paths[i], 'series=', series, 'columnIndex=', columnIndex);
+    const columnIndex = i + 1;
+    if (columnIndex >= maxColumns) {
+      debug('handleCompareProductsParam: skip path (no column left)', paths[i]);
+      return;
+    }
+    const series = inferSeriesFromPathAndTitle(product) || getProductSeries(product);
+    const sourceSeriesColumnIndex = findColumnIndexForSeries(container, series);
     usedColumnIndices.add(columnIndex);
-    replaceColumnWithProduct(container, columnIndex, product, featuresBySeries || undefined);
+    debug('handleCompareProductsParam: replace column', 'path=', paths[i], 'series=', series, 'columnIndex=', columnIndex, 'sourceSeriesColumn=', sourceSeriesColumnIndex);
+    replaceColumnWithProduct(container, columnIndex, product, sourceSeriesColumnIndex, originalContent);
     anyReplaced = true;
   });
 
@@ -790,7 +915,10 @@ async function handleCompareProductsParam(widget) {
     'visibleColumns=',
     usedColumnIndices.size - 1,
   );
-  removeWidgetWrapperLater(widget);
+
+  if (paths.length >= MAX_COMPARISON_PRODUCTS) {
+    removeWidgetWrapperLater(widget);
+  }
   return true;
 }
 
@@ -947,6 +1075,112 @@ function buildFeaturesTable(slots, tableEl, featuresBySeries) {
   });
 }
 
+/**
+ * Build a card for the "add a product" grid (product from index.json).
+ * @param {Object} product - Product from lookupProducts (title, image, price, url)
+ * @returns {HTMLElement}
+ */
+function buildAddProductCard(product) {
+  const col = document.createElement('div');
+  col.className = 'compare-products-product compare-products-add-card';
+
+  const imgWrap = document.createElement('div');
+  imgWrap.className = 'compare-products-product-image-wrap';
+  const img = document.createElement('img');
+  img.src = resolveImageUrlForDisplay(product.image) || '';
+  img.alt = '';
+  img.loading = 'lazy';
+  imgWrap.appendChild(img);
+
+  const nameEl = document.createElement('h3');
+  nameEl.className = 'compare-products-product-name';
+  nameEl.textContent = product.title || '';
+
+  const priceEl = document.createElement('div');
+  priceEl.className = 'compare-products-product-price';
+  const price = product.price != null ? `$${Number(product.price).toFixed(2)}` : '';
+  priceEl.innerHTML = price ? `<span class="compare-products-product-price-now">${price}</span>` : '';
+
+  const addBtn = document.createElement('button');
+  addBtn.type = 'button';
+  addBtn.className = 'button emphasis compare-products-add-to-comparison';
+  addBtn.textContent = 'Add to comparison';
+  addBtn.addEventListener('click', () => {
+    const current = getCompareProductsParamPaths();
+    const next = [...current, product.url].filter(Boolean);
+    const url = new URL(window.location.href);
+    url.searchParams.set('compare-products', next.join(','));
+    window.location.href = url.toString();
+  });
+
+  col.append(imgWrap, addBtn, nameEl, priceEl);
+  return col;
+}
+
+/**
+ * Fetch Full Size Blenders from index (fcors like PLP) and render grid to add a product.
+ * @param {HTMLElement} widget - Widget root
+ * @param {Object} [options] - Options
+ * @param {boolean} [options.inSection] - If true, render into .compare-products-add-section
+ *   below features (1–2 products); else replace products area (0 products).
+ * @param {string[]} [options.excludePaths] - Paths already in comparison (omit from grid).
+ */
+async function renderAddProductsGrid(widget, options = {}) {
+  const { inSection = false, excludePaths = [] } = options;
+  const scroll = widget.querySelector('.compare-products-scroll');
+  const productsContainer = widget.querySelector('.compare-products-products');
+  const featuresSection = widget.querySelector('.compare-products-features');
+  if (!scroll) return;
+
+  let container;
+  if (inSection) {
+    let section = widget.querySelector('.compare-products-add-section');
+    if (!section) {
+      section = document.createElement('div');
+      section.className = 'compare-products-add-section';
+      scroll.appendChild(section);
+    }
+    section.hidden = false;
+    section.innerHTML = '';
+    container = section;
+  } else {
+    if (!productsContainer) return;
+    container = productsContainer;
+    container.innerHTML = '';
+    if (featuresSection) featuresSection.hidden = true;
+  }
+
+  const heading = document.createElement('h2');
+  heading.className = 'compare-products-add-heading';
+  heading.textContent = 'Add a product to compare';
+  container.appendChild(heading);
+
+  let products = [];
+  try {
+    products = await lookupProducts({ productType: ADD_TO_COMPARE_PRODUCT_TYPE });
+  } catch (e) {
+    debug('renderAddProductsGrid: lookupProducts failed', e);
+  }
+
+  const excludeSet = new Set(excludePaths.filter(Boolean));
+  const filtered = products.filter((p) => p.url && !excludeSet.has(p.url));
+
+  if (filtered.length === 0) {
+    const empty = document.createElement('p');
+    empty.className = 'compare-products-add-empty';
+    empty.textContent = inSection && products.length > 0
+      ? 'All selected. Remove one to add another.'
+      : 'No countertop blenders found.';
+    container.appendChild(empty);
+    return;
+  }
+
+  const grid = document.createElement('div');
+  grid.className = 'compare-products-add-grid';
+  filtered.forEach((product) => grid.appendChild(buildAddProductCard(product)));
+  container.appendChild(grid);
+}
+
 /**
  * Render the full compare view: product cards + features table.
  * @param {HTMLElement} widget - Widget root
@@ -991,7 +1225,13 @@ export default async function decorate(widget) {
   debug('decorate: compare-products paths=', paths.length ? paths : 'none');
   const handled = await handleCompareProductsParam(widget);
   debug('decorate: handled=', handled);
-  if (handled) return;
+  if (handled) {
+    const pathsAfter = getCompareProductsParamPaths();
+    if (pathsAfter.length < MAX_COMPARISON_PRODUCTS) {
+      await renderAddProductsGrid(widget, { excludePaths: pathsAfter });
+    }
+    return;
+  }
 
   if (getCompareProductsParam()) {
     removeWidgetWrapperLater(widget);
@@ -1000,7 +1240,7 @@ export default async function decorate(widget) {
 
   const comparisonPaths = getProductComparisonPaths();
   if (comparisonPaths.length === 0) {
-    removeWidgetWrapperLater(widget);
+    await renderAddProductsGrid(widget);
     return;
   }
 
@@ -1022,6 +1262,16 @@ export default async function decorate(widget) {
   }
 
   render(widget, slots, featuresBySeries || undefined);
+
+  if (slots.length < MAX_COMPARISON_PRODUCTS) {
+    await renderAddProductsGrid(widget, {
+      inSection: true,
+      excludePaths: comparisonPaths,
+    });
+  } else {
+    const addSection = widget.querySelector('.compare-products-add-section');
+    if (addSection) addSection.hidden = true;
+  }
 }
 
 // Load CSS

From 360633a7f375e5379e2ebbdcb42b9df2210e2ad6 Mon Sep 17 00:00:00 2001
From: David Nuescheler <david@nuescheler.ch>
Date: Sun, 22 Feb 2026 14:45:26 -0700
Subject: [PATCH 8/9] chore: refactor

---
 package.json                                  |   2 +-
 widgets/compare-products/compare-products.css |  21 +-
 widgets/compare-products/compare-products.js  | 383 +++++++++---------
 3 files changed, 213 insertions(+), 193 deletions(-)

diff --git a/package.json b/package.json
index 8d2390b0..1faf161b 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "description": "Starter project for Adobe Helix",
   "scripts": {
     "lint:js": "eslint .",
-    "lint:css": "stylelint blocks/**/*.css styles/*.css",
+    "lint:css": "stylelint blocks/**/*.css styles/*.css widgets/**/*.css",
     "lint": "npm run lint:js && npm run lint:css",
     "build:json": "npm run build:json:models && npm run build:json:definitions && npm run build:json:filters",
     "build:json:models": "merge-json-cli -i \"ue/models/component-models.json\" -o \"component-models.json\"",
diff --git a/widgets/compare-products/compare-products.css b/widgets/compare-products/compare-products.css
index 5be807b7..859d65fd 100644
--- a/widgets/compare-products/compare-products.css
+++ b/widgets/compare-products/compare-products.css
@@ -123,6 +123,16 @@
 }
 
 /* Add-a-product grid (Full Size Blenders from index.json) */
+.compare-products-products {
+  grid-column: 2 / -1;
+  display: grid;
+  grid-template-columns: repeat(var(--compare-cols, 2), 1fr);
+  gap: var(--spacing-400);
+  border-bottom: var(--border-m) solid var(--color-gray-300);
+  padding-bottom: var(--spacing-400);
+  margin-bottom: var(--spacing-300);
+}
+
 .compare-products-products:has(.compare-products-add-heading) {
   display: block;
   grid-column: 1 / -1;
@@ -154,17 +164,6 @@
   border-top: var(--border-m) solid var(--color-gray-300);
 }
 
-/* Product cards row – start after feature-label column so cards align with table data columns */
-.compare-products-products {
-  grid-column: 2 / -1;
-  display: grid;
-  grid-template-columns: repeat(var(--compare-cols, 2), 1fr);
-  gap: var(--spacing-400);
-  border-bottom: var(--border-m) solid var(--color-gray-300);
-  padding-bottom: var(--spacing-400);
-  margin-bottom: var(--spacing-300);
-}
-
 .compare-products-product {
   position: relative;
   display: flex;
diff --git a/widgets/compare-products/compare-products.js b/widgets/compare-products/compare-products.js
index 8e853143..67a52f6c 100644
--- a/widgets/compare-products/compare-products.js
+++ b/widgets/compare-products/compare-products.js
@@ -33,33 +33,31 @@ const FEATURE_KEYS = [
   'Dimensions (L × W × H)',
 ];
 
-/** Map page spec labels to our feature keys (for product specs lookup) */
-const SPEC_LABEL_MAP = {
-  Dimensions: 'Dimensions (L × W × H)',
-  Warranty: 'Warranty',
-};
+const FEATURES_BY_PRODUCT_PATH_DEFAULT = '/us/en_us/products/config/features-by-product.json';
 
-const FEATURES_BY_SERIES_PATH_DEFAULT = '/us/en_us/products/config/features-by-series.json';
+/** SVG path for checkmark icon in comparison table */
+const CHECK_ICON_PATH = 'M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293'
+  + 'a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z';
 
 /**
- * Get features-by-series path for current locale.
- * E.g. /ca/fr_ca/... -> /ca/fr_ca/products/config/...
+ * Get features-by-product config path for current locale.
+ * E.g. /ca/fr_ca/... -> /ca/fr_ca/products/config/features-by-product.json
  * @returns {string}
  */
-function getFeaturesBySeriesPath() {
+function getFeaturesByProductPath() {
   const match = window.location.pathname.match(/^(\/[^/]+\/[^/]+)\//);
   if (match) {
-    return `${match[1]}/products/config/features-by-series.json`;
+    return `${match[1]}/products/config/features-by-product.json`;
   }
-  return FEATURES_BY_SERIES_PATH_DEFAULT;
+  return FEATURES_BY_PRODUCT_PATH_DEFAULT;
 }
 
 /**
- * Fetch features-by-series config (same-origin only; no fcors).
- * @returns {Promise<Object|null>} Parsed JSON or null
+ * Fetch features-by-product config (same-origin only; no fcors).
+ * @returns {Promise<Object|null>} { data: Array<{ Path, Series, ... }> } or null
  */
-async function fetchFeaturesBySeries() {
-  const path = getFeaturesBySeriesPath();
+async function fetchFeaturesByProduct() {
+  const path = getFeaturesByProductPath();
   const url = new URL(path, window.location.origin).href;
   const resp = await fetch(url);
   if (!resp.ok) return null;
@@ -71,70 +69,121 @@ async function fetchFeaturesBySeries() {
 }
 
 /**
- * Get series name from product (for features-by-series lookup).
- * @param {Object} product - Product with .custom, .name
- * @returns {string} Series name or ''
+ * Normalize product path for lookup (strip hash/query, trailing slash, ensure leading slash).
+ * @param {string} path - Product path or URL
+ * @returns {string}
  */
-function getProductSeries(product) {
-  if (!product) return '';
-  const c = product.custom || {};
-  return (c.series || c.collection || product.name || '').trim();
+function normalizePathForLookup(path) {
+  if (!path || typeof path !== 'string') return '';
+  const p = path.replace(/#.*$/, '').replace(/\?.*$/, '').trim();
+  const slash = p.startsWith('/') ? p : `/${p}`;
+  const normalized = slash.endsWith('/') && slash.length > 1 ? slash.slice(0, -1) : slash;
+  return normalized.toLowerCase();
 }
 
 /**
- * Infer series from product path/title when they clearly indicate the series (avoids wrong page data).
- * @param {Object} product - Product with .path, .name, .url
- * @returns {string} Series name or ''
+ * Get the last path segment (slug) from a path.
+ * @param {string} path - e.g. /ca/fr_ca/products/vx1-and-pca-bundle-ca
+ * @returns {string} e.g. vx1-and-pca-bundle-ca
  */
-function inferSeriesFromPathAndTitle(product) {
-  if (!product) return '';
-  const path = (product.path || product.url || '').toLowerCase();
-  const title = (product.name || product.title || '').toLowerCase();
-  const s = `${path} ${title}`;
-  if (/\bascent\s*[-]?\s*x\s*\d|\bascent\s*x2|\bascent\s*x3|\bascent\s*x4|\bascent\s*x5/.test(s)) return 'Ascent X Series';
-  if (/\bventurist\b|v1200/.test(s)) return 'Venturist Series';
-  if (/\bpropel\b/.test(s)) return 'Propel Series';
-  if (/\bexplorian\b|e310|e320/.test(s)) return 'Explorian Series';
-  if (/\bascent\b|a2500|a3500/.test(s)) return 'Ascent Series';
-  if (/\b5200\b|legacy\b/.test(s)) return 'Legacy Series';
-  return '';
+function getPathSlug(path) {
+  const p = (path || '').trim().replace(/\/+$/, '');
+  if (!p) return '';
+  const segments = p.split('/').filter(Boolean);
+  return segments[segments.length - 1] || '';
+}
+
+/**
+ * Get the features row for a product path from features-by-product.data.
+ * Paths are expected to match the index; lookup is exact (normalized) with slug fallback.
+ * @param {Object} featuresByProduct - { data: Array<{ Path: string, Series: string, ... }> }
+ * @param {string} productPath - Product path (e.g. /ca/fr_ca/products/propel-series-510)
+ * @returns {Object|null} Row object or null
+ */
+function getFeaturesRowByPath(featuresByProduct, productPath) {
+  const { data } = featuresByProduct || {};
+  if (!data?.length || !productPath) return null;
+  const key = normalizePathForLookup(productPath);
+
+  const exact = data.find((row) => normalizePathForLookup(row.Path) === key);
+  if (exact) return exact;
+
+  const keySlug = getPathSlug(key).toLowerCase();
+  if (!keySlug) return null;
+  return data.find((row) => getPathSlug(row.Path).toLowerCase() === keySlug) || null;
 }
 
 /**
- * Normalize series name for matching: remove "Vitamix", trailing " Series", trim, strip ®™.
+ * Normalize series name for matching: remove Vitamix, Series/Séries, trim, strip ®™.
  * @param {string} s - Series or product name
  * @returns {string} Normalized string for comparison
  */
 function normalizeSeriesForMatch(s) {
   if (!s || typeof s !== 'string') return '';
-  const t = s
+  let t = s
     .replace(/\s*®\s*|\s*™\s*/gi, ' ')
     .replace(/\bVitamix\b/gi, '')
     .replace(/\s+series\s*$/gi, '')
     .replace(/\s+série\s*$/gi, '')
     .replace(/\s+/g, ' ')
     .trim();
+  // Strip leading "Séries" / "Series" so "Séries Ascent et Venturist" matches "venturist"
+  t = t.replace(/^\s*séries\s+/gi, '').replace(/^\s*series\s+/gi, '').trim();
   return t;
 }
 
+/** Map our feature keys to features-by-product.json column names (locale may vary) */
+const FEATURE_KEY_TO_JSON_KEY = {
+  'Blending Programs': 'Programmes de fusion',
+  'Variable Speed Control': 'Commande de vitesse variable',
+  'Touch Buttons': 'Boutons tactiles',
+  Pulse: 'Impulsion',
+  'Digital Timer': 'Minuteur numérique',
+  'Self-Detect Technology': "Technologie d'autodétection",
+  'Tamper Indicator': 'Indicateur de falsification',
+  'Plus 15 Second Button': '+15 secondes',
+  Warranty: 'Garantie',
+  'Dimensions (L × W × H)': 'Dimensions',
+  'Ce que vous pouvez fabriquer': 'Ce que vous pouvez fabriquer',
+};
+
 /**
- * Find features row for a series in features-by-series.data.
- * @param {Object} featuresBySeries - { data: Array<{ Series: string, ... }> }
- * @param {string} series - Series name from product
- * @returns {Object|null} Row object or null
+ * Find the value for a feature in a row by matching keys (exact, then by normalized match).
+ * Handles sheet keys that differ slightly (e.g. with ™ or "Dimensions (L × W × H)").
+ * @param {Object} featuresRow - Row from features-by-product.data
+ * @param {string} jsonKey - Preferred key (e.g. "Technologie d'autodétection", "Dimensions")
+ * @returns {*} Raw value or undefined
  */
-function getSeriesFeaturesRow(featuresBySeries, series) {
-  const { data } = featuresBySeries || {};
-  if (!data?.length || !series) return null;
-  const norm = normalizeSeriesForMatch(series);
-  if (!norm) return null;
-  const normLower = norm.toLowerCase();
-  const exact = data.find((row) => normalizeSeriesForMatch(row.Series).toLowerCase() === normLower);
-  if (exact) return exact;
-  return data.find((row) => {
-    const rowNorm = normalizeSeriesForMatch(row.Series).toLowerCase();
-    return rowNorm === normLower || rowNorm.includes(normLower) || normLower.includes(rowNorm);
-  }) || null;
+function getFeatureValueFromRow(featuresRow, jsonKey) {
+  if (!featuresRow || typeof featuresRow !== 'object') return undefined;
+  const exact = featuresRow[jsonKey];
+  if (exact !== undefined && exact !== null && String(exact).trim() !== '') return exact;
+  const norm = (s) => String(s || '').replace(/\s*®\s*|\s*™\s*/gi, ' ').toLowerCase().trim();
+  const targetNorm = norm(jsonKey);
+  if (!targetNorm) return undefined;
+  const rowKey = Object.keys(featuresRow).find((k) => {
+    const kn = norm(k);
+    return kn === targetNorm || kn.startsWith(targetNorm) || targetNorm.startsWith(kn);
+  });
+  return rowKey != null ? featuresRow[rowKey] : undefined;
+}
+
+/**
+ * Get display value from a features-by-product row for a feature key.
+ * :check: -> 'Yes', - or empty -> '—', else verbatim.
+ * @param {Object} featuresRow - Row from features-by-product.data
+ * @param {string} featureKey - Our feature key (e.g. 'Blending Programs')
+ * @returns {string}
+ */
+function getFeatureDisplayFromRow(featuresRow, featureKey) {
+  if (!featuresRow) return '—';
+  const jsonKey = FEATURE_KEY_TO_JSON_KEY[featureKey] ?? featureKey;
+  const raw = getFeatureValueFromRow(featuresRow, jsonKey) ?? featuresRow[featureKey];
+  if (raw == null || String(raw).trim() === '') return '—';
+  const s = String(raw).trim();
+  if (s === ':check:') return 'Yes';
+  if (s === '-') return '—';
+  return s;
 }
 
 /**
@@ -223,21 +272,9 @@ const ROW_LABEL_TO_FEATURE = {
   dimensions: 'Dimensions (L × W × H)',
   couleurs: 'Colors',
   colors: 'Colors',
+  'ce que vous pouvez fabriquer': 'Ce que vous pouvez fabriquer',
 };
 
-/** Feature keys that use series-level data from the original table; do not replace cell content. */
-const SERIES_INHERITED_FEATURE_KEYS = new Set([
-  'Blending Programs',
-  'Variable Speed Control',
-  'Touch Buttons',
-  'Pulse',
-  'Digital Timer',
-  'Self-Detect Technology',
-  'Tamper Indicator',
-  'Plus 15 Second Button',
-  'Dimensions (L × W × H)',
-]);
-
 const AEM_NETWORK_ORIGIN = 'https://main--vitamix--aemsites.aem.network';
 
 /**
@@ -468,61 +505,10 @@ async function fetchProduct(path) {
     return { product: null, errorStatus: status };
   }
   const product = parseProductFromPage(html, path);
-  debug('fetchProduct: parsed', path, 'product=', product ? { name: product.name, series: getProductSeries(product) } : null);
+  debug('fetchProduct: parsed', path, 'product=', product ? { name: product.name } : null);
   return { product, errorStatus: product ? undefined : status };
 }
 
-/**
- * Get feature value for a product (page specs, then custom fallbacks, then features-by-series).
- * @param {Object} product - Normalized product (has .specs from page)
- * @param {string} key - Feature label (e.g. 'Series', 'Warranty')
- * @param {Object} [featuresBySeries] - Optional { data } from features-by-series.json
- * @returns {string} Display value
- */
-function getFeatureValue(product, key, featuresBySeries) {
-  const specs = product?.specs || {};
-  const custom = product?.custom || {};
-
-  const mapKey = SPEC_LABEL_MAP[key] || key;
-  const direct = specs[key] ?? specs[mapKey];
-
-  if (key === 'Dimensions (L × W × H)') {
-    const seriesRow = getSeriesFeaturesRow(featuresBySeries, getProductSeries(product));
-    if (seriesRow) {
-      const sheetVal = seriesRow[key];
-      if (sheetVal != null && String(sheetVal).trim() !== '') return String(sheetVal).trim();
-    }
-    if (direct) return direct;
-    return '—';
-  }
-
-  if (key === 'Series') {
-    const seriesRow = getSeriesFeaturesRow(featuresBySeries, getProductSeries(product));
-    if (seriesRow?.Series) return String(seriesRow.Series).trim();
-    return custom.series || custom.collection || '—';
-  }
-
-  if (direct) return direct;
-
-  if (key === 'Warranty') {
-    const opts = custom.options;
-    if (Array.isArray(opts) && opts.length > 0) {
-      const name = opts[0].name || '';
-      const match = name.match(/(\d+)\s*yr|(\d+)\s*year/i);
-      if (match) return `${match[1] || match[2]} Years`;
-      if (name) return name;
-    }
-  }
-
-  const seriesRow = getSeriesFeaturesRow(featuresBySeries, getProductSeries(product));
-  if (seriesRow) {
-    const sheetVal = seriesRow[key];
-    if (sheetVal != null && String(sheetVal).trim() !== '') return String(sheetVal).trim();
-  }
-
-  return '—';
-}
-
 /**
  * Format price for display.
  * @param {Object} price - { currency, regular, final }
@@ -565,6 +551,17 @@ function findColumnIndexForSeries(container, series) {
   debug('findColumnIndexForSeries: series=', series, 'targetNorm=', targetNorm, 'cellCount=', bodyCells.length);
   if (!targetNorm) return 1;
 
+  // Explicit match for "venturist" -> "Séries Ascent et Venturist" column (column 2)
+  if (targetNorm === 'venturist' && theadRow) {
+    for (let i = 1; i < theadRow.children.length; i += 1) {
+      const thText = (theadRow.children[i]?.textContent || '').toLowerCase();
+      if (thText.includes('venturist') && !thText.includes('ascent x')) {
+        debug('findColumnIndexForSeries: venturist match at column', i, 'thText=', thText.slice(0, 50));
+        return i;
+      }
+    }
+  }
+
   const isAscentNonX = targetNorm === 'ascent' || (targetNorm.startsWith('ascent') && !targetNorm.includes('x'));
   const isAscentX = targetNorm.includes('ascent') && targetNorm.includes('x');
   const isVenturist = targetNorm.includes('venturist');
@@ -581,39 +578,18 @@ function findColumnIndexForSeries(container, series) {
       || cellNorm.includes(targetNorm)
       || targetNorm.includes(cellNorm)
     );
-    if (!matches) continue;
-
-    if (isAscentNonX && cellNorm.includes('ascent x')) continue;
-    if (isAscentX && cellNorm.includes('venturist')) continue;
-    if (isVenturist && cellNorm.includes('ascent x')) continue;
-
-    debug('findColumnIndexForSeries: match at column', i, 'cellText=', columnText.slice(0, 60));
-    return i;
+    if (matches
+        && !(isAscentNonX && cellNorm.includes('ascent x'))
+        && !(isAscentX && cellNorm.includes('venturist'))
+        && !(isVenturist && cellNorm.includes('ascent x'))) {
+      debug('findColumnIndexForSeries: match at column', i, 'cellText=', columnText.slice(0, 60));
+      return i;
+    }
   }
   debug('findColumnIndexForSeries: no match, using column 1');
   return 1;
 }
 
-/**
- * Get the column header label for a column index (same source as findColumnIndexForSeries).
- * @param {HTMLElement} container - .widget-container
- * @param {number} columnIndex - Column index (0 = row header, 1 = first product column)
- * @returns {string} Column label or ''
- */
-function getColumnLabel(container, columnIndex) {
-  const tables = container.querySelectorAll('.table.comparison .table-comparison-scroll table');
-  const firstTable = tables[0];
-  const firstDataRow = firstTable?.querySelector('tbody tr');
-  const headerTable = tables[1] || firstTable;
-  const theadRow = headerTable?.querySelector('thead tr');
-  let text = (firstDataRow?.children[columnIndex]?.textContent || '').trim();
-  if (theadRow?.children[columnIndex]) {
-    const thText = (theadRow.children[columnIndex].textContent || '').trim();
-    if (thText) text = `${thText} ${text}`.trim() || text;
-  }
-  return text.trim();
-}
-
 /**
  * Create color swatches DOM for comparison table (same structure as table block).
  * @param {Object} product - Product with options[].values (color names)
@@ -681,14 +657,22 @@ function snapshotTableContent(container) {
 
 /**
  * Replace one column in all comparison tables with the specific product's data.
- * Series-inherited feature rows use the table's series column content (no features-by-series.json).
+ * First table: from features-by-product.json; others: copy from series column.
  * @param {HTMLElement} container - .widget-container (section that has tables + widget)
  * @param {number} columnIndex - Column index (0 = row header, 1 = first product)
  * @param {Object} product - Parsed product from fetchProduct
- * @param {number} [sourceSeriesColumnIndex] - Product's series column; when columnIndex differs, copy feature cells from this column
- * @param {Array<Array<string[]>>} [originalContent] - Snapshot from snapshotTableContent; used so we clone from unmodified series column
+ * @param {number} [sourceSeriesColumnIndex] - For tables 1+: column index to copy from
+ * @param {Array<Array<string[]>>} [originalContent] - Snapshot; for tables 1+
+ * @param {Object} [featuresByProduct] - { data } from features-by-product.json
  */
-function replaceColumnWithProduct(container, columnIndex, product, sourceSeriesColumnIndex, originalContent) {
+function replaceColumnWithProduct(
+  container,
+  columnIndex,
+  product,
+  sourceSeriesColumnIndex,
+  originalContent,
+  featuresByProduct,
+) {
   const tables = container.querySelectorAll('.table.comparison .table-comparison-scroll table');
   if (!tables.length) return;
 
@@ -782,19 +766,16 @@ function replaceColumnWithProduct(container, columnIndex, product, sourceSeriesC
         return;
       }
 
-      if (sourceSeriesColumnIndex != null && sourceSeriesColumnIndex !== columnIndex && originalContent) {
-        const rowSnapshot = originalContent[tableIndex]?.[rowIndex];
-        const cloned = rowSnapshot?.[sourceSeriesColumnIndex];
-        if (cloned != null) cell.innerHTML = cloned;
-        return;
-      }
-
-      if (featureKey && SERIES_INHERITED_FEATURE_KEYS.has(featureKey)) return;
-
-      if (featureKey && featureKey !== 'Colors') {
-        const value = getFeatureValue(product, featureKey, undefined);
+      // Feature rows (from any table): use features-by-product when available
+      // Use for all tables so duplicated tables (e.g. sticky header clone) get correct data
+      if (featureKey && featuresByProduct?.data) {
+        const featuresRow = getFeaturesRowByPath(featuresByProduct, product.path);
+        const value = getFeatureDisplayFromRow(featuresRow, featureKey);
         if (value === 'Yes') {
-          cell.innerHTML = '<p><span class="icon icon-check"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20"><title>Check</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg></span></p>';
+          const checkHtml = '<p><span class="icon icon-check"><svg xmlns="http://www.w3.org/2000/svg" '
+            + 'viewBox="0 0 20 20" fill="currentColor" width="20" height="20"><title>Check</title>'
+            + `<path fill-rule="evenodd" d="${CHECK_ICON_PATH}" clip-rule="evenodd"></path></svg></span></p>`;
+          cell.innerHTML = checkHtml;
         } else {
           cell.textContent = value || '—';
           if (!cell.querySelector('p')) {
@@ -804,6 +785,17 @@ function replaceColumnWithProduct(container, columnIndex, product, sourceSeriesC
             cell.appendChild(p);
           }
         }
+        return;
+      }
+
+      // Rows without a feature key (e.g. compatibility): copy from series column in DOM
+      const copyFromSeries = sourceSeriesColumnIndex != null
+        && sourceSeriesColumnIndex !== columnIndex
+        && originalContent;
+      if (copyFromSeries) {
+        const rowSnapshot = originalContent[tableIndex]?.[rowIndex];
+        const cloned = rowSnapshot?.[sourceSeriesColumnIndex];
+        if (cloned != null) cell.innerHTML = cloned;
       }
     });
   });
@@ -873,8 +865,10 @@ async function handleCompareProductsParam(widget) {
   );
   if (!container) return false;
 
-  debug('handleCompareProductsParam: fetching', paths.length, 'products');
-  const results = await Promise.all(paths.map((path) => fetchProduct(path)));
+  const [featuresByProduct, ...results] = await Promise.all([
+    fetchFeaturesByProduct(),
+    ...paths.map((path) => fetchProduct(path)),
+  ]);
   debug('handleCompareProductsParam: results=', results.map((r, i) => ({ path: paths[i], hasProduct: !!r.product, errorStatus: r.errorStatus })));
 
   const originalContent = snapshotTableContent(container);
@@ -895,11 +889,29 @@ async function handleCompareProductsParam(widget) {
       debug('handleCompareProductsParam: skip path (no column left)', paths[i]);
       return;
     }
-    const series = inferSeriesFromPathAndTitle(product) || getProductSeries(product);
+    const featuresRow = getFeaturesRowByPath(featuresByProduct, product.path);
+    const series = featuresRow?.Series ?? '';
     const sourceSeriesColumnIndex = findColumnIndexForSeries(container, series);
     usedColumnIndices.add(columnIndex);
-    debug('handleCompareProductsParam: replace column', 'path=', paths[i], 'series=', series, 'columnIndex=', columnIndex, 'sourceSeriesColumn=', sourceSeriesColumnIndex);
-    replaceColumnWithProduct(container, columnIndex, product, sourceSeriesColumnIndex, originalContent);
+    debug(
+      'handleCompareProductsParam: replace column',
+      'path=',
+      paths[i],
+      'series=',
+      series,
+      'columnIndex=',
+      columnIndex,
+      'sourceSeriesColumn=',
+      sourceSeriesColumnIndex,
+    );
+    replaceColumnWithProduct(
+      container,
+      columnIndex,
+      product,
+      sourceSeriesColumnIndex,
+      originalContent,
+      featuresByProduct,
+    );
     anyReplaced = true;
   });
 
@@ -1038,11 +1050,12 @@ function buildProductCard(product, index, onRemove) {
 
 /**
  * Build features table body (feature rows with one cell per product/slot).
+ * Uses features-by-product.json by path; product still used for name/colors when needed.
  * @param {{ path: string, product: Object|null }[]} slots - One slot per requested path
  * @param {HTMLElement} tableEl - Table container
- * @param {Object} [featuresBySeries] - Optional { data } from features-by-series.json for fallbacks
+ * @param {Object} [featuresByProduct] - Optional { data } from features-by-product.json
  */
-function buildFeaturesTable(slots, tableEl, featuresBySeries) {
+function buildFeaturesTable(slots, tableEl, featuresByProduct) {
   const columnCount = slots.length;
   tableEl.style.setProperty('--compare-cols', String(columnCount));
   tableEl.innerHTML = '';
@@ -1057,9 +1070,17 @@ function buildFeaturesTable(slots, tableEl, featuresBySeries) {
     slots.forEach((slot) => {
       const cell = document.createElement('div');
       cell.className = `compare-products-features-cell ${rowIndex % 2 ? 'row-odd' : 'row-even'}`;
-      const value = slot.product
-        ? getFeatureValue(slot.product, key, featuresBySeries)
-        : '—';
+      let value = '—';
+      if (slot.product && featuresByProduct?.data) {
+        const featuresRow = getFeaturesRowByPath(featuresByProduct, slot.path);
+        if (key === 'Series') {
+          value = slot.product.name || featuresRow?.Series || '—';
+        } else {
+          value = getFeatureDisplayFromRow(featuresRow, key);
+        }
+      } else if (slot.product) {
+        value = '—';
+      }
       if (value === 'Yes') {
         const check = document.createElement('span');
         check.className = 'compare-products-features-cell-check';
@@ -1185,9 +1206,9 @@ async function renderAddProductsGrid(widget, options = {}) {
  * Render the full compare view: product cards + features table.
  * @param {HTMLElement} widget - Widget root
  * @param {{ path: string, product: Object|null }[]} slots - One slot per requested path
- * @param {Object} [featuresBySeries] - Optional { data } from features-by-series.json for fallbacks
+ * @param {Object} [featuresByProduct] - Optional { data } from features-by-product.json
  */
-function render(widget, slots, featuresBySeries) {
+function render(widget, slots, featuresByProduct) {
   const productsContainer = widget.querySelector('.compare-products-products');
   const featuresTable = widget.querySelector('.compare-products-features-table');
   if (!productsContainer || !featuresTable) return;
@@ -1201,7 +1222,7 @@ function render(widget, slots, featuresBySeries) {
       widget.dispatchEvent(new CustomEvent('compare-products-empty'));
       return;
     }
-    render(widget, next, featuresBySeries);
+    render(widget, next, featuresByProduct);
   };
 
   slots.forEach((slot, index) => {
@@ -1211,7 +1232,7 @@ function render(widget, slots, featuresBySeries) {
     productsContainer.appendChild(card);
   });
 
-  buildFeaturesTable(slots, featuresTable, featuresBySeries);
+  buildFeaturesTable(slots, featuresTable, featuresByProduct);
 }
 
 /**
@@ -1244,8 +1265,8 @@ export default async function decorate(widget) {
     return;
   }
 
-  const [featuresBySeries, ...slotResults] = await Promise.all([
-    fetchFeaturesBySeries(),
+  const [featuresByProduct, ...slotResults] = await Promise.all([
+    fetchFeaturesByProduct(),
     ...comparisonPaths.map((path) => fetchProduct(path)),
   ]);
 
@@ -1261,7 +1282,7 @@ export default async function decorate(widget) {
     return;
   }
 
-  render(widget, slots, featuresBySeries || undefined);
+  render(widget, slots, featuresByProduct || undefined);
 
   if (slots.length < MAX_COMPARISON_PRODUCTS) {
     await renderAddProductsGrid(widget, {

From 102ca3e6f642be27da12999f13d9be788cefc6dc Mon Sep 17 00:00:00 2001
From: David Nuescheler <david@nuescheler.ch>
Date: Sun, 22 Feb 2026 14:59:42 -0700
Subject: [PATCH 9/9] chore: internationalize

---
 widgets/compare-products/compare-products.js | 118 +++++++++++++++----
 1 file changed, 93 insertions(+), 25 deletions(-)

diff --git a/widgets/compare-products/compare-products.js b/widgets/compare-products/compare-products.js
index 67a52f6c..7ac9dda7 100644
--- a/widgets/compare-products/compare-products.js
+++ b/widgets/compare-products/compare-products.js
@@ -1,4 +1,5 @@
 import { loadCSS, toClassName } from '../../scripts/aem.js';
+import { formatPrice as formatPriceValue, getLocaleAndLanguage } from '../../scripts/scripts.js';
 import { lookupProducts } from '../../blocks/plp/plp.js';
 
 const DEBUG = typeof window !== 'undefined' && (
@@ -35,6 +36,58 @@ const FEATURE_KEYS = [
 
 const FEATURES_BY_PRODUCT_PATH_DEFAULT = '/us/en_us/products/config/features-by-product.json';
 
+/** Merged Key->Text from translations + placeholders (locale config) */
+let comparisonTranslations = {};
+
+/**
+ * Get products config base path for current locale (e.g. /ca/fr_ca/products/config).
+ * @returns {string}
+ */
+function getConfigBasePath() {
+  const match = window.location.pathname.match(/^(\/[^/]+\/[^/]+)\//);
+  if (match) return `${match[1]}/products/config`;
+  return '/us/en_us/products/config';
+}
+
+/**
+ * Load translations + placeholders from config (Key/Text sheets); set comparisonTranslations.
+ * Call once before rendering; safe to call multiple times (overwrites).
+ */
+async function loadComparisonTranslations() {
+  const base = getConfigBasePath();
+  const urls = [
+    `${base}/translations.json`,
+    `${base}/placeholders.json`,
+  ];
+  const map = {};
+  await Promise.all(urls.map(async (url) => {
+    try {
+      const resp = await fetch(new URL(url, window.location.origin).href);
+      if (!resp.ok) return;
+      const json = await resp.json();
+      const data = json?.data;
+      if (Array.isArray(data)) {
+        data.forEach((entry) => {
+          if (entry?.Key != null) map[entry.Key] = entry.Text ?? entry.Key;
+        });
+      }
+    } catch {
+      // ignore
+    }
+  }));
+  comparisonTranslations = map;
+}
+
+/**
+ * Translate a key if present in loaded translations/placeholders; otherwise return key.
+ * @param {string} key - English (or source) string
+ * @returns {string}
+ */
+function t(key) {
+  if (!key || typeof key !== 'string') return key;
+  return comparisonTranslations[key] ?? key;
+}
+
 /** SVG path for checkmark icon in comparison table */
 const CHECK_ICON_PATH = 'M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293'
   + 'a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z';
@@ -120,7 +173,7 @@ function getFeaturesRowByPath(featuresByProduct, productPath) {
  */
 function normalizeSeriesForMatch(s) {
   if (!s || typeof s !== 'string') return '';
-  let t = s
+  let norm = s
     .replace(/\s*®\s*|\s*™\s*/gi, ' ')
     .replace(/\bVitamix\b/gi, '')
     .replace(/\s+series\s*$/gi, '')
@@ -128,8 +181,8 @@ function normalizeSeriesForMatch(s) {
     .replace(/\s+/g, ' ')
     .trim();
   // Strip leading "Séries" / "Series" so "Séries Ascent et Venturist" matches "venturist"
-  t = t.replace(/^\s*séries\s+/gi, '').replace(/^\s*series\s+/gi, '').trim();
-  return t;
+  norm = norm.replace(/^\s*séries\s+/gi, '').replace(/^\s*series\s+/gi, '').trim();
+  return norm;
 }
 
 /** Map our feature keys to features-by-product.json column names (locale may vary) */
@@ -181,7 +234,7 @@ function getFeatureDisplayFromRow(featuresRow, featureKey) {
   const raw = getFeatureValueFromRow(featuresRow, jsonKey) ?? featuresRow[featureKey];
   if (raw == null || String(raw).trim() === '') return '—';
   const s = String(raw).trim();
-  if (s === ':check:') return 'Yes';
+  if (s === ':check:') return t('Yes');
   if (s === '-') return '—';
   return s;
 }
@@ -509,18 +562,28 @@ async function fetchProduct(path) {
   return { product, errorStatus: product ? undefined : status };
 }
 
+/** Placeholders for locale-aware price formatting (languageCode + currencyCode). */
+function getPricePlaceholders() {
+  const { locale, language } = getLocaleAndLanguage();
+  return {
+    languageCode: language,
+    currencyCode: locale === 'ca' ? 'CAD' : 'USD',
+  };
+}
+
 /**
- * Format price for display.
+ * Format price for display using central Intl-based formatter (e.g. "50 $" for fr-CA).
  * @param {Object} price - { currency, regular, final }
  * @returns {{ now: string, save: string|null }}
  */
 function formatPrice(price) {
   if (!price || price.final == null) return { now: '', save: null };
-  const now = `$${parseFloat(price.final).toFixed(2)}`;
-  const regular = parseFloat(price.regular);
+  const ph = getPricePlaceholders();
   const finalVal = parseFloat(price.final);
+  const regular = parseFloat(price.regular);
+  const now = formatPriceValue(finalVal, ph);
   const save = regular > finalVal
-    ? `Save $${(regular - finalVal).toFixed(2)} | Was $${regular.toFixed(2)}`
+    ? `${t('Save')} ${formatPriceValue(regular - finalVal, ph)} | ${t('Was')} ${formatPriceValue(regular, ph)}`
     : null;
   return { now, save };
 }
@@ -682,8 +745,10 @@ function replaceColumnWithProduct(
   const imageUrl = getProductImageUrl(product, 0);
   const priceOrVariant = product?.price || product?.variants?.[0]?.price;
   const { now: priceNow, save: priceSave } = formatPrice(priceOrVariant);
-  const priceText = priceSave ? `Now ${priceNow} | ${priceSave}` : `From ${priceNow}`;
-  const learnMoreText = 'En savoir plus'; // could be localized
+  const priceText = priceSave
+    ? `${t('Now')} ${priceNow} | ${priceSave}`
+    : `${t('Starting at')} ${priceNow}`;
+  const learnMoreText = t('En savoir plus');
 
   tables.forEach((table, tableIndex) => {
     const theadRow = table.querySelector('thead tr');
@@ -698,7 +763,7 @@ function replaceColumnWithProduct(
         const removeBtn = document.createElement('button');
         removeBtn.type = 'button';
         removeBtn.className = 'compare-products-remove-from-comparison';
-        removeBtn.setAttribute('aria-label', `Remove ${product.name || 'product'} from comparison`);
+        removeBtn.setAttribute('aria-label', `${t('Remove')} ${product.name || t('product')} ${t('from comparison')}`);
         removeBtn.textContent = '×';
         removeBtn.addEventListener('click', () => {
           const current = getCompareProductsParamPaths();
@@ -773,7 +838,7 @@ function replaceColumnWithProduct(
         const value = getFeatureDisplayFromRow(featuresRow, featureKey);
         if (value === 'Yes') {
           const checkHtml = '<p><span class="icon icon-check"><svg xmlns="http://www.w3.org/2000/svg" '
-            + 'viewBox="0 0 20 20" fill="currentColor" width="20" height="20"><title>Check</title>'
+            + `viewBox="0 0 20 20" fill="currentColor" width="20" height="20"><title>${t('Check')}</title>`
             + `<path fill-rule="evenodd" d="${CHECK_ICON_PATH}" clip-rule="evenodd"></path></svg></span></p>`;
           cell.innerHTML = checkHtml;
         } else {
@@ -950,19 +1015,19 @@ function buildPlaceholderCard(path, index, onRemove, errorStatus) {
   const removeBtn = document.createElement('button');
   removeBtn.type = 'button';
   removeBtn.className = 'button button close compare-products-product-remove';
-  removeBtn.setAttribute('aria-label', 'Remove from comparison');
+  removeBtn.setAttribute('aria-label', t('Remove from comparison'));
   removeBtn.textContent = '×';
   removeBtn.addEventListener('click', () => onRemove(index));
 
   const msg = document.createElement('p');
   msg.className = 'compare-products-product-placeholder-msg';
   msg.textContent = errorStatus === 404
-    ? 'Product not found (404).'
-    : 'Could not load this product.';
+    ? t('Product not found (404).')
+    : t('Could not load this product.');
 
   const link = document.createElement('a');
   link.href = path.startsWith('http') ? path : new URL(path, window.location.origin).href;
-  link.textContent = 'Try opening the product page';
+  link.textContent = t('View Details');
   link.className = 'button link';
 
   col.append(removeBtn, msg, link);
@@ -984,7 +1049,7 @@ function buildProductCard(product, index, onRemove) {
   const removeBtn = document.createElement('button');
   removeBtn.type = 'button';
   removeBtn.className = 'button button close compare-products-product-remove';
-  removeBtn.setAttribute('aria-label', `Remove ${product.name} from comparison`);
+  removeBtn.setAttribute('aria-label', `${t('Remove')} ${product.name || t('product')} ${t('from comparison')}`);
   removeBtn.textContent = '×';
   removeBtn.addEventListener('click', () => onRemove(index));
 
@@ -1030,7 +1095,7 @@ function buildProductCard(product, index, onRemove) {
   priceEl.className = 'compare-products-product-price';
   const price = product?.price || variants[0]?.price;
   const { now, save } = formatPrice(price);
-  priceEl.innerHTML = `<span class="compare-products-product-price-now">Now ${now}</span>`;
+  priceEl.innerHTML = `<span class="compare-products-product-price-now">${t('Now')} ${now}</span>`;
   if (save) {
     const saveEl = document.createElement('span');
     saveEl.className = 'compare-products-product-price-save';
@@ -1042,7 +1107,7 @@ function buildProductCard(product, index, onRemove) {
   cta.className = 'button emphasis';
   const { path: productPath, url: productUrl } = product || {};
   cta.href = productPath || productUrl || '#';
-  cta.textContent = 'VIEW DETAILS';
+  cta.textContent = t('View Details').toUpperCase();
 
   col.append(removeBtn, imgWrap, colorsWrap, nameEl, priceEl, cta);
   return col;
@@ -1065,7 +1130,7 @@ function buildFeaturesTable(slots, tableEl, featuresByProduct) {
     row.className = `compare-products-features-row ${rowIndex % 2 ? 'row-odd' : 'row-even'}`;
     const nameCell = document.createElement('div');
     nameCell.className = `compare-products-features-cell feature-name ${rowIndex % 2 ? 'row-odd' : 'row-even'}`;
-    nameCell.textContent = key;
+    nameCell.textContent = t(key);
     row.appendChild(nameCell);
     slots.forEach((slot) => {
       const cell = document.createElement('div');
@@ -1119,13 +1184,15 @@ function buildAddProductCard(product) {
 
   const priceEl = document.createElement('div');
   priceEl.className = 'compare-products-product-price';
-  const price = product.price != null ? `$${Number(product.price).toFixed(2)}` : '';
+  const price = product.price != null
+    ? formatPriceValue(Number(product.price), getPricePlaceholders())
+    : '';
   priceEl.innerHTML = price ? `<span class="compare-products-product-price-now">${price}</span>` : '';
 
   const addBtn = document.createElement('button');
   addBtn.type = 'button';
   addBtn.className = 'button emphasis compare-products-add-to-comparison';
-  addBtn.textContent = 'Add to comparison';
+  addBtn.textContent = t('Add to comparison');
   addBtn.addEventListener('click', () => {
     const current = getCompareProductsParamPaths();
     const next = [...current, product.url].filter(Boolean);
@@ -1173,7 +1240,7 @@ async function renderAddProductsGrid(widget, options = {}) {
 
   const heading = document.createElement('h2');
   heading.className = 'compare-products-add-heading';
-  heading.textContent = 'Add a product to compare';
+  heading.textContent = t('Add a product to compare');
   container.appendChild(heading);
 
   let products = [];
@@ -1190,8 +1257,8 @@ async function renderAddProductsGrid(widget, options = {}) {
     const empty = document.createElement('p');
     empty.className = 'compare-products-add-empty';
     empty.textContent = inSection && products.length > 0
-      ? 'All selected. Remove one to add another.'
-      : 'No countertop blenders found.';
+      ? t('All selected. Remove one to add another.')
+      : t('No countertop blenders found.');
     container.appendChild(empty);
     return;
   }
@@ -1242,6 +1309,7 @@ function render(widget, slots, featuresByProduct) {
  * @param {HTMLElement} widget - Widget root
  */
 export default async function decorate(widget) {
+  await loadComparisonTranslations();
   const paths = getCompareProductsParamPaths();
   debug('decorate: compare-products paths=', paths.length ? paths : 'none');
   const handled = await handleCompareProductsParam(widget);