Offcanvas Menü

[Arya_Svitkona]

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

   });

 

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

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

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

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

9. Inhalt:

   @import „offcanvas-reset“;

10. (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;
    }

    }

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

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

13. So, nun geh ich zurück an die Arbeit

Gruss Arya_Svitkona