@occluze/tether 0.6.7 → 0.6.8

package/src/product.js

@@ -1,56 +1,120 @@
 /**
- * ProductScope: everything inside [tether-product="<handle>"] binds to one
- * Shopify product: options, variants, quantity, subscriptions, add to cart.
+ * ProductScope: everything inside [tether-product="<handle>"] binds to one Shopify product: options, variants,
+ * quantity, subscriptions and add to cart. The scope holds the visitor's choice and the actions on it;
+ * `product-state.js` derives what the choice shows, `product-render.js` and `variant-render.js` write it, and
+ * `product-events.js` turns clicks and changes into actions.
  */
-import { cfg, reportError } from './config.js';
+import { cfg } from './config.js';
 import {
-  attr, sel, get, has, qsa, scoped, emit, formatMoney, formatDate, setText, setImage, show,
-  setSelected, repeat, productUrl, notifyLayoutChanged, watchImages, busy, parseJSONAttr, toAttributes, sameImage, hasTemplate, formatPercent,
+  attr,
+  sel,
+  get,
+  has,
+  scoped,
+  emit,
+  setText,
+  notifyLayoutChanged,
+  watchImages,
+  parseJSONAttr,
+  toAttributes,
 } from './dom.js';
 import { Cart } from './cart.js';
-import { STATUS_KEYS, ownedBy } from './status.js';
-import {
-  allPlans, allocationFor, planPrice, planCheckoutCharge, planSavings, planAdjustment, findPlan, GID,
-} from './selling-plans.js';
+import { allPlans, allocationFor, findPlan, GID } from './selling-plans.js';
+import { initialChoice, normalisePurchase, productView, selectionOf } from './product-state.js';
+import { writeProduct } from './product-render.js';
+import { writeVariant } from './variant-render.js';
+import { bindProductEvents } from './product-events.js';
+/** @import { Product, ProductVariant } from './fragments.js' */
+/** @import { PlanInGroup } from './selling-plans.js' */
+/** @import { Purchase, Selection } from './product-state.js' */
 
-export const scopes = new WeakMap(); // element -> ProductScope
+/**
+ * @typedef {object} CartLineInput What a scope adds to the cart.
+ * @property {string} merchandiseId
+ * @property {number} quantity
+ * @property {string} [sellingPlanId]
+ * @property {{ key: string, value: string }[]} [attributes]
+ */
 
-const productSel = () => sel('product');
+/** @type {WeakMap<Element, ProductScope>} */
+export const scopes = new WeakMap();
 
-function metafieldValue(product, ref) {
-  const i = ref.indexOf('.');
-  const ns = ref.slice(0, i);
-  const key = ref.slice(i + 1);
-  const mf = (product.metafields || []).find((m) => m && m.namespace === ns && m.key === key);
-  return mf || null;
-}
+const productSelector = () => sel('product');
 
-// Option names as written in the markup (the build's language), by product handle. With another
-// language Shopify translates them (Size -> Größe), so attributes are matched by position instead.
+/**
+ * Option names as written in the markup (the build's language), by product handle. In another language Shopify
+ * translates them (Size → Größe), so markup names that aren't the product's are matched by position.
+ *
+ * @type {Map<string, string[]>}
+ */
 const knownOptionNames = new Map();
+
+/** @param {readonly Pick<Product, 'handle' | 'options'>[]} products */
 export function rememberOptionNames(products) {
-  (products || []).forEach((p) => { if (p?.handle && !knownOptionNames.has(p.handle)) knownOptionNames.set(p.handle, (p.options || []).map((o) => o.name)); });
+  products.forEach((product) => {
+    if (!knownOptionNames.has(product.handle)) {
+      knownOptionNames.set(
+        product.handle,
+        product.options.map((option) => option.name),
+      );
+    }
+  });
+}
+
+/**
+ * @param {Element} el
+ * @returns {el is HTMLInputElement}
+ */
+const isInput = (el) => el.tagName === 'INPUT';
+
+/**
+ * @param {Element} el
+ * @returns {el is HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement}
+ */
+const isField = (el) => el.tagName === 'INPUT' || el.tagName === 'SELECT' || el.tagName === 'TEXTAREA';
+
+/**
+ * @param {HTMLElement} el A `tether-line-attribute` field.
+ * @returns {string | null} Its value for the cart line; `null` for an unchecked or empty field.
+ */
+function lineAttributeValue(el) {
+  if (isInput(el) && el.type === 'checkbox') {
+    if (!el.checked) return null;
+    return el.value && el.value !== 'on' ? el.value : 'Yes';
+  }
+  if (isInput(el) && el.type === 'radio') return el.checked ? el.value : null;
+  return (isField(el) && el.value) || null;
 }
 
 export class ProductScope {
+  /**
+   * @param {HTMLElement} root
+   * @param {Product} product
+   */
   constructor(root, product) {
     this.root = root;
     this.product = product;
-    this.selected = {};
-    this.variant = null;
-    this.quantity = Math.max(0, parseInt(get(root, 'quantity') ?? '1', 10) || (has(root, 'quantity') ? 0 : 1));
     this.plans = allPlans(product);
-    this.purchase = 'one-time';
-    this.planId = null;
+    const params = new URLSearchParams(window.location.search);
+    const choice = initialChoice(product, {
+      variant: params.get('variant') || get(root, 'variant'),
+      sellingPlan: params.get('selling_plan'),
+      defaultPlan: get(root, 'default-plan'),
+      defaultPurchase: get(root, 'default-purchase') || cfg.defaultPurchase,
+    });
+    /** @type {Selection} */
+    this.selected = choice.selected;
+    /** @type {Purchase} */
+    this.purchaseChoice = choice.purchase;
+    /** @type {ProductVariant | null} */
+    this.variant = null;
+    this.quantity = has(root, 'quantity') ? Math.max(0, parseInt(get(root, 'quantity') ?? '', 10) || 0) : 1;
 
     scopes.set(root, this);
     root.setAttribute(attr('state'), 'ready');
     root.removeAttribute(attr('error'));
-
-    this.initSelection();
-    this.initPurchase();
     this.renderProduct();
-    this.bind();
+    bindProductEvents(this);
     this.renderVariant();
 
     watchImages(root, 'product');
@@ -58,15 +122,17 @@ export class ProductScope {
     emit('product-ready', { product, scope: this }, root);
   }
 
-  /** New data for the same product (e.g. after a country switch). Keeps the selection. */
+  /**
+   * New data for the same product (a country switch). Keeps the visitor's choice.
+   *
+   * @param {Product} product
+   */
   update(product) {
     const variantId = this.variant?.id;
     this.product = product;
     this.plans = allPlans(product);
-    if (this.planId && !this.plans.some((p) => p.id === this.planId)) this.planId = this.plans[0]?.id || null;
-    if (!this.plans.length && this.purchase === 'subscription') this.purchase = 'one-time';
-    const v = product.variants.nodes.find((x) => x.id === variantId);
-    if (v) { this.selected = {}; v.selectedOptions.forEach((o) => { this.selected[o.name] = o.value; }); }
+    const same = product.variants.nodes.find((variant) => variant.id === variantId);
+    if (same) this.selected = selectionOf(same);
     this.root.setAttribute(attr('state'), 'ready');
     this.root.removeAttribute(attr('error'));
     this.renderProduct();
@@ -75,142 +141,156 @@ export class ProductScope {
     emit('product-updated', { product, scope: this }, this.root);
   }
 
-  /** Matching elements in this scope, including the root itself (e.g. a card link with tether-bind="link"). */
-  $(s) {
-    const inner = scoped(this.root, s, productSel());
-    return this.root.matches(s) ? [this.root, ...inner] : inner;
+  /**
+   * @param {string} selector
+   * @returns {HTMLElement[]} Matches in this scope, including the root itself (a card link with tether-bind="link").
+   */
+  $(selector) {
+    const inner = scoped(this.root, selector, productSelector());
+    return this.root.matches(selector) ? [this.root, ...inner] : inner;
   }
 
-  // ------------------------------------------------------------ state
-
-  /** The product's option name for a name used in the markup (same name, or same position). */
+  /**
+   * @param {string | null} authored An option name in the markup.
+   * @returns {string} The product's option of that name, or at that position in the build's language.
+   */
   optName(authored) {
-    const opts = this.product?.options || [];
-    if (!authored || opts.some((o) => o.name === authored)) return authored;
-    const i = (knownOptionNames.get(this.product.handle) || []).indexOf(authored);
-    return i >= 0 && opts[i] ? opts[i].name : authored;
+    if (!authored) return '';
+    const { options } = this.product;
+    if (options.some((option) => option.name === authored)) return authored;
+    const index = (knownOptionNames.get(this.product.handle) ?? []).indexOf(authored);
+    return options[index]?.name ?? authored;
   }
 
-  initSelection() {
-    const vs = this.product.variants.nodes;
-    const first = vs.find((v) => v.availableForSale) || vs[0];
-    if (first) first.selectedOptions.forEach((o) => { this.selected[o.name] = o.value; });
-
-    const param = new URLSearchParams(window.location.search).get('variant') || get(this.root, 'variant');
-    if (param) {
-      const gid = GID.variant(param);
-      const match = vs.find((v) => v.id === gid);
-      if (match) {
-        this.selected = {};
-        match.selectedOptions.forEach((o) => { this.selected[o.name] = o.value; });
-      }
-    }
+  /** @returns {'one-time' | 'subscription'} */
+  get purchase() {
+    return this.purchaseChoice.kind;
   }
 
-  initPurchase() {
-    if (!this.plans.length) return;
-    const params = new URLSearchParams(window.location.search);
-    const fromUrl = findPlan(this.product, params.get('selling_plan'));
-    const fromAttr = findPlan(this.product, get(this.root, 'default-plan'));
-    this.planId = (fromUrl || fromAttr || this.plans[0]).id;
-
-    const wanted = fromUrl ? 'subscription' : (get(this.root, 'default-purchase') || cfg.defaultPurchase);
-    this.purchase = this.product.requiresSellingPlan || wanted === 'subscription' ? 'subscription' : 'one-time';
+  /** @param {string} kind */
+  set purchase(kind) {
+    const wanted = kind === 'subscription' ? 'subscription' : 'one-time';
+    this.purchaseChoice = normalisePurchase(this.product, this.variant, { kind: wanted, planId: this.planId });
   }
 
-  findVariant() {
-    return this.product.variants.nodes.find((v) =>
-      v.selectedOptions.every((o) => this.selected[o.name] === o.value)) || null;
+  /** @returns {string | null} The plan bought on, or offered while buying once. */
+  get planId() {
+    return this.purchaseChoice.planId;
   }
 
-  isValueAvailable(name, value) {
-    return this.product.variants.nodes.some((v) =>
-      v.availableForSale && v.selectedOptions.every((o) =>
-        (o.name === name ? o.value === value : this.selected[o.name] === o.value)));
+  /** @param {string | null} planId */
+  set planId(planId) {
+    this.purchaseChoice = normalisePurchase(this.product, this.variant, { kind: this.purchase, planId });
   }
 
-  get plan() { return this.plans.find((p) => p.id === this.planId) || null; }
+  /** @returns {PlanInGroup | null} */
+  get plan() {
+    return this.plans.find((plan) => plan.id === this.planId) ?? null;
+  }
 
-  /** True when the current variant can be bought on the selected plan. */
+  /** True when the current variant can be bought on a plan. */
   get subscriptionAvailable() {
-    return Boolean(this.variant && this.plans.some((p) => allocationFor(this.variant, p.id)));
+    return this.plans.some((plan) => allocationFor(this.variant, plan.id));
   }
 
   get isSubscription() {
-    return this.purchase === 'subscription' && Boolean(allocationFor(this.variant, this.planId));
+    return this.purchase === 'subscription' && allocationFor(this.variant, this.planId) !== null;
   }
 
-  /** What would be added to the cart right now. */
+  /** @returns {CartLineInput | null} What would be added to the cart right now. */
   getLine() {
     if (!this.variant) return null;
+    /** @type {CartLineInput} */
     const line = { merchandiseId: this.variant.id, quantity: this.quantity };
-    if (this.isSubscription) line.sellingPlanId = this.planId;
-    const attrs = this.collectAttributes();
-    if (attrs.length) line.attributes = attrs;
+    if (this.isSubscription && this.planId) line.sellingPlanId = this.planId;
+    const attributes = this.collectAttributes();
+    if (attributes.length) line.attributes = attributes;
     return line;
   }
 
+  /** @returns {{ key: string, value: string }[]} `tether-line-attributes` and the filled `tether-line-attribute` fields. */
   collectAttributes() {
-    const fixed = toAttributes(parseJSONAttr(this.root, 'line-attributes'));
-    const inputs = this.$(sel('line-attribute')).map((el) => {
-      const key = get(el, 'line-attribute');
-      let value;
-      if (el.type === 'checkbox') value = el.checked ? (el.value && el.value !== 'on' ? el.value : 'Yes') : '';
-      else if (el.type === 'radio') value = el.checked ? el.value : null;
-      else value = el.value;
-      return value == null || value === '' ? null : { key, value: String(value) };
-    }).filter(Boolean);
-    return [...fixed, ...inputs];
+    // The site's own JSON: toAttributes writes every value with String(), whatever its type.
+    const json = /** @type {Parameters<typeof toAttributes>[0]} */ (parseJSONAttr(this.root, 'line-attributes'));
+    const fixed = toAttributes(json);
+    const fields = this.$(sel('line-attribute')).flatMap((el) => {
+      const value = lineAttributeValue(el);
+      return value === null ? [] : [{ key: get(el, 'line-attribute') ?? '', value }];
+    });
+    return [...fixed, ...fields];
   }
 
-  // ------------------------------------------------------------ actions
-
+  /**
+   * Selects an option value. A combination no variant has moves to the closest variant with the value: the most other
+   * choices kept, then one for sale.
+   *
+   * @param {string} name
+   * @param {string} value
+   */
   select(name, value) {
     if (this.selected[name] === value) return;
-    const vs = this.product.variants.nodes.filter((v) => v.selectedOptions.some((o) => o.name === name && o.value === value));
-    if (!vs.length) return; // a value no variant has: nothing to select, keep the visitor's choice
+    const withValue = this.product.variants.nodes.filter((variant) =>
+      variant.selectedOptions.some((option) => option.name === name && option.value === value),
+    );
+    const [firstWithValue] = withValue;
+    // A value no variant has: nothing to select, the visitor's choice stays.
+    if (!firstWithValue) return;
     const next = { ...this.selected, [name]: value };
-    if (!vs.some((v) => v.selectedOptions.every((o) => next[o.name] === o.value))) {
-      // That combination doesn't exist: the closest variant with this value (most other choices kept, available first).
-      const score = (v) => v.selectedOptions.filter((o) => o.name !== name && this.selected[o.name] === o.value).length * 2 + (v.availableForSale ? 1 : 0);
-      const best = vs.reduce((a, b) => (score(b) > score(a) ? b : a));
-      best.selectedOptions.forEach((o) => { next[o.name] = o.value; });
+    if (!withValue.some((variant) => variant.selectedOptions.every((option) => next[option.name] === option.value))) {
+      const score = (/** @type {ProductVariant} */ variant) => {
+        const kept = variant.selectedOptions.filter(
+          (option) => option.name !== name && this.selected[option.name] === option.value,
+        ).length;
+        // One kept choice outweighs being for sale.
+        return kept * 2 + (variant.availableForSale ? 1 : 0);
+      };
+      const closest = withValue.reduce(
+        (best, variant) => (score(variant) > score(best) ? variant : best),
+        firstWithValue,
+      );
+      Object.assign(next, selectionOf(closest));
     }
     this.selected = next;
     this.renderVariant();
   }
 
+  /** @param {string} id A variant gid or numeric id. */
   selectVariant(id) {
-    const v = this.product.variants.nodes.find((x) => x.id === GID.variant(id));
-    if (!v) return;
-    this.selected = {};
-    v.selectedOptions.forEach((o) => { this.selected[o.name] = o.value; });
+    const variant = this.product.variants.nodes.find((candidate) => candidate.id === GID.variant(id));
+    if (!variant) return;
+    this.selected = selectionOf(variant);
     this.renderVariant();
   }
 
+  /** @param {string | null} mode `subscription`, else buying once. */
   setPurchase(mode) {
-    const next = mode === 'subscription' ? 'subscription' : 'one-time';
-    if (next === 'one-time' && this.product.requiresSellingPlan) return;
-    if (this.purchase === next) return;
-    this.purchase = next;
+    const kind = mode === 'subscription' ? 'subscription' : 'one-time';
+    const next = normalisePurchase(this.product, this.variant, { kind, planId: this.planId });
+    // The product decides when the wanted kind isn't possible (no plans, or a plan required).
+    if (next.kind === this.purchase) return;
+    this.purchaseChoice = next;
     this.renderVariant();
   }
 
+  /** @param {string | null} ref A plan id, numeric id, name or option value. */
   selectPlan(ref) {
-    const p = findPlan(this.product, ref);
-    if (!p) return;
-    this.planId = p.id;
-    this.purchase = 'subscription';
+    const plan = findPlan(this.product, ref);
+    if (!plan) return;
+    this.purchaseChoice = { kind: 'subscription', planId: plan.id };
     this.renderVariant();
   }
 
-  setQuantity(n) {
-    const min = has(this.root, 'quantity') ? 0 : 1;
-    this.quantity = Math.max(min, parseInt(n, 10) || 0);
-    this.$(sel('qty')).forEach((i) => setText(i, this.quantity));
+  /** @param {number | string} quantity */
+  setQuantity(quantity) {
+    const minimum = has(this.root, 'quantity') ? 0 : 1;
+    this.quantity = Math.max(minimum, parseInt(String(quantity), 10) || 0);
+    this.$(sel('qty')).forEach((el) => {
+      setText(el, this.quantity);
+    });
     this.renderVariant();
   }
 
+  /** @returns {Promise<unknown>} The cart after adding; `null` when the variant can't be added. */
   async addToCart() {
     if (!this.variant?.availableForSale) return null;
     const line = this.getLine();
@@ -220,351 +300,45 @@ export class ProductScope {
     return cart;
   }
 
-  // ------------------------------------------------------------ events
-
-  bind() {
-    const own = (el) => el && el.closest(productSel()) === this.root;
-
-    this.root.addEventListener('click', (e) => {
-      const t = e.target;
-      if (!t?.closest) return;
-
-      const opt = t.closest(sel('option-value'));
-      if (own(opt) && opt.closest(sel('option-list'))) {
-        e.preventDefault();
-        this.select(this.optName(get(opt.closest(sel('option-list')), 'option-list')), get(opt, 'option-value'));
-        return;
-      }
-
-      const plan = t.closest(sel('plan-value'));
-      if (own(plan)) { e.preventDefault(); this.selectPlan(get(plan, 'plan-value')); return; }
-
-      const purchase = t.closest(`${sel('purchase')}:not(select)`);
-      if (own(purchase)) {
-        if (purchase.tagName !== 'INPUT') e.preventDefault();
-        this.setPurchase(get(purchase, 'purchase'));
-        return;
-      }
-
-      const plus = t.closest(sel('qty-plus'));
-      if (own(plus)) { e.preventDefault(); this.setQuantity(this.quantity + 1); return; }
-      const minus = t.closest(sel('qty-minus'));
-      if (own(minus)) { e.preventDefault(); this.setQuantity(this.quantity - 1); return; }
-
-      const add = t.closest(sel('add-to-cart'));
-      if (own(add)) { e.preventDefault(); this.onAddClick(add); }
-    });
-
-    this.root.addEventListener('change', (e) => {
-      const t = e.target;
-      if (!own(t)) return;
-      if (t.matches(`select${sel('option')}`)) this.select(this.optName(get(t, 'option')), t.value);
-      else if (t.matches(`select${sel('variant-select')}`)) this.selectVariant(t.value);
-      else if (t.matches(`select${sel('plan')}`)) {
-        if (t.value) this.selectPlan(t.value); else this.setPurchase('one-time');
-      } else if (t.matches(`select${sel('purchase')}`)) this.setPurchase(t.value);
-      else if (t.matches(sel('qty'))) this.setQuantity(t.value);
-    });
-  }
-
-  onAddClick(btn) {
-    const label = btn.querySelector(sel('add-label')) || btn;
-    const busyText = get(btn, 'adding-text');
-    const write = (txt) => setText(label, txt);
-    if (label.dataset.tetherLabel === undefined) label.dataset.tetherLabel = label.tagName === 'INPUT' ? label.value : label.textContent;
-
-    busy(btn, async () => {
-      if (busyText) write(busyText);
-      try { await this.addToCart(); } catch (err) {
-        reportError(err, 'add to cart failed');
-        emit('error', { error: err, context: 'add-to-cart' }, this.root);
-      } finally {
-        if (busyText) write(label.dataset.tetherLabel);
-      }
-    }).then(() => {
-      // Restore mode-dependent labels (subscribe-text / soldout-text) after aria-busy is cleared.
-      this.renderVariant();
-    });
-  }
-
-  // ------------------------------------------------------------ render
-
+  /** Learns the markup's option names when they are the product's, then writes the product. */
   renderProduct() {
-    const p0 = this.product;
-    if (!knownOptionNames.has(p0.handle)) {
-      const authored = this.$(`${sel('option-list')},select${sel('option')}`).map((e) => get(e, 'option-list') || get(e, 'option'));
-      if (authored.some((n) => p0.options.some((o) => o.name === n))) rememberOptionNames([p0]);
-    }
-    const p = this.product;
-
-    this.$(sel('bind')).forEach((el) => {
-      const key = get(el, 'bind') || '';
-      const txt = {
-        title: p.title,
-        'description-text': p.description,
-        vendor: p.vendor,
-        type: p.productType,
-        handle: p.handle,
-      }[key];
-      if (txt !== undefined) return setText(el, txt);
-      switch (key) {
-        case 'description': el.innerHTML = p.descriptionHtml || ''; return undefined;
-        case 'published-at': return setText(el, formatDate(p.publishedAt));
-        case 'min-price': return setText(el, formatMoney(p.priceRange.minVariantPrice));
-        case 'max-price': return setText(el, formatMoney(p.priceRange.maxVariantPrice));
-        case 'featured-image': return setImage(el, p.featuredImage?.url, p.featuredImage?.altText || p.title);
-        case 'url':
-        case 'link':
-          el.setAttribute('href', productUrl(p.handle, p.id));
-          if (key === 'url' && !el.firstElementChild && !el.textContent.trim()) setText(el, p.title);
-          return undefined;
-        case 'images': {
-          // Server-rendered gallery with the same images: keep it as it is.
-          const imgs = [...el.children].map((n) => (n.tagName === 'IMG' ? n : n.querySelector('img')));
-          if (!hasTemplate(el) && imgs.length === p.images.nodes.length && imgs.every((im, i) => sameImage(im?.getAttribute('src'), p.images.nodes[i].url))) return undefined;
-        }
-          return repeat(el, p.images.nodes, (node, img) => {
-            const target = node.matches(`img,${sel('bind', 'image')}`) ? node : node.querySelector('img') || node;
-            setImage(target, img.url, img.altText || p.title);
-          });
-        case 'tags': {
-          const exclude = (el.getAttribute('exclude') || '').split(',').map((s) => s.trim()).filter(Boolean);
-          return repeat(el, p.tags.filter((t) => !exclude.includes(t)), (node, tag) => setText(node, tag));
-        }
-        default:
-          // image:2 = the second product image (falls back to the featured image)
-          if (/^image:\d+$/.test(key)) {
-            const img = p.images.nodes[key.slice(6) - 1] || p.featuredImage;
-            return setImage(el, img?.url, img?.altText || p.title);
-          }
-          if (key.startsWith('metafield:')) {
-            const mf = metafieldValue(p, key.slice(10));
-            if (!mf) return setText(el, '');
-            if (mf.reference?.image) return setImage(el, mf.reference.image.url, mf.reference.image.altText);
-            if (/^(rich_text|multi_line_text)_field$/.test(mf.type)) el.style.whiteSpace = 'pre-line';
-            return setText(el, mf.value);
-          }
-          return undefined;
+    const { product } = this;
+    if (!knownOptionNames.has(product.handle)) {
+      const authored = this.$(`${sel('option-list')},select${sel('option')}`).map(
+        (el) => get(el, 'option-list') || get(el, 'option'),
+      );
+      if (authored.some((name) => product.options.some((option) => option.name === name))) {
+        rememberOptionNames([product]);
       }
-    });
-
-    this.$(sel('option-list')).forEach((container) => {
-      const name = this.optName(get(container, 'option-list'));
-      const opt = p.options.find((o) => o.name === name);
-      if (!opt || (opt.optionValues.length <= 1 && has(container, 'hide-single'))) return show(container, false);
-      return repeat(container, opt.optionValues, (node, v) => {
-        node.setAttribute(attr('option-value'), v.name);
-        const t = node.querySelector(sel('bind', 'option-value'));
-        if (t) setText(t, v.name); else if (!node.firstElementChild) setText(node, v.name);
-        const sw = node.querySelector(sel('bind', 'swatch'));
-        if (sw && v.swatch?.color) sw.style.backgroundColor = v.swatch.color;
-        if (sw && v.swatch?.image?.previewImage) setImage(sw, v.swatch.image.previewImage.url, v.name);
-      });
-    });
-
-    this.$(`select${sel('option')}`).forEach((s) => {
-      const opt = p.options.find((o) => o.name === this.optName(get(s, 'option')));
-      if (!opt) return show(s, false);
-      s.innerHTML = '';
-      opt.optionValues.forEach((v) => s.appendChild(new Option(v.name, v.name)));
-      return undefined;
-    });
-
-    this.$(`select${sel('variant-select')}`).forEach((s) => {
-      s.innerHTML = '';
-      p.variants.nodes.forEach((v) => s.appendChild(new Option(v.title, v.id)));
-    });
-
-    // Subscriptions
-    this.$(sel('plan-list')).forEach((container) => {
-      // Value = selling plan group name. Empty, "true", "all" or "*" = every plan
-      // (Webflow's Designer doesn't always allow empty attribute values).
-      const raw = (get(container, 'plan-list') || '').trim();
-      const group = ['', 'true', 'all', '*'].includes(raw.toLowerCase()) ? null : raw;
-      const plans = this.plans.filter((pl) => !group || pl.group.name === group);
-      repeat(container, plans, (node, plan) => {
-        node.setAttribute(attr('plan-value'), plan.id);
-        if (!node.firstElementChild && !node.querySelector(sel('plan-bind'))) setText(node, plan.name);
-      });
-    });
-
-    this.$(`select${sel('plan')}`).forEach((s) => {
-      s.innerHTML = '';
-      if (!p.requiresSellingPlan && get(s, 'plan') !== 'subscription-only') {
-        s.appendChild(new Option(s.getAttribute(attr('one-time-label')) || 'One-time purchase', ''));
-      }
-      this.plans.forEach((pl) => s.appendChild(new Option(pl.name, pl.id)));
-    });
+    }
+    writeProduct(this);
   }
 
+  /** Derives the view of the current choice, keeps its variant, selection and purchase, and writes it. */
   renderVariant() {
-    const p = this.product;
-    let v = this.findVariant();
-    if (!v) {
-      [v] = p.variants.nodes;
-      if (v) {
-        this.selected = {};
-        v.selectedOptions.forEach((o) => { this.selected[o.name] = o.value; });
-      }
-    }
-    this.variant = v;
-    if (!v) return;
-
-    // A plan the variant isn't in -> pick the first one it is in.
-    if (this.plans.length && !allocationFor(v, this.planId)) {
-      const alt = this.plans.find((pl) => allocationFor(v, pl.id));
-      if (alt) this.planId = alt.id;
+    const view = productView(
+      this.product,
+      { selected: this.selected, purchase: this.purchaseChoice, quantity: this.quantity },
+      cfg.lowStock,
+    );
+    if (!view) {
+      this.variant = null;
+      return;
     }
-
-    const sub = this.isSubscription;
-    const oneTimePrice = v.price;
-    const subPrice = this.planId ? planPrice(v, this.planId) : null;
-    const price = sub ? subPrice : oneTimePrice;
-    const compareAt = sub ? (allocationFor(v, this.planId)?.priceAdjustments?.[0]?.compareAtPrice || v.compareAtPrice) : v.compareAtPrice;
-    const onSale = compareAt && parseFloat(compareAt.amount) > parseFloat(price.amount);
-    const discountPct = onSale ? Math.round((1 - parseFloat(price.amount) / parseFloat(compareAt.amount)) * 100) : 0;
-    const savings = this.planId ? planSavings(v, this.planId) : { amount: null, percentage: 0 };
-    const plan = this.plan;
-    const total = { amount: (parseFloat(price.amount) * Math.max(1, this.quantity)).toFixed(2), currencyCode: price.currencyCode };
-
-    const fm = formatMoney;
-    const pct = (n) => formatPercent(n);
-    // Text binds: name -> value (functions, so only the binds on the page are computed).
-    const text = {
-      price: () => fm(price),
-      'total-price': () => fm(total),
-      'one-time-price': () => fm(oneTimePrice),
-      'subscription-price': () => fm(subPrice),
-      'subscription-savings': () => pct(savings.percentage),
-      'subscription-savings-amount': () => fm(savings.amount),
-      // What the visitor pays today for the chosen quantity (prepaid plans charge more up front).
-      'checkout-charge': () => { const c = sub ? planCheckoutCharge(v, this.planId) : price; return c && fm({ amount: (parseFloat(c.amount) * Math.max(1, this.quantity)).toFixed(2), currencyCode: c.currencyCode }); },
-      'plan-name': () => plan?.name,
-      'plan-description': () => plan?.description,
-      'plan-group': () => plan?.group?.name,
-      'compare-at-price': () => (onSale ? fm(compareAt) : ''),
-      'unit-price': () => fm(v.unitPrice),
-      'discount-percentage': () => `${discountPct}%`,
-      'discount-amount': () => (onSale ? fm({ amount: String(parseFloat(compareAt.amount) - parseFloat(price.amount)), currencyCode: price.currencyCode }) : ''),
-      'variant-title': () => v.title,
-      'variant-id': () => v.id,
-      sku: () => v.sku,
-      barcode: () => v.barcode,
-      stock: () => v.quantityAvailable,
-      quantity: () => this.quantity,
-    };
-    this.$(sel('bind')).forEach((el) => {
-      const k = get(el, 'bind');
-      if (k === 'variant-image') setImage(el, v.image?.url || p.featuredImage?.url, v.image?.altText || p.title);
-      else if (text[k]) setText(el, text[k]());
-    });
-
-    this.$(sel('option-selected')).forEach((el) => setText(el, this.selected[this.optName(get(el, 'option-selected'))] || ''));
-
-    this.$(sel('option-list')).forEach((container) => {
-      const name = this.optName(get(container, 'option-list'));
-      qsa(container, sel('option-value')).forEach((node) => {
-        const value = get(node, 'option-value');
-        setSelected(node, this.selected[name] === value);
-        const unavailable = !this.isValueAvailable(name, value);
-        node.classList.toggle('is-unavailable', unavailable);
-        node.setAttribute('data-unavailable', unavailable ? 'true' : 'false');
-      });
-    });
-
-    this.$(`select${sel('option')}`).forEach((s) => { s.value = this.selected[this.optName(get(s, 'option'))] || ''; });
-    this.$(`select${sel('variant-select')}`).forEach((s) => { s.value = v.id; });
-
-    // Subscription UI
-    this.$(sel('purchase')).forEach((el) => {
-      if (el.tagName === 'SELECT') { el.value = this.purchase; return; }
-      const mode = get(el, 'purchase');
-      setSelected(el, mode === this.purchase);
-      const unavailable = mode === 'subscription' ? !this.subscriptionAvailable : p.requiresSellingPlan;
-      el.classList.toggle('is-unavailable', unavailable);
-    });
-
-    this.$(sel('plan-value')).forEach((node) => {
-      const id = get(node, 'plan-value');
-      const planObj = this.plans.find((pl) => pl.id === id);
-      const inVariant = Boolean(allocationFor(v, id));
-      setSelected(node, sub && id === this.planId);
-      node.classList.toggle('is-unavailable', !inVariant);
-      qsa(node, sel('plan-bind')).forEach((el) => {
-        const adj = planAdjustment(planObj);
-        const s = planSavings(v, id);
-        const k = get(el, 'plan-bind');
-        const val = {
-          name: () => planObj?.name,
-          option: () => (planObj?.options || []).map((o) => o.value).join(', '), // e.g. "1 month", without the store's price text
-          description: () => planObj?.description,
-          price: () => fm(planPrice(v, id)),
-          savings: () => pct(s.percentage),
-          'savings-amount': () => fm(s.amount),
-          adjustment: () => (!adj ? '' : adj.type === 'percentage' ? `${adj.value}%` : fm(adj.value)),
-        }[k];
-        if (val) setText(el, val());
-      });
-    });
-
-    this.$(`select${sel('plan')}`).forEach((s) => { s.value = sub ? this.planId : ''; });
-
-    const low = v.quantityAvailable != null && v.quantityAvailable > 0 && v.quantityAvailable <= (cfg.lowStock ?? 5);
-    const conds = {
-      'in-stock': v.availableForSale,
-      'out-of-stock': !v.availableForSale,
-      'backorder': v.availableForSale && v.currentlyNotInStock,
-      'on-sale': Boolean(onSale),
-      'not-on-sale': !onSale,
-      'has-variants': p.variants.nodes.length > 1,
-      'single-variant': p.variants.nodes.length === 1,
-      'low-stock': low,
-      'plenty-in-stock': v.availableForSale && !low,
-      'subscription-available': this.subscriptionAvailable,
-      'subscription-unavailable': !this.subscriptionAvailable,
-      'subscription-only': Boolean(p.requiresSellingPlan),
-      'one-time-available': !p.requiresSellingPlan,
-      'subscription-selected': sub,
-      'one-time-selected': !sub,
-      'has-savings': sub ? savings.percentage > 0 : Boolean(onSale),
-      // scope state (see status.js)
-      'loading': false,
-      'ready': true,
-      'error': false,
-      'not-found': false,
-    };
-    this.$(sel('show')).forEach((el) => {
-      const k = get(el, 'show');
-      if (!(k in conds)) return;
-      // State blocks of a list nested in this product belong to that list.
-      if (STATUS_KEYS.includes(k) && !ownedBy(el, this.root)) return;
-      show(el, conds[k]);
-    });
-
-    this.root.classList.toggle('is-subscription', sub);
-    this.root.setAttribute(attr('purchase-mode'), sub ? 'subscription' : 'one-time');
-
-    this.$(sel('add-to-cart')).forEach((btn) => {
-      const disabled = !v.availableForSale;
-      btn.classList.toggle('is-disabled', disabled);
-      btn.setAttribute('aria-disabled', String(disabled));
-      if ('disabled' in btn) btn.disabled = disabled;
-      const soldOut = get(btn, 'soldout-text');
-      const subText = get(btn, 'subscribe-text');
-      if (soldOut || subText) {
-        const label = btn.querySelector(sel('add-label')) || btn;
-        if (label.dataset.tetherLabel === undefined) label.dataset.tetherLabel = label.tagName === 'INPUT' ? label.value : label.textContent;
-        let text = label.dataset.tetherLabel;
-        if (sub && subText) text = subText;
-        if (disabled && soldOut) text = soldOut;
-        if (btn.getAttribute('aria-busy') !== 'true') setText(label, text);
-      }
-    });
-
-    emit('variant-changed', {
-      product: p, variant: v, selected: { ...this.selected },
-      purchase: this.purchase, sellingPlanId: sub ? this.planId : null,
-    }, this.root);
-
+    this.variant = view.variant;
+    this.selected = view.selected;
+    this.purchaseChoice = view.purchase;
+    writeVariant(this, view);
+    emit(
+      'variant-changed',
+      {
+        product: this.product,
+        variant: view.variant,
+        selected: { ...view.selected },
+        purchase: view.purchase.kind,
+        sellingPlanId: view.isSubscription ? view.purchase.planId : null,
+      },
+      this.root,
+    );
   }
 }