Hi, ich probiere erfolglos das Offcanvas Menü bei mobile/tablet auch bei Desktopbreite anzeigen zu lassen. Hat hier bitte jemand einen Tipp für mich? Danke 
// Abseits Änderungen in offcanvas-menu.less & sidebar.less: Wenn ich es richtig sehe, liegt der Knackpunkt darin die .sidebar-main mit .off-canvas und .is–active zu ergänzen, da diese < Tabletbreit angehängt werden. Ich denke das passiert irgendwo durch javascript aber wo? In der jquery.off-canvas-menu.js ja wohl nicht? Niemand eine Idee?
Hallo shopone, alle jQuery Plugins werden bei uns in der jquery.shopware-responsive.js definiert. themes/Frontend/Responsive/frontend/\_public/src/js/jquery.shopware-responsive.js In Zeile ~33 wird das OffCanvas Menu für den Viewport xs und s aktiviert. Hier kannst du deine gewünschten Viewports ergänzen (m, l, xl). Anschließend musst du den OffCanvas Button noch in den weiteren Viewports anzeigen. Achtung: Die Sidebar und das OffCanvas Menü teilen sich denselben HTML DOM. Das heißt, du musst die Sidebar in den erweiterten Viewports anpassen oder eine andere Lösung dafür entwickeln. Ich hoffe dieser Ansatz hilft dir weiter.
2 „Gefällt mir“
Perfekt, Besten Dank!
[quote]Anschließend musst du den OffCanvas Button noch in den weiteren Viewports anzeigen. [/quote] Wie kann man den Button in den weiteren Viewports anzeigen lassen? Vielen Dank vorab
Beitrag neu eingestellt…
Hallo Zusammen, wenn man schon mal beim Thema Off Canvas sind. Ich hab da momentan ein Problem wo ich nicht so richtig weiterkomme. Jedes mal wenn ich mit den Handy eine Kategorie im Canvas auswähle, geht danach das Menü nicht mehr… Leider komme ich aber nicht so richtig dahinter warum. Ich bekomme immer wieder diesen Fehler: Uncaught TypeError: Cannot read property 'ownerDocument' of undefined Dieser Fehler tritt nur bei den Listing der Kategorien auf, bei den restlichen Seite funktioniert das Off Canvas Menü. Vielleicht hat jemand ein Rat für micht. Ich danke soweit und wünsche ein schönes Wochenende. MfG Tobias
und bei mir öffnet der Hamburger auf der Startseite kein Menü + die Suchgrafik kein Suchfeld , aber auf allen Unterseiten
[quote=“einfachich”]Vielleicht hat jemand ein Rat für micht.[/quote] Hi Tobias, ich stand vor dem selben Fehler, hab aber nun das Problem gelöst. Ich hatte in meinem Template frontend/listing.index.tpl den Block frontend_index_content_left überschrieben, damit die Sidebar-Navigation in der Desktop-Ansicht nicht angezeigt wird. Dadurch funktioniert dann aber auch das Offcanvas-Menü nicht mehr, weil das Element nicht gefunden wird. Meine Lösung war dann den Block nicht im Template zu überschreiben, sondern einfach die Sidebar-Navigation für die Desktop-Ansicht per CSS auszublenden. Ich hoffe ich konnte dir (oder anderen) damit weiterhelfen. Gruß Jan
2 „Gefällt mir“
Bei mir werden die jeweiligen Untermenüs der Kategorien im Offcanvas nicht geladen. Bei einem Klick auf der Kategorie werde ich direkt auf die Seite weiterverlinkt. In der mobilen Ansicht funktioniert es wie gehabt. Muss ich hier auch ein jQuery Plugin in den Viewports erweitern? Nachtrag: “.addPlugin(’*[data-subcategory-nav=“true”]’, ‘swSubCategoryNav’,” musste ergänzt werden!
Ich bringe ungern einen Thread der mehre Monate alt ist wieder hervor aber…
ich bräuchte hier dringend hilfe. Ich habs zwar geschafft dass das Offcanvas sich aktiviert eim drücken des Menu Buttons… Problem ist es kommt keine Navie hervor. Ich habe es zwar geschafft noch das die Sidebar angezeigt wird aber nicht im gewand vom Smartphone Style… sondern wie die standart Sidebar…
ich habe verstehe leider nicht was mit dem HTML DOM gemeint ist genau… und wie man das abändern kann… hat da jemand einen rat für mich?
Danke im vorraus
Ich würde das auch gerne nochmal reaktivieren!
Habe gerade ein ähnliches Problem, würde das Offcanvas Menü für Tablets aktivieren.
Der StateManager ist auch entsprechend erweitert
StateManager.addPlugin('*[data-offcanvas="true"]', 'swOffcanvasMenu', ['xs', 's', 'm', 'l']);
Nun finde ich aber gerade nicht die passende Stelle um das Offcanvas Overlay auch zu aktivieren!
Bei 400px
Und entsprechend bei 1000px…
Ich stehe auf dem Schlauch…
Ciao,
Auch ich beschäftige mich mit der implementation des Off Canvas Menü.
Würde sich jeman die Zeit nehmen und die einzelnen Schritte erklären?
-
Breakpoint herausfinden für welche das Menü verfügbar sein sollte. -> xs s m l xl
-
themes/Frontend/DEINTEMPLATE/frontend/_public/src/js/jquery.shopware-responsive.js auf Zeile 33 anpassen
// OffCanvas menu
.addPlugin(’*[data-offcanvas=“true”]’, ‘swOffcanvasMenu’, [‘xs’, ‘s’, ‘m’, ‘l’, ‘xl’]) -
CSS anpassen, damit “Hamburger Menü Icon” angezeigt wird
@media screen and (min-width: @phoneLandscapeViewportWidth){
.shop–navigation .entry–menu-left{
display: block;
}
}
und nun komm ich nicht weiter…
Ciao,
Auch ich beschäftige mich mit der implementation des Off Canvas Menü.
Würde sich jeman die Zeit nehmen und die einzelnen Schritte erklären?
- Breakpoint herausfinden für welche das Menü verfügbar sein sollte. -> xs s m l xl
- themes/Frontend/Responsive/frontend/_public/src/js/jquery.shopware-responsive.js auf Zeile 33 anpassen
// OffCanvas menu
.addPlugin(‚*[data-offcanvas=„true“]‘, ‚swOffcanvasMenu‘, [‚xs‘, ‚s‘, ‚m‘, ‚l‘, ‚xl‘])
- CSS anpassen, damit „Hamburger Menü Icon“ angezeigt wird
@media screen and (min-width: @phoneLandscapeViewportWidth){
.shop–navigation .entry–menu-left{
display: block;
}
}und nun komm ich nicht weiter…
Hallo,
dafür gibt es doch aber sehr gute Dokumentationen, die sich mit dem Thema detailiert auseinandersetzen: jQuery plugins and the StateManager .
Beziehungsweise sollte man im Responsive - Theme niemals Änderungen vornehmen - außer man möchte, dass diese beim nächsten Update (eventuell) wieder überschrieben sind.
Beste Grüße
Sebastian
Hallo Sebastian,
Besten Dank für den Link. Ich habe bereits einige Stunden in die Doku investiert und war auch an beiden Template Schulungen, welche ich bestanden habe.
Mir fehlt leider ein praktisches „sinnvolles“ Beispiel um mein Wissen zu erweitern.
Beim Scroll ein „console.log“ Eintrag zu schreiben kann ich nun doch bereits
Nein, es wird nix im responsive überschrieben, das habe ich gleich angepasst. Natürlich alles immer im eigenen Template.
LG Arya_Svitkona
Hallo Sebastian,
Besten Dank für den Link. Ich habe bereits einige Stunden in die Doku investiert und war auch an beiden Template Schulungen, welche ich bestanden habe.
Mir fehlt leider ein praktisches „sinnvolles“ Beispiel um mein Wissen zu erweitern.
Beim Scroll ein „console.log“ Eintrag zu schreiben kann ich nun doch bereitsNein, es wird nix im responsive überschrieben, das habe ich gleich angepasst. Natürlich alles immer im eigenen Template.
LG Arya_Svitkona
Hallo,
beim praktischen Beispiel zum erweiterten Menü von Shopware aus der zweiten Template Schulung „Advanced Template Training“ war doch aber schon alles dabei, was man dafür an Wissen braucht?
Beste Grüße
Sebastian
Nun, der Kurs wurde von mir vor knapp 1 Monat besucht und bis dahin habe ich nur mit LESS und Smarty gearbeitet.
Bin absolut frisch in der JS Welt von Shopware.
Bevor ich nun beginne eigene JS Files zu schreiben und alles versuche zu übersteuern, würde ich gerne mit den vorhandenen Funktionen arbeiten.
Wäre es denn eine grosse Sache, die paar Schritte hier für die Nachwelt zu notieren?
Beste Grüsse
Arya_Svitkona
Wäre es denn eine grosse Sache, die paar Schritte hier für die Nachwelt zu notieren?
Ich möchte mich gerne erneut an euch wenden bezüglich des Off Canvas Menü.
Bereits knapp zwei Tage befasse ich mich mit dem Code und den zu vergebenen Klassen, damit die Sidebar richtig dargestellt wird.
Jedoch fehlen mir viele Informationen dazu, wie die Navigation funktioniert, im Bezug auf die Sidebar.
Die Sidebar in der Kategorieansicht ist komplett anders wie diese im OffCanvas Menü.
Lieber Gruss
Arya_Svitkona
Nabend,
sind mittlerweile schon zwei Monate her seit dem letzten Eintrag von Arya_Svitkona. Ich stehe derzeit vor dem gleichen Problem.
Wenn man auf den Burger klickt, wird das dunkle Overlay angezeigt, aber es wird kein Off-Canvas-Menu angezeigt.
Gibt es hierfür evtl. einen Tip dazu?
Gruss
Danny
So, neuer Tag neues Glück. 
Habe jetzt mit frischem Kopf das ganze selbst gefunden.
Es muss lediglich noch das CSS herausgenommen werden in der sidebar.less.
Hallo zusammen,
Ist jemand bereit alle Steps zu teilen, wie die OffCanvas Sidebar auf Desktop-Ansichten zu öffnen ist?
Ich experimentierte mit einer Kombination aller Vorschläge, aber ohne Erfolg.
Danke vielmals!
Sander