Add Fourthwall merch store with on-site cart

[patrickrb]

Summary

New /store page selling FT8AF merch through the Fourthwall shop, with an on-site cart — shoppers pick a size/color, build a cart on the page, and check out on Fourthwall's hosted checkout.

• Static-first, live prices: the build renders the hero, skeleton grid, cart panel, and all localized strings per locale; store.js then fetches products from the Fourthwall Storefront API client-side, so prices/availability never go stale between deploys.
• Cart: per-product variant dropdown (out-of-stock options disabled), per-variant price with compare-at strikethrough, quantity −/+ controls, locale-formatted totals via Intl.NumberFormat, persisted in localStorage.
• Checkout: creates a Fourthwall cart via POST /v1/carts directly from the browser (the Storefront API is CORS-enabled and the token is public/read-only by design — it can only list products and create carts), then redirects to the Fourthwall-hosted checkout. Payment and shipping never touch this site.
• Token via env: FOURTHWALL_STOREFRONT_TOKEN is read at build time (.env.example documents it). Without it the site still builds — /store renders a translated fallback linking to the shop — so CI needs no secret.
• Safety: product data is rendered via DOM APIs (textContent), never innerHTML; pagination is followed defensively (bounded, stops if the page param is ignored); API failure shows a translated error with a direct link to the shop; <noscript> fallback links to the shop.
• Store link added to nav, mobile menu, and footer; store_add_to_cart / store_checkout / link-click analytics events wired into the existing Vercel Analytics tracking.
• All new strings translated in the 16 locale catalogs (not English fallbacks); check-i18n passes with the store keys at 100% coverage in every locale.

⚠️ Before this deploys

Add FOURTHWALL_STOREFRONT_TOKEN to the Vercel project env (Production + Preview) so deployed builds bake the token in. Without it, /store shows the link-to-shop fallback instead of the product grid.

Verification

• node build.mjs builds all 160 pages with and without the token (warns when missing); check-i18n passes (structural).
• Scripted end-to-end run against the live API: rendered 4 products with variants, added a shirt twice → one cart line at qty 2 / $47.50, bumped qty → $71.25, clicked checkout → real Fourthwall cart created and the redirect URL returns HTTP 200 on the shop's checkout page.
• Manually tested via dev-server.py across locales (en/es/ja/ar incl. RTL).

Test plan

• Open /store, confirm products load with prices
• Pick a variant, add to cart, adjust quantities
• Check out → lands on Fourthwall checkout with the items pre-filled
• Spot-check a localized page (e.g. /ja/store) for translated UI and prices

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ft8af-site	Ready	Preview	Aug 15, 2026 6:30pm