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 verwendet 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, kannst du in deinem Shopware Theme eine einfache Javascript-Datei hinzufügen, damit die Collapse Box auch tatsächlich ein- und ausklappt.

Voraussetzung 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:

Erstelle eine „xyz.js“ in deinem Theme im Ordner themes > Frontend > THEMENAME > frontend > _public > src > js. Füge dort diesen Inhalt ein:

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

Ab welcher Bildschirmgröße die Funktion aktiviert werden soll, steuerst du 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 deinem Shopware Theme hinterlegt werden. Füge dazu in deiner Theme.php diesen Inhalt ein (achte darauf, den Dateinamen entsprechend deiner Javascript-Datei anzupassen):

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

Nachdem du die Dateien hochgeladen hast, leerst du den Shopware Cache und kompilierst das Theme, damit die Änderungen übernommen werden.