Templating & frontend¶

De view-laag van de Atraxion-webshop bestaat uit twee systemen naast elkaar: een legacy PHP-view-laag voor de storefront en de backoffice-kern, en Twig voor specifieke onderdelen (admin-interface, e-mailsjablonen, losse front-end templates).

Legacy PHP-views (storefront)¶

De storefront rendert HTML via PHP-klassen in _core/view/classes/atx/. De klassehiërarchie:

atx\Base
  └── atx\View             (_core/view/classes/atx/View.php)
        └── atx\WebView    (_core/view/classes/atx/WebView.php)
              └── atx\PageView   (_core/view/classes/atx/PageView.php)

PageView is de centrale view voor pagina's op de storefront. Hij rendert de volledige HTML-structuur: <!DOCTYPE html>, <head>, stylesheets, JavaScript-blokken, navigatie, header, winkelmand, en de paginabody (_core/view/classes/atx/PageView.php:453). De HTML wordt direct via PHP echo/<?= ?> uitgestuurd — er is geen template-engine betrokken.

Elke controller koppelt zijn eigen view-subklasse aan zichzelf. Viewklassen per domein staan in:

Submap	Inhoud
`_core/view/classes/atx/articles/`	Productweergaven (banden, velgen, accessoires)
`_core/view/classes/atx/customers/`	Klantenaccounts, inlogschermen, mini-shopinstellingen
`_core/view/classes/atx/orders/`	Bestellingenoverzichten
`_core/view/classes/atx/channels/`	Channelspecifieke weergaven
`_core/view/classes/atx/vehicles/`	Voertuigselectie en fitmentweergaven
`_core/view/classes/atx/cms/`	CMS-pagina's en blogposts
`_core/view/classes/atx/pages/`	Speciale pagina's (homepage, …)

Twig (admin, e-mail en front-end partials)¶

Twig wordt gebruikt op drie plaatsen:

1. Admin control panel `_cp/` (`templates/admin/`)¶

De shop heeft twee afzonderlijke admin-oppervlakken:

_admin/ — de legacy backoffice met hetzelfde custom MVC als de storefront (routing via _admin/config/pages.xml / menu.php / routing.php; controllers in _admin/view/classes/atx/). Geen Slim, geen Twig. Bereikbaar op manage.atraxion.com.
_cp/ — een aparte Slim 4-app (_cp/index.php: Slim\Factory\AppFactory::create()), met controllers in src/Atraxion/Admin/Controller/ en Twig-templates in templates/admin/. Bereikbaar op admin.atraxion.com.

Het is dus _cp/ (niet _admin/) dat Slim en Twig gebruikt. De TwigServiceProvider (src/Atraxion/Common/ServiceProvider/TwigServiceProvider.php) registreert de Twig-omgeving in de service container:

// TwigServiceProvider.php:33–34
$container->add('Twig\\Loader\\FilesystemLoader')->addArgument(APP_PROJECT_DIR . '/templates');
$container->add('Twig\\Environment')
    ->addArgument('Twig\\Loader\\FilesystemLoader')
    ->addArgument($twigConfig)

De templateroot is templates/ in de projectroot. _cp/-templates staan in templates/admin/:

templates/admin/_layouts/base.twig — basislay-out
templates/admin/_layouts/sidebar.twig — zijmenu
templates/admin/customers/, orders/, products/, channels/, suppliers/, asset-groups/, dashboard/, users/, errors/, invoices/, qweon/, vehicles/
templates/admin/_macros.twig — herbruikbare macro's

2. Front-end partials (`templates/front/`)¶

Losse Twig-templates voor specifieke onderdelen van de storefront:

templates/front/_layouts/base.twig — minimalistische HTML-basis (wordt gebruikt voor standalone pagina's)
templates/front/offline.twig — offline-pagina
templates/front/errors/404.twig — 404-foutpagina
templates/front/vehicles/chassis-options-table.twig — voertuigchassistabel
templates/front/two-factor/verify.twig — 2FA-verificatieformulier
templates/front/order-documents/portal.twig — orderdocumentenportal

3. Distributeur-e-mails (`templates/distributors/`)¶

Twig-templates voor e-mails die specifiek naar distributeursklanten worden gestuurd staan in templates/distributors/emails/. Momenteel bevat deze map de beerens/-submap met sjablonen voor ordermeldingen en offertes: new-order.twig, new-simple-order.twig, order-approved.twig, order-rejected.twig, quote.twig.

4. E-mailsjablonen (database)¶

E-mailsjablonen die als Twig-syntax zijn opgeslagen (in de database, tabel email_templates) worden gerenderd door TwigEmailTemplateRenderer (src/Atraxion/Module/EmailTemplate/Renderer/TwigEmailTemplateRenderer.php). De renderer laadt de sjabloontekst als string via Twig\Loader\ArrayLoader en rendert deze met de variabelen uit de context.

Daarnaast staat er een globale twig()-helperfunctie in src/functions.php:613 voor ad-hoc Twig-rendering van strings.

Asset-pipeline¶

De statische assets (CSS, JavaScript) worden gebouwd via twee afzonderlijke gulpfiles en Webpack.

Root `gulpfile.js` — minificatie van bestaande assets¶

Het root gulpfile.js (projectroot) minificeert bestaande JavaScript- en CSS-bestanden en compileert SCSS-bronnen in _static*/sass/:

js-taak: minificeert _static*/js/*.js en _static*/js/**/*.js (via Terser) naar .min.js-bestanden op dezelfde locatie.
sass-taak: compileert _static*/sass/*.s[ac]ss → CSS en minificeert die vervolgens.
css-taak: minificeert bestaande CSS-bestanden.
default: voert sass + cssMinify en jsMinify parallel uit.

`_static/assets/gulpfile.js` — SCSS → CSS voor de assets-build¶

# _static/assets/gulpfile.js:10–16
gulp

Gulp compileert alle .scss-bestanden in _static/assets/sass/ naar gecomprimeerde CSS in _static/assets/dist/css/ (glob: ['sass/*.scss', 'sass/**/*.scss'] — enkel .scss, geen .sass). Elke SCSS-file levert een aparte .min.css op. Voorbeelden: banners.scss, blog-posts.scss, …

Webpack (JavaScript-bundels)¶

# _static/assets/package.json:42
webpack

Webpack bundelt JavaScript-modules uit _static/assets/js/ naar _static/assets/dist/js/. Entry points (zie _static/assets/webpack.config.js:2–13):

Bundle	Bron
`marginEditor.min.js`	Mini-shopmarges-editor (Vue 3)
`wheelSpinner.min.js`	360°-velgensimulator
`assetsManagement.min.js`	Asset-beheer admin
`products.min.js`	Productenlijst
`dealers.min.js`	Dealerskaart (Leaflet)
`dealersDetail.min.js`	Dealerdetailpagina
`swiper.min.js`	Swiper-carousel
`countUp.min.js`	CountUp-animaties
`countdown.min.js`	Afteller
`codeMirror.min.js`	Code-editor (CMS)

Installatie¶

# INSTALL.md:19–21
npm i
cd _static/assets && npm i && npm run build

npm run build = gulp && webpack (zie _static/assets/package.json:42).

Statische mappen¶

Map	Inhoud
`_static/css/`	Gecompileerde CSS-bestanden (naast `_static/assets/dist/css/`)
`_static/js/`	Legacy JavaScript-bestanden
`_static/images/`	Productafbeeldingen, logo's, banners
`_static/assets/dist/`	Webpack/Gulp-buildoutput
`_static/sass/`	SCSS-bronbestanden voor de kernstijlen
`_static/minishop/`	Mini-shop-specifieke assets
`_static/channel/`	Channelspecifieke assets

Frontend-bibliotheken¶

De belangrijkste JavaScript/CSS-bibliotheken in gebruik (uit _static/assets/package.json):

Bibliotheek	Gebruik
Bootstrap 5	Layoutraster, modals, dropdowns
jQuery 3	DOM-manipulatie, AJAX
Vue 3	Marge-editor (mini-shop)
Swiper	Producten-carousels
Leaflet	Dealerskaart
Chosen.js	Select-dropdowns
Chart.js	Statistiekgrafieken
Trumbowyg	WYSIWYG-editor in het CMS
CodeMirror	Code-editor voor sjablonen
Slick Carousel	Slider-componenten

Samenvatting: hoe een pagina gerenderd wordt¶

sequenceDiagram
    participant C as Browser
    participant Idx as _www/index.php
    participant Ctrl as atx\\...Controller
    participant View as atx\\PageView

    C->>Idx: GET /nl/banden
    Idx->>Ctrl: route → execAction()
    Ctrl->>View: new View(); view->show()
    View->>C: echo HTML (PHP inline)
    Note over View: CSS uit _static/css/<br>JS uit _static/js/ & dist/js/

Voor _cp/-pagina's vervangt Twig de PHP-view:

sequenceDiagram
    participant C as Browser
    participant CP as _cp/ (Slim 4)
    participant Ctrl as Atraxion\\Admin\\Controller
    participant Twig as Twig\\Environment

    C->>CP: GET /admin/customers
    CP->>Ctrl: route → action()
    Ctrl->>Twig: render('admin/customers/index.twig', data)
    Twig->>C: HTML response