orasche
887caed2aa
- evo_megamenu_json stays project-neutral: new panel layout "catalog"; for such entries the MenuBuilder dispatches the new PSR-14 event BuildCatalogEvent and emits whatever a listener sets as `catalog` (null without a listener). The entry's teaser cards serve as the featured tiles; the teaser inline field now also shows for "catalog", and the entry form reloads when the layout changes. README section "Layout catalog" - VITEC listener ProvideProductCatalog fills it, modelled on the Ross Video products menu: main categories below the "Product" root, their subcategories as groups, products with a plain-text one-line teaser; same visibility rules as the product list, Product Finder links (/products?cat=&subcat=), empty categories and groups left out, three queries for the whole catalog - Product type-ahead GET /_json/?type=7385&q= (USER_INT page type, ProductMenuSearchJsonRenderer): Solr restricted to products, last term completed as a prefix, up to six product cards plus their titles as autocomplete suggestions; endpoint announced in catalog.search - Spec v1.23 (clause 7.16: product type-ahead)
128 lines
4.5 KiB
Markdown
128 lines
4.5 KiB
Markdown
# EVO Megamenu JSON
|
|
|
|
An editable megamenu for headless TYPO3. One content element holds the whole
|
|
menu; the extension publishes it as JSON, the front end renders it.
|
|
|
|
Project-neutral by design — nothing in here knows which site it runs on.
|
|
|
|
## What the editor gets
|
|
|
|
A plugin called **Megamenu**. Inside it:
|
|
|
|
| Level | Holds |
|
|
|---|---|
|
|
| **Entry** | one item in the main bar: label, target page, panel layout |
|
|
| **Column** | a heading (optionally a link) and its items |
|
|
| **Item** | label, link, teaser line, badge, thumbnail, “page not ready” flag |
|
|
| **Teaser card** | kicker, headline, text, link, image — for editorial panels |
|
|
| **Featured** | one highlighted block per entry, edited on the entry itself |
|
|
|
|
Three panel layouts per entry: `columns` for a structure menu (products,
|
|
solutions, markets), `teasers` for a small link column next to cards
|
|
(news, stories), and `catalog` for a data-driven panel whose content comes
|
|
from the site package (see below).
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
composer require evomedien/evo-megamenu-json
|
|
vendor/bin/typo3 extension:setup
|
|
vendor/bin/typo3 database:updateschema "*.add,*.change"
|
|
```
|
|
|
|
In the site configuration, add the set **EVO Megamenu (JSON)** and set:
|
|
|
|
| Setting | Meaning |
|
|
|---|---|
|
|
|
|
| `megamenu.contentUid` | uid of the Megamenu element to publish on every page |
|
|
| `megamenu.storagePid` | alternative: folder whose first Megamenu element is used |
|
|
|
|
Leave both uid and pid at 0 and the menu is only rendered where the element
|
|
sits — useful while building it.
|
|
|
|
## Payload
|
|
|
|
```json
|
|
"megaMenu": {
|
|
"settings": {
|
|
"stage": 3, "openOn": "hover", "closeDelay": 140, "columnsPerRow": 4,
|
|
"panelWidth": "container", "pendingBehaviour": "fallback",
|
|
"showCounts": true, "showViewAll": true, "viewAllLabel": "View all %s"
|
|
},
|
|
"entries": [
|
|
{
|
|
"title": "Products",
|
|
"link": "/products",
|
|
"layout": "columns",
|
|
"columns": [
|
|
{
|
|
"title": "IP Video Streaming",
|
|
"link": "/products/ip-video-streaming",
|
|
"items": [
|
|
{ "title": "Appliances", "link": "/products/ip-video-streaming/appliances",
|
|
"pending": true, "teaser": "MGW Diamond, Ace, Pico",
|
|
"image": { "url": "/fileadmin/...", "alternative": "", "title": "", "width": 600, "height": 400 } }
|
|
]
|
|
}
|
|
],
|
|
"featured": { "kicker": "Datasheet", "title": "MGW Diamond-H", "text": "…", "link": "/product/…", "image": { } }
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
`settings` travels with the menu on purpose: the front end reads hover
|
|
behaviour, close delay, column count and labels from the payload instead of
|
|
hard-coding them, so an editor can change them without a deploy.
|
|
|
|
### Content stages
|
|
|
|
`stage` decides how much detail is emitted — 1 structure only, 2 adds images,
|
|
teaser lines and cards, 3 adds the featured block. Later stages only **add**
|
|
keys, so a front end written for stage 1 keeps working when the stage is
|
|
raised.
|
|
|
|
### `pending`
|
|
|
|
An item whose target page does not exist yet carries `"pending": true`.
|
|
`settings.pendingBehaviour` says what to do with it: `fallback` (link to the
|
|
column heading instead), `mute` (show, not clickable) or `hide`. This keeps
|
|
a menu shippable while its deeper pages are still being built.
|
|
|
|
### Layout `catalog`
|
|
|
|
For panels built from data rather than by hand — a product catalog with
|
|
categories, groups and items, a search bar, whatever the site needs. The
|
|
extension stays project-neutral: it dispatches
|
|
`Evomedien\EvoMegamenuJson\Event\BuildCatalogEvent` for every catalog entry
|
|
and emits whatever a listener sets via `setCatalog()` verbatim as
|
|
`catalog` on the entry (`null` without a listener). The entry's teaser cards
|
|
are emitted as `teasers` as usual and serve as the panel's featured tiles;
|
|
its columns are ignored.
|
|
|
|
```php
|
|
#[AsEventListener(identifier: 'site/megamenu-catalog')]
|
|
final class ProvideCatalog
|
|
{
|
|
public function __invoke(BuildCatalogEvent $event): void
|
|
{
|
|
$event->setCatalog(['categories' => [/* … */]]);
|
|
}
|
|
}
|
|
```
|
|
|
|
`getEntry()` hands the listener the raw entry row (to tell several catalog
|
|
entries apart), `getStage()` the content stage.
|
|
|
|
## Notes
|
|
|
|
* Every link is a resolved URL — page, record, external or file, run through
|
|
typolink at render time.
|
|
* Translations are overlaid per record, so a menu can be localised entry by
|
|
entry.
|
|
* The renderer never throws: a broken menu returns an empty value rather than
|
|
taking the page payload down.
|
|
* Without `friendsoftypo3/headless` the element has no JSON envelope to render
|
|
into — the extension is built for headless installations.
|