Mega Menu & Burger: volledige gids

Overzicht

De module Mega Menu & Burger (datafireflymegamenu) vervangt de navigatie van uw winkel door een volledig instelbaar systeem: een megamenu met meerdere kolommen, een klassiek recursief uitklapmenu (walker) en een vloeiend burgermenu op mobiel. Alles bouwt u visueel op in de backoffice, met slepen en neerzetten, zonder één regel code.

Elk menu kan categorieën, producten (met foto en prijs), merken, CMS-pagina’s, eigen links, vrije HTML-blokken of promotieafbeeldingen tonen, geordend in kolommen binnen megapanelen. De module is volledig meertalig en werkt in multistore, en het item dat bij de bezochte pagina hoort, wordt automatisch uitgelicht.

Compatibiliteit

• PrestaShop 8.0 tot 9.x
• PHP 7.4 tot 8.x
• Eén winkel en multistore
• 5 meegeleverde talen: FR, EN, ES, DE en IT (en verder onbeperkt vertaalbaar)
• Classic-thema en eigen thema’s
• PSR-4-architectuur zonder Composer-afhankelijkheid

Installatie

1. Open in de backoffice Modules > Modulebeheer.
2. Klik op Een module installeren en kies het bestand datafireflymegamenu.zip.
3. Klik na de installatie op Configureren.

Snel aan de slag

1. Open de configuratie van de module. Links staan de lijst Mijn menu’s en de Instellingen van het menu; rechts staat de Structuur van het menu.
2. Klik op Nieuw menu, geef het een naam (per taal), kies de weergavehook en de lay-out, en sla op.
3. Klik in de zone Structuur van het menu op Een hoofditem toevoegen en kies het type.
4. Sleep de items om ze te herschikken of te nesten. De posities worden automatisch bewaard.

Instellingen van het menu

Het paneel Instellingen van het menu bepaalt het algemene gedrag van een menu:

• Naam van het menu: het interne opschrift, per taal te vertalen.
• Weergavehook: de plaats waar het menu verschijnt (zie het onderdeel Weergave en hooks).
• Lay-out: Megamenu (panelen met kolommen) of Klassiek uitklapmenu (recursieve walker).
• Openen: de submenu’s openen bij zweven of bij klikken. Bij zweven voorkomt een korte gratieperiode bij het sluiten elk geflikker bij diagonale muisbewegingen.
• Mobiel breekpunt (px): de breedte waaronder het menu naar de mobiele of burgermodus overschakelt (standaard 991 px).
• Maximale breedte (px): centreert de balk op de gekozen breedte om die op de container van het thema af te stemmen (bijvoorbeeld 1140 px). 0 betekent de volle breedte.
• Vastgezette balk (sticky): het menu blijft bij het scrollen boven aan staan.
• Megapanelen over de volle breedte: de megapanelen lopen over de hele breedte van de balk.
• Burgermenu op mobiel: schakelt het burgermenu in onder het breekpunt.
• Inklapbare kolomtitels: maakt van de kolomtitels in de megapanelen accordeons die standaard dicht staan, op mobiel, op pc of op beide (zie het aparte onderdeel).
• Ingeschakeld: toont of verbergt het menu aan de frontzijde.
• Winkels (multistore): kiest in welke winkels het menu verschijnt.

De structuur bouwen (slepen en neerzetten)

De structuur van een menu bouwt u op in de zone Structuur van het menu. Elke regel staat voor een item, met een sleepgreep, een bolletje dat het type aangeeft en actieknoppen.

• Herschikken: neem de greep vast en verplaats het item verticaal.
• Nesten: laat een item binnen een ander vallen om er een subitem van te maken (onbeperkt nesten).
• Een subitem toevoegen: met een eigen knop op elke regel.
• Bewerken en Verwijderen: pictogrammen op elke regel. Een item verwijderen wist ook zijn subitems.

Soorten items

Elk item heeft een type dat zijn inhoud en zijn link bepaalt. Het bewerkvenster past de beschikbare velden automatisch aan het gekozen type aan:

• Eigen link: een vrije URL, per taal te vertalen.
• Categorie: een link naar een categorie van de winkel, met een afbeelding en een productteller als optie.
• Categorieboom (automatisch): maakt de subcategorieën automatisch aan (zie het aparte onderdeel).
• Product: een link naar een productfiche, met de omslagfoto en de prijs als optie.
• Merk: een link naar een merk; Alle merken: een link naar de merkenpagina.
• Leverancier: een link naar een leverancier.
• CMS-pagina en CMS-categorie: links naar uw redactionele inhoud.
• HTML- of CMS-blok: vrije HTML-inhoud, ideaal voor een promotie of een verrijkte tekst.
• Afbeelding of promotie: een aanklikbare afbeelding (met URL).
• Opschrift: een eenvoudige titel zonder link, handig als kolomkop.
• Scheiding: een scheidingslijn, horizontaal in de uitklap- en megapanelen, verticaal tussen de items in de balk.

Per item kunt u ook instellen: een opschrift, een gekleurde badge (tekst en kleur), een Material-pictogram, een eigen CSS-klasse, het openen in een nieuw tabblad en de zichtbaarheid per toestel (mobiel, tablet, desktop).

Weergaveopties: afbeeldingen, prijzen en tellers

Afhankelijk van het gekozen type biedt het bewerkvenster een blok Weergaveopties:

• De afbeelding tonen (categorie, boom, product): toont de afbeelding van de categorie of de omslagfoto van het product als miniatuur in het menu. Vink dit uit voor een menu met alleen tekst. Een afbeelding die u handmatig op het item hebt geüpload, gaat altijd voor.
• De prijs tonen (product): toont de prijs van het product, opgemaakt volgens de valuta en de taal van de bezoeker, rechts van het opschrift.
• De productteller tonen (categorie, boom): toont in een bolletje hoeveel actieve producten de categorie telt, subcategorieën inbegrepen.
• Een link « Alles bekijken » toevoegen (boom): zet onder aan de lijst een link naar de wortelcategorie van de boom.

Megamenu: kolommen, afbeeldingen en HTML-blokken

Wilt u van een submenu een megapaneel maken, open dan het bovenliggende item en zet Weergave van het submenu op Megapaneel (kolommen). Bepaal daarna het aantal kolommen.

Elk rechtstreeks onderliggend item van dat item wordt dan een kolom van het paneel. Met het veld Kolombreedte (span) past u de breedte van elke kolom aan, en u kunt er sublinks, een HTML-blok of een promotieafbeelding in plaatsen.

Inklapbare kolomtitels

Bij een diepe catalogus kan een megapaneel erg lang worden, zeker op mobiel, waar alle kolommen onder elkaar komen te staan. De optie Inklapbare kolomtitels, in de Instellingen van het menu, maakt van elke kolomtitel een accordeon die standaard dicht staat.

De bezoeker ziet dan alleen de lijst met kolomtitels, doorgaans uw belangrijkste subcategorieën, en klapt enkel de rubriek open die hem interesseert. Een pijltje geeft aan of die open of dicht staat, en een klik op de titel klapt de lijst open of dicht in plaats van de link te volgen.

Er zijn vier waarden:

• Uitgeschakeld: het oude gedrag, waarbij de kolommen altijd openstaan.
• Alleen mobiel: accordeons onder het breekpunt, open kolommen op pc.
• Alleen pc: accordeons boven het breekpunt, open kolommen op mobiel.
• Mobiel en pc: accordeons in beide modi.

Automatische categorieboom

Met het type Categorieboom (automatisch) hoeft u niets handmatig in te voeren: het maakt zijn subcategorieën zelf aan vanuit een wortelcategorie, tot het niveau dat u met het veld Subniveaus bepaalt.

Met de Weergaveopties schakelt u de categorieafbeeldingen (miniaturen), de productteller per categorie en een link « Alles bekijken » naar de wortelcategorie in of uit, die onder aan de lijst komt.

Koppel dat type aan een weergave als Megapaneel en u hebt in enkele seconden een volledig megamenu « Winkel » dat altijd met uw catalogus meeloopt.

Meertaligheid en multistore

Het opschrift, de eigen URL, de badge en de HTML-inhoud van elk item zijn te vertalen via de taaltabbladen van het bewerkvenster. Ook de naam van het menu is meertalig.

In multistore koppelt u elk menu vanuit zijn instellingen aan een of meer winkels. Eenzelfde menu kan dus in slechts enkele winkels verschijnen.

Weergave, hooks en positie

Een menu verschijnt via de hook die u in de instellingen ervan kiest. De ondersteunde hooks zijn:

• displayNav2: de hoofdnavigatiebalk (de standaard)
• displayTop: boven aan de pagina, naast het logo en de zoekbalk
• displayNavFullWidth: een balk over de volle breedte
• displayFooter: de footer
• displayLeftColumn en displayRightColumn: de zijkolommen

Op displayTop past de balk zich automatisch aan de breedte van haar inhoud aan, zodat zij op dezelfde regel naast het logo en de zoekbalk van het thema past; de megapanelen over de volle breedte worden daar op het scherm gecentreerd.

Actieve pagina en navigatie

Het menu-item dat bij de bezochte pagina hoort, en zijn hoofditem, krijgen automatisch de klasse is-active en worden uitgelicht volgens de zweefstijl van het menu. De herkenning gebeurt aan browserzijde (een exacte overeenkomst van de URL, daarna de beste overeenkomst op sectie), wat perfect samengaat met het in cache zetten van de weergave.

Mobiele modus en burgermenu

Onder het ingestelde breekpunt gaat het menu automatisch naar de mobiele modus. Staat de optie Burgermenu op mobiel aan, dan neemt de navigatie de vorm van een burgermenu aan: een inschuivend paneel (slide-in), submenu’s als accordeon, een verduisterde achtergrond (backdrop) en een vergrendeling van het scrollen op de pagina.

De module respecteert de systeemvoorkeur voor verminderde beweging (prefers-reduced-motion) door de animaties voor de betrokken gebruikers uit te schakelen.

Prestaties en cache

De weergave van elk menu wordt door Smarty in cache gezet, met een sleutel die rekening houdt met het menu, de taal, de winkel, de valuta en de klantgroep. De menu’s verschijnen zo zonder herberekening op elke pagina.

De cache wordt automatisch ongeldig gemaakt wanneer een categorie, een CMS-pagina of een merk wordt toegevoegd, gewijzigd of verwijderd, en telkens wanneer u een menu of een item in de backoffice bewaart. De automatische bomen, de productteller en de prijzen blijven dus gelijk lopen met uw catalogus.

FAQ en probleemoplossing

Het menu verschijnt niet aan de frontzijde

Controleer of het menu ingeschakeld is, of het aan de juiste winkel hangt, en of de hook ervan overeenkomt met een plaats die uw thema werkelijk toont. Leeg daarna de cache van PrestaShop en herlaad in een privévenster.

De gekozen hook bestaat niet in mijn thema

Niet elk thema bevat alle hooks. Kies een hook die in uw thema wel bestaat (vaak displayNav2 of displayTop), of koppel de module via de pagina Posities aan een eigen hook.

Mijn megamenu toont geen kolommen

Open het bovenliggende item, zet Weergave van het submenu op Megapaneel (kolommen), bepaal het aantal kolommen en controleer of er onderliggende items bestaan: elk rechtstreeks onderliggend item wordt een kolom.

De afbeeldingen van categorieën of producten verschijnen niet

Controleer of het vakje De afbeelding tonen is aangevinkt bij de Weergaveopties van het item, of de categorie wel een afbeelding heeft (of het product een omslagfoto), en leeg daarna de cache. Wilt u een menu zonder afbeeldingen, vink die optie dan gewoon uit.

Het menu valt op een nieuwe regel of duwt de zoekbalk weg (displayTop)

Sinds versie 1.2.1 past de balk zich op displayTop aan haar inhoud aan. Blijft het probleem na de update, leeg dan de cache van PrestaShop: de HTML in de cache moet met de nieuwe klassen opnieuw worden opgebouwd.

Mijn megamenu is te lang op mobiel

Schakel de optie Inklapbare kolomtitels in de Instellingen van het menu in, in de modus Alleen mobiel of Mobiel en pc. De kolomtitels worden dan accordeons die standaard dicht staan: het paneel krimpt tot een korte lijst met rubrieken die de bezoeker op verzoek openklapt. Leeg daarna de cache van PrestaShop om de HTML opnieuw op te bouwen.

De wijzigingen verschijnen niet meteen

Omdat de weergave in cache staat, leegt u na een handmatige wijziging de cache van PrestaShop. Wijzigingen aan categorieën, CMS-pagina’s, merken, menu’s en items maken de cache automatisch ongeldig.

Werkt de module met PrestaShop 9?

Ja. De module werkt met PrestaShop 8 en 9, in multistore en meertalig, en vangt de technische verschillen tussen beide versies zelf op. De prijzen in het menu gebruiken de locale-opmaak van PrestaShop 9, met een automatische terugval op PrestaShop 8.