Showcase / Content en vindbaarheid

Een megamenu met productteasers

Een menu met alleen categorienamen laat een bezoeker raden wat er achter zit. In onze demowinkel klapt elke categorie open in een breed paneel met de onderliggende categorieën, een paar echte producten met prijs, en een ingang naar de hele collectie.

De homepage van de demowinkel met het opengeklapte menu voor Bewaren: links de ingangen, in het midden vier producten met prijs, rechts een kaart naar de collectie — Het paneel voor Bewaren: ingangen links, producten met prijs in het midden, een kaart naar de collectie rechts

Magento 2 · Hyvä · Navigatie · Toegankelijkheid

Wat het doet

Uit de categorieën die je al hebt

De menu-items zijn de categorieën van de winkel, met hun onderliggende categorieën eronder. Een categorie erbij in het beheer staat ook in het menu, zonder dat iemand het menu bijwerkt.

Producten met prijs in het menu

Per categorie staan er tot vier producten in het paneel, met beeld en prijs. Alleen producten die zichtbaar zijn en op voorraad liggen komen erin.

Muis en toetsenbord

Het paneel opent als de muis erover gaat en ook als je er met de tab-toets op komt. Escape sluit het en een klik ernaast ook, dus het is met het toetsenbord alleen te bedienen.

De pagina blijft staan

Het paneel ligt over de pagina heen in plaats van hem naar beneden te duwen. Er verschuift dus niets als het open of dicht gaat.

De huidige pagina is gemarkeerd

Het streepje onder de categorie waar je bent, staat er zodra de pagina opent. Het springt niet pas na het laden op zijn plek.

Voor wie

Shops met een catalogus die in drie of meer takken uiteenvalt en waar de bezoeker nu twee klikken nodig heeft voordat hij een product ziet. Het menu wordt dan een etalage in plaats van een lijst.

Op de telefoon blijft het gewone uitschuifmenu van Hyvä staan. Een breed paneel werkt daar niet, en een tweede menuvariant die niemand test is vragen om problemen.

Zelf bekijken

Ga met de muis over Bewaren, Keuken of Onderweg in de demowinkel, of loop met de tab-toets door het menu. In de demowinkel hebben de categorieën geen onderliggende niveaus; het paneel toont dan de ingang naar de hele categorie en de andere categorieën.

Open de demowinkel

Voor developers

Een view model boven de navigatie van Hyvä levert de categorieën op niveau twee met hun onderliggende items, plus de vaste links naar de blog en de over-onspagina.
De productteasers komen uit één collectie per categorie, met een filter op status, zichtbaarheid en voorraad, en worden binnen het verzoek gecached.
De prijs komt uit dezelfde dienst die de rest van de winkel gebruikt, dus inclusief of exclusief btw volgt de klantgroep.
Het blok geeft de cache-identiteiten van de navigatie door, zodat de HTML vervalt zodra er aan de categorieën iets verandert.
Welk item actief is, bepaalt het view model aan de serverkant en komt als klasse in de HTML mee. Er is geen JavaScript nodig om het streepje te zetten.
De interactie is Alpine via attributen; het component wordt geregistreerd vanuit een themabestand, zodat er geen inline JavaScript in de pagina staat.
Het paneel staat vast gepositioneerd en haalt zijn bovenkant uit een CSS-variabele die het themabestand op de onderrand van de navigatie zet.

Het menu is gebouwd op Hyvä, de frontend waar we de meeste shops naartoe brengen.

De collecties in het menu komen uit categorieën op basis van een filter.

Terug naar alle onderdelen in de showcase.

Laat jouw menu zien wat je verkoopt?

In een kennismaking van een kwartier kijken we naar de navigatie van je shop.

Plan een kennismaking

Jasper van Tellingen, e-commerce architect