@redeemid/emdash 0.0.17 → 0.0.18

package/src/components/CartDrawer.astro

@@ -0,0 +1,59 @@
+---
+/**
+ * A cart that slides in over the page. Put it once in the site layout,
+ * with <RedeemIDClient />. Add to cart then opens it in place, and
+ * <Cart drawer /> opens it instead of going to checkout. It is a native
+ * modal dialog: focus stays inside while it's open, Escape closes it, and
+ * focus goes back to what opened it.
+ *
+ * Without JavaScript it never shows, and the cart forms and links work as
+ * they do on their own.
+ */
+import { siteConfig } from "../site-config.js";
+import { text } from "../text.js";
+
+interface Props {
+	title?: string;
+}
+
+const config = await siteConfig(Astro.locals);
+const { title = text(config, "Your cart") } = Astro.props;
+---
+
+<dialog class="redeemid-drawer" data-redeemid-cart-drawer aria-labelledby="redeemid-drawer-title">
+	<div class="redeemid-drawer__head">
+		<h2 id="redeemid-drawer-title">{title}</h2>
+		<button type="button" class="redeemid-drawer__close" data-redeemid-drawer-close>{text(config, "Close")}</button>
+	</div>
+	<p class="redeemid-drawer__status" role="status" data-redeemid-drawer-status></p>
+	<div class="redeemid-cartview redeemid-drawer__body" data-redeemid-drawer-body></div>
+</dialog>
+
+<style is:global>
+	/* Low-specificity defaults; a site's own styles win. */
+	:where(dialog.redeemid-drawer) {
+		box-sizing: border-box;
+		inset: 0 0 0 auto;
+		margin: 0;
+		height: 100dvh;
+		max-height: 100dvh;
+		width: min(28rem, 100vw);
+		max-width: 100vw;
+		padding: 1rem;
+		border: 0;
+		overflow-y: auto;
+	}
+	:where(dialog.redeemid-drawer)::backdrop {
+		background: rgb(0 0 0 / 0.4);
+	}
+	:where(.redeemid-drawer img) {
+		max-width: 5rem;
+		height: auto;
+	}
+	:where(.redeemid-drawer__head) {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: 1rem;
+	}
+</style>

package/src/components/CartView.astro

@@ -57,6 +57,7 @@ const code = cart?.discountCodes[0];
 							<p class="redeemid-cartview__name">
 								{href(l.productHandle) ? <a href={href(l.productHandle)}>{l.productTitle}</a> : l.productTitle}
 								{l.variantTitle && l.variantTitle !== "Default Title" && <span> · {l.variantTitle}</span>}
+								{l.sellingPlan && <span> · {l.sellingPlan}</span>}
 							</p>
 							<p class="redeemid-cartview__price">{text(config, "{price} each · {total}", { price: money(l.price), total: money(l.total) })}</p>
 							<form method="post" action={action} class="redeemid-cartview__quantity">

package/src/components/Collection.astro

@@ -5,35 +5,47 @@
  * site can give every product its own page with <Product>.
  *
  *   <Collection handle="shop" productHref="/shop/{handle}/" />
+ *   <Collection handle="shop" productHref="/shop/{handle}/" browse />
+ *
+ * `browse` adds Shopify's filters, sort orders and paging, read from the
+ * page URL (so the page must be rendered on demand). `quickAdd` adds Add to
+ * cart on cards that need no choice.
  */
+import { browseFromUrl, collectionPage, type CollectionPage } from "../catalog.js";
 import { siteConfig } from "../site-config.js";
-import { collection as loadCollection, money, type Collection } from "../storefront.js";
-import { text } from "../text.js";
+import { collection as loadCollection, storeContext, type Collection } from "../storefront.js";
+import BrowseControls from "./BrowseControls.astro";
+import ProductGrid from "./ProductGrid.astro";
 
 interface Props {
 	handle: string;
-	/** How many products, 1 to 50. */
+	/** How many products (per page with `browse`), 1 to 50. */
 	limit?: number;
 	/** Link for each product; `{handle}` is replaced. Leave out for cards without links. */
 	productHref?: string;
 	/** Show the collection's title and description above the grid. */
 	showTitle?: boolean;
+	/** Filters, sorting and paging from the page URL. */
+	browse?: boolean;
+	quickAdd?: boolean;
 }
 
-const { handle, limit = 12, productHref, showTitle = false } = Astro.props;
+const { handle, limit = 12, productHref, showTitle = false, browse = false, quickAdd = false } = Astro.props;
 const config = await siteConfig(Astro.locals);
-let c: Collection | null = null;
+const context = storeContext(config, Astro.request);
+let c: Collection | CollectionPage | null = null;
 if (config) {
 	try {
-		c = await loadCollection(config, handle, limit);
+		c = browse ? await collectionPage(config, handle, browseFromUrl(Astro.url.searchParams, limit), { context }) : await loadCollection(config, handle, limit, undefined, context);
 	} catch {
 		c = null;
 	}
 }
-const href = (h: string) => productHref?.replaceAll("{handle}", encodeURIComponent(h));
+const page = c && "pageInfo" in c ? c : null;
+const id = `redeemid-collection-${handle}`;
 ---
 
-{c && c.products.length > 0 ? (
+{c && (c.products.length > 0 || page) ? (
 	<section class="redeemid-collection" data-redeemid-collection={c.handle}>
 		{showTitle && (
 			<>
@@ -41,15 +53,8 @@ const href = (h: string) => productHref?.replaceAll("{handle}", encodeURICompone
 				{c.description && <p class="redeemid-collection__description">{c.description}</p>}
 			</>
 		)}
-		<ul class="redeemid-collection__grid">
-			{c.products.map((p) => (
-				<li class="redeemid-collection__item" data-redeemid-product={p.handle}>
-					{p.image && <img src={p.image.url} alt={p.image.altText ?? ""} loading="lazy" />}
-					<h3>{href(p.handle) ? <a href={href(p.handle)}>{p.title}</a> : p.title}</h3>
-					<p class="redeemid-collection__price">{p.availableForSale ? (p.price ? text(config, "From {price}", { price: money(p.price) }) : "") : text(config, "Sold out")}</p>
-				</li>
-			))}
-		</ul>
+		{page && <BrowseControls filters={page.filters} pageInfo={page.pageInfo} id={id} />}
+		<ProductGrid products={c.products} productHref={productHref} quickAdd={quickAdd} />
 	</section>
 ) : (
 	<slot />

package/src/components/Content.astro

@@ -122,7 +122,7 @@ const meterText =
 	!p.verdict || p.verdict.allowed ? (
 		p.blocks.length > 0 && <PortableText value={p.blocks} />
 	) : (
-		<LockedPanel reason={p.verdict.reason} required={p.verdict.required} held={p.verdict.viewer.levels} item={item} />
+		<LockedPanel reason={p.verdict.reason} required={p.verdict.required} held={p.verdict.viewer.levels} item={item} entry={id} />
 	),
 )}
 {verdict.allowed ? (
@@ -130,7 +130,7 @@ const meterText =
 		!p.verdict || p.verdict.allowed ? (
 			p.blocks.length > 0 && <PortableText value={p.blocks} />
 		) : (
-			<LockedPanel reason={p.verdict.reason} required={p.verdict.required} held={p.verdict.viewer.levels} item={item} />
+			<LockedPanel reason={p.verdict.reason} required={p.verdict.required} held={p.verdict.viewer.levels} item={item} entry={id} />
 		),
 	)
 ) : (
@@ -142,6 +142,7 @@ const meterText =
 		meterLeft={verdict.meterLeft}
 		meterPeriod={verdict.meter?.period}
 		item={item}
+		entry={id}
 	>
 		<slot name="locked" />
 	</LockedPanel>

package/src/components/LockedPanel.astro

@@ -27,9 +27,11 @@ interface Props {
 	meterPeriod?: "month" | "week";
 	/** The entry's "Sold on its own" block: offers "Buy just this". */
 	item?: SoldItem | null;
+	/** The entry's id or slug, for the browser client's wall_shown event. */
+	entry?: string;
 }
 
-const { reason, required = [], held = [], opensAt, meterLeft, meterPeriod, item } = Astro.props;
+const { reason, required = [], held = [], opensAt, meterLeft, meterPeriod, item, entry } = Astro.props;
 const opens = opensAt
 	? new Intl.DateTimeFormat("en-US", { dateStyle: "long", timeZone: "UTC" }).format(opensAt)
 	: null;
@@ -54,7 +56,7 @@ if (item?.product && config && (reason === "sign_in" || reason === "upgrade" ||
 const here = Astro.url.pathname + Astro.url.search;
 ---
 
-<div class="redeemid-locked" data-redeemid-reason={reason} data-redeemid-level={level?.slug}>
+<div class="redeemid-locked" data-redeemid-reason={reason} data-redeemid-level={level?.slug} data-redeemid-entry={entry}>
 	<slot />
 	{level?.wall && (reason === "sign_in" || reason === "upgrade") && <p class="redeemid-locked__wall">{level.wall}</p>}
 	{reason === "sign_in" && (

package/src/components/Notices.astro

@@ -5,39 +5,14 @@
  * `messages` to reword any of them (config `text` does too, for every page).
  */
 import { siteConfig } from "../site-config.js";
+import { NOTICES as DEFAULTS } from "../notices.js";
 import { text as replace } from "../text.js";
 
 interface Props {
 	messages?: Record<string, string>;
 }
 
-const DEFAULTS: Record<string, string> = {
-	not_configured: "Sign-in isn't set up on this site yet.",
-	sign_in_unavailable: "Sign-in isn't available right now. Try again in a few minutes.",
-	sign_in_expired: "That sign-in took too long. Try again.",
-	staff_account: "This account can't sign in here. Use a different email.",
-	account_disabled: "Your account is turned off. Contact the store for help.",
-	too_many_requests: "Too many tries. Wait a minute, then try again.",
-	site_not_ready: "This site isn't ready for sign-in yet.",
-	email_required: "Your account needs an email address to sign in.",
-	token_failed: "Sign-in didn't finish. Try again.",
-	bad_id_token: "Sign-in didn't finish. Try again.",
-	identity_failed: "Sign-in didn't finish. Try again.",
-	plan_unavailable: "That plan isn't available right now.",
-	checkout_failed: "Checkout didn't open. Try again.",
-	cart_empty: "Your cart is empty.",
-	cart_added: "Added to your cart.",
-	cart_updated: "Your cart is updated.",
-	discount_applied: "Discount applied.",
-	discount_not_applicable: "That discount code doesn't apply to this cart.",
-	refreshed: "Your membership is up to date.",
-	preferences_saved: "Your preferences are saved.",
-	preferences_refused: "Some answers weren't saved. Check them and try again.",
-	preferences_unavailable: "Your preferences can't be saved right now. Try again in a few minutes.",
-	data_erased: "Your data on this site is deleted, and you're signed out.",
-	erase_unconfirmed: "Tick the box to confirm, then try again.",
-	account_unavailable: "Your account page isn't available right now. Try again in a few minutes.",
-};
+
 
 const { messages = {} } = Astro.props;
 const code = Astro.url.searchParams.get("redeemid_notice") ?? "";

package/src/components/Product.astro

@@ -1,72 +1,163 @@
 ---
 /**
- * A Shopify product: image, title, price, description, a variant choice
- * when it has several, a quantity, and "Add to cart" and "Buy now".
- * Everything comes from the Storefront API; the default slot shows if the
- * product can't be loaded.
+ * A Shopify product: images, title, price (with the sale price when there
+ * is one), description, a picker per option (Size, Color…), a choice of
+ * one-time or subscription when the product has selling plans, a quantity,
+ * and "Add to cart" and "Buy now". Everything comes from the Storefront
+ * API; the default slot shows if the product can't be loaded.
  *
- *   <Product handle="harbor-tote" />
+ *   <Product handle="harbor-tote" heading="h1" />
+ *
+ * The form works without JavaScript (the server picks the variant from the
+ * options). With <RedeemIDClient /> on the page the price, image and stock
+ * follow the choice as it changes, and with <CartDrawer /> Add to cart opens
+ * the drawer in place.
+ *
+ * On a product's own page (heading "h1") it prints Product structured data
+ * for search engines; `schema={false}` turns that off.
  */
 import { siteConfig } from "../site-config.js";
-import { money, product as loadProduct, type Product } from "../storefront.js";
+import { money, product as loadProduct, realOptions, storeContext, type Product } from "../storefront.js";
 import { text } from "../text.js";
 
 interface Props {
 	handle: string;
 	/** Heading level for the title. */
 	heading?: "h1" | "h2" | "h3";
-	/** Leave out the description (for cards). */
+	/** Leave out the description and gallery (for cards). */
 	compact?: boolean;
 	addLabel?: string;
 	buyLabel?: string;
+	/** Show Shopify's HTML description (as the merchant wrote it) instead of the plain text. */
+	html?: boolean;
+	/** Product structured data. Defaults to on for heading "h1". */
+	schema?: boolean;
 }
 
 const config = await siteConfig(Astro.locals);
-const { handle, heading = "h2", compact = false, addLabel = text(config, "Add to cart"), buyLabel = text(config, "Buy now") } = Astro.props;
+const { handle, heading = "h2", compact = false, html = false, addLabel = text(config, "Add to cart"), buyLabel = text(config, "Buy now") } = Astro.props;
+const context = storeContext(config, Astro.request);
 let p: Product | null = null;
 if (config) {
 	try {
-		p = await loadProduct(config, handle);
+		p = await loadProduct(config, handle, undefined, context);
 	} catch {
 		p = null;
 	}
 }
+if (context.country && config?.market?.country === "visitor") Astro.response.headers.set("Vary", "CF-IPCountry");
+const options = p ? realOptions(p) : [];
 const available = p?.variants.filter((v) => v.availableForSale) ?? [];
 const first = available[0] ?? p?.variants[0];
+const chosen = Object.fromEntries((first?.selectedOptions ?? []).map((o) => [o.name, o.value]));
+const plans = p?.sellingPlans ?? [];
+const sale = first?.compareAtPrice && Number(first.compareAtPrice.amount) > Number(first.price.amount) ? first.compareAtPrice : null;
+const image = first?.image ?? p?.image ?? null;
+const images = p?.images ?? (p?.image ? [p.image] : []);
 const here = Astro.url.pathname + Astro.url.search;
 const Heading = heading;
 const id = `redeemid-product-${handle}`;
+const variants = (p?.variants ?? []).map((v) => ({
+	id: v.id,
+	available: v.availableForSale,
+	price: money(v.price) ?? "",
+	compareAt: v.compareAtPrice && Number(v.compareAtPrice.amount) > Number(v.price.amount) ? (money(v.compareAtPrice) ?? "") : "",
+	image: v.image?.url ?? null,
+	imageAlt: v.image?.altText ?? "",
+	options: Object.fromEntries((v.selectedOptions ?? []).map((o) => [o.name, o.value])),
+}));
+const json = (v: unknown) => JSON.stringify(v).replace(/</g, "\\u003c");
+const showSchema = (Astro.props.schema ?? heading === "h1") && config?.schema !== false && p;
+const schema =
+	showSchema && p
+		? json({
+				"@context": "https://schema.org",
+				"@type": "Product",
+				name: p.title,
+				description: p.description || undefined,
+				image: images.map((i) => i.url),
+				brand: p.vendor ? { "@type": "Brand", name: p.vendor } : undefined,
+				url: new URL(Astro.url.pathname, Astro.url).href,
+				offers: p.variants.map((v) => ({
+					"@type": "Offer",
+					price: v.price.amount,
+					priceCurrency: v.price.currencyCode,
+					availability: v.availableForSale ? "https://schema.org/InStock" : "https://schema.org/OutOfStock",
+					sku: v.sku || undefined,
+					name: v.title !== "Default Title" ? v.title : undefined,
+				})),
+			})
+		: null;
 ---
 
 {p ? (
 	<div class="redeemid-product" data-redeemid-product={p.handle}>
-		{p.image && <img class="redeemid-product__image" src={p.image.url} alt={p.image.altText ?? ""} loading="lazy" />}
+		{schema && <script type="application/ld+json" set:html={schema} />}
+		{image && <img class="redeemid-product__image" src={image.url} alt={image.altText ?? ""} loading={heading === "h1" ? "eager" : "lazy"} data-redeemid-product-image />}
+		{!compact && images.length > 1 && (
+			<ul class="redeemid-product__thumbs">
+				{images.map((img, i) => (
+					<li>
+						<button type="button" data-redeemid-thumb={img.url} data-redeemid-alt={img.altText ?? ""} aria-pressed={String(i === 0)}>
+							<img src={img.url} alt={img.altText || text(config, "Image {number} of {count}", { number: i + 1, count: images.length })} loading="lazy" />
+						</button>
+					</li>
+				))}
+			</ul>
+		)}
 		<Heading class="redeemid-product__title">{p.title}</Heading>
-		{first && <p class="redeemid-product__price">{money(first.price)}</p>}
-		{!compact && p.description && <p class="redeemid-product__description">{p.description}</p>}
+		<p class="redeemid-product__price">
+			<span data-redeemid-price>{first && money(first.price)}</span>
+			<s class="redeemid-product__compare-at" data-redeemid-compare-at hidden={!sale}>{sale && money(sale)}</s>
+		</p>
+		{!compact && (html && p.descriptionHtml ? <div class="redeemid-product__description" set:html={p.descriptionHtml} /> : p.description && <p class="redeemid-product__description">{p.description}</p>)}
 		{available.length > 0 ? (
-			<form method="post" action="/_emdash/api/auth/redeemid/cart-edit">
+			<form method="post" action="/_emdash/api/auth/redeemid/cart-edit" data-redeemid-product-form>
 				<input type="hidden" name="action" value="add" />
 				<input type="hidden" name="product" value={p.handle} />
 				<input type="hidden" name="return" value={here} />
-				{p.variants.length > 1 ? (
-					<p>
-						<label for={`${id}-variant`}>{text(config, "Option")}</label>
-						<select id={`${id}-variant`} name="variant">
-							{p.variants.map((v) => (
-								<option value={v.id} disabled={!v.availableForSale}>
-									{text(config, v.availableForSale ? "{option} ({price})" : "{option} ({price}) sold out", { option: v.title, price: money(v.price) })}
-								</option>
-							))}
-						</select>
-					</p>
+				{options.length > 0 ? (
+					<>
+						<script type="application/json" data-redeemid-variants set:html={json(variants)} />
+						{options.map((o, i) => (
+							<p class="redeemid-product__option">
+								<label for={`${id}-option-${i}`}>{o.name}</label>
+								<select id={`${id}-option-${i}`} name={`option.${o.name}`}>
+									{o.values.map((value) => (
+										<option value={value} selected={chosen[o.name] === value} disabled={options.length === 1 && !p.variants.some((v) => v.availableForSale && v.selectedOptions?.some((x) => x.name === o.name && x.value === value))}>
+											{value}
+										</option>
+									))}
+								</select>
+							</p>
+						))}
+					</>
 				) : (
 					<input type="hidden" name="variant" value={first?.id} />
 				)}
+				{plans.length > 0 && (
+					<fieldset class="redeemid-product__plans">
+						<legend>{text(config, "Purchase options")}</legend>
+						{!p.requiresSellingPlan && (
+							<p>
+								<input type="radio" id={`${id}-plan-none`} name="selling_plan" value="" checked />
+								<label for={`${id}-plan-none`}>{text(config, "One-time purchase")}</label>
+							</p>
+						)}
+						{plans.map((sp, i) => (
+							<p>
+								<input type="radio" id={`${id}-plan-${i}`} name="selling_plan" value={sp.id} checked={p.requiresSellingPlan && i === 0} />
+								<label for={`${id}-plan-${i}`}>{sp.group && sp.group !== sp.name ? text(config, "{group}: {plan}", { group: sp.group, plan: sp.name }) : sp.name}</label>
+							</p>
+						))}
+					</fieldset>
+				)}
 				<p>
 					<label for={`${id}-quantity`}>{text(config, "Quantity")}</label>
 					<input id={`${id}-quantity`} name="quantity" type="number" min="1" max="1000" value="1" inputmode="numeric" />
 				</p>
+				<p class="redeemid-product__availability" role="status" data-redeemid-availability></p>
+				<p class="redeemid-product__form-status" role="status" data-redeemid-form-status></p>
 				<button type="submit" name="then" value="back">{addLabel}</button>
 				<button type="submit" name="then" value="checkout">{buyLabel}</button>
 			</form>

package/src/components/ProductGrid.astro

@@ -0,0 +1,52 @@
+---
+/**
+ * Product cards in a grid: image, title, lowest price (with the sale price
+ * when there is one). Used by <Collection>, <ProductSearch> and
+ * <Recommendations>; use it for your own lists of Storefront products.
+ *
+ * `quickAdd` puts Add to cart on cards whose product has one variant and
+ * needs no choice.
+ */
+import { siteConfig } from "../site-config.js";
+import { money, type ProductCard } from "../storefront.js";
+import { text } from "../text.js";
+
+interface Props {
+	products: ProductCard[];
+	/** Link for each product; `{handle}` is replaced. */
+	productHref?: string;
+	/** Heading level of each card's title. */
+	heading?: "h2" | "h3" | "h4";
+	quickAdd?: boolean;
+}
+
+const { products, productHref, heading = "h3", quickAdd = false } = Astro.props;
+const config = await siteConfig(Astro.locals);
+const href = (h: string) => productHref?.replaceAll("{handle}", encodeURIComponent(h));
+const here = Astro.url.pathname + Astro.url.search;
+const Heading = heading;
+---
+
+<ul class="redeemid-collection__grid">
+	{products.map((p) => (
+		<li class="redeemid-collection__item" data-redeemid-product={p.handle}>
+			{p.image && <img src={p.image.url} alt={p.image.altText ?? ""} loading="lazy" />}
+			<Heading>{href(p.handle) ? <a href={href(p.handle)}>{p.title}</a> : p.title}</Heading>
+			<p class="redeemid-collection__price">
+				{p.availableForSale ? (p.price ? text(config, "From {price}", { price: money(p.price) }) : "") : text(config, "Sold out")}
+				{p.availableForSale && p.compareAtPrice && <s class="redeemid-collection__compare-at">{money(p.compareAtPrice)}</s>}
+			</p>
+			{quickAdd && p.quickAddVariantId && (
+				<form method="post" action="/_emdash/api/auth/redeemid/cart-edit">
+					<input type="hidden" name="action" value="add" />
+					<input type="hidden" name="product" value={p.handle} />
+					<input type="hidden" name="variant" value={p.quickAddVariantId} />
+					<input type="hidden" name="return" value={here} />
+					<button type="submit" name="then" value="back">
+						{text(config, "Add to cart")}<span style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap"> {p.title}</span>
+					</button>
+				</form>
+			)}
+		</li>
+	))}
+</ul>

package/src/components/ProductSearch.astro

@@ -0,0 +1,83 @@
+---
+/**
+ * Product search for a search page: a search box, Shopify's matching
+ * products with its filters, sort orders and paging, all from the page URL
+ * (?q=…), so the page must be rendered on demand. With <RedeemIDClient />
+ * the box also suggests products as the visitor types.
+ *
+ *   <ProductSearch productHref="/shop/{handle}/" />
+ *
+ * `boxOnly` renders just the search box (for a header), sending searches to
+ * `action`, the search page's path.
+ */
+import { browseFromUrl, searchProducts, type ProductPage } from "../catalog.js";
+import { siteConfig } from "../site-config.js";
+import { storeContext } from "../storefront.js";
+import { text } from "../text.js";
+import BrowseControls from "./BrowseControls.astro";
+import ProductGrid from "./ProductGrid.astro";
+
+interface Props {
+	productHref?: string;
+	/** Products per page, 1 to 50. */
+	limit?: number;
+	/** Only the search box. */
+	boxOnly?: boolean;
+	/** Where searches go. Defaults to this page. */
+	action?: string;
+	label?: string;
+	quickAdd?: boolean;
+}
+
+const config = await siteConfig(Astro.locals);
+const { productHref, limit = 24, boxOnly = false, action = Astro.url.pathname, label = text(config, "Search products"), quickAdd = false } = Astro.props;
+const browse = browseFromUrl(Astro.url.searchParams, limit);
+let page: ProductPage | null = null;
+let failed = false;
+if (!boxOnly && config && browse.query) {
+	try {
+		page = await searchProducts(config, browse.query, browse, { context: storeContext(config, Astro.request) });
+	} catch {
+		failed = true;
+	}
+}
+const id = boxOnly ? "redeemid-search-box" : "redeemid-search";
+---
+
+<section class="redeemid-search" role="search">
+	<form method="get" action={action} class="redeemid-search__form">
+		<label for={`${id}-q`}>{label}</label>
+		<input
+			id={`${id}-q`}
+			name="q"
+			type="search"
+			value={boxOnly ? "" : browse.query}
+			autocomplete="off"
+			maxlength="200"
+			data-redeemid-suggest
+			data-redeemid-product-href={productHref}
+			aria-controls={`${id}-suggestions`}
+			aria-expanded="false"
+		/>
+		<button type="submit">{text(config, "Search")}</button>
+		<ul id={`${id}-suggestions`} class="redeemid-search__suggestions" hidden></ul>
+		<p style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap" role="status" data-redeemid-suggest-status></p>
+	</form>
+	{!boxOnly && browse.query && (
+		failed ? (
+			<p>{text(config, "Search isn't available right now. Try again in a few minutes.")}</p>
+		) : page && (
+			<>
+				<p class="redeemid-search__count" role="status">
+					{page.products.length === 0
+						? text(config, "No products match “{query}”.", { query: browse.query })
+						: (page.total ?? page.products.length) === 1
+							? text(config, "1 result for “{query}”", { query: browse.query })
+							: text(config, "{count} results for “{query}”", { count: page.total ?? page.products.length, query: browse.query })}
+				</p>
+				{(page.products.length > 0 || page.filters.length > 0) && <BrowseControls filters={page.filters} pageInfo={page.pageInfo} search query={browse.query} id={id} />}
+				<ProductGrid products={page.products} productHref={productHref} heading="h2" quickAdd={quickAdd} />
+			</>
+		)
+	)}
+</section>

package/src/components/Recommendations.astro

@@ -0,0 +1,45 @@
+---
+/**
+ * Shopify's product recommendations under a product: "related" (You may also
+ * like) or "complementary" (Pair it with, set in the Search & Discovery
+ * app). Renders nothing when Shopify has none.
+ *
+ *   <Recommendations handle="harbor-tote" productHref="/shop/{handle}/" />
+ */
+import { recommendations } from "../catalog.js";
+import { siteConfig } from "../site-config.js";
+import { product, storeContext, type ProductCard } from "../storefront.js";
+import { text } from "../text.js";
+import ProductGrid from "./ProductGrid.astro";
+
+interface Props {
+	handle: string;
+	intent?: "related" | "complementary";
+	/** Up to 10. */
+	limit?: number;
+	productHref?: string;
+	title?: string;
+	quickAdd?: boolean;
+}
+
+const config = await siteConfig(Astro.locals);
+const { handle, intent = "related", limit = 4, productHref, quickAdd = false } = Astro.props;
+const title = Astro.props.title ?? text(config, intent === "complementary" ? "Pair it with" : "You may also like");
+let cards: ProductCard[] = [];
+if (config) {
+	try {
+		const context = storeContext(config, Astro.request);
+		const p = await product(config, handle, undefined, context);
+		if (p?.id) cards = (await recommendations(config, p.id, intent, { context })).slice(0, Math.max(1, Math.min(10, limit)));
+	} catch {
+		cards = [];
+	}
+}
+---
+
+{cards.length > 0 && (
+	<section class="redeemid-recommendations" aria-labelledby={`redeemid-recs-${handle}`}>
+		<h2 id={`redeemid-recs-${handle}`}>{title}</h2>
+		<ProductGrid products={cards} productHref={productHref} quickAdd={quickAdd} />
+	</section>
+)}

package/src/components/RedeemIDClient.astro

@@ -0,0 +1,45 @@
+---
+/**
+ * The browser client, window.redeemid. Put it once in the site layout
+ * (before </body>). See docs/developer-api.md for what it offers.
+ *
+ *   <RedeemIDClient />
+ */
+import { API_VERSION } from "../api-version.js";
+import { NOTICES } from "../notices.js";
+import { siteConfig } from "../site-config.js";
+import { text } from "../text.js";
+import { VERSION } from "../version.js";
+
+const config = await siteConfig(Astro.locals);
+const boot = {
+	version: VERSION,
+	apiVersion: API_VERSION,
+	base: "/_emdash/api/auth/redeemid",
+	locale: "en-US",
+	notices: Object.fromEntries(Object.entries(NOTICES).map(([code, message]) => [code, text(config, message)])),
+	strings: {
+		"Your cart is empty.": text(config, "Your cart is empty."),
+		"Loading your cart…": text(config, "Loading your cart…"),
+		"{price} each · {total}": text(config, "{price} each · {total}"),
+		Quantity: text(config, "Quantity"),
+		Update: text(config, "Update"),
+		Remove: text(config, "Remove"),
+		"Discount code": text(config, "Discount code"),
+		Apply: text(config, "Apply"),
+		"{code} doesn't apply to this cart.": text(config, "{code} doesn't apply to this cart."),
+		Subtotal: text(config, "Subtotal"),
+		Total: text(config, "Total"),
+		"Taxes and shipping are worked out at checkout.": text(config, "Taxes and shipping are worked out at checkout."),
+		Checkout: text(config, "Checkout"),
+		"Sold out.": text(config, "Sold out."),
+		"Not available in this combination.": text(config, "Not available in this combination."),
+		"{count} suggestions": text(config, "{count} suggestions"),
+	},
+};
+---
+
+<script type="application/json" id="redeemid-client-config" set:html={JSON.stringify(boot).replace(/</g, "\\u003c")} />
+<script>
+	import "../client/redeemid.ts";
+</script>