Offcanvas Menü

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? :slight_smile:

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. :wink:

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

Hier mal aus einem  internem Wiki Artikel von uns, wo ich das mal zusammen geschrieben hatte. Evtl. haben sich manche Namen/Bezeichnungen geändert.

 

Es müssen zunächst folgende less-Dateien überschrieben werden:

frontend/_public/src/less/_components

             -> offcanvas-menu.less
frontend/_public/src/less/_modules
             -> sidebar.less

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.

Vllt. hilfts ja noch :slight_smile:

Mfg Sascha von Grönheim,

Wist+Laumann

Vielen Dank für die Zusammenfassung, allerdings wird das Menü trotzdem im Desktop nicht angezeigt.

Bist du dir sicher das es nur Änderungen an diesen 3 Dateien bedarf das das Menü angezeigt wird?

Laut css gibt es größer gleich 768 Pixel diesen Eintrag:

@media screen and (min-width: 48em)

.shop–navigation .entry–menu-left { display: none;}

 

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.

 

 

 

Nach Jahren des herumfrickelns, bin ich einen Schritt weiter.

Es sieht so aus als ob die js Datei  jquery.shopware-responsive.js im Ordner frontend/_public/src/js nicht überschrieben wird.

Deshalb habe ich das ganze im Responsive Ordner gemacht und nun wird die Navigation angezeigt. Allerdings ist das ja nicht Update sicher.

Gibt es denn eine Möglichkeit das auch die js Datei im meinem custom Theme genommen wird?

 

Freue mich auf Antworten

Hallo,

Dateien bindet man grundsätzlich so ein: 
Using CSS and JavaScript in themes

Die eigentliche Registrierung des Plugins am StateManager kannst Du mit removePlugin() entfernen und mit addPlugin() Deinen eigenen Aufruf mit den entsprechenden Viewports etc. anlegen.

Weitere Infos zum StateManager findest Du hier:
jQuery plugins and the StateManager

Sonnige Grüße,
Phil
  

@Padaja:
Mach doch ein eigenes JS File mit deinen JS Anpassungen, welches du im Theme.php einbindest.
Like:

 protected $javascript = [
        'src/js/jquery.shopware-merx.js'
 ];

Responsive / Bare müssen für die Template Entwicklung im Original Zustand bleiben -> Tabu für dich :wink:
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)

So, die erste Hürde ist geschafft!
$(’#engelchor’).play();

Anleitung für OffCanvas Navigation für > Tablet (nicht komplett)

  1. neues Theme erstellen

  2. im Themefolder (z.b. /theme/frontend/myTheme/frontend/_public/js/) eine neue JS Datei anlegen (z.b. jquery.mytheme–offcanvas.js)

  3. Diese JS Datei im Theme.php (unter „/theme/frontend/myTheme/“ zu finden) einbinden like:

    protected $javascript = [
    ‚src/js/jquery.mytheme–offcanvas.js‘
    ];

  4. JS Datei öffnen und folgendes hineinschreiben

    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( $ ) {

    });

 

  1. 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.

  2. Ab jetzt funktioniert das OffCanvas tech. bereits. Jedoch sieht man noch nicht viel davon, da einige Elemente via CSS ausgeblendet werden.

  3. Hier ein wenig CSS (nicht sauber formatiert und bestimmt einiges zuviel / zuwenig drin), welches ihr ebenfalls in euer Theme einbauen sollt.

  4. (wenn noch nicht gemacht) neues Less File erstellen unter „themes/Frontend/myTheme/frontend/_public/src/less“ mit dem Namen „all.less“.

  5. Inhalt:

    @import „offcanvas-reset“;

  6. (wenn noch nicht gemacht) neues Less File erstellen unter „themes/Frontend/Merx_memo/frontend/_public/src/less“ mit dem Namen „offcanvas-reset.less“
    Inhalt:

    @media screen and(min-width: @tabletViewportWidth) {
    .shop–navigation .entry–menu-left{
    display: block;
    }
    .sidebar-main.off-canvas.is–open{
    display: block !important;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    left: 0;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    background: #f5f5f8;
    position: fixed;
    z-index: 8000;
    .navigation–smartphone{
    display: block;
    }
    .mobile–switches,
    .filter–container,
    .navigation–smartphone{
    display: block;
    }
    .entry–close-off-canvas{
    display: block;
    }
    .categories–headline{
    display: block;
    }
    .shop-sites–container{
    display: block;
    }
    .navigation–entry{
    border-bottom: 1px solid #dadae5;
    margin: 0;
    padding: 0;
    }
    .navigation–link{
    .unitize-padding(2, 10, 2, 10);
    .unitize(line-height, 38);
    }
    .is–icon-right{
    display: block;
    }
    .icon–arrow-right,
    .icon–arrow-left{
    display: block;
    }
    }
    .off-canvas {
    -webkit-transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1);
    -moz-transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1);
    -ms-transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1);
    -o-transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1);
    transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 280px;
    width: 17.5rem;
    background: #fff;
    position: fixed;
    top: 0;
    bottom: 0;
    display: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 8000;
    }

    }

  7. Im Shopware Backend Theme Cache leeren und neu kompilieren (oder einfach das Theme dem Shop erneut zuweisen)

  8. Neben dem Suchfenster erscheint eine Hamburger Navigation. Wenn ihr alles korrekt gemacht habt, erscheint nun eine OffCanvas Navigation (ein wenig minderwertig gestylt).

  9. So, nun geh ich zurück an die Arbeit :wink:

Gruss Arya_Svitkona

 

 

6 Likes

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:

protected $javascript = [
        'src/js/jquery.offcanvas.js'
    ];

Die Theme.php sieht so aus:

3) \themes\Frontend\ThemeNeu\frontend_public\src\less
​–> Hier eine neue .less Datei eingefügt: offcanvas-reset.less mit dem folgenden Inhalt:

@media screen and(min-width: @tabletViewportWidth) {
	.shop--navigation .entry--menu-left{
		display: block;
	}
	.sidebar-main.off-canvas.is--open{
		display: block !important;
		-webkit-transform: translateX(-100%);
	    -moz-transform: translateX(-100%);
	    -o-transform: translateX(-100%);
	    -ms-transform: translateX(-100%);
	    transform: translateX(-100%);
	    left: 0;
	    -webkit-transform: translateX(0);
	    -moz-transform: translateX(0);
	    -o-transform: translateX(0);
	    -ms-transform: translateX(0);
	    transform: translateX(0);
	    background: #f5f5f8;
	    position: fixed;
	    z-index: 8000;
	    .navigation--smartphone{
	    	display: block;
	    }
	    .mobile--switches,
	    .filter--container,
	    .navigation--smartphone{
	    	display: block;
	    }
	    .entry--close-off-canvas{
	    	display: block;
	    }
	    .categories--headline{
	    	display: block;
	    }
	    .shop-sites--container{
	    	display: block;
	    }
	    .navigation--entry{
	    	border-bottom: 1px solid #dadae5;
	    	margin: 0;
	    	padding: 0;
	    }
	    .navigation--link{
	    	.unitize-padding(2, 10, 2, 10);
	    	.unitize(line-height, 38);
	    }
	    .is--icon-right{
	    	display: block;
	    }
	    .icon--arrow-right,
	    .icon--arrow-left{
	    	display: block;
	    }
	}
	.off-canvas {
	    -webkit-transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1);
	    -moz-transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1);
	    -ms-transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1);
	    -o-transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1);
	    transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1);
	    -webkit-transform-style: preserve-3d;
	    -moz-transform-style: preserve-3d;
	    -ms-transform-style: preserve-3d;
	    transform-style: preserve-3d;
	    width: 280px;
	    width: 17.5rem;
	    background: #fff;
	    position: fixed;
	    top: 0;
	    bottom: 0;
	    display: none;
	    overflow: auto;
	    -webkit-overflow-scrolling: touch;
	    z-index: 8000;
	}

}

und anschließend in die all.less ganz am ende den folgenden Eintrag hinzugefügt:

@import "offcanvas-reset";

 

Die Navigation sehe ich bereits allerdings öffnet sich das Offcanvas Menü nicht.
Was habe ich flasch gemacht?

Hast uns mal n Link zum Shop?

Habe ich dir soeben als PN zugeschickt. Danke!

Hallo Zusammen,

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.

Screeshot: http://fs5.directupload.net/images/170117/x5x32k8a.jpg

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.

LG Arya_Svitkona

[@Philipp Schuch](http://forum.shopware.com/profile/13283/Philipp Schuch “Philipp Schuch”)‍
Ciao Philipp, gibt es da ev. einen Tipp von dir?

Lieber Gruss nach Shöppingen

Hallo,

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:

window.StateManager.addPlugin('*[data-offcanvas="true"]', 'swOffcanvasMenu', ['xs', 's']);

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.

LG,
Phil

Hallo, ich muss das hier nochmal ausgraben.

 

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).

wie kann ich diese Zeile denn in meinem eigenen Theme überschreiben? Ich weiß zwar, wie ich eine ganze Funktion überschreibe… aber wie nur eine Zeile?

Hallo,

gerade solche Sachen sind doch aber ausführlich dokumentiert, siehe: https://developers.shopware.com/designers-guide/javascript-statemanager-and-pluginbase/?_ga=2.155679742.451852135.1531755885-924015160.1463247506#working-with-stateful-jquery-plugins . Einfach eine JavaScript-Datei erstellen und das OffCanvas - Menü in den gewünschten Viewports ergänzen - das wird aber auch nicht ausreichen, da auch Filter und alles andere im OffCanvas - Menü angezeigt und somit ergänzt etc werden müssen.

Grüße

Sebastian

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?

Could anyone recommend a guide on this? 

Thank you in advance.