domma-cms 0.84.1 → 0.86.0

package/plugins/shopping-cart/lib/render.js

@@ -0,0 +1,282 @@
+/**
+ * The storefront's HTML, rendered on the server so every page works (and is
+ * found by search engines) before any script runs; public/cart.js then adds
+ * the live parts - the basket, filtering, quantities, checkout.
+ *
+ * Every value that came from a person is escaped here. Product descriptions
+ * are the exception: an admin wrote them, and they go through the CMS's
+ * Markdown pipeline (sanitised) like any page.
+ *
+ * @module shopping-cart/lib/render
+ */
+
+import {formatMoney} from '../public/lib/money.js';
+import {available, priceRange, safeImage} from '../public/lib/products.js';
+import {COUNTRIES, STATUS_PUBLIC, addressLines} from '../public/lib/orders.js';
+
+export const esc = (s) => String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+
+/** JSON inside a <script> element, safe against `</script>` in any value. */
+export const scriptJson = (v) => JSON.stringify(v).replace(/</g, '\\u003c')
+    .replace(new RegExp('\\u2028', 'g'), '\\u2028').replace(new RegExp('\\u2029', 'g'), '\\u2029');
+
+/** Small inline icons - the storefront must not depend on an icon font being there. */
+export const ICON = {
+    bag: '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 7h12l-1 13H7L6 7z"/><path d="M9 7a3 3 0 0 1 6 0"/></svg>',
+    plus: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>',
+    search: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>',
+    check: '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 5 5L20 7"/></svg>',
+    lock: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>',
+    truck: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h11v10H3zM14 10h4l3 3v3h-7z"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg>',
+    back: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>'
+};
+
+/** "£24", "From £8", with the old price struck through when there is one. */
+export function priceHtml(p, currency) {
+    const r = priceRange(p);
+    const from = r.min !== r.max ? '<span class="shop-from">From</span> ' : '';
+    const was = Number.isInteger(p.compareAt) && p.compareAt > r.min
+        ? ` <s class="shop-was">${esc(formatMoney(p.compareAt, currency, {compact: true}))}</s>` : '';
+    return `${from}<span class="shop-now">${esc(formatMoney(r.min, currency, {compact: true}))}</span>${was}`;
+}
+
+/** Sold out, only a few left, on sale - what a card or a product page flags. */
+export function flags(p, settings) {
+    const out = [];
+    const left = p.variants?.length
+        ? (p.trackStock ? p.variants.reduce((s, v) => s + (Number(v.stock) || 0), 0) : Infinity)
+        : available(p);
+    if (left === 0) out.push({key: 'soldout', text: 'Sold out'});
+    else if (Number.isInteger(p.compareAt) && p.compareAt > p.price) out.push({key: 'sale', text: 'Sale'});
+    if (left > 0 && left !== Infinity && settings.showStockLeft && left <= (Number(settings.lowStockAt) || 0)) out.push({key: 'low', text: `Only ${left} left`});
+    if (p.featured && !out.length) out.push({key: 'featured', text: 'Featured'});
+    return {list: out, soldOut: left === 0};
+}
+
+/**
+ * One product card. `data-*` carry what the basket needs to add it without
+ * another request: id, name, the picture, the one-option price.
+ */
+export function cardHtml(entry, settings, base) {
+    const p = entry.data;
+    const cur = settings.currency;
+    const img = safeImage(p.images?.[0]);
+    const alt = safeImage(p.images?.[1]);
+    const {list, soldOut} = flags(p, settings);
+    const href = `${base}/${encodeURIComponent(p.slug)}`;
+    const quick = !soldOut && !(p.variants?.length);
+    return `<article class="shop-card${soldOut ? ' is-soldout' : ''}" data-shop-card data-id="${esc(entry.id)}"
+  data-name="${esc(p.name)}" data-category="${esc(p.category || '')}" data-price="${p.price}" data-featured="${p.featured ? 1 : 0}"
+  data-search="${esc([p.name, p.summary, p.category, ...(p.tags || [])].join(' ').toLowerCase())}">
+  <a class="shop-card-media" href="${esc(href)}" tabindex="-1" aria-hidden="true">
+    ${img ? `<img src="${esc(img)}" alt="" loading="lazy" decoding="async">` : '<span class="shop-card-noimg">' + ICON.bag + '</span>'}
+    ${alt ? `<img class="shop-card-alt" src="${esc(alt)}" alt="" loading="lazy" decoding="async">` : ''}
+    ${list.length ? `<span class="shop-flags">${list.map(f => `<span class="shop-flag is-${f.key}">${esc(f.text)}</span>`).join('')}</span>` : ''}
+  </a>
+  <div class="shop-card-body">
+    ${p.category ? `<span class="shop-card-cat">${esc(p.category)}</span>` : ''}
+    <h3 class="shop-card-title"><a href="${esc(href)}">${esc(p.name)}</a></h3>
+    ${p.summary ? `<p class="shop-card-summary">${esc(p.summary)}</p>` : ''}
+    <div class="shop-card-foot">
+      <span class="shop-price">${priceHtml(p, cur)}</span>
+      ${quick
+        ? `<button type="button" class="shop-quick" data-shop-add data-id="${esc(entry.id)}" data-name="${esc(p.name)}" data-image="${esc(img)}" aria-label="Add ${esc(p.name)} to basket">${ICON.plus}<span>Add</span></button>`
+        : `<a class="shop-quick is-link" href="${esc(href)}" aria-label="${soldOut ? 'Sold out' : 'Choose options for'} ${esc(p.name)}">${soldOut ? 'Sold out' : 'Choose'}</a>`}
+    </div>
+  </div>
+</article>`;
+}
+
+export function gridHtml(entries, settings, base, {columns} = {}) {
+    const cols = [2, 3, 4].includes(Number(columns)) ? Number(columns) : (settings.columns || 3);
+    return `<div class="shop-grid" style="--shop-cols:${cols}" data-shop-grid>${entries.map(e => cardHtml(e, settings, base)).join('\n')}</div>`;
+}
+
+/** The storefront: header, toolbar, grid. */
+export function storefrontHtml({entries, settings, base, category = '', query = ''}) {
+    const cats = [...new Set(entries.map(e => e.data.category).filter(Boolean))].sort((a, b) => a.localeCompare(b));
+    const chips = settings.showCategories && cats.length > 1
+        ? `<div class="shop-chips" role="group" aria-label="Categories">
+  <button type="button" class="shop-chip${category ? '' : ' is-on'}" data-shop-cat="">All</button>
+  ${cats.map(c => `<button type="button" class="shop-chip${c === category ? ' is-on' : ''}" data-shop-cat="${esc(c)}">${esc(c)}</button>`).join('')}
+</div>` : '';
+    const search = settings.showSearch && entries.length > 4
+        ? `<label class="shop-search">${ICON.search}<input type="search" placeholder="Search the shop" value="${esc(query)}" data-shop-search aria-label="Search the shop"></label>` : '';
+    const sort = entries.length > 4 ? `<select class="shop-sort" data-shop-sort aria-label="Sort">
+  <option value="">Featured</option><option value="price-asc">Price, low to high</option>
+  <option value="price-desc">Price, high to low</option><option value="name">Name</option></select>` : '';
+    const intro = settings.shopIntro ? `<p class="shop-intro">${esc(settings.shopIntro)}</p>` : '';
+    return `<header class="shop-hero">
+  <h1>${esc(settings.shopTitle || 'Shop')}</h1>${intro}
+</header>
+${chips || search || sort ? `<div class="shop-toolbar">${chips}<div class="shop-tools">${search}${sort}</div></div>` : ''}
+${entries.length
+        ? gridHtml(entries, settings, base)
+        : '<div class="shop-empty"><p>Nothing on sale just yet - come back soon.</p></div>'}
+<p class="shop-none" data-shop-none hidden>Nothing matches. <button type="button" class="shop-linkbtn" data-shop-clear>Show everything</button></p>`;
+}
+
+/** A product's page. */
+export function productHtml({entry, settings, base, descriptionHtml, related}) {
+    const p = entry.data;
+    const cur = settings.currency;
+    const images = (p.images || []).map(safeImage).filter(Boolean);
+    const {list, soldOut} = flags(p, settings);
+    const variants = p.variants || [];
+    const firstOpen = variants.find(v => available(p, v.id) > 0);
+    const opts = variants.length ? `<fieldset class="shop-options">
+  <legend>${esc(p.optionName || 'Option')}</legend>
+  <div class="shop-option-list">
+  ${variants.map(v => {
+        const left = available(p, v.id);
+        const price = Number.isInteger(v.price) ? v.price : p.price;
+        return `<label class="shop-option${left <= 0 ? ' is-out' : ''}">
+    <input type="radio" name="variant" value="${esc(v.id)}" data-price="${price}" data-left="${left === Infinity ? '' : left}"${left <= 0 ? ' disabled' : ''}${firstOpen?.id === v.id ? ' checked' : ''}>
+    <span>${esc(v.name)}${price !== p.price ? ` <small>${esc(formatMoney(price, cur, {compact: true}))}</small>` : ''}</span></label>`;
+    }).join('')}
+  </div>
+</fieldset>` : '';
+    const left = variants.length ? (firstOpen ? available(p, firstOpen.id) : 0) : available(p);
+    const startPrice = firstOpen && Number.isInteger(firstOpen.price) ? firstOpen.price : p.price;
+    const gallery = images.length
+        ? `<div class="shop-gallery" data-shop-gallery>
+  <div class="shop-gallery-main"><img src="${esc(images[0])}" alt="${esc(p.name)}" data-shop-main>
+  ${list.length ? `<span class="shop-flags">${list.map(f => `<span class="shop-flag is-${f.key}">${esc(f.text)}</span>`).join('')}</span>` : ''}</div>
+  ${images.length > 1 ? `<div class="shop-thumbs">${images.map((src, i) => `<button type="button" class="shop-thumb${i ? '' : ' is-on'}" data-src="${esc(src)}" aria-label="Picture ${i + 1}"><img src="${esc(src)}" alt="" loading="lazy"></button>`).join('')}</div>` : ''}
+</div>`
+        : `<div class="shop-gallery"><div class="shop-gallery-main is-empty">${ICON.bag}</div></div>`;
+
+    return `<nav class="shop-crumbs" aria-label="Breadcrumb"><a href="${esc(base)}">${ICON.back}${esc(settings.shopTitle || 'Shop')}</a>${p.category ? ` <span>/</span> <a href="${esc(base)}?category=${encodeURIComponent(p.category)}">${esc(p.category)}</a>` : ''}</nav>
+<div class="shop-product" data-shop-product data-id="${esc(entry.id)}" data-name="${esc(p.name)}" data-image="${esc(images[0] || '')}">
+  ${gallery}
+  <div class="shop-buy">
+    ${p.category ? `<span class="shop-card-cat">${esc(p.category)}</span>` : ''}
+    <h1 class="shop-product-title">${esc(p.name)}</h1>
+    <p class="shop-product-price"><span class="shop-now" data-shop-price>${esc(formatMoney(startPrice, cur))}</span>${Number.isInteger(p.compareAt) && p.compareAt > startPrice ? ` <s class="shop-was">${esc(formatMoney(p.compareAt, cur))}</s>` : ''}</p>
+    ${p.summary ? `<p class="shop-product-summary">${esc(p.summary)}</p>` : ''}
+    <form class="shop-buy-form" data-shop-buy>
+      ${opts}
+      <div class="shop-buy-row">
+        <div class="shop-qty" data-shop-qty>
+          <button type="button" data-step="-1" aria-label="One fewer">−</button>
+          <input type="number" name="qty" value="1" min="1" max="${left === Infinity ? 999 : Math.max(1, left)}" inputmode="numeric" aria-label="Quantity">
+          <button type="button" data-step="1" aria-label="One more">+</button>
+        </div>
+        <button type="submit" class="shop-add-btn" data-shop-addbtn${soldOut ? ' disabled' : ''}>${ICON.bag}<span>${soldOut ? 'Sold out' : 'Add to basket'}</span></button>
+      </div>
+      <p class="shop-stock" data-shop-stock>${soldOut ? '' : left !== Infinity && settings.showStockLeft && left <= (Number(settings.lowStockAt) || 0) ? `Only ${left} left` : ''}</p>
+    </form>
+    <ul class="shop-assure">
+      ${p.shippable !== false ? `<li>${ICON.truck}<span>${Number(settings.freeShippingOver) > 0 ? `Free delivery over ${esc(formatMoney(settings.freeShippingOver, cur, {compact: true}))}` : esc(settings.shippingLabel || 'Delivery')}${settings.allowCollection ? ` · or ${esc(String(settings.collectionLabel || 'collect').toLowerCase())}` : ''}</span></li>` : `<li>${ICON.check}<span>Nothing to ship - yours as soon as it is paid</span></li>`}
+      <li>${ICON.lock}<span>Secure checkout</span></li>
+    </ul>
+    ${descriptionHtml ? `<div class="shop-description">${descriptionHtml}</div>` : ''}
+  </div>
+</div>
+${related.length ? `<section class="shop-related"><h2>You may also like</h2>${gridHtml(related, settings, base, {columns: 4})}</section>` : ''}`;
+}
+
+/** The basket and checkout, one page. The script fills it from the basket in the browser. */
+export function cartHtml({settings, base}) {
+    const countries = (settings.countries || ['GB']).map(c => `<option value="${esc(c)}">${esc(COUNTRIES[c] || c)}</option>`).join('');
+    return `<nav class="shop-crumbs" aria-label="Breadcrumb"><a href="${esc(base)}">${ICON.back}Keep shopping</a></nav>
+<h1 class="shop-co-title">Your basket</h1>
+<div class="shop-checkout" data-shop-checkout>
+  <div class="shop-co-main">
+    <div class="shop-co-lines" data-co-lines><p class="shop-muted">Loading your basket…</p></div>
+    <form class="shop-co-form" data-co-form novalidate hidden>
+      <section class="shop-co-step">
+        <h2><span class="shop-step">1</span> Your details</h2>
+        <div class="shop-fields">
+          <label class="shop-field is-wide"><span>Name</span><input name="name" autocomplete="name" required maxlength="120"></label>
+          <label class="shop-field"><span>Email</span><input name="email" type="email" autocomplete="email" required maxlength="200"></label>
+          <label class="shop-field"><span>Phone <em>optional</em></span><input name="phone" type="tel" autocomplete="tel" maxlength="40"></label>
+        </div>
+      </section>
+      <section class="shop-co-step" data-co-delivery hidden>
+        <h2><span class="shop-step">2</span> Delivery</h2>
+        <div class="shop-choice-row" data-co-collect hidden>
+          <label class="shop-choice"><input type="radio" name="delivery" value="ship" checked><span>${ICON.truck} Deliver to me</span></label>
+          <label class="shop-choice"><input type="radio" name="delivery" value="collect"><span>${ICON.bag} ${esc(settings.collectionLabel || 'Collect in person')}</span></label>
+        </div>
+        <div class="shop-methods" data-co-services hidden></div>
+        <div class="shop-fields" data-co-address>
+          <label class="shop-field is-wide"><span>Address</span><input name="line1" autocomplete="address-line1" maxlength="160"></label>
+          <label class="shop-field is-wide"><span class="sr-only">Address line 2</span><input name="line2" autocomplete="address-line2" maxlength="160" placeholder="Flat, building (optional)"></label>
+          <label class="shop-field"><span>Town or city</span><input name="city" autocomplete="address-level2" maxlength="100"></label>
+          <label class="shop-field"><span>County / state <em>optional</em></span><input name="region" autocomplete="address-level1" maxlength="100"></label>
+          <label class="shop-field"><span>Postcode</span><input name="postcode" autocomplete="postal-code" maxlength="20"></label>
+          <label class="shop-field"><span>Country</span><select name="country" autocomplete="country">${countries}</select></label>
+        </div>
+      </section>
+      <section class="shop-co-step">
+        <h2><span class="shop-step" data-co-paystep>3</span> Payment</h2>
+        <div class="shop-methods" data-co-methods></div>
+        <label class="shop-field is-wide"><span>A note with your order <em>optional</em></span><textarea name="note" rows="2" maxlength="1000"></textarea></label>
+        ${settings.termsUrl ? `<label class="shop-terms"><input type="checkbox" name="terms" required> <span>I agree to the <a href="${esc(settings.termsUrl)}" target="_blank" rel="noopener">terms of sale</a></span></label>` : ''}
+        <p class="shop-co-error" data-co-error role="alert" hidden></p>
+        <button type="submit" class="shop-pay-btn" data-co-pay>${ICON.lock}<span>Pay</span></button>
+        <p class="shop-secure">${ICON.lock} Payment happens on a secure page run by the payment provider. We never see your card.</p>
+      </section>
+    </form>
+  </div>
+  <aside class="shop-co-summary" data-co-summary hidden>
+    <h2>Summary</h2>
+    <div data-co-totals></div>
+    <form class="shop-code" data-co-code hidden>
+      <input name="code" placeholder="Discount code" autocomplete="off" maxlength="60" aria-label="Discount code">
+      <button type="submit">Apply</button>
+    </form>
+  </aside>
+</div>`;
+}
+
+/** A shopper's receipt. */
+export function receiptHtml({order, settings, base, problem = ''}) {
+    const cur = order.currency;
+    const status = order.status;
+    const waiting = status === 'pending';
+    const steps = [
+        {key: 'placed', label: 'Order placed', done: true},
+        {key: 'paid', label: status === 'awaiting' ? 'Awaiting payment' : 'Paid', done: ['paid', 'fulfilled'].includes(status)},
+        {key: 'sent', label: order.delivery === 'collect' ? 'Ready to collect' : order.delivery === 'none' ? 'Delivered' : 'Sent', done: status === 'fulfilled'}
+    ];
+    const closed = status === 'cancelled' || status === 'refunded';
+    const lines = order.lines.map(l => `<li class="shop-r-line">
+  ${l.image ? `<img src="${esc(safeImage(l.image))}" alt="" loading="lazy">` : `<span class="shop-r-noimg">${ICON.bag}</span>`}
+  <span class="shop-r-name">${esc(l.name)}${l.variantName ? `<small>${esc(l.optionName || 'Option')}: ${esc(l.variantName)}</small>` : ''}</span>
+  <span class="shop-r-qty">× ${l.qty}</span>
+  <span class="shop-r-amt">${esc(formatMoney(l.lineTotal, cur))}</span></li>`).join('');
+    const totals = `<dl class="shop-totals">
+  <div><dt>Subtotal</dt><dd>${esc(formatMoney(order.subtotal, cur))}</dd></div>
+  ${order.adjustments.map(a => `<div class="${a.included ? 'is-included' : a.amount < 0 ? 'is-discount' : ''}"><dt>${esc(a.label)}</dt><dd>${a.amount === 0 && a.stage === 'shipping' ? 'Free' : esc(formatMoney(a.amount, cur))}</dd></div>`).join('')}
+  <div class="is-total"><dt>Total</dt><dd>${esc(formatMoney(order.total, cur))}</dd></div>
+</dl>`;
+    const addr = addressLines(order.address);
+    const t = order.tracking;
+    return `<div class="shop-receipt${closed ? ' is-closed' : ''}" data-shop-receipt data-status="${esc(status)}" data-order="${esc(order.id)}">
+  <div class="shop-r-head">
+    <span class="shop-r-badge${waiting ? ' is-waiting' : ''}">${waiting ? '<span class="shop-spinner"></span>' : ICON.check}</span>
+    <div>
+      <p class="shop-muted">Order #${esc(order.number)}</p>
+      <h1>${closed ? esc(STATUS_PUBLIC[status]) : waiting ? 'Confirming your payment…' : `Thank you${order.customer?.name ? `, ${esc(order.customer.name.split(' ')[0])}` : ''}!`}</h1>
+      <p>${waiting ? 'This takes a moment. You can keep this page open.'
+        : status === 'awaiting' ? 'Your order is in. It is sent as soon as your payment arrives.'
+        : closed ? '' : `A record of your order is below${order.email ? ` - we will write to <strong>${esc(order.email)}</strong> if anything changes` : ''}.`}</p>
+    </div>
+  </div>
+  ${problem === 'paypal' && waiting ? '<p class="shop-co-error">PayPal did not confirm the payment. Nothing has been taken - <a href="' + esc(base) + '/cart">try again from your basket</a>.</p>' : ''}
+  ${status === 'awaiting' && settings.offlineInstructions ? `<div class="shop-r-note"><strong>${esc(settings.offlineLabel || 'How to pay')}</strong><p>${esc(settings.offlineInstructions)}</p><p>Please quote <strong>#${esc(order.number)}</strong> with your payment - ${esc(formatMoney(order.total, cur))}.</p></div>` : ''}
+  ${closed ? '' : `<ol class="shop-r-steps">${steps.map(s => `<li class="${s.done ? 'is-done' : ''}"><span></span>${esc(s.label)}</li>`).join('')}</ol>`}
+  ${t ? `<div class="shop-r-note">${ICON.truck} <strong>${esc(t.carrier || 'Tracking')}</strong> ${esc(t.number || '')} ${t.url ? `<a href="${esc(t.url)}" target="_blank" rel="noopener">Track it</a>` : ''}</div>` : ''}
+  <div class="shop-r-grid">
+    <section><h2>Items</h2><ul class="shop-r-lines">${lines}</ul>${totals}</section>
+    <section class="shop-r-side">
+      ${addr.length ? `<h2>${order.delivery === 'collect' ? 'Collection' : 'Delivering to'}</h2><address>${addr.map(esc).join('<br>')}</address>` : order.delivery === 'collect' ? `<h2>Collection</h2><p>${esc(settings.collectionLabel || 'Collect in person')}</p>` : ''}
+      <h2>Placed</h2><p>${esc(new Date(order.placedAt).toLocaleString('en-GB', {dateStyle: 'long', timeStyle: 'short'}))}</p>
+      <p><a class="shop-linkbtn" href="${esc(base)}">Continue shopping</a> · <button type="button" class="shop-linkbtn" data-shop-print>Print</button></p>
+    </section>
+  </div>
+</div>`;
+}

package/plugins/shopping-cart/lib/samples.js

@@ -0,0 +1,34 @@
+/**
+ * Sample products - so a new shop can be seen working before its own stock is
+ * photographed. Pictures are shipped with the plugin (public/samples/). They
+ * are ordinary products once added: edit them, or delete them.
+ *
+ * @module shopping-cart/lib/samples
+ */
+
+const pic = (n) => [`/plugins/shopping-cart/public/samples/${n}.svg`, `/plugins/shopping-cart/public/samples/${n}-2.svg`];
+
+/** Prices in minor units. */
+export const SAMPLES = [
+    {name: 'Stoneware Mug', category: 'Kitchen', price: 1800, images: pic('mug'), featured: true, trackStock: true, stock: 24, weight: 420,
+        summary: 'Hand-thrown, glazed in deep slate. Holds a proper cup of tea.',
+        description: 'Thrown on the wheel and glazed by hand, so no two are quite alike.\n\n- 350 ml\n- Dishwasher and microwave safe\n- Made in Yorkshire'},
+    {name: 'Canvas Tote', category: 'Accessories', price: 1500, compareAt: 2000, images: pic('tote'), weight: 180,
+        summary: 'Heavy organic cotton with a stitched globe. Carries a week of shopping.',
+        description: 'Twelve-ounce organic cotton canvas, long handles, an inside pocket for keys.'},
+    {name: 'Fig & Cedar Candle', category: 'Home', price: 2400, images: pic('candle'), trackStock: true, weight: 380, optionName: 'Size',
+        variants: [{name: 'Small · 20 h', price: 1600, stock: 12}, {name: 'Large · 45 h', price: 2400, stock: 2}],
+        summary: 'Soy wax, cotton wick, the smell of a late-summer orchard.',
+        description: 'Hand-poured soy wax in a reusable glass. Burn for two hours at a time for an even pool.'},
+    {name: 'Linen Notebook', category: 'Stationery', price: 1200, images: pic('notebook'), weight: 260, optionName: 'Paper',
+        variants: [{name: 'Lined'}, {name: 'Dotted'}, {name: 'Plain'}],
+        summary: 'A5, 192 pages of 100 gsm paper that fountain pens love.',
+        description: 'Lay-flat binding, a ribbon marker and a pocket at the back.'},
+    {name: 'Sunset Tee', category: 'Clothing', price: 2200, images: pic('tee'), featured: true, trackStock: true, weight: 200, optionName: 'Size',
+        variants: [{name: 'S', stock: 6}, {name: 'M', stock: 9}, {name: 'L', stock: 4}, {name: 'XL', stock: 0}],
+        summary: 'Soft organic cotton, screen-printed by hand.',
+        description: 'A relaxed fit in 180 gsm organic cotton. Wash cool, inside out.'},
+    {name: '"Dusk" Art Print', category: 'Prints', price: 3500, images: pic('print'), weight: 300,
+        summary: 'Giclée print on 310 gsm cotton rag, A3, signed.',
+        description: 'Printed with archival pigment inks and signed on the back. Frame not included.'}
+];