Eva — Frontend Documentation
Eva is the JTI Next.js storefront. This documentation covers the architecture, modules, and components that power the customer-facing web experience.
Tech Stack
| Layer | Technology |
|---|---|
| Framework | Next.js (App Router) |
| CMS | Builder.io |
| E-commerce backend | Magento |
| UI library | @jti/ui |
| Rendering | Incremental Static Regeneration (ISR) |
How the Two Systems Divide Responsibility
The storefront is driven by two external systems that have clearly separated roles:
- Builder.io owns page layout, product display order, editorial overrides (badges, CTA labels), category images, and copy. Content editors work exclusively here — no deployment required to change what appears on the page.
- Magento owns live product data: names, prices, images, stock status, colour variants, flavour attributes, and bundle options.
Documentation Map
Modules
| Module | Description |
|---|---|
| Shop | Product discovery and purchasing — shop landing, category grids, and product detail pages |
Components
| Component | Description |
|---|---|
| Category | Page template for the shop landing and all category pages |
| CategoryFilters | Subcategory filter tab bar |
| CategoryItems | Product grid rendered inside a category page |
| ProductCard | Builder.io-registered wrapper that renders a single product tile |
| ProductCardContainer | Parent container that injects product data bindings into ProductCard children |
| ConfigurableProduct | Product detail page component for configurable (colour/variant) products |
| BundleProduct | Product detail page component for bundle products |
| ConsumablesProduct | Matrix-based selection UI for consumable products |
Key Behaviours
- ISR — all shop routes are statically generated at build time and revalidated every 5 minutes in the background, keeping pages fast without full redeployments.
- Province-based filtering — on supported markets, products are filtered by the logged-in user's province. This is transparent to the user.
- Discontinued product redirect — stale product URLs redirect to the shop with a contextual banner and the nearest category pre-selected.
- Free-trial products — a parallel Magento store view provides trial SKUs with a dedicated cart flow and URL pattern.
- GTM analytics —
view_item_listecommerce events fire automatically on every product list view when the GTM container initialises.