@occluze/tether 0.3.6 → 0.5.0

package/src/mounting.js

@@ -0,0 +1,129 @@
+/** Product scopes and lists that are mounted, shared by index.js and the optional markets part. */
+import { cfg, log, warn, reportError } from './config.js';
+import { ProductScope, scopes, rememberOptionNames } from './product.js';
+import { listSelector } from './collection.js';
+import { getProduct, takeStale, refreshProducts, hydrateProducts } from './loader.js';
+import { resolveProductKey, setScopeStatus, isNotFound } from './status.js';
+import { attr, get, qsa, emit } from './dom.js';
+
+export const mountedProducts = new WeakSet();
+export const mountedLists = new WeakSet();
+// Live roots, for re-rendering after a country switch (pruned when disconnected).
+export const liveProducts = new Set();
+export const liveLists = new Set();
+const requestToken = new WeakMap(); // product root -> latest request, so a slow old response can't win
+
+export function pruneLive() {
+  liveProducts.forEach((el) => { if (!el.isConnected) liveProducts.delete(el); });
+  liveLists.forEach((l) => { if (!l.root.isConnected) liveLists.delete(l); });
+}
+export function within(root, selector) {
+  return [...(root.matches?.(selector) ? [root] : []), ...qsa(root, selector)];
+}
+
+export /** Mounts one product root. Returns true when a product request was started. */
+function mountProduct(el) {
+  if (mountedProducts.has(el)) return false;
+  const { key, fromUrl, raw } = resolveProductKey(el);
+  if (!key) {
+    if (fromUrl) {
+      // Dynamic product page opened without ?handle= (or an empty path).
+      mountedProducts.add(el);
+      setScopeStatus(el, 'not-found');
+      emit('product-not-found', { key: null, source: raw }, el);
+    } else if (!el.closest(listSelector())) {
+      // List cards get their handle when the list renders.
+      warn(`[${attr('product')}] without a value. Bind it to the Shopify handle field, or use "url:handle".`, el);
+    }
+    return false;
+  }
+  mountedProducts.add(el);
+  liveProducts.add(el);
+  const token = {};
+  requestToken.set(el, token);
+  const current = () => requestToken.get(el) === token;
+  // A rendered scope keeps showing its content while it refreshes (e.g. country switch).
+  if (!scopes.get(el)) setScopeStatus(el, 'loading');
+  else el.setAttribute(attr('state'), 'updating');
+  getProduct(key)
+    .then((p) => {
+      if (!current()) return;
+      const existing = scopes.get(el);
+      if (existing) existing.update(p);
+      // eslint-disable-next-line no-new
+      else new ProductScope(el, p);
+      applyPageTitle(el, p);
+      if (cfg.revalidate !== false && takeStale(key)) queueRefresh(key);
+    })
+    .catch((err) => {
+      if (!current()) return;
+      const notFound = isNotFound(err);
+      setScopeStatus(el, notFound ? 'not-found' : 'error', err);
+      if (notFound) {
+        emit('product-not-found', { key, source: raw }, el);
+        // A typo in a URL isn't worth an alert; a CMS item pointing at a deleted product is.
+        if (fromUrl) log(`product not found: ${key}`); else reportError(err, `product ${key}`);
+      } else {
+        reportError(err, `product ${key}`);
+        emit('error', { error: err, context: 'product', key }, el);
+      }
+    });
+  return true;
+}
+
+/** tether-page-title="{title} | My shop" on a product root sets document.title (dynamic product pages). */
+function applyPageTitle(el, p) {
+  const tpl = get(el, 'page-title');
+  if (!tpl || typeof document === 'undefined') return;
+  document.title = tpl.replace(/\{title\}/g, p.title).replace(/\{vendor\}/g, p.vendor || '').replace(/\{type\}/g, p.productType || '');
+}
+
+
+/** Product scopes that failed on a network/API error: loaded again when the browser is back online. */
+export function retryFailed() {
+  pruneLive();
+  liveProducts.forEach((el) => {
+    if (el.getAttribute(attr('state')) !== 'error' || el.getAttribute(attr('error')) === 'not-found') return;
+    mountedProducts.delete(el);
+    mountProduct(el);
+  });
+}
+
+// Server-rendered products: one batched background request refreshes them all.
+let refreshQueue = new Set();
+function queueRefresh(key) {
+  if (!refreshQueue.size) setTimeout(flushRefresh, 0);
+  refreshQueue.add(key);
+}
+function flushRefresh() {
+  const keys = [...refreshQueue];
+  refreshQueue = new Set();
+  refreshProducts(keys).forEach((promise, i) => promise.then((fresh) => {
+    liveProducts.forEach((el) => {
+      const scope = scopes.get(el);
+      if (!scope || !el.isConnected) return;
+      const k = resolveProductKey(el).key;
+      if (k !== keys[i] && k !== fresh.handle && k !== fresh.id) return;
+      if (JSON.stringify(scope.product) !== JSON.stringify(fresh)) scope.update(fresh);
+    });
+  }).catch((err) => reportError(err, `refresh ${keys[i]}`)));
+}
+
+/**
+ * <script type="application/json" data-tether-hydrate> tags written by tether/server's hydrate():
+ * their products are used without a request. Ignored when they were made for another market.
+ */
+const readScripts = new WeakSet();
+export function hydrateFromPage(root = document) {
+  qsa(root.ownerDocument || root, 'script[type="application/json"][data-tether-hydrate]').forEach((s) => {
+    if (readScripts.has(s)) return;
+    readScripts.add(s);
+    try {
+      const data = JSON.parse(s.textContent);
+      rememberOptionNames(data.products); // the build's option names, also for other languages
+      const same = (a, b) => String(a || '').toUpperCase() === String(b || '').toUpperCase();
+      if (same(data.country, cfg.country) && same(data.language, cfg.language)) hydrateProducts(data.products);
+      else log('hydration skipped: other market');
+    } catch (err) { warn('bad data-tether-hydrate', err); }
+  });
+}

package/src/parts/diagnose.js

@@ -0,0 +1,3 @@
+import * as part from '../diagnose.js';
+
+window.Tether.__parts.diagnose = part;

package/src/parts/markets.js

@@ -0,0 +1,3 @@
+import * as part from '../markets-ui.js';
+
+window.Tether.__parts.markets = part;

package/src/product.js

@@ -5,7 +5,7 @@
 import { cfg, reportError } from './config.js';
 import {
   attr, sel, get, has, qsa, scoped, emit, formatMoney, formatDate, setText, setImage, show,
-  setSelected, repeat, productUrl, notifyLayoutChanged, watchImages, busy, parseJSONAttr, toAttributes,
+  setSelected, repeat, productUrl, notifyLayoutChanged, watchImages, busy, parseJSONAttr, toAttributes, sameImage, hasTemplate,
 } from './dom.js';
 import { Cart } from './cart.js';
 import { STATUS_KEYS, ownedBy } from './status.js';
@@ -25,6 +25,13 @@ function metafieldValue(product, ref) {
   return mf || null;
 }
 
+// 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.
+const knownOptionNames = new Map();
+export function rememberOptionNames(products) {
+  (products || []).forEach((p) => { if (p?.handle && !knownOptionNames.has(p.handle)) knownOptionNames.set(p.handle, (p.options || []).map((o) => o.name)); });
+}
+
 export class ProductScope {
   constructor(root, product) {
     this.root = root;
@@ -76,6 +83,14 @@ export class ProductScope {
 
   // ------------------------------------------------------------ state
 
+  /** The product's option name for a name used in the markup (same name, or same position). */
+  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;
+  }
+
   initSelection() {
     const vs = this.product.variants.nodes;
     const first = vs.find((v) => v.availableForSale) || vs[0];
@@ -208,7 +223,7 @@ export class ProductScope {
       const opt = t.closest(sel('option-value'));
       if (own(opt) && opt.closest(sel('option-list'))) {
         e.preventDefault();
-        this.select(get(opt.closest(sel('option-list')), 'option-list'), get(opt, 'option-value'));
+        this.select(this.optName(get(opt.closest(sel('option-list')), 'option-list')), get(opt, 'option-value'));
         return;
       }
 
@@ -234,7 +249,7 @@ export class ProductScope {
     this.root.addEventListener('change', (e) => {
       const t = e.target;
       if (!own(t)) return;
-      if (t.matches(`select${sel('option')}`)) this.select(get(t, 'option'), t.value);
+      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');
@@ -266,17 +281,25 @@ export class ProductScope {
   // ------------------------------------------------------------ render
 
   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 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 'title': return setText(el, p.title);
         case 'description': el.innerHTML = p.descriptionHtml || ''; return undefined;
-        case 'description-text': return setText(el, p.description);
-        case 'vendor': return setText(el, p.vendor);
-        case 'type': return setText(el, p.productType);
-        case 'handle': return setText(el, p.handle);
         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));
@@ -286,7 +309,11 @@ export class ProductScope {
           el.setAttribute('href', productUrl(p.handle, p.id));
           if (key === 'url' && !el.firstElementChild && !el.textContent.trim()) setText(el, p.title);
           return undefined;
-        case 'images':
+        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);
@@ -297,17 +324,15 @@ export class ProductScope {
         }
         default:
           // image:2 = the second product image (falls back to the featured image)
-          if (key && /^image:\d+$/.test(key)) {
-            const img = p.images.nodes[parseInt(key.slice(6), 10) - 1] || p.featuredImage;
+          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 && key.startsWith('metafield:')) {
-            const mf = metafieldValue(p, key.slice('metafield:'.length));
+          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 (mf.type === 'rich_text_field' || mf.type === 'multi_line_text_field') {
-              el.textContent = mf.value; el.style.whiteSpace = 'pre-line'; return undefined;
-            }
+            if (/^(rich_text|multi_line_text)_field$/.test(mf.type)) el.style.whiteSpace = 'pre-line';
             return setText(el, mf.value);
           }
           return undefined;
@@ -315,7 +340,7 @@ export class ProductScope {
     });
 
     this.$(sel('option-list')).forEach((container) => {
-      const name = get(container, 'option-list');
+      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) => {
@@ -329,7 +354,7 @@ export class ProductScope {
     });
 
     this.$(`select${sel('option')}`).forEach((s) => {
-      const opt = p.options.find((o) => o.name === get(s, 'option'));
+      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)));
@@ -393,41 +418,41 @@ export class ProductScope {
     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) => (n ? `${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),
+      'checkout-charge': () => fm(sub ? planCheckoutCharge(v, this.planId) : price),
+      '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) => {
-      switch (get(el, 'bind')) {
-        case 'price': return setText(el, formatMoney(price));
-        case 'total-price': return setText(el, formatMoney(total));
-        case 'one-time-price': return setText(el, formatMoney(oneTimePrice));
-        case 'subscription-price': return setText(el, formatMoney(subPrice));
-        case 'subscription-savings': return setText(el, savings.percentage ? `${savings.percentage}%` : '');
-        case 'subscription-savings-amount': return setText(el, formatMoney(savings.amount));
-        case 'checkout-charge': return setText(el, formatMoney(sub ? planCheckoutCharge(v, this.planId) : price));
-        case 'plan-name': return setText(el, plan?.name || '');
-        case 'plan-description': return setText(el, plan?.description || '');
-        case 'plan-group': return setText(el, plan?.group?.name || '');
-        case 'compare-at-price': return setText(el, onSale ? formatMoney(compareAt) : '');
-        case 'unit-price': return setText(el, formatMoney(v.unitPrice));
-        case 'discount-percentage': return setText(el, `${discountPct}%`);
-        case 'discount-amount':
-          return setText(el, onSale ? formatMoney({
-            amount: String(parseFloat(compareAt.amount) - parseFloat(price.amount)),
-            currencyCode: price.currencyCode,
-          }) : '');
-        case 'variant-title': return setText(el, v.title);
-        case 'variant-id': return setText(el, v.id);
-        case 'sku': return setText(el, v.sku);
-        case 'barcode': return setText(el, v.barcode);
-        case 'stock': return setText(el, v.quantityAvailable ?? '');
-        case 'quantity': return setText(el, this.quantity);
-        case 'variant-image': return setImage(el, v.image?.url || p.featuredImage?.url, v.image?.altText || p.title);
-        default: return undefined;
-      }
+      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[get(el, 'option-selected')] || ''));
+    this.$(sel('option-selected')).forEach((el) => setText(el, this.selected[this.optName(get(el, 'option-selected'))] || ''));
 
     this.$(sel('option-list')).forEach((container) => {
-      const name = get(container, 'option-list');
+      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);
@@ -437,7 +462,7 @@ export class ProductScope {
       });
     });
 
-    this.$(`select${sel('option')}`).forEach((s) => { s.value = this.selected[get(s, 'option')] || ''; });
+    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
@@ -458,17 +483,16 @@ export class ProductScope {
       qsa(node, sel('plan-bind')).forEach((el) => {
         const adj = planAdjustment(planObj);
         const s = planSavings(v, id);
-        switch (get(el, 'plan-bind')) {
-          case 'name': return setText(el, planObj?.name);
-          case 'description': return setText(el, planObj?.description || '');
-          case 'price': return setText(el, formatMoney(planPrice(v, id)));
-          case 'savings': return setText(el, s.percentage ? `${s.percentage}%` : '');
-          case 'savings-amount': return setText(el, formatMoney(s.amount));
-          case 'adjustment':
-            if (!adj) return setText(el, '');
-            return setText(el, adj.type === 'percentage' ? `${adj.value}%` : formatMoney(adj.value));
-          default: return undefined;
-        }
+        const k = get(el, 'plan-bind');
+        const val = {
+          name: () => planObj?.name,
+          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());
       });
     });
 
@@ -510,6 +534,7 @@ export class ProductScope {
     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');

package/src/server.js

@@ -0,0 +1,179 @@
+/**
+ * @occluze/tether/server: Shopify product data at build time or on the server (Astro, Eleventy,
+ * Node, Cloudflare Workers). No browser APIs. Uses the same queries as the browser script, so
+ * products handed over with hydrate() are exactly what Tether expects and need no extra request.
+ *
+ *   import { createStorefront } from '@occluze/tether/server';
+ *   const shop = createStorefront({ domain, token, country: 'NL' });
+ *   const product = await shop.getProduct('coffee-box');
+ *   const all = await shop.allProducts();
+ */
+import { DEFAULTS } from './config.js';
+import { request, withContext, TetherError } from './client.js';
+import { productFragment, collectionFields } from './fragments.js';
+import * as plans from './selling-plans.js';
+import { imageUrl } from './dom.js';
+import { initialState } from './initial.js';
+
+export { imageUrl, initialState };
+
+export { TetherError, plans, withContext };
+
+const isGid = (v) => typeof v === 'string' && v.startsWith('gid://');
+
+/** Handle, numeric id, gid or product URL -> handle or gid. */
+export function productKey(raw) {
+  const v = String(raw ?? '').trim();
+  if (!v) return null;
+  if (isGid(v)) return v;
+  if (/^\d+$/.test(v)) return `gid://shopify/Product/${v}`;
+  const m = v.match(/\/products\/([^/?#]+)/);
+  return m ? m[1] : v;
+}
+
+/** Money as text, e.g. formatMoney({ amount: '30.0', currencyCode: 'EUR' }, 'nl-NL') -> "€ 30,00". */
+export function formatMoney(money, locale) {
+  if (!money) return '';
+  const amount = parseFloat(money.amount);
+  if (Number.isNaN(amount)) return '';
+  try {
+    return new Intl.NumberFormat(locale || undefined, { style: 'currency', currency: money.currencyCode }).format(amount);
+  } catch {
+    return `${money.currencyCode} ${amount.toFixed(2)}`;
+  }
+}
+
+/** productPath '/products' -> /products/<handle>; templates '/p?handle={handle}' and '{id}' work too. */
+export function productUrl(handle, { productPath = '/product', id } = {}) {
+  if (!/\{(handle|id)\}/.test(productPath)) return `${productPath.replace(/\/$/, '')}/${handle}`;
+  return productPath.replace(/\{handle\}/g, encodeURIComponent(handle || '')).replace(/\{id\}/g, encodeURIComponent(id ? String(id).split('/').pop() : ''));
+}
+
+/** JSON for a <script> tag: escapes < so product text can never close the tag. */
+const safeJson = (v) => JSON.stringify(v).replace(/</g, '\\u003c').replace(/\u2028/g, '\\u2028').replace(/\u2029/g, '\\u2029');
+
+// createStorefront(import.meta.env) works too: these env names map to domain and token.
+const ENV = {
+  domain: ['PUBLIC_SHOPIFY_DOMAIN', 'PUBLIC_SHOPIFY_STORE_DOMAIN', 'SHOPIFY_DOMAIN'],
+  token: ['PUBLIC_SHOPIFY_STOREFRONT_TOKEN', 'PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN', 'SHOPIFY_STOREFRONT_TOKEN'],
+};
+
+export function createStorefront(options = {}) {
+  const known = Object.fromEntries(Object.entries(options).filter(([k]) => k in DEFAULTS || k === 'fetch' || k === 'pageSize'));
+  const conf = { ...DEFAULTS, ...known };
+  for (const [key, names] of Object.entries(ENV)) if (!conf[key]) conf[key] = names.map((n) => options[n]).find(Boolean) || '';
+  conf.domain = String(conf.domain || '').replace(/^https?:\/\//, '').replace(/\/.*$/, '');
+  if (!conf.domain || !conf.token) {
+    throw new TetherError('createStorefront needs domain and token: pass them, or import.meta.env with PUBLIC_SHOPIFY_DOMAIN and PUBLIC_SHOPIFY_STOREFRONT_TOKEN', { code: 'NOT_CONFIGURED' });
+  }
+  const pageSize = options.pageSize || 25;
+  const q = (query, variables, opts) => request(conf, query, variables, opts);
+  const fragment = () => productFragment(conf);
+
+  async function getProduct(raw) {
+    const key = productKey(raw);
+    if (!key) return null;
+    const data = isGid(key)
+      ? await q(`query TetherServerProductById($id: ID!) { node(id: $id) { ... on Product { ...TetherProduct } } }\n${fragment()}`, { id: key })
+      : await q(`query TetherServerProduct($handle: String!) { product(handle: $handle) { ...TetherProduct } }\n${fragment()}`, { handle: key });
+    const p = isGid(key) ? data.node : data.product;
+    return p && p.id ? p : null;
+  }
+
+  async function getProducts({ collection, query, first = pageSize, after = null, sortKey, reverse = false, filters } = {}) {
+    if (collection) {
+      const data = await q(`query TetherServerCollection($handle: String!, $first: Int!, $after: String, $sortKey: ProductCollectionSortKeys, $reverse: Boolean, $filters: [ProductFilter!]) {
+  collection(handle: $handle) {
+    ${collectionFields()}
+    products(first: $first, after: $after, sortKey: $sortKey, reverse: $reverse, filters: $filters) {
+      nodes { ...TetherProduct }
+      pageInfo { hasNextPage endCursor }
+    }
+  }
+}
+${fragment()}`, { handle: collection, first, after, sortKey: sortKey || undefined, reverse, filters: filters || undefined });
+      if (!data.collection) return { collection: null, products: [], pageInfo: { hasNextPage: false, endCursor: null } };
+      const { products, ...rest } = data.collection;
+      return { collection: rest, products: products.nodes, pageInfo: products.pageInfo };
+    }
+    const data = await q(`query TetherServerProducts($first: Int!, $after: String, $query: String, $sortKey: ProductSortKeys, $reverse: Boolean) {
+  products(first: $first, after: $after, query: $query, sortKey: $sortKey, reverse: $reverse) {
+    nodes { ...TetherProduct }
+    pageInfo { hasNextPage endCursor }
+  }
+}
+${fragment()}`, { first, after, query: query || undefined, sortKey: sortKey || undefined, reverse });
+    return { collection: null, products: data.products.nodes, pageInfo: data.products.pageInfo };
+  }
+
+  /** Every product (of a collection or a search), page by page. For getStaticPaths(). */
+  async function allProducts(opts = {}) {
+    const out = [];
+    let after = null;
+    for (let i = 0; i < 500; i++) {
+      const page = await getProducts({ ...opts, first: pageSize, after });
+      out.push(...page.products);
+      if (!page.pageInfo.hasNextPage) break;
+      after = page.pageInfo.endCursor;
+    }
+    return out;
+  }
+
+  async function getCollection(handle, opts = {}) {
+    const page = await getProducts({ ...opts, collection: handle });
+    return page.collection ? { ...page.collection, products: page.products, pageInfo: page.pageInfo } : null;
+  }
+
+  async function allCollections() {
+    const out = [];
+    let after = null;
+    for (let i = 0; i < 100; i++) {
+      const data = await q(`query TetherServerCollections($first: Int!, $after: String) {
+  collections(first: $first, after: $after) { nodes { ${collectionFields()} } pageInfo { hasNextPage endCursor } }
+}`, { first: 100, after });
+      out.push(...data.collections.nodes);
+      if (!data.collections.pageInfo.hasNextPage) break;
+      after = data.collections.pageInfo.endCursor;
+    }
+    return out;
+  }
+
+  /** By product id (gid or numeric) or handle, so it can run next to getProduct(handle). */
+  async function getRecommendations(product, intent = 'RELATED') {
+    const key = productKey(typeof product === 'object' ? product?.id : product);
+    const byId = key?.startsWith('gid://');
+    const data = await q(`query TetherServerRecs(${byId ? '$id: ID!' : '$handle: String!'}, $intent: ProductRecommendationIntent) {
+  productRecommendations(${byId ? 'productId: $id' : 'productHandle: $handle'}, intent: $intent) { ...TetherProduct }
+}
+${fragment()}`, byId ? { id: key, intent } : { handle: key, intent });
+    return data.productRecommendations || [];
+  }
+
+  /**
+   * A <script> tag that hands products to the browser script: Tether renders them at once,
+   * without its own request, then refreshes prices and stock in the background.
+   * Put it anywhere in the page (Astro: <Fragment set:html={shop.hydrate(products)} />).
+   */
+  function hydrate(products) {
+    const list = (Array.isArray(products) ? products : [products]).filter(Boolean);
+    const payload = { v: 1, at: new Date().toISOString(), country: conf.country || null, language: conf.language || null, products: list };
+    return `<script type="application/json" data-tether-hydrate>${safeJson(payload)}</script>`;
+  }
+
+  return {
+    config: conf,
+    query: q,
+    getProduct,
+    getProducts,
+    allProducts,
+    getCollection,
+    allCollections,
+    getRecommendations,
+    hydrate,
+    formatMoney: (money, locale = conf.locale) => formatMoney(money, locale),
+    imageUrl,
+    initialState: (product, opts = {}) => initialState(product, { defaultPurchase: conf.defaultPurchase, ...opts }),
+    productUrl: (handle, opts = {}) => productUrl(handle, { productPath: conf.productPath, ...opts }),
+    plans,
+  };
+}

package/src/status.js

@@ -53,17 +53,13 @@ export function setScopeStatus(root, status, err) {
   scoped(root, sel('show'), boundary()).forEach((el) => {
     const k = get(el, 'show');
     if (!STATUS_KEYS.includes(k)) return;
-    const visible = k === status;
-    show(el, visible);
-    // Blocks hidden by a Webflow class (display: none) still need to appear.
-    if (visible && typeof getComputedStyle === 'function' && getComputedStyle(el).display === 'none') {
-      el.style.display = el.getAttribute(attr('display')) || 'block';
-    }
+    show(el, k === status);
   });
 
   if (status === 'error' || notFound) {
     scoped(root, sel('add-to-cart'), boundary()).forEach((btn) => {
       btn.classList.add('is-disabled');
+      btn.setAttribute('aria-disabled', 'true');
       if ('disabled' in btn) btn.disabled = true;
     });
   }

package/types/astro.d.ts

@@ -0,0 +1,15 @@
+import type { TetherConfig } from './index.js';
+
+type Serializable<T> = { [K in keyof T as T[K] extends ((...args: any[]) => any) | null | undefined ? (Exclude<T[K], null | undefined> extends (...args: any[]) => any ? never : K) : K]: T[K] };
+
+export interface TetherAstroOptions extends Partial<Serializable<TetherConfig>> {
+  /** Add the Tether script to every page (default true). False: import and init it yourself. */
+  inject?: boolean;
+}
+
+/**
+ * Astro integration: Tether on every page, store and token from .env
+ * (PUBLIC_SHOPIFY_DOMAIN, PUBLIC_SHOPIFY_STOREFRONT_TOKEN). Functions (onError, hooks) go in
+ * window.TETHER_CONFIG in your layout.
+ */
+export default function tether(options?: TetherAstroOptions): { name: string; hooks: Record<string, (...args: any[]) => unknown> };

package/types/barba.d.ts

@@ -0,0 +1,16 @@
+import type { TetherConfig } from './index.js';
+
+export interface BarbaPresetOptions {
+  gsap?: () => unknown;
+  lenis?: (() => { resize?(): void; stop?(): void; start?(): void } | null | undefined) | null;
+  scrollTrigger?: () => unknown;
+  lockScroll?: ((drawer: HTMLElement) => void) | null;
+  unlockScroll?: (() => void) | null;
+  onResize?: (() => void) | null;
+  onValueChange?: ((el: HTMLElement, previousText: string) => void) | null;
+  animateLines?: boolean;
+  lineDuration?: number;
+}
+
+/** Hooks for sites with page transitions, smooth scroll and GSAP: spread into Tether.init(). */
+export declare function barbaPreset(options?: BarbaPresetOptions): Partial<TetherConfig>;