# Shaker Customer Journey — design showcase

One static presentation platform for the three Shaker store redesign explorations: **Product Page → Shopping Cart → Checkout**. Each stage has three interactive concepts, a comparison dashboard (synced device previews, scenarios, evaluation matrix, recommendation) and its research documents. Arabic, RTL, no build step, no backend. Nothing here touches the production WordPress / WooCommerce site, and no prototype contacts the store or processes a payment.

## Open it

- Through WAMP: `http://localhost/reports/shaker-reports/shaker-journey/`
- Any static server from this folder, for example `python -m http.server 8800 --bind 127.0.0.1` then `http://127.0.0.1:8800/`
- Opening `index.html` directly from disk also works (device previews and all links are relative).

Start at `index.html`, then open a stage from the header, the journey diagram or the module cards.

## Structure

```
index.html                 Customer Journey home (Arabic RTL)
assets/css/                shared dashboard design system: tokens, base, layout, navigation, components, dashboard
assets/js/                 journey-config (module registry), navigation, dashboard (preview / matrix / scenario widgets)
assets/fonts, images/      Cairo + riyal fonts, official white Shaker mark
product/                   stage 1: index.html (dashboard), concept-01..03.html, assets/, docs/, tools/, README.md
cart/                      stage 2: index.html, concept-01..03.html, assets/, docs/, tools/, README.md
checkout/                  stage 3: index.html, concepts/01-one-page|02-guided-steps|03-premium-service/, assets/, docs/, tools/, README.md
docs/                      project-inventory, consolidation-plan, dashboard-design-system, qa-report, final-summary, screenshots/
tools/qa_journey.py        showcase QA (integrity, links, responsive, dashboards, navigation, prototype regression)
```

Each module is self-contained: its concept pages load only its own `assets/`. The four dashboards load the shared `assets/css` and `assets/js`. `*/index.legacy.html` are the pre-consolidation dashboards kept for reference; they are not linked from the showcase.

## Dashboards

Every dashboard has the same layout: header (Home / Product / Cart / Checkout), page intro, concept cards, control toolbar (scenario + device + jump links, placed right before the preview and sticky from there), interactive preview (choose 1–3 concepts; 1440 / 820 / 390 px frames), stage-specific sections, scenario table, evaluation matrix (expert estimate, labelled), recommendation, documents, footer.

URL parameter `?scenario=<id>` pre-selects a scenario on any dashboard. Preview state (scenario, device, concepts) is remembered per module in `localStorage`.

## Tests

```
python -I tools/qa_journey.py                     # against WAMP (default base URL)
python -I tools/qa_journey.py http://127.0.0.1:8800/
python -I tools/qa_journey.py prototype           # one group: integrity | links | responsive | dashboard | navigation | prototype
```

Writes `docs/qa-results.json`, `docs/qa-run.log` and `docs/screenshots/*.png`. The original per-module suites still run from each module folder as described in its README (`product/tools/qa.py`, `cart/tools/qa.py`, `checkout/tools/validate.py`). Requires Python 3.11+ with `playwright` (Chromium).

## Documents

- `docs/project-inventory.md` — what existed before consolidation, features, dependencies, gaps
- `docs/consolidation-plan.md` — folder mapping, path and navigation changes, risks, rollback
- `docs/dashboard-design-system.md` — tokens, typography, components, navigation, responsive rules, how to add a stage
- `docs/qa-report.md` — tested pages and interactions, defects found and fixed, limitations, screenshots
- `docs/final-summary.md` — work completed, final structure, how to present, future extensibility

## Future stages

The platform is data-driven: a new stage is one entry in `assets/js/journey-config.js` plus a folder with the same dashboard skeleton (see the design-system document, section 7). No placeholder for undefined stages is shown.