Hier müssen die „größer gleich“ Tablet Viewport Einträge rausgenommen werden. Denn hier wird das Layout ausgeblendet und alle Einträge aus dem Standardmenü.
Dazu das Menü im StateManager in jquery.shopware-responsive.js für die Viewports m, l und xl freischalten.
frontend/_public/src/js
-> jquery.shopware-responsive.js
m,l und xl hinzufügen für das offcanvasMenu
Nun sieht man das Menü schonmal, aber es ist ist noch nicht so, dass man die detaillierte Navigationslogik aus dem Mobilbereich hat.
Für exakte Übereinstimmungen der Menüs (Mehrstufigigkeit der Mobilkomponente) auch im Statemanager subCategoryNav für die Viewports m, l, xl freischalten.
Die erwähnten „m / l / xl“ Viewports natürlich je nach Anforderung ersetzen.
Dieser Bereich befindet sich in keiner der beiden less Dateien. Wenn ich es händisch als display: block; darstelle wird zwar das Menü dargestellt, bei klick auf das Menü passiert aber nichts außer das im Browser oben noch #offcanvas–left mit drin steht.
Die eigentliche Registrierung des Plugins am StateManager kannst Du mit removePlugin() entfernen und mit addPlugin() Deinen eigenen Aufruf mit den entsprechenden Viewports etc. anlegen.
Responsive / Bare müssen für die Template Entwicklung im Original Zustand bleiben -> Tabu für dich
Ansonsten hast du einen Fehler gemacht, wenn du bestehende Template Files bearbeitest.
@all: Komplett hab ich das mit dem Canvas Menü auf Desktop nicht hingebracht. Verwenden nun eigenes Dropdown Menu. Wichtig: Es gibt von Shopware einen StateManager (Siehe Quellcode:Github) welcher die JS Funktionen aufruft, wenn man die Seite lädt oder wenn sich die Grösse ändert (z.b. iPad Quer auf Hoch). Sobald die Fenstergrösse geändert wird “feuert” der Statemanager und macht, was ihr wollt (z.b. Off Canvas aktivieren bei Grösse xs und s).
Hier sagt man ich füge ein Plugin hinzu, welches auf den Selector * (alles, z.b. ein DIV) hört, was das Attribut [data-offcanvas=“true”] hat. Die Funktion heisst “swOffcanvasMenu” und wird ausgeführt wenn die Viewportgrösse (“Fenstergrösse”) XS oder S beträgt. (Hier die Grössen: Github)
// OffCanvas menu
.addPlugin('*[data-offcanvas="true"]', 'swOffcanvasMenu', ['xs', 's'])
Soviel mal als Basic.
Update : Muss nun doch das OffCanvas Menu realisieren…werde somit (nach Möglichkeit) die einzelnen Schritte aufschreiben und hier veröffentlichen. (15.Sept 2016 | 16:10)
window.StateManager //Führt JS aus, wenn Viewport wechselt von xs, s, m, l oder xl (Mobile - Desktop)
// OffCanvas menu
.addPlugin('*[data-offcanvas="true"]', 'swOffcanvasMenu', {
fullscreen: true,//kann man auch auf false setzen
},['xs', 's', 'm', 'l', 'xl'])
.addPlugin('*[data-subcategory-nav="true"]', 'swSubCategoryNav', ['xs', 's', 'm', 'l', 'xl'])
;
jQuery( window ).load(function( $ ) {
});
Nun wird vom Statemanager das „Plugin“ ‚swOffcanvasMenu‘ und ‚swSubCategoryNav‘ geladen, wenn die Bildschirmgrösse wechselt, oder das Fenster frisch geladen wird. Kann ja sein, dass man das Fenster im Browser kleiner macht, oder beim Tablet von Hoch auf Quer wechselt. In dem Moment wird das Script erneut ausgeführt.
Ab jetzt funktioniert das OffCanvas tech. bereits. Jedoch sieht man noch nicht viel davon, da einige Elemente via CSS ausgeblendet werden.
Hier ein wenig CSS (nicht sauber formatiert und bestimmt einiges zuviel / zuwenig drin), welches ihr ebenfalls in euer Theme einbauen sollt.
(wenn noch nicht gemacht) neues Less File erstellen unter „themes/Frontend/myTheme/frontend/_public/src/less“ mit dem Namen „all.less“.
Inhalt:
@import „offcanvas-reset“;
(wenn noch nicht gemacht) neues Less File erstellen unter „themes/Frontend/Merx_memo/frontend/_public/src/less“ mit dem Namen „offcanvas-reset.less“
Inhalt:
Im Shopware Backend Theme Cache leeren und neu kompilieren (oder einfach das Theme dem Shop erneut zuweisen)
Neben dem Suchfenster erscheint eine Hamburger Navigation. Wenn ihr alles korrekt gemacht habt, erscheint nun eine OffCanvas Navigation (ein wenig minderwertig gestylt).
Hallo, ich habe alles wie in der Anleitung gemacht… leider funktioniert es nicht
Ich schreibe mal meine einzelnen Schritte auf vielleicht findet Ihr ja den Fehler…
1) \themes\Frontend\ThemeNeu\frontend_public\src\js
–> Hier habe ich eine neue .js Datei eingefügt mit dem folgendne Inhalt:
window.StateManager //Führt JS aus, wenn Viewport wechselt von xs, s, m, l oder xl (Mobile - Desktop)
// OffCanvas menu
.addPlugin('*[data-offcanvas="true"]', 'swOffcanvasMenu', {
fullscreen: true,//kann man auch auf false setzen
},['xs', 's', 'm', 'l', 'xl'])
.addPlugin('*[data-subcategory-nav="true"]', 'swSubCategoryNav', ['xs', 's', 'm', 'l', 'xl'])
;
jQuery( window ).load(function( $ ) {
});
2) \themes\Frontend\ThemeNeu</u>
–> Hier habe ich in die Theme.php folgendes eingetragen:
Habe mich nun eine rechte Zeit lang mit dem OffCanvas Menü auseinandergesetzt und muss wirklich sagen, es ist nicht so einfach wie es zu sein scheint.
Hat seine Gründe, warum noch niemand eine komplette Anleitung (mehr als das von mir) geschrieben hat.
Dennoch bin ich nun an einem Punkt an welchem ich nicht weiterkomme.
Das OffCanvas Menü funktioniert prima bei Desktop, jedoch gehen nun andere Komponenten wie z.b. die Filterung davon aus, dass man sich auf einem Smartphone befindet und somit klappen die Filter als OffCanvas auf.
Dies soll jedoch nur auf Mobilegeräten passieren.
Wie kann ich dies trennen?
Verstehe nicht, warum “.action–filter-options” auch die Klasse “.off-canvas” via JS erhält.
die Filter sind auf mobile ebenfalls ein Offcanvas-Menü und werden auch über den zentralen Aufruf des Plugins initialisiert. Das erkennt man an dem Data-Attribut auf dem Trigger Button der Filter mit data-offcanvas=„true“.
Filtern
Der zentrale Aufruf findet über den StateManager statt und wurde so registriert:
Wenn Du das Offcanvas-Menü unabhängig von den anderen Lösungen behandeln möchtest, dann musst Du den Aufruf entfernen und für inidviduelle Lösungen einen eigenen Aufruf nur für das Menü machen.
Hi, I’m a newbie in Shopware development, just a quick question regarding offcanvas menu, is it possible to move the navigation menu to offcanvas menu?
