# Statemanager - externer Slider (bxSlider) ist undefined bei erneutem Betreten des Plugin Viewports

**URL:** <https://forum.shopware.com/t/statemanager-externer-slider-bxslider-ist-undefined-bei-erneutem-betreten-des-plugin-viewports/46891>\
**Category:** Programmierung\
**Created:** [13. Juli 2017 um 07:39 UTC](https://forum.shopware.com/t/statemanager-externer-slider-bxslider-ist-undefined-bei-erneutem-betreten-des-plugin-viewports/46891 "2017-07-13T07:39:38Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![mdsw](https://avatars.discourse-cdn.com/v4/letter/m/94ad74/32.png) [@mdsw](https://forum.shopware.com/u/mdsw)\
**Post date:** [13. Juli 2017 um 07:39 UTC](https://forum.shopware.com/t/statemanager-externer-slider-bxslider-ist-undefined-bei-erneutem-betreten-des-plugin-viewports/46891/1 "2017-07-13T07:39:38Z")

</div>

Hallo, ich habe ein Problem mit einem Text-Slider (bxSlider).&nbsp;

&nbsp;

Fakten:

- Statemanager Plugin wird für **m, l, xl** registriert
- Verlasse ich den **Viewport m** zu **s** wird die **destroy** function aufgerufen
- Resize ich den Viewport wieder auf den **Viewport m** , wird die **init** function erneut aufgerufen
- soweit so gut

&nbsp;

Probleme: (siehe Screenshot unten)

1. bei der **reloadTest** function wird der Slider über eine Funktion _.reloadSlider()_&nbsp;neu geladen. Dabei kommt es dazu, dass me.$slider aber undefined ist. Also fange ich das mit einer if-Abfrage ab. Bin aber nicht zufrieden damit, weil in jedem zweiten console.log immer noch **undefined** angesprochen wird. Daher hatte ich gedacht, dass statt reloadSlider ein neues Laden des Sliders sinnvoll sei. Das ändert aber auch nichts
2. in der loadTest function, welche beim betreten fes **Viewport m** &nbsp;erneut aufgerufen wird, ist nach dem erneuten Laden des Slider me.$slider aber immer noch undefined

&nbsp;

```
;(function ($, window) {
    "use strict";

    /**
     * Test Text Slider based on bxSlider.js
     *
     */
    $.plugin('prefixTest', {

        /**
         * The Defaults
         */
        defaults: {

            mode: 'vertical',
            pager: false,
            controls: false,
            auto: true,
            speed: 1000,
            pause: 4000,
            touchEnabled: false

        },

        /**
         * The "init" prefixTest
         */
        init: function() {
            var me = this;

            console.log('init');

            me.applyDataAttributes();

            me.loadTest();
            me.registerEvents();

        },

        registerEvents: function() {
            var me = this;

            StateManager.on('resize', $.proxy(me.onDeviceChange, me));

            $.publish('plugin/prefixTest/onRegisterEvents', [me]);
        },

        onDeviceChange: function() {
            var me = this;

            me.reloadTest();

            $.publish('plugin/prefixTest/onDeviceChange', [me]);

        },

        loadTest: function() {
            var me = this,
                opts = me.opts;

            console.log('before load', me.$slider);
            if((typeof me.$slider == 'undefined') || (me.$slider == null)) {

                me.$slider = me.$el.bxSlider(
                    {
                        mode: opts.mode,
                        pager: opts.pager,
                        controls: opts.controls,
                        auto: opts.auto,
                        speed: opts.speed,
                        pause: opts.pause,
                        touchEnabled: opts.touchEnabled
                    }
                );

                console.log('load');
            }
            console.log('after load', me.$slider);

            $.publish('plugin/prefixTest/loadTest', [me]);
        },

        reloadTest: function() {
            var me = this,
                opts = me.opts;

            console.log('before reload', me.$slider);
            if((typeof me.$slider == 'undefined') || (me.$slider == null)) {

                console.log('re reload');
                me.$slider = me.$el.bxSlider(
                    {
                        mode: opts.mode,
                        pager: opts.pager,
                        controls: opts.controls,
                        auto: opts.auto,
                        speed: opts.speed,
                        pause: opts.pause,
                        touchEnabled: opts.touchEnabled
                    }
                );

            } else {

                console.log('reload');
                me.$slider.reloadSlider();

            }
            console.log('after reload', me.$slider);

            $.publish('plugin/prefixTest/reloadTest', [me]);
        },

        destroy: function() {
            var me = this;

            StateManager.off('resize', $.proxy(me.onDeviceChange, me));

            me.$slider.destroySlider();
            me.$slider = null;
            console.log('destroy');
            console.log(me.$slider);

            me._destroy();
        },
    });

    $(document).ready(function() {
        StateManager.addPlugin('.top-bar', 'prefixTest', ['m', 'l', 'xl']);
    });

})(jQuery, window);

```

 ![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/3/32a51d951945805ab1afc34bb6e23d1d2d43f14f.png)