Komische Sidebar Navigation

Hi,

vergrößert und verkleinert man das Fenster in Chrome mehrmals dann bleibt irgendwan die Sidebar immer auf DISPLAY: NONE
Das Problem besteht auch in der aktuellen Versionen von Shopware.

 

Hab es gerade mal - in allen Browsern - gestestet…, kann ich so nicht nachvollziehen. Der Breakpoint für den Umbruch liegt bei 768px, dann wird die Sidebar entfernt. Nicht mehr und nicht weniger. Leer bleibt da nichts.

@Murmeltier schrieb:

Hab es gerade mal - in allen Browsern - gestestet…, kann ich so nicht nachvollziehen. Der Breakpoint für den Umbruch liegt bei 768px, dann wird die Sidebar entfernt. Nicht mehr und nicht weniger. Leer bleibt da nichts.

Google Chrome Version 58.0.3029.96 (64-bit)

 

 

P.S. Ich weiß kein Mensch zieht ein Fenster so kleiner aber es kann passieren.

Es liegt definitiv an der jquery.subcategory-nav Erweiterung  

Witzig. Also ich kann den Fehler auch nachstellen.
Wobei ich da wahrscheinlich nie von allein drauf gekommen wäre…  Sticking-out-tongue

ich hab das bei 5.2.9 entdeckt zieht sich sogar bis zur aktuellen version hin.

P.S. wenn jemand eine override oder subscribe Lösung zu dem Problem hat, dann wäre es schön wenn sie geteilt wird.

Hab es bei mir auch gerade mal getestet und kann es ebenfalls nachstellen. Shopware 5.2.22

Legt jemand ein Ticketan?

;(function ($, Modernizr) {
    'use strict';

  
    $.overridePlugin('swSubCategoryNav', {


        /**
         * Default plugin initialisation function.
         * Handle all logic and events for the category slider
         *
         * @public
         * @method init
         */
        init: function () {
            var me = this,
                transitionSupport = Modernizr.csstransitions,
                opts;

            // Overwrite plugin configuration with user configuration
            me.applyDataAttributes();

            opts = me.opts;

            // return, if no main category available
            if (!opts.enabled || !opts.mainCategoryId) {
                return;
            }

            /**
             * Reference of the main sidebar element.
             *
             * @private
             * @property $sidebar
             * @type {jQuery}
             */
            me.$sidebar = $(opts.sidebarMainSelector);

            /**
             * Wrapper of the navigation lists in the main navigation.
             *
             * @private
             * @property $sidebarWrapper
             * @type {jQuery}
             */
            me.$sidebarWrapper = $(opts.sidebarWrapperSelector);

            /**
             * Wrapper of the offcanvas animation
             *
             * @private
             * @property $navigation
             * @type {jQuery}
             */
            me.$navigation = $(opts.mobileNavigationSelector);
            me.$navigation.show();

            /**
             * Loading icon element that will be appended to the
             * clicked element on loading.
             *
             * @private
             * @property $loadingIcon
             * @type {jQuery}
             */
            me.$loadingIcon = $('', {
                'class': opts.loadingClass
            });

            /**
             * Function used in jQuery based on CSS transition support.
             *
             * @private
             * @property slideFunction
             * @type {String}
             */
            me.slideFunction = transitionSupport ? 'transition' : 'animate';

            /**
             * Easing used for the slide in.
             *
             * @private
             * @property easingEffectIn
             * @type {String}
             */
            me.easingEffectIn = transitionSupport ? opts.easingIn : opts.easingFallback;

            /**
             * Easing used for the slide out.
             *
             * @private
             * @property easingEffectOut
             * @type {String}
             */
            me.easingEffectOut = transitionSupport ? opts.easingOut : opts.easingFallback;

            /**
             * Flag to determine whether or not a slide is in a current
             * animation or if an ajax call is still loading.
             *
             * @private
             * @property inProgress
             * @type {Boolean}
             */
            me.inProgress = false;

            // remove sub level unordered lists
            $(opts.sidebarCategorySelector + ' ul').not('.navigation--level-high').css('display', 'none');

            me.addEventListener();

            // fetch menu by category id if actual category is not the main category
            if (!opts.categoryId || !opts.fetchUrl || (opts.mainCategoryId == opts.categoryId)) {
                return;
            }
            
            me.$sidebarWrapper.css('display', 'none');
            
            $.get(opts.fetchUrl, function (template) {
                me.$sidebar.addClass(opts.disableScrollingClass).append(template);
                // add background class
                $(opts.overlaySelector).addClass(opts.backSlideClass);
            });
        },

   
    });
}(jQuery, Modernizr));

 

jquery.subcategory-nav.js

 

hier eine overridePlugin Lösung. Das Problem liegt daran, dass der Ajax Request etwas länger dauern kann und man in der Zeit den Viewport wechseln kann und somit wird die sidebar auf display none gesetzt. Ich habe das display none aus dem ajax success handler rausgenommen und vor dem ajax request eingefügt.

Bei uns ist komischerweise der block sidebar–categories-wrapper immer display:none

Da das style-Element allerdings im Original-DOM nicht enthalten ist wird es vermutlich auch durch ein javascript in den DOM geschrieben.

Wie bringt man das weg?

Das es immer auf “display: none” steht kann nicht sein.

 

Das “display: none” wird beim Initialisieren der jquery.subcategory-nav.js Erweiterung hier gesetzt sobald du dich im XS bzw. S Viewport befindest: 

https://github.com/shopware/shopware/blob/5.2/themes/Frontend/Responsive/frontend/_public/src/js/jquery.subcategory-nav.js#L322
 

Wechselst du die Auflösung, dann wird beim verlassen der Viewports die Erweiterung geschlossen bzw. zerstört und beim eintreten wieder neuinitialisiert. (StateManager)