---
id: task-5
title: Build purchaser/shop page
status: In Progress
assignee: []
created_date: '2026-01-12 15:29'
updated_date: '2026-02-04 23:31'
labels: []
dependencies: []
priority: medium
---

## Description

<!-- SECTION:DESCRIPTION:BEGIN -->
Implement the purchaser page that displays products and allows customers to browse and purchase items.
<!-- SECTION:DESCRIPTION:END -->

## Acceptance Criteria
<!-- AC:BEGIN -->
- [x] #1 Set up project with chosen framework
- [x] #2 Create product listing component
- [x] #3 Create product detail view
- [x] #4 Integrate Zettle/Airtable product data
- [ ] #5 Implement shopping cart functionality
- [ ] #6 Integrate payment processing
<!-- AC:END -->

## Implementation Notes

<!-- SECTION:NOTES:BEGIN -->
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` -> frontend `title`, `price_gbp`/`price_usd` -> `price`
- Cart functionality working with add-to-cart on artwork cards
<!-- SECTION:NOTES:END -->