`pending-approval/done/styles-page-broken-images.DONE.md`

65 lines
# GATED: Fix 12 broken (404) images on /pages/designer-wallpaper-styles (customer-facing)

**Owner:** vp-dw-commerce · **Drafted:** 2026-06-23 · **Status:** AWAITING STEVE'S GO
**Surface:** Online Store > Pages page body (Admin API `pages`), NOT a theme push.

## Problem (verified live)

The dw-s5 tile grid on https://www.designerwallcoverings.com/pages/designer-wallpaper-styles
has **12 of 92 tile images returning HTTP 404** (deleted product images hardcoded into the page).
Confirmed by HEAD-probing all 92 — exactly 12 are 404, one per collection below.

## Fix (built + verified, NOT published)

For each of the 12, sourced a **verified-live (HTTP 200)** replacement from that tile's own
`/collections/<handle>/products.json` featured image, plus a **distinct croc image** so
`animal-print-wallpaper` (non-croc animal print) and `vegan-crocodile-wallpaper` (croc) differ.
See full old→new list in `SWAPS.md` / `swaps.json`. All 12 new URLs HEAD-probed 200.

Plus a single **capture-phase error guard** added to the grid (so any FUTURE deleted image
degrades gracefully instead of showing a broken-image icon):
- one `grid.addEventListener('error', fn, true)` on `.dw-s5-grid` (capture phase — img error
  events don't bubble), which adds `.dw-img-missing` to the card and paints a CSS
  gradient + uppercase collection-name label. **No placeholder asset** (no new image uploaded).

Artifacts in repo: `shopify/page-fixes/designer-wallpaper-styles/`
- `grid_fragment.ORIGINAL.html` — current grid block (from public render)
- `grid_fragment.CORRECTED.html` — 12 swaps applied + guard injected (0 broken URLs remain, 12/12 new present)
- `SWAPS.md`, `swaps.json`, `broken-404s.json`, `replacements.json`

## ⚠️ BLOCKER — token scope

Neither available token (SHOPIFY_ADMIN_TOKEN …75b9, SHOPIFY_THEME_TOKEN …2954) has
`read_content`/`write_content` — both return **403 "requires merchant approval for read_content
scope"** on `/pages`. So the page body cannot be read or written by automation right now. Two paths:

**Path A — grant the scope, then API-patch.** In Shopify Admin, approve `write_content`
(and `read_content`) for the app behind the full-access token, then run:
```sh
# 1. fetch the page id + current body_html (needs read_content)
TOKEN=<full-access token with content scope>
PAGE=$(curl -s "https://designer-laboratory-sandbox.myshopify.com/admin/api/2024-10/pages.json?handle=designer-wallpaper-styles" \
  -H "X-Shopify-Access-Token: $TOKEN")
# 2. in the body_html, apply the 12 string swaps from SWAPS.md (each OLD is a unique exact
#    substring) and append the guard <style>+<script> from grid_fragment.CORRECTED.html tail.
# 3. PUT the updated body:
curl -s -X PUT "https://designer-laboratory-sandbox.myshopify.com/admin/api/2024-10/pages/<PAGE_ID>.json" \
  -H "X-Shopify-Access-Token: $TOKEN" -H "Content-Type: application/json" \
  -d '{"page":{"id":<PAGE_ID>,"body_html":"<corrected body>"}}'
```
(I will assemble the exact `body_html` payload once read access exists — the swaps are
string-level and deterministic, so no guesswork.)

**Path B — paste in Admin (no scope change).** Online Store > Pages > "Designer Wallpaper
Styles" > Edit code (`<>`), do the 12 find/replace from `SWAPS.md`, and paste the guard
`<style>`+`<script>` block (tail of `grid_fragment.CORRECTED.html`) at the end. Save.

Recommended: **Path B** (no permission change, ~5 min, lowest risk) unless you want this
automatable going forward (then Path A).

## Steve, paste to proceed
- [ ] Pick Path A (grant content scope + I assemble the PUT) or Path B (you paste in Admin)
- [ ] Approve publishing the 12 swaps + the error guard to the live page

**$ cost:** $0 (local + read-only public products.json + HEAD probes). No metered API.