``` |
Klik **Opslaan**
---
### Stap B — Test in browser
Ga naar:
| URL | Verwachting |
|-----|-------------|
| `/products` | ❗ Moet override tonen |
| `/products/123` | ❗ Moet override tonen |
| `/search` | ❗ MAG GEEN override tonen |
Als `/search` ook override toont → resolver fout.
---
# 🔹 2️⃣ Test **Exact > Prefix** logica
Nu maken we een **exacte** override die de prefix moet overrulen.
---
### Stap A — Maak EXACT override
| Veld | Wat invullen |
|------|--------------|
| **Pagina pad** | `/products` |
| **Wildcard match** | ❌ UIT |
| **Override actief** | ✅ AAN |
| **Custom HTML** |
```html
EXACT PRODUCTS PAGE
Deze pagina is EXACT override.
``` |
Opslaan
---
### Stap B — Verwachting
| URL | Moet tonen |
|-----|------------|
| `/products` | **EXACT PRODUCTS PAGE** |
| `/products/123` | **PRODUCTS OVERRIDE (prefix)** |
Als `/products` nog prefix toont → exact prioriteit werkt niet.
---
# 🔹 3️⃣ Preset / CSS-vars sanity check
Nu testen we of je low-code styling engine werkt.
---
### Stap A — Ga terug naar de `/products/*` override
Scroll naar **Low-code CSS editor**
Verander:
| Var | Waarde |
|-----|--------|
| `btnBg` | `#FF6A00` |
| `btnRadius` | `40px` |
| `cardRadius` | `40px` |
Opslaan
---
### Stap B — Resultaat controleren
Ga naar `/products/123`
✔️ De knop moet **oranje** zijn
✔️ De knop moet **ronde pill shape** hebben
✔️ Cards moeten extra afgerond zijn
Als styling niet verandert → CSS vars worden niet geïnjecteerd.
---
# 🔥 Als alles werkt dan betekent dit:
✅ Router match engine klopt
✅ Priority systeem werkt
✅ Page override layer werkt
✅ CSS var system werkt
✅ Basis component classes (.bb-btn / .bb-card) werken
👉 Dit is dan al **sterker dan WordPress page builders** technisch gezien.
---
Wil je dat ik hierna met je:
- 🔥 Live inline editor op de pagina bouwen (klik → edit)
- 🧠 Block library (hero, product grid, CTA)
- 🧩 Per component styling panel
?