@redeemid/emdash 0.0.7 → 0.0.8

package/README.md

@@ -2,7 +2,7 @@
 
 Shopify customer accounts, member levels and paywalls for [EmDash](https://github.com/emdash-cms/emdash) sites. Shopify runs the store and the customer account; EmDash runs the content.
 
-**Status: 0.0.7, early.** Runs on Node and Cloudflare Workers. Sign-in, the member mirror, webhooks, levels, rules, the meter and drip, teasers, badges, the page gate, the Shopify cart and checkout are covered by an end-to-end test against a fake store.
+**Status: 0.0.8, early.** Runs on Node and Cloudflare Workers. Sign-in, the member mirror, webhooks, levels, rules, the meter and drip, teasers, badges, the page gate, the Shopify cart and checkout are covered by an end-to-end test against a fake store.
 
 ## What it does
 
@@ -19,6 +19,7 @@ Shopify customer accounts, member levels and paywalls for [EmDash](https://githu
 - **Members only block.** For a members part in the middle of a body: "Members only" (pick the levels) and "Members only: end". Everyone else sees the wall in its place and reads on after it.
 - **The wall.** Readers kept out see why and what to do next: sign in, or join, with each level's own wall text. `<Notices>` shows the messages sign-in, Buy, Cart and Account send readers back with.
 - **Plan block.** Editors add a Shopify product to any page with the "Plan" block: title, price and a buy button.
+- **Shop.** `<Product>`, `<Collection>` and `<CartView>` (with the Product and Collection blocks) give the site product pages, collection grids and a cart page with quantities and discount codes. `<Contribution>` (and its block) takes pay-what-you-want amounts. Carts note the page each sale started on.
 - **In the admin.** RedeemID shows under Plugins with a Members page (Shopify customers, tags, levels), a Status page (secrets, store discovery, the URLs to give Shopify, levels and rules) and a dashboard widget.
 - **Keeps members out of EmDash's own APIs**, so the gate is the only way to read locked content.
 
@@ -168,6 +169,34 @@ import Plan from "@redeemid/emdash/components/Plan.astro";
 </Plan>
 ```
 
+### Shop
+
+Products, collections and the cart come from the Storefront API; Shopify works out prices, discounts, taxes and stock.
+
+```astro
+---
+import Product from "@redeemid/emdash/components/Product.astro";
+import Collection from "@redeemid/emdash/components/Collection.astro";
+import CartView from "@redeemid/emdash/components/CartView.astro";
+import Contribution from "@redeemid/emdash/components/Contribution.astro";
+---
+<!-- /shop/ -->
+<Collection handle="shop" productHref="/shop/{handle}/" showTitle />
+<!-- /shop/[handle]/ -->
+<Product handle={Astro.params.handle} heading="h1"><p>No such product.</p></Product>
+<!-- /cart/ -->
+<CartView productHref="/shop/{handle}/" />
+<!-- anywhere -->
+<Contribution handle="support" amounts={[5, 10, 25]} />
+```
+
+- `<Product>`: image, title, price, description, the variants (sold-out ones shown but not choosable), a quantity, Add to cart (back to the page with the `cart_added` notice) and Buy now (straight to checkout).
+- `<Collection>`: the collection's products (`limit`, up to 50) as cards linking to `productHref`.
+- `<CartView>`: each line with its price, a quantity to change (0 removes it) and Remove, a discount code field, the subtotal and total, and Checkout. Pages with it are sent `Cache-Control: private, no-store`.
+- `<Contribution>`: pay what you want. Make a Shopify product priced at 1.00; the amount the reader picks becomes the quantity, so Shopify charges exactly that.
+
+The forms post to `/_emdash/api/auth/redeemid/cart-edit`, which reads every product and variant from Shopify again and only changes lines in the visitor's own cart. A new cart carries the `_redeemid_page` attribute (the page the first item was added on), which shows on the order in Shopify admin; Shopify hides attributes starting with `_` at checkout. Editors get the same with the Product, Collection and Contribution blocks.
+
 Or ask directly:
 
 ```ts

package/docs/shopify-setup.md

@@ -53,4 +53,4 @@ The Workers free plan is enough: RedeemID is a native plugin and doesn't need sa
 3. Click **Sign in**, sign in with that customer's email, and you come back to the post, unlocked.
 4. Add or remove the tag in Shopify; the post opens or locks again once the webhook arrives.
 
-If sign-in sends you back with `?redeemid_notice=…`, the code says why: `not_configured` (secrets or `shop` missing), `sign_in_unavailable` (store discovery failed), `sign_in_expired`, `staff_account`, `site_not_ready`, `email_required`, `token_failed`, `bad_id_token`, `identity_failed`. A Buy button can return `plan_unavailable` (no such product, or sold out) or `checkout_failed`. The Cart link returns `cart_empty` when there's nothing in the cart, and Account returns `account_unavailable` when store discovery fails. Refresh membership returns `refreshed` once it has read the member's tags again.
+If sign-in sends you back with `?redeemid_notice=…`, the code says why: `not_configured` (secrets or `shop` missing), `sign_in_unavailable` (store discovery failed), `sign_in_expired`, `staff_account`, `site_not_ready`, `email_required`, `token_failed`, `bad_id_token`, `identity_failed`. A Buy button can return `plan_unavailable` (no such product, or sold out) or `checkout_failed`. The Cart link returns `cart_empty` when there's nothing in the cart, and Account returns `account_unavailable` when store discovery fails. Cart changes return `cart_added`, `cart_updated`, `discount_applied` or `discount_not_applicable`. Refresh membership returns `refreshed` once it has read the member's tags again.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@redeemid/emdash",
-	"version": "0.0.7",
+	"version": "0.0.8",
 	"description": "Shopify customer accounts, member levels and paywalls for EmDash sites. Shopify runs commerce; EmDash runs content.",
 	"type": "module",
 	"license": "MIT",

package/src/blocks/CollectionBlock.astro

@@ -0,0 +1,22 @@
+---
+/** The "Collection" block: a Shopify collection's products as cards. */
+import Collection from "../components/Collection.astro";
+
+interface Props {
+	node: { handle?: string; limit?: string; link?: string };
+}
+
+const { node } = Astro.props;
+const handle = (node.handle ?? "").trim();
+const limit = Number.parseInt(node.limit ?? "", 10);
+const link = (node.link ?? "").trim();
+---
+
+{handle && (
+	<Collection
+		handle={handle}
+		limit={Number.isFinite(limit) ? limit : 12}
+		productHref={link.startsWith("/") && link.includes("{handle}") ? link : undefined}
+		showTitle
+	/>
+)}

package/src/blocks/ContributionBlock.astro

@@ -0,0 +1,24 @@
+---
+/** The "Contribution" block: pay what you want with a 1.00 Shopify product. */
+import Contribution from "../components/Contribution.astro";
+
+interface Props {
+	node: { handle?: string; title?: string; label?: string; amounts?: string };
+}
+
+const { node } = Astro.props;
+const handle = (node.handle ?? "").trim();
+const amounts = (node.amounts ?? "")
+	.split(",")
+	.map((a) => Number.parseInt(a.trim(), 10))
+	.filter((a) => Number.isFinite(a) && a > 0 && a <= 1000);
+---
+
+{handle && (
+	<Contribution
+		handle={handle}
+		title={node.title?.trim() || undefined}
+		label={node.label?.trim() || "Give"}
+		amounts={amounts.length ? amounts : undefined}
+	/>
+)}

package/src/blocks/ProductBlock.astro

@@ -0,0 +1,12 @@
+---
+/** The "Product" block: a Shopify product with Add to cart and Buy now. */
+import Product from "../components/Product.astro";
+
+interface Props {
+	node: { handle?: string };
+}
+
+const handle = (Astro.props.node.handle ?? "").trim();
+---
+
+{handle && <Product handle={handle} heading="h3" />}

package/src/blocks/index.ts

@@ -3,11 +3,17 @@
  * EmDash from the plugin's `componentsEntry`.
  */
 import Marker from "./PaywallBreak.astro";
+import CollectionBlock from "./CollectionBlock.astro";
+import ContributionBlock from "./ContributionBlock.astro";
 import PlanBlock from "./PlanBlock.astro";
+import ProductBlock from "./ProductBlock.astro";
 
 export const blockComponents = {
 	"redeemid-paywall": Marker,
 	"redeemid-members": Marker,
 	"redeemid-members-end": Marker,
 	"redeemid-plan": PlanBlock,
+	"redeemid-product": ProductBlock,
+	"redeemid-collection": CollectionBlock,
+	"redeemid-contribution": ContributionBlock,
 };

package/src/blocks-names.ts

@@ -1,6 +1,9 @@
 /** Portable Text block types RedeemID adds to the editor. */
 export const PAYWALL_BLOCK = "redeemid-paywall";
 export const PLAN_BLOCK = "redeemid-plan";
+export const PRODUCT_BLOCK = "redeemid-product";
+export const COLLECTION_BLOCK = "redeemid-collection";
+export const CONTRIBUTION_BLOCK = "redeemid-contribution";
 /** Starts a members-only part of the body; it runs to the next end block. */
 export const MEMBERS_BLOCK = "redeemid-members";
 export const MEMBERS_END_BLOCK = "redeemid-members-end";

package/src/components/CartView.astro

@@ -0,0 +1,97 @@
+---
+/**
+ * The visitor's Shopify cart for a cart page: each line with its price and
+ * a quantity to change or remove, a discount code, the totals, and
+ * Checkout. Shopify works out prices and discounts; changes go through
+ * the cart-edit route and come back here with a notice.
+ *
+ *   <CartView />
+ */
+import { cartUrl } from "../access.js";
+import { readCart, saveCart } from "../cart.js";
+import { siteConfig } from "../site-config.js";
+import { cartDetails, money, type CartDetails } from "../storefront.js";
+
+interface Props {
+	/** Link for each line's product; `{handle}` is replaced. */
+	productHref?: string;
+	/** Shown when the cart is empty. */
+	empty?: string;
+}
+
+const { productHref, empty = "Your cart is empty." } = Astro.props;
+const config = siteConfig((Astro.locals as { emdash?: { config?: unknown } }).emdash?.config);
+const ref = await readCart(Astro.session);
+let cart: CartDetails | null = null;
+let failed = false;
+if (config && ref) {
+	try {
+		cart = await cartDetails(config, ref.id, { buyerIp: Astro.request.headers.get("cf-connecting-ip") });
+		if (!cart) saveCart(Astro.session, null);
+		else if (cart.totalQuantity !== ref.count) saveCart(Astro.session, { id: cart.id, count: cart.totalQuantity });
+	} catch {
+		failed = true;
+	}
+}
+// A cart page is the visitor's own.
+Astro.response.headers.set("Cache-Control", "private, no-store");
+const here = Astro.url.pathname;
+const href = (h: string) => productHref?.replaceAll("{handle}", encodeURIComponent(h));
+const action = "/_emdash/api/auth/redeemid/cart-edit";
+const code = cart?.discountCodes[0];
+---
+
+<section class="redeemid-cartview" data-redeemid-cart-count={cart?.totalQuantity ?? 0}>
+	{failed ? (
+		<p>Your cart isn't available right now. Try again in a few minutes.</p>
+	) : !cart || cart.lines.length === 0 ? (
+		<p class="redeemid-cartview__empty">{empty}</p>
+	) : (
+		<>
+			<ul class="redeemid-cartview__lines">
+				{cart.lines.map((l) => (
+					<li class="redeemid-cartview__line" data-redeemid-line={l.id}>
+						{l.image && <img src={l.image.url} alt={l.image.altText ?? ""} loading="lazy" />}
+						<div class="redeemid-cartview__item">
+							<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>}
+							</p>
+							<p class="redeemid-cartview__price">{money(l.price)} each · {money(l.total)}</p>
+							<form method="post" action={action} class="redeemid-cartview__quantity">
+								<input type="hidden" name="action" value="update" />
+								<input type="hidden" name="line" value={l.id} />
+								<input type="hidden" name="return" value={here} />
+								<label for={`q-${l.id}`}>Quantity</label>
+								<input id={`q-${l.id}`} name="quantity" type="number" min="0" max="1000" value={l.quantity} inputmode="numeric" />
+								<button type="submit">Update</button>
+							</form>
+							<form method="post" action={action}>
+								<input type="hidden" name="action" value="remove" />
+								<input type="hidden" name="line" value={l.id} />
+								<input type="hidden" name="return" value={here} />
+								<button type="submit" class="redeemid-cartview__remove">Remove<span style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap"> {l.productTitle}</span></button>
+							</form>
+						</div>
+					</li>
+				))}
+			</ul>
+			<form method="post" action={action} class="redeemid-cartview__discount">
+				<input type="hidden" name="action" value="discount" />
+				<input type="hidden" name="return" value={here} />
+				<label for="redeemid-discount">Discount code</label>
+				<input id="redeemid-discount" name="code" type="text" value={code?.code ?? ""} autocomplete="off" />
+				<button type="submit">Apply</button>
+				{code && !code.applicable && <p class="redeemid-cartview__code-note">{code.code} doesn't apply to this cart.</p>}
+			</form>
+			<dl class="redeemid-cartview__totals">
+				<dt>Subtotal</dt>
+				<dd>{money(cart.subtotal)}</dd>
+				<dt>Total</dt>
+				<dd>{money(cart.total)}</dd>
+			</dl>
+			<p class="redeemid-cartview__note">Taxes and shipping are worked out at checkout.</p>
+			<a class="redeemid-cartview__checkout" href={cartUrl(here)}>Checkout</a>
+		</>
+	)}
+</section>

package/src/components/Collection.astro

@@ -0,0 +1,55 @@
+---
+/**
+ * A Shopify collection as a grid of product cards: image, title, lowest
+ * price. Each card links to `productHref` with `{handle}` filled in, so the
+ * site can give every product its own page with <Product>.
+ *
+ *   <Collection handle="shop" productHref="/shop/{handle}/" />
+ */
+import { siteConfig } from "../site-config.js";
+import { collection as loadCollection, money, type Collection } from "../storefront.js";
+
+interface Props {
+	handle: string;
+	/** How many products, 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;
+}
+
+const { handle, limit = 12, productHref, showTitle = false } = Astro.props;
+const config = siteConfig((Astro.locals as { emdash?: { config?: unknown } }).emdash?.config);
+let c: Collection | null = null;
+if (config) {
+	try {
+		c = await loadCollection(config, handle, limit);
+	} catch {
+		c = null;
+	}
+}
+const href = (h: string) => productHref?.replaceAll("{handle}", encodeURIComponent(h));
+---
+
+{c && c.products.length > 0 ? (
+	<section class="redeemid-collection" data-redeemid-collection={c.handle}>
+		{showTitle && (
+			<>
+				<h2 class="redeemid-collection__title">{c.title}</h2>
+				{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 ? `From ${money(p.price)}` : "") : "Sold out"}</p>
+				</li>
+			))}
+		</ul>
+	</section>
+) : (
+	<slot />
+)}

package/src/components/Contribution.astro

@@ -0,0 +1,74 @@
+---
+/**
+ * Pay what you want: the reader picks an amount and checks out. Set up a
+ * Shopify product priced at 1.00 (one unit of the currency); the amount
+ * becomes the line's quantity, so Shopify charges exactly what they chose.
+ * With another price the field asks for a quantity instead.
+ *
+ *   <Contribution handle="support-the-newsroom" amounts={[5, 10, 25]} />
+ */
+import { siteConfig } from "../site-config.js";
+import { money, product as loadProduct, type Product } from "../storefront.js";
+
+interface Props {
+	handle: string;
+	/** Suggested amounts, as buttons. */
+	amounts?: number[];
+	/** The amount filled in to start with. */
+	initial?: number;
+	label?: string;
+	title?: string;
+}
+
+const { handle, amounts = [5, 10, 25], initial = 10, label = "Give", title } = Astro.props;
+const config = siteConfig((Astro.locals as { emdash?: { config?: unknown } }).emdash?.config);
+let p: Product | null = null;
+if (config) {
+	try {
+		p = await loadProduct(config, handle);
+	} catch {
+		p = null;
+	}
+}
+const variant = p?.variants.find((v) => v.availableForSale);
+const unit = variant ? Number(variant.price.amount) === 1 : false;
+const currency = variant?.price.currencyCode ?? "USD";
+const symbol = new Intl.NumberFormat("en-US", { style: "currency", currency }).formatToParts(0).find((x) => x.type === "currency")?.value ?? "";
+const here = Astro.url.pathname + Astro.url.search;
+const id = `redeemid-give-${handle}`;
+---
+
+{p && variant ? (
+	<form class="redeemid-contribution" method="post" action="/_emdash/api/auth/redeemid/cart-edit" data-redeemid-product={p.handle}>
+		<h2 class="redeemid-contribution__title">{title ?? p.title}</h2>
+		{p.description && <p>{p.description}</p>}
+		<input type="hidden" name="action" value="add" />
+		<input type="hidden" name="product" value={p.handle} />
+		<input type="hidden" name="variant" value={variant.id} />
+		<input type="hidden" name="return" value={here} />
+		<input type="hidden" name="then" value="checkout" />
+		{unit ? (
+			<>
+				{amounts.length > 0 && (
+					<p class="redeemid-contribution__amounts">
+						{amounts.map((a) => (
+							<button type="submit" name="quantity" value={String(a)}>{symbol}{a}</button>
+						))}
+					</p>
+				)}
+				<p>
+					<label for={`${id}-amount`}>Another amount ({currency})</label>
+					<input id={`${id}-amount`} name="quantity" type="number" min="1" max="1000" step="1" value={initial} inputmode="numeric" />
+				</p>
+			</>
+		) : (
+			<p>
+				<label for={`${id}-amount`}>Quantity ({money(variant.price)} each)</label>
+				<input id={`${id}-amount`} name="quantity" type="number" min="1" max="1000" value="1" inputmode="numeric" />
+			</p>
+		)}
+		<button type="submit">{label}</button>
+	</form>
+) : (
+	<slot />
+)}

package/src/components/Notices.astro

@@ -21,6 +21,10 @@ const DEFAULTS: Record<string, string> = {
 	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.",
 	account_unavailable: "Your account page isn't available right now. Try again in a few minutes.",
 };

package/src/components/Product.astro

@@ -0,0 +1,78 @@
+---
+/**
+ * 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.
+ *
+ *   <Product handle="harbor-tote" />
+ */
+import { siteConfig } from "../site-config.js";
+import { money, product as loadProduct, type Product } from "../storefront.js";
+
+interface Props {
+	handle: string;
+	/** Heading level for the title. */
+	heading?: "h1" | "h2" | "h3";
+	/** Leave out the description (for cards). */
+	compact?: boolean;
+	addLabel?: string;
+	buyLabel?: string;
+}
+
+const { handle, heading = "h2", compact = false, addLabel = "Add to cart", buyLabel = "Buy now" } = Astro.props;
+const config = siteConfig((Astro.locals as { emdash?: { config?: unknown } }).emdash?.config);
+let p: Product | null = null;
+if (config) {
+	try {
+		p = await loadProduct(config, handle);
+	} catch {
+		p = null;
+	}
+}
+const available = p?.variants.filter((v) => v.availableForSale) ?? [];
+const first = available[0] ?? p?.variants[0];
+const here = Astro.url.pathname + Astro.url.search;
+const Heading = heading;
+const id = `redeemid-product-${handle}`;
+---
+
+{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" />}
+		<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>}
+		{available.length > 0 ? (
+			<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="return" value={here} />
+				{p.variants.length > 1 ? (
+					<p>
+						<label for={`${id}-variant`}>Option</label>
+						<select id={`${id}-variant`} name="variant">
+							{p.variants.map((v) => (
+								<option value={v.id} disabled={!v.availableForSale}>
+									{v.title} ({money(v.price)}){!v.availableForSale && " sold out"}
+								</option>
+							))}
+						</select>
+					</p>
+				) : (
+					<input type="hidden" name="variant" value={first?.id} />
+				)}
+				<p>
+					<label for={`${id}-quantity`}>Quantity</label>
+					<input id={`${id}-quantity`} name="quantity" type="number" min="1" max="1000" value="1" inputmode="numeric" />
+				</p>
+				<button type="submit" name="then" value="back">{addLabel}</button>
+				<button type="submit" name="then" value="checkout">{buyLabel}</button>
+			</form>
+		) : (
+			<p class="redeemid-product__unavailable">Sold out.</p>
+		)}
+	</div>
+) : (
+	<slot />
+)}

package/src/index.ts

@@ -56,6 +56,7 @@ export function redeemid(config: RedeemIDConfig): AuthProviderDescriptor {
 			{ pattern: `${BASE}/webhook`, entrypoint: "@redeemid/emdash/routes/webhook.ts" },
 			{ pattern: `${BASE}/buy`, entrypoint: "@redeemid/emdash/routes/buy.ts" },
 			{ pattern: `${BASE}/cart`, entrypoint: "@redeemid/emdash/routes/cart.ts" },
+			{ pattern: `${BASE}/cart-edit`, entrypoint: "@redeemid/emdash/routes/cart-edit.ts" },
 			{ pattern: `${BASE}/account`, entrypoint: "@redeemid/emdash/routes/account.ts" },
 		],
 		publicRoutes: [`${BASE}/`],

package/src/plugin.ts

@@ -34,9 +34,17 @@ import { stores, type MemberRecord } from "./storage.js";
 import { PAGES, WIDGETS } from "./descriptor.js";
 import { VERSION } from "./version.js";
 
-import { MEMBERS_BLOCK, MEMBERS_END_BLOCK, PAYWALL_BLOCK, PLAN_BLOCK } from "./blocks-names.js";
+import {
+	COLLECTION_BLOCK,
+	CONTRIBUTION_BLOCK,
+	MEMBERS_BLOCK,
+	MEMBERS_END_BLOCK,
+	PAYWALL_BLOCK,
+	PLAN_BLOCK,
+	PRODUCT_BLOCK,
+} from "./blocks-names.js";
 
-export { MEMBERS_BLOCK, MEMBERS_END_BLOCK, PAYWALL_BLOCK, PLAN_BLOCK };
+export { COLLECTION_BLOCK, CONTRIBUTION_BLOCK, MEMBERS_BLOCK, MEMBERS_END_BLOCK, PAYWALL_BLOCK, PLAN_BLOCK, PRODUCT_BLOCK };
 
 function blocks(config: RedeemIDConfig) {
 	const levelOptions = [
@@ -97,6 +105,39 @@ function blocks(config: RedeemIDConfig) {
 				},
 			],
 		},
+		{
+			type: PRODUCT_BLOCK,
+			label: "Product",
+			icon: "tag",
+			description: "A Shopify product with Add to cart and Buy now",
+			placeholder: "Shopify product handle",
+			fields: [{ type: "text_input" as const, action_id: "handle", label: "Shopify product handle", placeholder: "harbor-tote" }],
+		},
+		{
+			type: COLLECTION_BLOCK,
+			label: "Collection",
+			icon: "grid",
+			description: "A Shopify collection's products as cards",
+			placeholder: "Shopify collection handle",
+			fields: [
+				{ type: "text_input" as const, action_id: "handle", label: "Shopify collection handle", placeholder: "shop" },
+				{ type: "text_input" as const, action_id: "limit", label: "How many products (up to 50)", placeholder: "12" },
+				{ type: "text_input" as const, action_id: "link", label: "Product page link, with {handle}", placeholder: "/shop/{handle}/" },
+			],
+		},
+		{
+			type: CONTRIBUTION_BLOCK,
+			label: "Contribution",
+			icon: "star",
+			description: "Pay what you want, with a Shopify product priced at 1.00",
+			placeholder: "Shopify product handle",
+			fields: [
+				{ type: "text_input" as const, action_id: "handle", label: "Shopify product handle (priced at 1.00)", placeholder: "support" },
+				{ type: "text_input" as const, action_id: "title", label: "Title (optional, Shopify's title otherwise)" },
+				{ type: "text_input" as const, action_id: "amounts", label: "Suggested amounts, comma separated", placeholder: "5, 10, 25" },
+				{ type: "text_input" as const, action_id: "label", label: "Button label", placeholder: "Give" },
+			],
+		},
 	];
 }
 

package/src/routes/buy.ts

@@ -39,7 +39,7 @@ export const POST: APIRoute = async ({ request, locals, session, redirect }) =>
 			config,
 			current?.id ?? null,
 			{ variantId: p.variantId, sellingPlanId: p.sellingPlanId },
-			{ email: member?.email ?? null, buyerIp: request.headers.get("cf-connecting-ip") },
+			{ email: member?.email ?? null, attributes: { _redeemid_page: returnTo }, buyerIp: request.headers.get("cf-connecting-ip") },
 		);
 		saveCart(session, { id: cart.id, count: cart.totalQuantity });
 		return redirect(cart.checkoutUrl, 303);

package/src/routes/cart-edit.ts

@@ -0,0 +1,97 @@
+/**
+ * POST /_emdash/api/auth/redeemid/cart-edit: change the visitor's Shopify cart.
+ *
+ * Fields: `action` (add | update | remove | discount), `return`, and
+ * - add: `product` (handle), optional `variant` (must be one of that
+ *   product's variants, read again from Shopify), `quantity` (1 to 1000),
+ *   `then` = "checkout" to go straight to checkout;
+ * - update: `line` and `quantity` (0 removes the line);
+ * - remove: `line`;
+ * - discount: `code` (empty clears the codes).
+ *
+ * Prices, discounts and availability come from Shopify; nothing posted is
+ * trusted beyond the ids it names. Back to `return` with a notice:
+ * cart_added, cart_updated, discount_applied, discount_not_applicable,
+ * plan_unavailable, cart_empty or checkout_failed.
+ */
+
+import type { APIRoute } from "astro";
+
+import { safeReturn } from "../access.js";
+import { readCart, saveCart } from "../cart.js";
+import { readConfig, storeDomain } from "../config.js";
+import { memberForUser, stores } from "../storage.js";
+import { addToCart, cartDetails, product, removeLines, setDiscountCodes, updateLines } from "../storefront.js";
+import { fail } from "./shared.js";
+
+export const prerender = false;
+
+const MAX_QUANTITY = 1000;
+
+export const POST: APIRoute = async ({ request, locals, session, redirect }) => {
+	const form = await request.formData().catch(() => null);
+	const field = (k: string) => String(form?.get(k) ?? "").trim();
+	const returnTo = safeReturn(field("return") || "/");
+	const emdash = (locals as { emdash?: { config?: unknown; db?: unknown } }).emdash;
+	const config = readConfig(emdash?.config);
+	if (!config || !storeDomain(config)) return fail(redirect, returnTo, "not_configured");
+	const buyerIp = request.headers.get("cf-connecting-ip");
+	const action = field("action");
+
+	try {
+		if (action === "add") {
+			const handle = field("product");
+			const quantity = Number.parseInt(field("quantity") || "1", 10);
+			if (!/^[a-z0-9][a-z0-9-]*$/i.test(handle) || !Number.isFinite(quantity) || quantity < 1 || quantity > MAX_QUANTITY) {
+				return fail(redirect, returnTo, "plan_unavailable");
+			}
+			const p = await product(config, handle);
+			const wanted = field("variant");
+			const variant = wanted ? p?.variants.find((v) => v.id === wanted) : p?.variants.find((v) => v.availableForSale);
+			if (!p || !variant?.availableForSale) return fail(redirect, returnTo, "plan_unavailable");
+			const user = (await session?.get("user")) as { id?: string } | undefined;
+			const member = user?.id && emdash?.db ? await memberForUser(stores(emdash.db), user.id) : null;
+			const current = await readCart(session);
+			const cart = await addToCart(
+				config,
+				current?.id ?? null,
+				{ variantId: variant.id, sellingPlanId: p.sellingPlanId, quantity },
+				{ email: member?.email ?? null, attributes: { _redeemid_page: returnTo }, buyerIp },
+			);
+			saveCart(session, { id: cart.id, count: cart.totalQuantity });
+			return field("then") === "checkout" ? redirect(cart.checkoutUrl, 303) : fail(redirect, returnTo, "cart_added");
+		}
+
+		const ref = await readCart(session);
+		if (!ref) return fail(redirect, returnTo, "cart_empty");
+		const cart = await cartDetails(config, ref.id, { buyerIp });
+		if (!cart) {
+			saveCart(session, null);
+			return fail(redirect, returnTo, "cart_empty");
+		}
+		const line = field("line");
+		const owns = cart.lines.some((l) => l.id === line);
+
+		if (action === "update" || action === "remove") {
+			if (!owns) return fail(redirect, returnTo, "cart_updated");
+			const quantity = action === "remove" ? 0 : Number.parseInt(field("quantity"), 10);
+			if (!Number.isFinite(quantity) || quantity < 0 || quantity > MAX_QUANTITY) return fail(redirect, returnTo, "cart_updated");
+			const next = quantity === 0 ? await removeLines(config, cart.id, [line], { buyerIp }) : await updateLines(config, cart.id, [{ id: line, quantity }], { buyerIp });
+			saveCart(session, { id: next.id, count: next.totalQuantity });
+			return fail(redirect, returnTo, "cart_updated");
+		}
+
+		if (action === "discount") {
+			const code = field("code").slice(0, 100);
+			const next = await setDiscountCodes(config, cart.id, code ? [code] : [], { buyerIp });
+			saveCart(session, { id: next.id, count: next.totalQuantity });
+			if (!code) return fail(redirect, returnTo, "cart_updated");
+			const applied = next.discountCodes.find((d) => d.code.toLowerCase() === code.toLowerCase());
+			return fail(redirect, returnTo, applied?.applicable ? "discount_applied" : "discount_not_applicable");
+		}
+
+		return fail(redirect, returnTo, "cart_updated");
+	} catch {
+		return fail(redirect, returnTo, "checkout_failed");
+	}
+};

package/src/storefront.ts

@@ -27,6 +27,7 @@ const planCache = new Map<string, { at: number; value: Plan | null }>();
 
 export function resetStorefrontCache(): void {
 	planCache.clear();
+	shopCache.clear();
 }
 
 export async function storefront<T>(
@@ -169,18 +170,304 @@ export async function getCart(
 export async function addToCart(
 	config: RedeemIDConfig,
 	cartId: string | null,
-	line: { variantId: string; sellingPlanId?: string | null },
-	opts: { email?: string | null; buyerIp?: string | null; fetcher?: typeof fetch } = {},
+	line: { variantId: string; sellingPlanId?: string | null; quantity?: number },
+	opts: {
+		email?: string | null;
+		/** Cart attributes for a new cart, e.g. where the buyer came from. Keys starting "_" are hidden at checkout. */
+		attributes?: Record<string, string>;
+		buyerIp?: string | null;
+		fetcher?: typeof fetch;
+	} = {},
 ): Promise<Cart> {
-	const lines = [{ merchandiseId: line.variantId, quantity: 1, ...(line.sellingPlanId ? { sellingPlanId: line.sellingPlanId } : {}) }];
+	const quantity = Math.max(1, Math.floor(line.quantity ?? 1));
+	const lines = [{ merchandiseId: line.variantId, quantity, ...(line.sellingPlanId ? { sellingPlanId: line.sellingPlanId } : {}) }];
 	if (cartId) {
 		const data = await storefront<{ cartLinesAdd: CartResult }>(config, CART_ADD, { id: cartId, lines }, opts).catch(() => null);
 		if (data?.cartLinesAdd.cart) return data.cartLinesAdd.cart;
 	}
 	const input: Record<string, unknown> = { lines };
 	if (opts.email) input.buyerIdentity = { email: opts.email };
+	const attributes = Object.entries(opts.attributes ?? {}).filter(([, v]) => v);
+	if (attributes.length) input.attributes = attributes.map(([key, value]) => ({ key, value }));
 	const data = await storefront<{ cartCreate: CartResult }>(config, CART_NEW, { input }, opts);
 	const cart = data.cartCreate.cart;
 	if (!cart) throw new Error(data.cartCreate.userErrors[0]?.message ?? "Shopify returned no cart.");
 	return cart;
 }
+
+// ---------------------------------------------------------------- shop
+
+export interface Money {
+	amount: string;
+	currencyCode: string;
+}
+
+export interface Image {
+	url: string;
+	altText: string | null;
+}
+
+export interface Variant {
+	id: string;
+	title: string;
+	availableForSale: boolean;
+	price: Money;
+}
+
+export interface Product {
+	handle: string;
+	title: string;
+	description: string;
+	availableForSale: boolean;
+	image: Image | null;
+	variants: Variant[];
+	/** The first selling plan, for subscription-only products. */
+	sellingPlanId: string | null;
+}
+
+export interface ProductCard {
+	handle: string;
+	title: string;
+	availableForSale: boolean;
+	image: Image | null;
+	/** The lowest variant price. */
+	price: Money | null;
+}
+
+export interface Collection {
+	handle: string;
+	title: string;
+	description: string;
+	products: ProductCard[];
+}
+
+const PRODUCT_QUERY = `query Product($handle: String!) {
+  product(handle: $handle) {
+    handle title description availableForSale requiresSellingPlan
+    featuredImage { url altText }
+    variants(first: 50) { nodes { id title availableForSale price { amount currencyCode } } }
+    sellingPlanGroups(first: 1) { nodes { sellingPlans(first: 1) { nodes { id } } } }
+  }
+}`;
+
+const COLLECTION_QUERY = `query Collection($handle: String!, $first: Int!) {
+  collection(handle: $handle) {
+    handle title description
+    products(first: $first) {
+      nodes { handle title availableForSale featuredImage { url altText } priceRange { minVariantPrice { amount currencyCode } } }
+    }
+  }
+}`;
+
+const shopCache = new Map<string, { at: number; value: unknown }>();
+
+async function cached<T>(key: string, load: () => Promise<T>): Promise<T> {
+	const hit = shopCache.get(key);
+	if (hit && Date.now() - hit.at < PLAN_TTL_MS) return hit.value as T;
+	const value = await load();
+	shopCache.set(key, { at: Date.now(), value });
+	return value;
+}
+
+/** A product with its variants, cached for five minutes. Null when Shopify has no such product. */
+export async function product(config: RedeemIDConfig, handle: string, fetcher?: typeof fetch): Promise<Product | null> {
+	return cached(`${shopOrigin(config)}|product|${handle}`, async () => {
+		type Data = {
+			product: {
+				handle: string;
+				title: string;
+				description: string;
+				availableForSale: boolean;
+				requiresSellingPlan: boolean;
+				featuredImage: Image | null;
+				variants: { nodes: Variant[] };
+				sellingPlanGroups: { nodes: Array<{ sellingPlans: { nodes: Array<{ id: string }> } }> };
+			} | null;
+		};
+		const { product: p } = await storefront<Data>(config, PRODUCT_QUERY, { handle }, { fetcher });
+		if (!p) return null;
+		return {
+			handle: p.handle,
+			title: p.title,
+			description: p.description,
+			availableForSale: p.availableForSale,
+			image: p.featuredImage ?? null,
+			variants: p.variants.nodes,
+			sellingPlanId: p.requiresSellingPlan ? (p.sellingPlanGroups.nodes[0]?.sellingPlans.nodes[0]?.id ?? null) : null,
+		};
+	});
+}
+
+/** A collection's first `first` products, cached for five minutes. Null when Shopify has no such collection. */
+export async function collection(config: RedeemIDConfig, handle: string, first = 12, fetcher?: typeof fetch): Promise<Collection | null> {
+	const n = Math.max(1, Math.min(50, Math.floor(first)));
+	return cached(`${shopOrigin(config)}|collection|${handle}|${n}`, async () => {
+		type Data = {
+			collection: {
+				handle: string;
+				title: string;
+				description: string;
+				products: {
+					nodes: Array<{ handle: string; title: string; availableForSale: boolean; featuredImage: Image | null; priceRange: { minVariantPrice: Money } }>;
+				};
+			} | null;
+		};
+		const { collection: c } = await storefront<Data>(config, COLLECTION_QUERY, { handle, first: n }, { fetcher });
+		if (!c) return null;
+		return {
+			handle: c.handle,
+			title: c.title,
+			description: c.description,
+			products: c.products.nodes.map((p) => ({
+				handle: p.handle,
+				title: p.title,
+				availableForSale: p.availableForSale,
+				image: p.featuredImage ?? null,
+				price: p.priceRange?.minVariantPrice ?? null,
+			})),
+		};
+	});
+}
+
+/** Format Shopify money for display. */
+export function money(m: Money | null | undefined, locale = "en-US"): string | null {
+	if (!m) return null;
+	const n = Number(m.amount);
+	if (!Number.isFinite(n)) return null;
+	return new Intl.NumberFormat(locale, { style: "currency", currency: m.currencyCode }).format(n);
+}
+
+// ---------------------------------------------------------------- cart details
+
+export interface CartLine {
+	id: string;
+	quantity: number;
+	variantId: string;
+	variantTitle: string;
+	productTitle: string;
+	productHandle: string;
+	image: Image | null;
+	price: Money | null;
+	total: Money | null;
+}
+
+export interface CartDetails extends Cart {
+	lines: CartLine[];
+	subtotal: Money | null;
+	total: Money | null;
+	discountCodes: Array<{ code: string; applicable: boolean }>;
+}
+
+const CART_DETAIL_FIELDS = `${CART_FIELDS}
+  cost { subtotalAmount { amount currencyCode } totalAmount { amount currencyCode } }
+  discountCodes { code applicable }
+  lines(first: 100) { nodes {
+    id quantity
+    cost { totalAmount { amount currencyCode } }
+    merchandise { ... on ProductVariant { id title price { amount currencyCode } image { url altText } product { title handle featuredImage { url altText } } } }
+  } }`;
+
+type RawCart = Cart & {
+	cost?: { subtotalAmount?: Money | null; totalAmount?: Money | null } | null;
+	discountCodes?: Array<{ code: string; applicable: boolean }>;
+	lines?: {
+		nodes: Array<{
+			id: string;
+			quantity: number;
+			cost?: { totalAmount?: Money | null } | null;
+			merchandise: {
+				id: string;
+				title: string;
+				price?: Money | null;
+				image?: Image | null;
+				product: { title: string; handle: string; featuredImage?: Image | null };
+			};
+		}>;
+	};
+};
+
+function details(c: RawCart): CartDetails {
+	return {
+		id: c.id,
+		checkoutUrl: c.checkoutUrl,
+		totalQuantity: c.totalQuantity,
+		subtotal: c.cost?.subtotalAmount ?? null,
+		total: c.cost?.totalAmount ?? null,
+		discountCodes: c.discountCodes ?? [],
+		lines: (c.lines?.nodes ?? []).map((l) => ({
+			id: l.id,
+			quantity: l.quantity,
+			variantId: l.merchandise.id,
+			variantTitle: l.merchandise.title,
+			productTitle: l.merchandise.product.title,
+			productHandle: l.merchandise.product.handle,
+			image: l.merchandise.image ?? l.merchandise.product.featuredImage ?? null,
+			price: l.merchandise.price ?? null,
+			total: l.cost?.totalAmount ?? null,
+		})),
+	};
+}
+
+type DetailResult = { cart: RawCart | null; userErrors: Array<{ message: string }> };
+
+/** The cart with its lines, costs and discount codes. Null once Shopify no longer has it. */
+export async function cartDetails(
+	config: RedeemIDConfig,
+	id: string,
+	opts: { buyerIp?: string | null; fetcher?: typeof fetch } = {},
+): Promise<CartDetails | null> {
+	const data = await storefront<{ cart: RawCart | null }>(config, `query Cart($id: ID!) { cart(id: $id) { ${CART_DETAIL_FIELDS} } }`, { id }, opts);
+	return data.cart ? details(data.cart) : null;
+}
+
+function result(r: DetailResult): CartDetails {
+	if (!r.cart) throw new Error(r.userErrors[0]?.message ?? "Shopify returned no cart.");
+	return details(r.cart);
+}
+
+/** Set line quantities; a quantity of 0 removes the line. */
+export async function updateLines(
+	config: RedeemIDConfig,
+	cartId: string,
+	lines: Array<{ id: string; quantity: number }>,
+	opts: { buyerIp?: string | null; fetcher?: typeof fetch } = {},
+): Promise<CartDetails> {
+	const data = await storefront<{ cartLinesUpdate: DetailResult }>(
+		config,
+		`mutation CartUpdate($id: ID!, $lines: [CartLineUpdateInput!]!) { cartLinesUpdate(cartId: $id, lines: $lines) { cart { ${CART_DETAIL_FIELDS} } userErrors { message } } }`,
+		{ id: cartId, lines },
+		opts,
+	);
+	return result(data.cartLinesUpdate);
+}
+
+export async function removeLines(
+	config: RedeemIDConfig,
+	cartId: string,
+	lineIds: string[],
+	opts: { buyerIp?: string | null; fetcher?: typeof fetch } = {},
+): Promise<CartDetails> {
+	const data = await storefront<{ cartLinesRemove: DetailResult }>(
+		config,
+		`mutation CartRemove($id: ID!, $lineIds: [ID!]!) { cartLinesRemove(cartId: $id, lineIds: $lineIds) { cart { ${CART_DETAIL_FIELDS} } userErrors { message } } }`,
+		{ id: cartId, lineIds },
+		opts,
+	);
+	return result(data.cartLinesRemove);
+}
+
+/** Replace the cart's discount codes (an empty list clears them). */
+export async function setDiscountCodes(
+	config: RedeemIDConfig,
+	cartId: string,
+	codes: string[],
+	opts: { buyerIp?: string | null; fetcher?: typeof fetch } = {},
+): Promise<CartDetails> {
+	const data = await storefront<{ cartDiscountCodesUpdate: DetailResult }>(
+		config,
+		`mutation CartDiscount($id: ID!, $codes: [String!]) { cartDiscountCodesUpdate(cartId: $id, discountCodes: $codes) { cart { ${CART_DETAIL_FIELDS} } userErrors { message } } }`,
+		{ id: cartId, codes },
+		opts,
+	);
+	return result(data.cartDiscountCodesUpdate);
+}

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = "0.0.7";
+export const VERSION = "0.0.8";