Skip to content

2025-11-24: VGBC Ticket Systeem - Planning & Architectuur

Sessie Overzicht

Planning sessie voor VGBC ticket verkoop via webshop. Doorgenomen requirements, architectuur beslissingen en implementatieplan opgesteld.

Requirements Analyse

Ticket Types

  1. Early bird - Manuele prijs aanpassing op datum X (via Commerce UI)
  2. Gewone kaarten - Standaard prijs na early bird periode
  3. Studenten - 20% korting via field_beroep = student check
  4. Standhouders - Gekoppeld aan Partner entiteit met quotum
  5. Crew - Gastenlijst, niet via shop (manuele toegang)

Beslissing: Crew tickets uitgevallen - gastenlijst bij deur scheelt complexity.

Kern Functionaliteit

Must-have: - User moet ingelogd zijn om tickets te kopen - Unique QR-code per ticket (gelinkt aan user) - QR-code scannen bij congres deur - Scan status terug naar Drupal - Accreditatiebewijs PDF na scanning (voor beroepsvereniging) - Downloadbaar op user account pagina - MailChimp bedankmail met accreditatiebewijs - Admin kan handmatig tickets aanmaken (voor VIPs)

Architectuur Beslissingen

Content vs Transactioneel (zoals Los nummer ↔ Editie):

VGBC Entity (ECK - content): - Type: vgbc_editie - Velden: title, datum, vignet, woordbeeld, inhoud, subtitel - Bestaande entities: VGBC2025, VGBC2024, VGBC2023 - Nieuw: VGBC2026

Commerce Product (transactioneel): - Variation type: Ticket (21% BTW) - Reference veld: field_vgbc (naar vgbc_editie entity) - SKU: 1-CG2026-STD (Type 1 = Ticket, CG2026 = Congres 2026, STD = Standaard)

Voordeel: Content (images, beschrijving) in VGBC entity, prijs/BTW in Commerce Product. Geen dubbele content.

Standhouder Quotum

Oplossing: - Veld op Partner entity: field_vgbc2026_tickets (integer) - Redactie vult in: "Partner X krijgt 3 tickets" - Bij ticket koop: custom code checkt beschikbaar quotum - Tel hoeveel tickets al verkocht voor die partner

Locatie beheer: Bij Partner entity (redactie managed, partners kunnen niet zelf bewerken)

QR-code & Scanning Systeem

Gekozen oplossing: Web app (Optie A)

Waarom: - WiFi beschikbaar bij congres - Tablet/phone al aanwezig - Snel te bouwen en testen - Geen app store deployment - 1 event/jaar = geen grote investering nodig

Alternatieven overwogen: - Native app met offline sync (te complex) - Externe service (vendor lock-in) - Barcode scanner hardware (extra aanschaf)

Technische Implementatie

QR-code Generatie (bij aankoop)

Flow: 1. User koopt ticket → Order completed 2. Commerce License entity aangemaakt (unique ID per ticket) 3. QR-code gegenereerd met endroid/qr-code library (al geinstalleerd) 4. QR bevat: VGBC2026-USER[id]-LICENSE[id] 5. QR opgeslagen bij License entity 6. QR toegevoegd aan invoice PDF

QR-code Scanning (bij deur)

JavaScript in Browser (client-side):

// 1. Browser vraagt camera permissie
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" }})

// 2. Video stream van camera
video.srcObject = stream;

// 3. Elke 100ms: canvas.drawImage(video) - "screenshot"
// 4. jsQR library analyseert pixels, zoekt QR patroon
var code = jsQR(imageData.data, width, height);

// 5. Als QR gevonden: code.data = "VGBC2026-USER45-LICENSE123"
// 6. Stop camera, stuur naar Drupal
sendToDrupal(code.data);

Drupal API (server-side):

Route: /api/ticket/validate?code=VGBC2026-USER45-LICENSE123

// Custom controller:
1. Zoek License entity met code
2. Check status (geldig? al gescand?)
3. Update: status = "scanned", timestamp
4. Return JSON: {"valid": true, "name": "Jan Jansen", "ticket_type": "Student"}

Scan interface: - Route: /scan (alleen admin/crew role) - Camera view met overlay - Groen scherm = welkom | Rood scherm = probleem/al gebruikt - Log: wie, wanneer, welke ticket

Accreditatiebewijs PDF

Trigger: Na scanning (status = scanned)

Generatie: - Drupal node of custom entity: "Deelname certificaat" - Velden: user, event (VGBC2026), scan timestamp - Template: PDF met logo, user naam, event, datum - Link op user account pagina (zoals invoices)

MailChimp: - Event subscriber luistert naar scan status change - Trigger bedankmail met PDF attachment via MailChimp API

Implementatieplan (Next Steps)

Fase 1: VGBC2026 Entity & Product Setup

  1. Maak VGBC2026 entity (vgbc_editie bundle)
  2. Voeg field_gekoppelde_producten toe (zoals bij Editie)
  3. Maak ticket variation products:
  4. Standaard ticket (1-CG2026-STD)
  5. Student ticket (1-CG2026-STU)
  6. Standhouder ticket (1-CG2026-SH)
  7. Link products aan VGBC2026 entity

Fase 2: Commerce License Setup

  1. Install Commerce License module
  2. Configure license type: "VGBC Ticket"
  3. Link license aan ticket product
  4. Test: koop ticket → license aangemaakt

Fase 3: QR-code Generatie

  1. Event subscriber: commerce_order.order.paid
  2. Generate QR met endroid/qr-code
  3. QR bevat: License ID of custom format
  4. Attach QR aan License entity (image field)
  5. Voeg QR toe aan invoice PDF template

Fase 4: Scanning Interface

  1. Custom module: vg_ticket_scanner
  2. Route: /scan (permission: scan vgbc tickets)
  3. JavaScript: html5-qrcode library
  4. Camera interface met scan feedback
  5. AJAX endpoint: /api/ticket/validate
  6. Controller: validate & mark scanned

Fase 5: Accreditatiebewijs

  1. Node type of ECK: "Deelname certificaat"
  2. Auto-generate na scan
  3. PDF template met Entity Print
  4. Link op user account pagina
  5. MailChimp webhook voor bedankmail

Fase 6: Pricing & Quotum

  1. Student korting: Price rule via field_beroep
  2. Standhouder quotum: field_vgbc2026_tickets op Partner
  3. Validation bij checkout: check quotum beschikbaar
  4. Admin interface: handmatig tickets aanmaken

Fase 7: Testing

  1. Test flow: koop → QR → scan → bewijs
  2. Test student korting
  3. Test standhouder quotum
  4. Test handmatige ticket creatie
  5. Scan interface UX testing met tablet

Open Vragen

  1. Early bird automatisering - laten we manueel of toch via Promotions module met datum?
  2. Standhouder koppeling - hoe selecteert user "ik ben van Partner X" bij checkout?
  3. Multiple day tickets - VGBC heeft meerdere dagen, 1 ticket of apart per dag?
  4. Scan rapportage - real-time dashboard voor aantal gescande tickets?
  5. Accreditatiebewijs template - design/content beschikbaar?

Referenties

Bestaande documenten: - Notities/VGBC kaartverkoop via winkel.md (requirements) - Notities/tickets--64991258.pdf (voorbeeld ticket design)

Modules nodig: - Commerce License (unique tickets) - html5-qrcode (JavaScript library voor scanning) - endroid/qr-code (al geinstalleerd)

Entities: - vgbc (ECK) - vgbc_editie bundle - partner (ECK) - voor standhouders - commerce_product - ticket variation type - commerce_license - per ticket unique

Status

Vandaag: - Requirements doorgenomen - Architectuur beslissingen gemaakt - Technische aanpak bepaald - Implementatieplan opgesteld

Morgen starten met: - Fase 1: VGBC2026 entity aanmaken - Field_gekoppelde_producten toevoegen - Eerste ticket product aanmaken - Commerce License installeren en configureren

Update: 2025-11-25 - Contante Verkoop & Kaartverkoop Rol

Contante/Ter Plekke Verkoop

Beslissing: Geen aparte admin interface voor handmatige tickets. Gebruik normale checkout met custom payment gateway.

Flow: 1. Medewerker (rol: Kaartverkoop) registreert klant 2. Voegt ticket toe aan winkelwagen (namens klant) 3. Checkout met payment gateway "Contant ter plekke" 4. Order direct approved (geen Mollie redirect) 5. QR-code gegenereerd → ticket print/email

Voordelen: - Consistente workflow en data - Invoice automatisch gegenereerd - Statistieken kloppen - Geen custom admin interface nodig

User Rol: Kaartverkoop

Naam: "Kaartverkoop" (specifiek, Nederlands, duidelijk)

Permissions: - Create users (klanten registreren) - Add products to cart (namens andere users) - Access checkout - Use "Contant ter plekke" payment gateway - View orders (status checken)

NIET toegestaan: - Admin interface toegang - Products aanmaken/bewerken - Site configuratie - Andere payment gateways

Payment Gateway: Contant ter plekke

Implementatie: - Custom Commerce payment gateway plugin - Plugin ID: contant_ter_plekke - Label: "Contant ter plekke" - Available for: rol "Kaartverkoop" only - On submit: automatisch mark as paid - No external redirect - Generate receipt immediately

Code locatie: web/modules/custom/vg_commerce/src/Plugin/Commerce/PaymentGateway/ContantTerPlekke.php

Implementatie Updates

Fase 6 aanvulling: Contante Verkoop 1. Maak user rol "Kaartverkoop" 2. Configure permissions (zie boven) 3. Create custom payment gateway plugin 4. Test workflow: registreer → checkout → contant → ticket 5. Train medewerkers in gebruik

Fase 7 aanvulling: Testing - Test contante verkoop met rol Kaartverkoop - Verify user kan niet bij admin - Check invoice generatie bij contante verkoop - Test print/email ticket flow