Wie verwende ich das Shopware Menu Scroller Plugin, den "swMenuScroller()"?

Hallo Community,

ich habe auf den Inhaltsseiten ein eigenes Menü eingebaut, in dieser Art:

    {foreach $pages as $subPage}
      
        
          {$subPage.description}
        
      
    {/foreach}

Das Menü wird auch soweit korrekt ausgegeben.

Da es aber im mobile View umbricht, möchte ich gerne den “swMenuScroller” verwenden.
Ich habe die Klassen wie oben vergeben (also .container und .my–list).

Wie binde ich nun die Funktion korrekt ein?
Ich habe in die header.tpl folgendes eingefügt:

  $(window).load(function() {
    $('.container').swMenuScroller();
  });

Aber in der Konsole erhalte ich nur folgenden Fehler:
 

ReferenceError: $ is not defined
$(window).load(function()

Kann mir hier bitte jemand helfen?
 

Vielen dank,

F.

Ergänzung:

die jquery Datei dazu ist „jquery.menu-scroller.js“

Die Fehlermeldung sagt lediglich aus, dass jQuery (noch) nicht geladen ist.

jQuery wird im Footer der Seite eingebunden, wenn du deinen Code in der header.tpl hast wird er davor geladen und kann nicht funktionieren.

Also entweder im Footer nach den Shopware-Javascripten einfügen oder noch besser direkt über die Template-Funktionen (entweder im Backend, Theme.php oder eigenes Plugin)

1 Like

Okay, danke dir.
Wenn ich das Skript im Footer (z.B. im block frontend_index_header_javascript_jquery_lib ) einbinde, wird es geladen, ich erhalte dann aber diesen Fehler in der Konsole:

TypeError: $list[0] is undefined	

...on(){var me=this,$list=me.$list,offset;offset=me.scrollBarOffset=Math.min(Math.a..

Ich arbeite mit einem eigenen Template auf Basis des Responsive Templates. Somit werden doch sämtliche Shopware jquery Dateien automatisch eingebunden, oder?
Ich dachte dann muss ich nur auf der gewünschten Unterseite das Script ausführen und den HTML Code wie im Beispiel aufbauen und das Skript wird ausgeführt.

Müssen für den Scroller noch Optionen übergeben werden?

Ich bin ein Java Script Anfänger.

Danke schon mal für Eure Hilfe

Ich hab den MenuScroller noch nicht selbst eingesetzt, aber vom Sourcecode her würde ich sagen, dass er keine weiteren Optionen braucht.

Versuch mal dem umschließenden div eine andere Klasse als container zu geben. Es gibt ja im Layout diverse divs mit der Klasse container und mit $(’.container’).swMenuScroller(); rufst du auf jede davon den MenuScroller auf. Ich vermute der Fehler kommt von einem div das kein Child-Element mit der Klasse *–list hat.

1 Like

Super, jetzt funktioniert’s.
Vielen Dank Dir.