Shopware 5 Quick Tipp #101: Modul „Collapse“ funktioniert nicht – Lösung

Das Shopware 5 Modul „Collapse Box“ funktioniert nicht – Lösung

In der Shopware Dokumentation findet man alle Components, die im Shopware 5 Template verwenden werden können – darunter auch die Collapse Box (auch bekannt als „Akkordion“). Doch selbst in der Shopware Dokumentation funktioniert das Beispiel der Collapse Box nicht richtig.

Um die Funktionalität zu aktivieren, können Sie in Ihrem Shopware Theme eine einfache Javascript Datei hinzufügen, damit die Collapse Box auch tatsächlich ein- und ausklappt.

Vorraussetzung für die Funktionalität sind ebenfalls die Klassen im HTML Code. Laut der Shopware Dokumentation sollten diese so aussehen:

<div class="collapse--header">
    Collapse box title
    <span class="collapse--toggler">
    </span>
</div>
<div class="collapse--content is--collapsed">
    This content will be shown by the is--collapsed class.
</div>

<div class="collapse--header">
    Collapse box title
    <span class="collapse--toggler">
    </span>
</div>
<div class="collapse--content">
    Lorem ipsum dolor
</div>
<div class="collapse--header">
    Collapse box title
    <span class="collapse--toggler">
    </span>
</div>
<div class="collapse--content">
    Lorem ipsum dolor
</div>

So geht’s:

Erstellen Sie eine “xyz.js“ in Ihrem Theme im Ordner themes > Frontend > THEMENAME > frontend > _public > src > js. Fügen Sie dort diesen Inhalt ein:

$(function () {  
	StateManager.addPlugin('.collapse--header', 'swCollapsePanel', ['xs', 's', 'm', 'l', 'xl'])
});

Ab welcher Bildschirmgröße die Funktion aktiviert werden soll, steuern Sie mit den im StateManager angegebenen Breakpoints. In unserem Beispiel ist die Funktion für jede Bildschirmgröße aktiviert.

Zum Schluss muss die neu erstellte Javascript Datei in Ihrem Shopware Theme hinterlegt werden. Fügen Sie dazu in Ihrer Theme.php diesen Inhalt ein (Beachten Sie, dass Sie den Dateinamen wie Ihre Javascript Datei umbenennen müssen):

protected $javascript = array(
    'src/js/xyz.js'
);

Nachdem Sie die Dateien hochgeladen haben, leeren Sie den Shopware Cache und kompilieren Sie das Theme, damit die Änderungen übernommen werden.