Fixed Header im Mobile-View mit SLT-Cookie

Hallo zusammen,

ich versuche jetzt schon länger ein Problem bei den Overlay-Menüs zu lösen: wenn ich den Header (speziel .shop-navigation ) im mobile-view oben fixieren möchte, so funktioniert beim Warenkorb- und beim Account-Off-Canvas-Menü das Overlay nicht richtig. Bei einem z-index für _.shop-navigation _von unter 5000 werden Warenkorb und Account komplett überlagert, bei einem z-index über 5000 wird die fixierte Shop-Navi nicht überlagert. Das Off-Canvas-Menü wird jeweils korrkekt "ausgefahren. Das Verhalten mit der fixierten Navi tritt so auch im SW-Demo-Shop auf.

Hier mal meine css Anweisung für die fixierte Shop-Navi im Mobile-View:

.shop--navigation {
    height: 50px;
    background-color: #f5f5f8;
    border-bottom: 1px solid #f18616;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5001;

Hier das Ergebnis (die Navi-Leiste wird vom Overlay nicht abgedeckt):

Und bei einem z-index von z.B. 2000 sieht das Ganze dann so aus (Account-Off-Canvas wird vom Overlay verdeckt):

Mir ist schon aufgefallen, dass das Hauptmenü anders getriggert und über href="#offcanvas–left" aufgerufen wird wogegen account und cart über den jewweiligen Controller aufgerufen wird.

Kann mir da jemand einen Tipp geben, wie das gelöst werden kann?

Einen Tipp nicht, liegt aber am z-index stacking, ist im Shopware Standard ungünstig gelöst. Siehe auch: The stacking context - CSS: Cascading Style Sheets | MDN

1 Like

ich suche auch eine Lösung für das Problem…

man kann den Block  frontend_index_checkout_actions_account_navigation aus  widgets/checkout/info.tpl leer überschreiben und den selben Block in frontend/index/index.tpl außerhalb des Headers platzieren. Dann öffnet sich das Overlay korrekt.

Allerdings wird dann ein eingeloggter User aus irgend einem Grund nicht registriert… im Overlay ist dann immer der Anmelden-Button. Liegt vermutlich an der includierten  frontend/account/sidebar.tpl und dem zugehörigen Controller, der durch die neue Platzierung dann nicht mehr stimmt…

man könnte das Accountoverlay aber wohl einfach mit Javascript nach Seitenaufbau an die gewünschte Stelle außerhalb des Headers setzen.

Ich belebe den Thread mal wieder, immerhin ist es eins der ersten ergebnis wenn man nach “shopware fixed header” sucht.

Und zwar hatte ich selbiges Problem. Durch das Z-Index Stacking verhält sich das “Mein Konto” Menü wie oben beschrieben komisch. 

Um das Problem zu lösen habe ich dafür gesorgt, dass das js–overlay nicht im Body erstellt wird, sondern im Header (den ich vorher gewrappt habe). Dadurch passt der Z-Index dann. Dies lässt sich über das anpassen eines der jQuery Plugins und des Templates lösen.

Ich teile einfach mal den Code. 

{extends file="parent:frontend/index/index.tpl"}

{block name="frontend_index_body_classes"}
    [REDACTED]
{/block}

{* Shop header *}
{block name='frontend_index_navigation'}
    
        
            {* Include the top bar navigation *}
            {block name='frontend_index_top_bar_container'}
                {include file="frontend/index/topbar-navigation.tpl"}
            {/block}

            {block name='frontend_index_header_navigation'}
                

                    {* Logo container *}
                    {block name='frontend_index_logo_container'}
                        {include file="frontend/index/logo-container.tpl"}
                    {/block}

                    {* Shop navigation *}
                    {block name='frontend_index_shop_navigation'}
                        {include file="frontend/index/shop-navigation.tpl"}
                    {/block}

                    {block name='frontend_index_container_ajax_cart'}
                        
                    {/block}
                
            {/block}
        

        {* Maincategories navigation top *}
        {block name='frontend_index_navigation_categories_top'}
            
                
                    {block name="frontend_index_navigation_categories_top_include"}
                        {include file='frontend/index/main-navigation.tpl'}
                    {/block}
                
            
        {/block}
    
{/block}

Man beachte Zeile 9. Hier wrappe ich das ganze.

Jetzt zum CSS:

//Datei: header.less

.header-wrap {
    box-shadow: 0px 1px 5px #999;
    position: fixed;
    z-index: 5000;

    width: 100%;

    .js--overlay {
        position: fixed;

        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        height: 100%;
        width: 100%;

        pointer-events: all;
    }
[redacted]
}

Hier kommt dann der z-index auf den Header. 

Wenn man das soweit hat tritt das oben beschriebene Problem auf, bei dem sich das js–overlay über den ganzen DOM legt. Also einschließlich den Menüs.

Um das zu vermeiden also JS anpassen:

'use strict';

var $html = $('html');

$.overridePlugin('swOffcanvasMenu', {
    openMenu: function () {
        var me = this,
            opts = me.opts,
            menuWidth = me.$offCanvas.outerWidth();

        if (me.isOpened) {
            return;
        }
        me.isOpened = true;

        $.publish('plugin/swOffcanvasMenu/onBeforeOpenMenu', [me]);

        $html.addClass('no--scroll');

        $.overlay.open({
            onClose: $.proxy(me.closeMenu, me),
            renderElement: '.header-wrap'
        });

        if (opts.moveWrapper) {
            if (opts.direction === 'fromRight') {
                menuWidth *= -1;
            }

            me.$pageWrap.css('left', menuWidth);
        }

        me.$offCanvas.addClass(opts.openClass);

        $.publish('plugin/swOffcanvasMenu/onOpenMenu', [me]);

        if (opts.mode === 'ajax' && opts.ajaxURL) {
            $.ajax({
                url: opts.ajaxURL,
                success: function (result) {
                    me.$offCanvas.html(result);
                }
            });
        }
    }
});

Dieser Code ist 1:1 die originale Funktion bis auf zeile 22. Jetzt sollte alles klappen!  Angry-Face

Kleiner Hinweis: Das problem hat mich viel Zeit und nerven gekostet. Es kann daher sein das ich noch eine Änderung an einer Stelle gemacht habe welche ich mittlerweile schlicht vergessen habe. Sollte die Lösung bei jemanden also nicht funktionieren, schreibt dies doch bitte als Kommentar hier drunter, damit ich den Post dann updaten kann. 

Ich hoffe jetzt finden Leute die Lösung bei Google  Thumb-Up

1 Like

@palone‍

Du schreibst “Dies lässt sich über das anpassen eines der jQuery Plugins und des Templates lösen.”  
 

“eins der…” irgendwo? Egal welche Datei? Kannst du mir das ganz kurz genauer erklären? 
 

CSS ist nicht das Thema. Aber beim Ändern von jQuery und JS blicke ich noch nicht ganz durch. 
 

Der letzte Code muss in js–overlay? Oder lässt sich das auch per Less realisieren?