Auto Mega Menu

Forside › Plugins › Auto Mega Menu

En mega menu bliver bygget én gang og forældes derefter stille og roligt. Nye kategorier mangler, omdøbte hedder stadig det gamle, og udgåede står tilbage. Ikke fordi nogen er skødesløs, men fordi menuen er en kopi af butikken frem for et billede af den.

Panelet gemmer en regel, ikke en kopi

De fleste mega menu-plugins beder jer bygge menuen op punkt for punkt. Det, I gemmer, er et øjebliksbillede af sortimentet den dag. Ændrer butikken sig, skal menuen rettes i hånden — og det er dét skridt, der bliver glemt.

Her peger I et menupunkt på en varekategori. Panelet fylder sig selv med underkategorierne, deres billeder og deres links. Tilføjer I en kategori i WooCommerce, står den i menuen af sig selv. Omdøber I en, følger menuen med. Og ændrer I en kategori, bliver sidecachen tømt, så kunderne ikke ser den gamle menu i dagevis.

Og alt kan gøres i hånden

Automatikken er et tilbud, ikke et krav. Hvert punkt kan bygges fra bunden med 16 slags blokke: overskrift, liste, links, billede, knap, tekst, HTML, shortcode, logo, promokort, produktgitter, søgefelt, widget, sektion, skillelinje og luft.

I kan blande frit. Lad afdelingerne fylde sig selv, og læg en håndlavet sektion nedenunder med tilbud, en guide eller det, der nu skal frem.

I bestemmer, hvor alting står

Træk en gruppe fra én kolonne til en anden, eller fastgør den til en bestemt kolonne og plads, så den bliver dér. Inde i gruppen trækker I kategorierne op og ned — Skaljakker over Softshell jakker — eller bruger pilene, hvis I hellere vil bruge tastaturet.

Rækkefølgen på desktop og på telefonen er to forskellige ting. På en stor skærm handler den om, hvad der står øverst i hver kolonne. På en telefon handler den om, hvad tommelfingeren møder først. Derfor kan telefonen få sin egen rækkefølge, uden at desktop rører sig.

Panelet regner sin egen form ud

Panelet vokser med indholdet, til det rammer skærmens højde, og ruller derefter. Fastgjorte kolonner fylder hele bredden uden tomme huller. Er en liste for lang, afkortes den, og der kommer et «Se alle 18»-link med det rigtige antal. Kategoriens eget billede bruges automatisk, og I kan vælge et andet eller undlade det.

Mobilen er tegnet for sig

Drawer’en åbner i fuld bredde med butikkens logo, og et tryk på en kategori folder niveauet under ud i stedet for at navigere væk. Hele drawer’en ruller som én ting, og knapper som «Find butik» ligger efter sidste menupunkt — ikke i en fast bjælke, der tager pladsen fra menuen på en telefon holdt på tværs.

Let at bære

En responsiv header er ofte tre headere — én pr. skærmstørrelse — og de fleste menuer bliver derfor sendt tre gange. Auto Mega Menu tegnes én gang og flytter sig hen i den header, temaet viser. På en af de butikker, den kører på, faldt forsidens HTML fra 1,57 MB til 1,17 MB.

Menuens miniaturebilleder hentes først, når der er brug for dem. Og den fungerer sammen med cache- og optimeringsplugins som NitroPack, LiteSpeed, WP Rocket og Cloudflare: menuen beder dem lade dens egne filer være, så den står der ved første visning.

Tilgængelighed er bygget ind, ikke sat på

Fuld tastaturnavigation med piletaster og Escape. Fokus bliver fanget inde i drawer’en, mens den er åben, ARIA-tilstandene er sat rigtigt, og berøringsmålene er 44 px. Skærmlæsere får menuens tekster på kundens eget sprog. Fokusringen vises kun for tastaturbrugere.

Hvad det kan

Automatik

• Paneler fyldes fra WooCommerce-kategorier og holder sig opdateret
• Ét klik bygger hele menuen fra kategoritræet
• Kategoriens eget billede bruges automatisk
• «Se alle 18»-link med antal, når en liste er afkortet

Design

• 276 indstillinger fordelt på 18 områder
• Fire niveauer — globalt, pr. område, pr. menupunkt og pr. skærmbredde
• Syv skærmbredder, der passer med Elementor og Breakdance
• Vandmærke i panelet, der kan slås fra på mindre skærme
• 7 hamburger-animationer og 4 panel-layouts
• 44 ikoner i det indbyggede ikonbibliotek — eller jeres egen SVG
• Egne badges med forudindstillinger

Placering

• Træk grupper mellem kolonner, eller fastgør dem
• Træk kategorier op og ned inde i en gruppe
• Egen rækkefølge på telefon og tablet

Drift

• Eksport og import mellem sites — kategorier matches på slug, ikke database-id
• Overtager temaets menuplacering eller indsættes med shortcode
• Tømmer sidecachen, når menuen ændres
• SVG renses gennem en tilladelsesliste, før den gemmes
• Kundetekster på dansk, tysk (du og Sie), svensk og hollandsk · administration på engelsk

Indsættes hvor I vil

Shortcode, Gutenberg-blok, Elementor-widget, Breakdance-element eller temaets egen menuplacering. Der er ingen byggetrin: React kommer fra WordPress' eget wp.element, frontend er ren JavaScript uden framework, og indstillingerne ligger som JSON i post meta.

Specifikationer

Det kører i rigtige shops

Version 0.97.0 kører på wolftactical.de og wolftac.dk hos Wolf Tactical — en butik, jeg har arbejdet med i over fem år, med et sortiment, der ændrer sig. Det er præcis dér, forskellen på en regel og en kopi viser sig.

Hvad testene kan — og hvad de ikke kan

Der ligger 38 testsuiter bag. De måler blandt andet i en rigtig browser på syv skærmbredder, gennemgår drawer, drill-down, touch og tastatur, og kontrollerer, at hver gemt indstilling faktisk kan nås i byggeren. Hver vigtig test er efterprøvet ved at sætte den fejl, den skal fange, tilbage i koden og se den fejle — 29 ud af 29.

Men lad mig være ærlig om grænsen. Testene måler, at intet er i stykker. De kan ikke se, om noget ser godt ud, og flere af de fejl, der er rettet i år, blev fundet af et menneske med en telefon i hånden på en rigtig butik. Det er derfor, pluginet kører i drift og ikke kun på min egen maskine.

Ofte stillede spørgsmål