Mega Menu: Einrichtung und Hilfe

Laden Sie die mprmegamenu-ZIP unter Module > "Module Manager" hoch und installieren Sie sie. Klicken Sie auf "Configure" oder öffnen Sie "Improve" > Mega Menu > Menü-Tabs.

Die Installation registriert displayMainMenu, displayTop und displayNavFullWidth. Der Renderer wählt die passende Menüposition für Ihr Theme. Die Installation entfernt eingehängte Instanzen von ps_mainmenu, blocktopmenu und blocktopdropdownmenu aus den oberen oder vollbreiten Navigations-Hooks und merkt sie sich zur Wiederherstellung bei der Deinstallation.

Prüfen Sie direkt nach der Installation den Kopfbereich. Ein eigenes Theme muss einen unterstützten Hook aufrufen. Ein Entwickler kann eine Platzierung im Theme ergänzen:

{hook h='displayMainMenu'}

oder:

{widget name='mprmegamenu' hook='displayMainMenu'}

Wählen Sie den gewünschten Shop, bevor Sie Tabs konfigurieren. Der PHP-Prozess benötigt Schreibzugriff auf den Modulordner im PrestaShop-Cache-Verzeichnis. Mitarbeiter, die Dropdown-Spalten bearbeiten, benötigen Bearbeitungsrechte für die Adminseite des Moduls.

Erstellen und speichern Sie unter Menü-Tabs einen Tab und öffnen Sie dann dessen Editor "Dropdown Columns".

Für einen Angebotslink setzen Sie "Label" auf Sale, "URL Type" auf "Custom URL", "Custom URL" auf den Angebotspfad Ihres Shops und Aktiv auf Ein. Prüfen Sie den Link in jeder Sprache.

Wählen Sie einen Spaltentyp und legen Sie seine Breite im 12-Spalten-Raster fest. Neue Spalten verwenden standardmäßig Breite 3 und Typ category_tree. Der Editor erlaubt bis zu 12 Spalten; ihre Gesamtbreite darf 12 nicht überschreiten. Titel und Inhalte sind übersetzbar. Generierte Spaltentypen verwenden Einstellungen statt übersetzter HTML-Inhalte.

Der Editor validiert URLs, Referenzen, Inhaltstypen und Breiten. Wenn ein anderer Mitarbeiter denselben Tab speichert, laden Sie dessen Spalten vor dem erneuten Speichern neu. Eine veraltete Revision wird abgelehnt, damit seine Änderungen nicht überschrieben werden.

Verwenden Sie für einen Kategoriebaum unter Kategorie 8 diese Einstellungen und ersetzen Sie alle Beispiel-IDs:

{"id_category":8,"depth":2,"exclude":[15,16]}

Für ausgewählte CMS-Seiten:

{"cms_ids":[3,4,5]}

Strukturierte Zeilen im aktuellen Editor enthalten einen Zeilentyp. Ein Inhaltsarray mit gruppierten Links kann so aussehen:

[
  {
    "row_type":"link_group",
    "label":"Shopping help",
    "url":"/help",
    "icon":"help",
    "new_window":false,
    "children":[
      {"row_type":"link","label":"Delivery","url":"/delivery","icon":"local_shipping","new_window":false}
    ]
  }
]

Verwenden Sie vorhandene, lokalisierte Ziele. Unterstützte URL-Formen sind Anker, root-relative Pfade mit einem führenden Schrägstrich und absolute HTTP/HTTPS-URLs. Protokollrelative URLs werden abgelehnt.

Ein Inhaltsbeispiel für visuelle Tabs:

{
  "tabs":[
    {
      "row_type":"visual_tab",
      "id":"guides",
      "label":"Guides",
      "url":"/guides",
      "columns":[
        {"type":"sizes","title":"Topics","links":[{"row_type":"link","label":"Delivery","url":"/delivery","icon":"","new_window":false}]},
        {"type":"card","col_class":"col-6","title":"New products","subtitle":"Latest arrivals","url":"/new-products","image":"/img/cms/menu-new-products.jpg","mobile_image":"","alt":"New products"}
      ]
    }
  ]
}

Bei eigenem HTML gehören [data-mm-tabs], .mm-type-card, .mm-html-Linkgruppen und normale Listen zu den unterstützten mobilen Strukturen. Ein Desktop-Formular oder beliebiges Widget wird nicht automatisch als interaktives mobiles Formular nachgebildet.

<div class="mm-html">
  <div class="mm-html__title">Buying guides</div>
  <ul>
    <li><a href="/guide-1">Guide 1</a></li>
    <li><a href="/guide-2">Guide 2</a></li>
  </ul>
</div>

Öffnen Sie Mega Menu > Einstellungen > Konfiguration.

Für Produkt-Panels wählen Sie Kategorien aus. Das Standardformular bietet dafür keine Auswahl einzelner Produkte.

Verwenden Sie die Einstellungen "Submenu" unter Konfiguration.

Verwenden Sie für Ratgeberreferenzen echte veröffentlichte IDs, zum Beispiel:

{"8":[12,"kb:34"],"*":[56]}

Das mobile Menü bietet verschachtelte Navigation und eine Schnellzugriffsleiste. Prüfen Sie die konfigurierten Ziele für Kontakt, Konto, Hilfe und Sprache/Region in den tatsächlichen Shopsprachen.

Verwenden Sie "Theme styles" für gemeinsam erkannte Theme-Werte. Das Modul ordnet Primärfarbe, Text, gedämpften Text, primären und sekundären Hintergrund, Rahmen, Radius und Übergang den Variablen --mprmegamenu-* zu. Aktualisieren Sie die Erkennung nach einem Theme-Wechsel oder löschen Sie eigene Überschreibungen, um zu den erkannten Werten zurückzukehren.

Die aktuelle Variablenzuordnung enthält die alten modulspezifischen Aliase für Primary-Hover und Schatten nicht. Prüfen Sie den gemeinsamen Stileditor und das aktive Stylesheet, statt die ursprüngliche feste Fallback-Liste als Modulstandard einzugeben.

Prüfen Sie für Theme-CSS .mprmegamenu-container und das aktuelle .ps-mainmenu__*-Markup. Ein eigener Kopfbereich kann Änderungen an Abständen oder Positionierung erfordern.

1. Testen Sie jedes Ziel der obersten Ebene auf dem Desktop.
2. Öffnen Sie jedes Dropdown und testen Sie dessen Links, Produkte und Bilder.
3. Wiederholen Sie dies im mobilen Seitenmenü. Prüfen Sie, ob eigenes HTML die gewünschten verschachtelten Links erzeugt.
4. Wiederholen Sie dies als Gast und in allen Kundengruppen mit Kategoriebeschränkungen.
5. Wiederholen Sie dies in jeder Sprache und jedem Shop.

Kategoriebaum-Inhalte folgen Katalogänderungen. Manuell eingegebene Links und HTML müssen weiterhin manuell gepflegt werden. Kategorie-, CMS-, Produkt- und Menüänderungen invalidieren zugehörige Menü-Caches. Das Modul speichert Daten, gerendertes Markup und Fragmente im Verzeichnis mprmegamenu unter dem PrestaShop-Cache-Verzeichnis.

Fehlt das Menü, prüfen Sie den Theme-Hook und aktive Tabs für den gewählten Shop. Lassen sich Spalten nicht speichern, prüfen Sie Bearbeitungsrechte, Validierungsfehler und die Gesamtbreite. Ist eine Blogspalte leer, prüfen Sie ihr Quellmodul und veröffentlichte Inhalte.

Öffnen Sie Einstellungen > Integrität für Prüfungen von Tabellen, Hooks, Referenzen und Cache-Verzeichnis. Erforderliche Menütabellen sind mprmegamenu_tab, mprmegamenu_tab_lang, mprmegamenu_tab_shop, mprmegamenu_column und mprmegamenu_column_lang. Leeren Sie relevante PrestaShop- und CDN-Caches nach Änderungen an Theme-Überschreibungen.

Exportieren oder sichern Sie zuerst die Menüeinstellungen. Deinstallieren Sie über "Module Manager". Die Deinstallations-SQL löscht die fünf Menütabellen, leert den Modulcache und entfernt Menüeinträge. Das Modul stellt die zuvor gespeicherten nativen Menü-Hook-Registrierungen wieder her. Prüfen Sie danach den Kopfbereich, besonders wenn Sie native Menümodule geändert haben, während Mega Menu installiert war.

Erfordert PrestaShop 1.6.1 oder höher und PHP 7.1 oder höher.