# Shoe Customizer (in-house)

An in-house WooCommerce product customizer for custom-branded sneakers — a from-scratch
replacement for the third-party **Kickflip** (MyCustomizer) iframe currently embedded on
corporatekicks.com.au.

## Why we're building it

Corporate Kicks currently pays a per-store SaaS (Kickflip) that, mechanically, does three
replaceable things:

1. **Renders a live shoe preview** by stacking transparent PNG zone slices (2D compositing).
2. **Presents a stepped option form** (swoosh colour, shoe colours, laces, sizes, logo…).
3. **Pushes the finished design into the WooCommerce cart.**

We already own **all the zone slices** (studio photos, one transparent PNG per colourable
zone, registered at 2560×1440) — so the expensive asset-production is done. What remains is
software we can own outright.

## Key decisions (locked)

| Decision | Choice |
|---|---|
| Rendering | **Runtime tinting** — multiply a chosen colour onto each white photographic zone slice (keeps leather shadows/highlights). One mask per zone, colours are data. |
| Multi-shoe | **First-class from day one.** Every shoe is its own base + zone set + option config. A future **Step 0 "Pick a shoe"** selects the base. |
| Order destination | Stays in **WooCommerce** (design JSON + mockup on the cart line / order). |
| Evolution | A **separate Evolution plugin** (later, out of this repo's scope) will pull Woo orders. We keep the design JSON clean and self-describing so that's easy. |
| Hosting | **Self-contained** — assets from our own media library/CDN, no external customizer service, no iframe. |

## Layout

```
shoe_customizer/
├── README.md              ← this file
├── docs/
│   └── ARCHITECTURE.md    ← data model, tint technique, plugin structure, order flow, roadmap
├── poc/                   ← Phase-0 proof of concept (multi-shoe, runtime tinting, real slices)
│   ├── index.html         ← self-contained compositor — open in any browser
│   ├── shoes.js           ← multi-shoe config (seed for the plugin data model)
│   └── assets/<shoe>/     ← real zone slices per shoe (af1, samba, dunk, advantage, court)
└── plugin/shoe-customizer/← Phase-1 deployable WooCommerce plugin (schema + admin builder +
                             REST config + seed importer); see its own README
```

## Run the POC

Open `poc/index.html` in a browser (double-click / `file://` — no server needed).
**Step 0 "Pick a shoe"** shows all five models (AF1, Samba, Dunk Low, Advantage, Court Vision);
choose one, then pick a colour per zone and watch the live composite. "Surprise me" randomises;
"Download mockup PNG" exports the render; "Design JSON" shows the exact payload the Woo cart
line item will store.

All five shoes are seeded from the real reverse-engineered slices (`assets/<shoe>/`), so the
multi-shoe model is proven on real assets — Phase 1 just moves this config from `shoes.js` into
an admin-managed database.

The POC proves the render path end-to-end on real assets. Everything else in the roadmap
(admin builder, option/pricing engine, cart/order integration, production spec sheet) is
conventional WooCommerce plugin work on top of this proven core.

See [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md) for the full design.