Shopware-Navigation aus WordPress pflegen: ein Menü für Shop und Ratgeber

Stell dir einen Händler für Praxis- und Klinikbedarf vor, der seinen Ratgeber in zwei Bereiche sortiert: Praxisausstattung und Hygiene. Beide sollen im Hauptmenü stehen, neben dem Shop, auf jeder Seite.

In WordPress ergänzt sein Team die Einträge über die Menüverwaltung. Werden die Menüs getrennt gepflegt, muss es dieselbe Änderung auch im Shop vornehmen. Neue Links, geänderte Bezeichnungen und eine andere Reihenfolge werden damit zu doppelter Arbeit.

Bei PoloProfi habe ich das Shopware-Theme und das Plugin für die gemeinsame Navigation gebaut. Das Team pflegt Menüeinträge einmal in WordPress. Der Shop übernimmt sie für Desktop und Handy, ohne zusätzliche Eingabe in Shopware.

Für dich als Unternehmer

Einmal ändern statt doppelt pflegen. Die Hauptnavigation hilft Besuchern, sich auf deiner Website zu orientieren. Wenn sie an zwei Stellen gepflegt wird, muss dein Team dieselben Links, Bezeichnungen und Reihenfolgen mehrfach bearbeiten. Dabei können die Einträge auseinanderlaufen. Mit dem Plugin pflegt dein Team die gemeinsame Hauptnavigation nur in WordPress. Nach dem erfolgreichen Abgleich erscheinen die Änderungen auch im Shop. Die zweite Eingabe und das manuelle Nachziehen derselben Änderungen in Shopware entfallen. Für Änderungen innerhalb der vorhandenen Menüfunktionen braucht dein Team keinen Entwickler.

Shop und Ratgeber wirken wie eine Website. Dieselben Menüeinträge in derselben Reihenfolge erleichtern die Orientierung beim Wechsel zwischen Ratgeber und Shop. Das trägt zu einem zusammenhängenden Auftritt bei. Ein gemeinsames Menü allein macht aber noch nicht die gesamte Gestaltung und Bedienung beider Systeme einheitlich.

Das Shop-Menü bleibt bei einem WordPress-Ausfall nutzbar. Der Shop speichert das zuletzt erfolgreich übernommene Menü selbst. Beim Öffnen einer Shop-Seite muss er WordPress dafür nicht erreichen. Während eines Ausfalls bleiben neue Menüänderungen allerdings aus. Links zu WordPress-Seiten führen dann weiterhin zu dem ausgefallenen System. Mir war wichtiger, dass das Shop-Menü weiter angezeigt wird, als dass jede Änderung unmittelbar sichtbar ist.

Einrichtung und technische Betreuung einplanen. Die Verbindung wird technisch eingerichtet und mit eurem Design auf Desktop und Handy geprüft. Die Menüeinträge pflegt dein Team anschließend selbst in WordPress. Updates beider Systeme und die Kontrolle des Abgleichs gehören zum laufenden Betrieb. Neue Darstellungsformen oder Änderungen, die über die vorhandenen Menüfunktionen hinausgehen, können weiterhin einen Entwickler brauchen.

Für dich, wenn du den Shop im Alltag betreust

Pflege in WordPress, wie gewohnt. Design → Menüs, Position Hauptmenü. Einträge anlegen, verschieben, verschachteln, Seiten verlinken. Wenn dein Team die WordPress-Menüverwaltung kennt, bleibt die Pflege im gewohnten Werkzeug. Wird etwa „Praxisausstattung“ in „Ausstattung für deine Praxis“ umbenannt, änderst du den Eintrag einmal. Nach dem erfolgreichen Abgleich übernimmt der Shop die neue Bezeichnung für Desktop und Handy, ohne eine zweite Eingabe in Shopware. Anschließend prüfst du, ob der Eintrag und sein Link in beiden Systemen wie gewünscht erscheinen.

Dieselben Einträge auf Desktop und Handy. Das Menü erscheint im Shop-Header auf dem Desktop und im ausklappbaren Menü auf dem Handy, mit denselben Einträgen und derselben Reihenfolge. Untermenüs bis zur dritten Ebene werden übernommen. Gemeint ist die gemeinsame Hauptnavigation, nicht die Übernahme des gesamten Produktkatalogs in WordPress. Bei der Einrichtung muss auch geklärt werden, wie Kunden von dort zu den Shop-Kategorien gelangen, gerade auf dem Handy.

Nach dem Speichern automatisch übertragen. Nach dem Speichern meldet WordPress die Änderung an den Shop. Der ruft das neue Menü im Hintergrund ab und übernimmt es nach erfolgreicher Verarbeitung. Die Änderung erscheint, sobald der Shop das Menü erfolgreich übernommen und seine gespeicherte Darstellung erneuert hat. Ein Hinweis im WordPress-Backend zeigt Fehler beim Senden der Meldung, und ein Knopf schickt sie noch einmal. Eine bestätigte Meldung bedeutet noch nicht, dass der Shop das neue Menü bereits übernommen hat.

Wenn mal etwas hakt. Fällt WordPress aus, bleibt im Shop das letzte gültige Menü stehen. Bis zum ersten erfolgreichen Abgleich nutzt der Shop seine Kategorien als Ersatznavigation.

Für deine Entwickler oder IT

Die naheliegende Lösung wäre gewesen: Der Shop ruft beim Rendern des Headers das Menü von WordPress ab. Das habe ich bewusst nicht gemacht, aus drei Gründen.

Warum kein Live-Abruf. Erstens wird der Shop-Header als eigener Seitenbaustein zwischengespeichert. Muss dieser Baustein neu aufgebaut werden, würde ein zusätzlicher Abruf bei WordPress den Seitenaufbau von dessen Antwortzeit abhängig machen. Zweitens erreicht der Shop WordPress in der Cloud nur über die öffentliche Domain. Davor sitzt eine Web Application Firewall, die Anfragen filtert und die Anzahl der Aufrufe an die WordPress-Schnittstelle begrenzt. Drittens bräuchte auch ein Live-Abruf eine Rückfalllösung, damit ein WordPress-Ausfall nicht zu einem fehlenden Menü führt.

Menü im Shop speichern statt bei jedem Aufruf abfragen. Stattdessen hat der Shop eine eigene Tabelle, eine Zeile je Verkaufskanal. Darin stehen das letzte gültige Menü im strukturierten Datenformat JSON, eine Kennung seines Datenstands, der sogenannte ETag, und der Zeitpunkt des Abrufs. Nach dem ersten erfolgreichen Abgleich rendern Header und mobiles Menü aus dieser Tabelle. Für die Ausgabe des Menüs gibt es beim Seitenaufbau keinen Aufruf an WordPress.

Der Ablauf bei einer Änderung. WordPress setzt bei Menü-, Positions- oder Seitenänderungen eine Markierung und schickt am Ende der Verarbeitung einen kurzen Aufruf an einen eigenen Endpunkt der Shopware-Store-API, ohne Menüdaten, nur als Auslöser. Der Shop bestätigt den Aufruf und stellt den Abgleich in eine Warteschlange für Hintergrundaufgaben. Ein Hintergrunddienst holt das Menü über die WordPress-Schnittstelle ab. Er sendet den bisherigen ETag im Header If-None-Match mit. Bei unverändertem Menü antwortet WordPress mit Status 304, ohne die Menüdaten erneut zu übertragen. Im Shop muss dann nichts neu geschrieben werden. Ist das Menü neu, wird es normalisiert, auf Tiefe und Anzahl begrenzt, unsichere Links werden verworfen, und die Zeile wird ersetzt. Beide Aufrufe tragen ein gemeinsames Geheimnis im Header zur Prüfung der Berechtigung. Der Zugangsschlüssel des Verkaufskanals wählt hier den Kanal aus. Er allein berechtigt nicht dazu, den Abgleich auszulösen.

Nur die betroffenen Menü-Caches erneuern. Header und Menü-Ebenen tragen einen eigenen Cache-Tag je Verkaufskanal. Nach einem erfolgreichen Abgleich wird genau dieser Tag sofort geleert, nicht der ganze Cache. Ohne diesen Schritt könnte das bisherige Menü bis zum Ablauf des Caches sichtbar bleiben.

Änderungen lösen den Abgleich aus. Es gibt keinen zeitgesteuerten Auftrag, der regelmäßig bei WordPress nachfragt. Änderungen stoßen den Abgleich an. Wer nachholen will, hat einen Konsolenbefehl im Shop und einen Knopf in WordPress. Für den Betrieb reicht die Bestätigung des Auslösers allein nicht aus: Auch Fehler beim Abruf und bei der Verarbeitung müssen auffallen. Ohne regelmäßigen Kontrollabruf kann eine unbemerkte fehlgeschlagene Aktualisierung sonst länger bestehen bleiben.

Was ich noch vorhabe. Ein zweites Menü für den Footer, damit Rechtstexte und Ratgeber-Bereiche auch unten aus WordPress kommen. Und Teaser zu passenden Ratgeber-Artikeln auf Kategorie- und Produktseiten, mit demselben Muster: abholen, speichern, aus der eigenen Tabelle rendern.

Wie wir das machen

Die Navigation ist ein Modul unseres eigenen Connectors zwischen WordPress und Shopware. Die Plugins sind nicht öffentlich erhältlich. Einrichtung, Betrieb und Pflege sind Teil unserer vereinbarten Leistungen.

Das zweite Modul zeigt Produkte im Ratgeber: Shopware-Produkte in WordPress anzeigen. Warum beide Systeme unter einer Domain laufen, steht in Ratgeber und Shop unter einer Domain, die Übersicht auf WordPress mit Shopware verbinden.

Solche Verbindungen gehören für mich zum Betrieb eines Shops dazu, nicht zu einem Projekt, das einmal gemacht wird. Was wir im laufenden Betrieb übernehmen, steht unter Hosting und Betrieb.

Wie viele Stellen müsst ihr heute anfassen, wenn ein Menüpunkt dazukommt?