3.1 KiB
3.1 KiB
| id | title | status | assignee | created_date | updated_date | labels | dependencies | priority |
|---|---|---|---|---|---|---|---|---|
| task-5 | Build purchaser/shop page | Done | 2026-01-12 15:29 | 2026-02-13 19:47 | medium |
Description
Implement the purchaser page that displays products and allows customers to browse and purchase items.
Acceptance Criteria
- #1 Set up project with chosen framework
- #2 Create product listing component
- #3 Create product detail view
- #4 Integrate Zettle/Airtable product data
- #5 Implement shopping cart functionality
- #6 Integrate payment processing
Implementation Notes
Created Next.js 15 project with Directus SDK integration
Built components: ArtworkCard, ArtworkGrid, Navigation, Footer
Created pages: Home, Gallery, Gallery Detail, Series, Shop, Events, About, Contact
Connected to Directus CMS at https://katheryn-cms.jeffemmett.com
2026-02-04 Update
- Store page now uses dynamic rendering (force-dynamic) for reliable Directus data fetching
- 1700+ artwork images rendering correctly on store
- Field mapping in place: Directus
name-> frontendtitle,price_gbp/price_usd->price - Cart functionality working with add-to-cart on artwork cards
2026-02-13 - Checkout, Shipping & Payment Complete
Implemented:
- Flat-rate shipping by region: UK £10, Europe £25, International £40
- New
/src/lib/shipping.tsutility (single source of truth for rates) - Checkout page shows shipping cost dynamically based on country selection
- Server-side recalculation prevents tampering
- New
- PayPal integration fully wired:
- PayPal sandbox credentials configured
- Order creation API verifies prices against Directus, creates PayPal order with item_total + shipping breakdown
- Capture API marks artworks as sold, updates order status
- Order confirmation emails via SMTP:
- Created
orders@katheryntrenshaw.commailbox on Mailcow - Customer receives HTML confirmation with order breakdown
- Katheryn receives notification email with customer/shipping details
- Subtotal + shipping + total shown in both emails
- Created
- Order confirmation page shows full breakdown (subtotal, shipping, total)
- Secret management: Moved all credentials to
/opt/secrets/katheryn-website/.env, docker-compose usesenv_file:directive
Files added/modified:
src/lib/shipping.ts(new)src/lib/paypal.ts,src/lib/email.ts,src/lib/directus-admin.tssrc/app/api/orders/create/route.ts,src/app/api/orders/capture/route.tssrc/components/paypal-checkout.tsxsrc/app/checkout/page.tsx,src/app/order-confirmation/page.tsxdocker-compose.yml(security hardening + env_file)