feat: fix offer urls and add variant overrides

src/content/adobe-commerce.js

@@ -96,7 +96,7 @@ async function fetchVariants(sku, config) {
   try {
     const json = await resp.json();
     const { variants } = json?.data?.variants ?? {};
-    return variantsAdapter(variants);
+    return variantsAdapter(config, variants);
   } catch (e) {
     console.error('failed to parse variants: ', e);
     throw errorWithResponse(500, 'failed to parse variants response');
@@ -173,7 +173,7 @@ export async function handle(ctx, config) {
     fetchProduct(sku.toUpperCase(), config),
     fetchVariants(sku.toUpperCase(), config),
   ]);
-  const html = HTML_TEMPLATE(product, variants);
+  const html = HTML_TEMPLATE(config, product, variants);
   return new Response(html, {
     status: 200,
     headers: {

src/content/handler.js

@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+import { matchConfigPath } from '../utils/product.js';
 import { errorResponse } from '../utils/http.js';
 import { handle as handleAdobeCommerce } from './adobe-commerce.js';
 import { handle as handleHelixCommerce } from './helix-commerce.js';
@@ -30,9 +31,28 @@ export default async function contentHandler(ctx, config) {
     return errorResponse(400, 'invalid config for tenant site (missing pageType)');
   }
 
+  const { pathname } = ctx.url;
+  const productPath = pathname.includes('/content/product')
+    ? pathname.split('/content/product')[1]
+    : null;
+
+  if (productPath) {
+    const matchedPath = matchConfigPath(config, productPath);
+    const matchedPathConfig = config.confMap && config.confMap[matchedPath]
+      ? config.confMap[matchedPath]
+      : null;
+    if (matchedPathConfig) {
+      config.matchedPath = matchedPath;
+      config.matchedPathConfig = matchedPathConfig;
+    } else {
+      return errorResponse(400, 'No matching configuration for product path');
+    }
+  } else {
+    return errorResponse(400, 'invalid product path');
+  }
+
   if (config.catalogSource === 'helix') {
     return handleHelixCommerce(ctx, config);
   }
-
   return handleAdobeCommerce(ctx, config);
 }

src/content/queries/cs-variants.js

@@ -16,7 +16,7 @@ import { gql } from '../../utils/product.js';
  * @param {any} variants
  * @returns {Variant[]}
  */
-export const adapter = (variants) => variants.map(({ selections, product }) => {
+export const adapter = (config, variants) => variants.map(({ selections, product }) => {
   const minPrice = product.priceRange?.minimum ?? product.price;
   const maxPrice = product.priceRange?.maximum ?? product.price;
 
@@ -47,6 +47,13 @@ export const adapter = (variants) => variants.map(({ selections, product }) => {
     },
     selections: selections ?? [],
   };
+
+  if (config.attributeOverrides?.variant) {
+    Object.entries(config.attributeOverrides.variant).forEach(([key, value]) => {
+      variant[key] = product.attributes?.find((attr) => attr.name === value)?.value;
+    });
+  }
+
   return variant;
 });
 

src/templates/html.js

@@ -43,6 +43,7 @@ const priceRange = (min, max) => (min !== max ? ` (${min} - ${max})` : '');
  * @returns {string}
  */
 export const renderDocumentMetaTags = (product) => /* html */ `
+  <meta charset="UTF-8">
   <title>${product.metaTitle || product.name}</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   ${metaProperty('description', product.metaDescription)}
@@ -111,20 +112,22 @@ export const renderHelixDependencies = () => /* html */ `
  * @param {Variant[]} variants
  * @returns {string}
  */
-export const renderJSONLD = (product, variants) => /* html */ `
+export const renderJSONLD = (config, product, variants) => /* html */ `
   <script type="application/ld+json">
-    ${JSON_LD_TEMPLATE(product, variants)}
+    ${JSON_LD_TEMPLATE(config, product, variants)}
   </script>
 `;
 
 /**
  * Create the head tags
+ * @param {Config} config
  * @param {Product} product
  * @param {Variant[]} variants
  * @param {Object} [options]
  * @returns {string}
  */
 export const renderHead = (
+  config,
   product,
   variants,
   {
@@ -145,7 +148,7 @@ export const renderHead = (
       ${twitterMetaTags(product, image)}
       ${commerceMetaTags(product)}
       ${helixDependencies()}
-      ${JSONLD(product, variants)}
+      ${JSONLD(config, product, variants)}
     </head>
   `;
 };
@@ -302,7 +305,7 @@ const renderProductVariantsAttributes = (variants) => /* html */ `
  * @param {Variant[]} variants
  * @returns {string}
  */
-export default (product, variants) => {
+export default (config, product, variants) => {
   const {
     name,
     description,
@@ -314,7 +317,7 @@ export default (product, variants) => {
   return /* html */`
     <!DOCTYPE html>
     <html>
-      ${renderHead(product, variants)}
+      ${renderHead(config, product, variants)}
       <body>
         <header></header>
         <main>

src/templates/json-ld.js

@@ -10,17 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
-import { findProductImage, pruneUndefined } from '../utils/product.js';
+import { constructProductUrl, findProductImage, pruneUndefined } from '../utils/product.js';
 
 /**
  * @param {Product} product
  * @param {Variant[]} variants
  * @returns {string}
  */
-export default (product, variants) => {
+export default (config, product, variants) => {
   const {
     sku,
-    url,
     name,
     metaDescription,
     images,
@@ -31,12 +30,13 @@ export default (product, variants) => {
     prices,
   } = product;
 
+  const productUrl = constructProductUrl(config, product);
   const image = images?.[0]?.url ?? findProductImage(product, variants)?.url;
   const brandName = attributes?.find((attr) => attr.name === 'brand')?.value;
   return JSON.stringify(pruneUndefined({
     '@context': 'http://schema.org',
     '@type': 'Product',
-    '@id': url,
+    '@id': productUrl,
     name,
     sku,
     description: metaDescription,
@@ -46,22 +46,31 @@ export default (product, variants) => {
       prices ? ({
         '@type': 'Offer',
         sku,
-        url,
+        url: productUrl,
         image,
         availability: inStock ? 'InStock' : 'OutOfStock',
         price: prices?.final?.amount,
         priceCurrency: prices?.final?.currency,
       }) : undefined,
-      ...variants.map((v) => ({
-        '@type': 'Offer',
-        sku: v.sku,
-        url: v.url,
-        image: v.images?.[0]?.url ?? image,
-        availability: v.inStock ? 'InStock' : 'OutOfStock',
-        price: v.prices?.final?.amount,
-        priceCurrency: v.prices?.final?.currency,
+      ...variants.map((v) => {
+        const offerUrl = constructProductUrl(config, product, v);
+
+        const offer = {
+          '@type': 'Offer',
+          sku: v.sku,
+          url: offerUrl,
+          image: v.images?.[0]?.url ?? image,
+          availability: v.inStock ? 'InStock' : 'OutOfStock',
+          price: v.prices?.final?.amount,
+          priceCurrency: v.prices?.final?.currency,
+        };
+
+        if (v.gtin) {
+          offer.gtin = v.gtin;
+        }
 
-      })).filter(Boolean),
+        return offer;
+      }).filter(Boolean),
     ],
     ...(brandName
       ? {

src/types.d.ts

@@ -5,6 +5,12 @@ declare global {
    * { pathPattern => Config }
    */
   export type ConfigMap = Record<string, Config>;
+
+  export interface AttributeOverrides {
+    variant: {
+      [key: string]: string;
+    };
+  }
 
   /**
    * Resolved config object
@@ -27,6 +33,11 @@ declare global {
     confMap: ConfigMap;
     params: Record<string, string>;
     headers: Record<string, string>;
+    host: string;
+    offerPattern: string;
+    matchedPath: string;
+    matchedPathConfig: Config;
+    attributeOverrides: AttributeOverrides;
   }
 
   export interface Env {
@@ -86,6 +97,7 @@ declare global {
     prices: Pick<Prices, 'regular' | 'final'>;
     selections: string[];
     attributes: Attribute[];
+    gtin?: string;
   }
 
   interface Image {

src/utils/product.js

@@ -68,3 +68,60 @@ export function assertValidProduct(product) {
     throw new Error('Invalid product');
   }
 }
+
+/**
+ * @param {Config} config
+ * @param {string} path
+ * @returns {string} matched path key
+ */
+export function matchConfigPath(config, path) {
+  // Filter out any keys that are not paths
+  const pathEntries = Object.entries(config.confMap).filter(([key]) => key !== 'base');
+
+  for (const [key] of pathEntries) {
+    // Replace `{{urlkey}}` and `{{sku}}` with regex patterns
+    const pattern = key
+      .replace('{{urlkey}}', '([^/]+)')
+      .replace('{{sku}}', '([^/]+)');
+
+    // Convert to regex and test against the path
+    const regex = new RegExp(`^${pattern}$`);
+    const match = path.match(regex);
+
+    if (match) {
+      return key;
+    }
+  }
+  console.warn('No match found for path:', path);
+  return null;
+}
+
+/**
+ * Constructs product url
+ * @param {Config} config
+ * @param {Product} product
+ * @param {Variant} [variant]
+ * @returns {string}
+ */
+export function constructProductUrl(config, product, variant) {
+  const { host, matchedPath } = config;
+  const productPath = matchedPath
+    .replace('{{urlkey}}', product.urlKey)
+    .replace('{{sku}}', encodeURIComponent(product.sku));
+
+  const productUrl = `${host}${productPath}`;
+
+  if (variant) {
+    const offerPattern = config.matchedPathConfig?.offerPattern;
+    if (!offerPattern) {
+      return `${productUrl}/?optionsUIDs=${variant.selections.join(encodeURIComponent('=,'))}`;
+    }
+
+    const variantPath = offerPattern
+      .replace('{{urlkey}}', product.urlKey)
+      .replace('{{sku}}', encodeURIComponent(variant.sku));
+    return `${config.host}${variantPath}`;
+  }
+
+  return productUrl;
+}

test/catalog/handler.test.js

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import { strict as assert } from 'assert';
+import assert from 'node:assert';
 import sinon from 'sinon';
 import esmock from 'esmock';
 

test/catalog/lookup.test.js

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import { strict as assert } from 'assert';
+import assert from 'node:assert';
 import sinon from 'sinon';
 import esmock from 'esmock';
 import { ResponseError } from '../../src/utils/http.js';

test/catalog/update.test.js

@@ -12,7 +12,7 @@
 
 // @ts-nocheck
 
-import { strict as assert } from 'assert';
+import assert from 'node:assert';
 import sinon from 'sinon';
 import esmock from 'esmock';
 

test/config.test.js

@@ -14,8 +14,8 @@
 
 import assert from 'node:assert';
 import { resolveConfig } from '../src/config.js';
-import { TEST_CONTEXT } from './utils/context.js';
-import { defaultTenantConfigs } from './utils/kv.js';
+import { TEST_CONTEXT } from './fixtures/context.js';
+import { defaultTenantConfigs } from './fixtures/kv.js';
 
 describe('config tests', () => {
   it('should extract path params', async () => {

test/fixtures/variant.js

@@ -35,6 +35,7 @@ export function createProductVariationFixture(overrides = {}) {
       { name: 'criteria_5', label: 'Criteria 5', value: 'Canopy: 4.5" Round' },
       { name: 'criteria_6', label: 'Criteria 6', value: 'Socket: E26 Keyless' },
       { name: 'criteria_7', label: 'Criteria 7', value: 'Wattage: 40 T10' },
+      { name: 'barcode', label: 'Barcode', value: '123456789012' },
       { name: 'weight', label: 'Weight', value: 219 },
     ],
     prices: {

test/template/html.test.js

@@ -33,7 +33,10 @@ describe('Render Product HTML', () => {
   before(() => {
     product = createProductFixture();
     variations = createDefaultVariations();
-    const html = htmlTemplate(product, variations);
+    const config = {
+      matchedPath: '/us/p/{{urlkey}}/{{sku}}',
+    };
+    const html = htmlTemplate(config, product, variations);
     dom = new JSDOM(html);
     document = dom.window.document;
   });