Sessie Verslag: User Account Navigation Restructure¶

Datum: 26 november 2025 Doel: Logische 3-laags navigatie structuur voor user account omgeving

Wat is Bereikt¶

1. Class Not Found Error Opgelost¶

UserDashboardController aangemaakt in vg_commerce module
Dashboard route /user/{user}/dashboard toegevoegd
Template en styling voor dashboard pagina

2. Theme Negotiator Geconfigureerd¶

Alle user/account/commerce/profile pagina's gebruiken nu Gin theme
CommerceThemeNegotiator met priority 1000
Consistente Gin styling op alle account gerelateerde pagina's

3. Logische 3-Laags Navigatie Structuur¶

Menu items in Gin navigation: - Account → /user/{uid} - Klantgegevens → /user/{uid}/klantgegevens - Openbaar profiel → /user/{uid}/openbaar-profiel - Dashboard → /user/{uid}/dashboard

Layer 2: Context Tabs¶

Lokale tabs per pagina: - Account: Weergeven, Bewerken (user entity) - Klantgegevens: Weergeven (/klantgegevens), Bewerken (/klantgegevens/edit) - Openbaar profiel: Weergeven (/openbaar-profiel), Bewerken (/openbaar-profiel/edit)

Secundaire acties in dropdown (rechtsboven): - Dashboard - Bestellingen - Facturen - Payment methods - Address book

4. Custom Profile View/Edit Routes¶

Omdat Profile module geen native view mode heeft op /user/{uid}/{profile_type}:

Created: - ProfileViewController met view() en edit() methods - Custom routes met taalvriendelijke URLs: - /user/{user}/klantgegevens (view) - /user/{user}/klantgegevens/edit (edit) - /user/{user}/openbaar-profiel (view) - /user/{user}/openbaar-profiel/edit (edit)

Voordelen: - Proper view/edit scheiding zoals user entity - URLs zijn taalvriendelijk (later Engels toevoegen via path aliases) - Consistent met Drupal UX patterns

5. Tab Management¶

hook_menu_local_tasks_alter() geconfigureerd om: - Profile navigatie tabs te verwijderen (nu in menu) - Alleen View/Edit tabs te behouden voor context - Andere tabs naar actions dropdown te verplaatsen - Dubbele tabs te vermijden op custom routes

Technische Implementatie¶

Aangemaakte/Gewijzigde Bestanden¶

vg_commerce/src/Controller/UserDashboardController.php - Dashboard controller
vg_commerce/src/Controller/ProfileViewController.php - Profile view/edit controller
vg_commerce/src/Theme/CommerceThemeNegotiator.php - Theme selection
vg_commerce/vg_commerce.routing.yml - Routes voor dashboard en profiles
vg_commerce/vg_commerce.links.menu.yml - Menu items Account, Klantgegevens, Openbaar profiel
vg_commerce/vg_commerce.links.task.yml - Local tasks (tabs) voor view/edit
vg_commerce/vg_commerce.module - hook_menu_local_tasks_alter() voor tab management
vg_commerce/templates/user-dashboard.html.twig - Dashboard template
sites/default/files/gin-custom.css - Dashboard styling (handmatig toegevoegd)

Route Structuur¶

/user/{uid}                      → Account (user entity view)
/user/{uid}/edit                 → Account bewerken
/user/{uid}/klantgegevens        → Klantgegevens view (custom)
/user/{uid}/klantgegevens/edit   → Klantgegevens edit (custom)
/user/{uid}/openbaar-profiel     → Openbaar profiel view (custom)
/user/{uid}/openbaar-profiel/edit → Openbaar profiel edit (custom)
/user/{uid}/dashboard            → User dashboard

UX Research Bevindingen¶

Uit Baymard Institute research (e-commerce UX best practices): - Users beter af met weinig lange pagina's dan diepe hierarchie - 7 key paths in account menu is industry standard - Consistente card layouts cruciaal voor scanbaarheid - "Avoid more than 4 tabs" - Drupal's eigen richtlijn

Open Issues / Volgende Sessie¶

1. Gin Toolbar/Navigation Links¶

De verticale Gin toolbar toont nog verkeerde links: - "Profiel bekijken" linkt naar account ipv profiel - "Profiel bewerken" linkt naar account edit ipv profiel edit → Deze moeten dynamisch worden op basis van huidige context

2. Klantgegevens Profile Velden¶

Klantgegevens profiel toont geen velden in view mode → Check of velden geconfigureerd zijn voor 'default' view mode in /admin/config/people/profile-types/manage/customer/display

Nog niet zichtbaar op alle pagina's → Verder testen en debuggen waar actions dropdown ontbreekt

4. Dashboard Content¶

Dashboard template is nu basic met alleen: - Welkomstbericht - Links naar account edit - Links naar profiles → Uitbreiden met widgets uit planning (orders, winkelwagen, etc.)

5. Block Visibility¶

Sidebar blokken mogelijk nog zichtbaar op user pages → Configureren via /admin/structure/block om te verbergen op user/* paths

Belangrijke Beslissingen¶

Waarom Custom Routes voor Profiles?¶

Probleem: Profile module's /user/{uid}/{profile_type} toont direct edit form, geen view mode.

Overwogen opties: 1. Alleen edit forms accepteren (technisch makkelijk) 2. Custom view/edit routes maken (meer werk)

Gekozen: Optie 2 - Custom routes Reden: - Consequent voor gebruikers (zoals account werkt) - Taalvriendelijk voor toekomstige Engelse versie - Volgt Drupal UX patterns

3-Laags Navigatie Structuur¶

Waarom niet alles in tabs? - Te veel tabs wordt onoverzichtelijk (Drupal richtlijn: max 4) - Profile navigatie hoort bij navigatie, niet bij acties - View/Edit zijn context-specifiek, profiles zijn globaal

Testing Checklist¶

Statistieken¶

Sessieduur: ~3 uur
Aantal cache rebuilds: ~15+
Belangrijkste uitdaging: Profile module heeft geen native view mode
Grootste learning: UX research validated onze gekozen structuur

Volgende Stappen¶

Gin toolbar links context-aware maken
Klantgegevens profile velden configureren voor view mode
Actions dropdown troubleshooten
Dashboard content uitbouwen
Block visibility configureren
Testen met verschillende users

Live Site Update¶

Datum: 26 november 2025, 20:25

Na het testen van de nieuwe user navigation op dev bleek dat de vg_commerce module op live site "Class not found" errors veroorzaakte. Dit kwam doordat de nieuwe controllers (UserDashboardController en ProfileViewController) alleen op dev bestaan.

Actie: vg_commerce module tijdelijk geüninstalleerd op live:

ldrush pm:uninstall vg_commerce -y

Resultaat: Live site draait nu stabiel zonder errors.

Volgende stap: Zodra alle dev werk compleet en getest is, kunnen alle wijzigingen via deployment naar live worden gebracht en kan de module daar weer worden geactiveerd met alle nieuwe functionaliteit.