_component Collapse funktioniert nicht

Shopware 5 Themes & Design
1

Hi Community,

ich habe ein Basic Problem.

Bei den Versuchen, in meinem Template Inhalte mit der von Shopware gelieferten Komponente “Collapse Box” zu verschachteln, habe ich gemerkt, dass ich es nicht nur bei mir selbst nicht zum Laufen kriege.

Stattdessen reagiert bei mir das Anklicken des collapse-headers nicht mal im Beispiel durch Shopware.
https://developers.shopware.com/styletile/components.html#collapse

In diesem Beispiel sollte ich ja durch Anklicken des “Collapse box title” den entsprechenden Content “Lorem ipsum …” sehen. Aber es reagiert nicht.

Ich nutze eine aktuelle Version von Google Chrome.

Hat jemand eine Idee, wieso das nicht tut?

2

Guden,

ich hatte da auch schon einmal geschaut und nicht wirklich was im SW JS gefunden. Ich glaube von Haus aus ist dort keine JS Funktionalität gegeben.
Bin dann hingegangen und habe mir selbst was geschrieben. Sollte so laufen.

function initContentCollapse() {
  var collapseInitiatedCls = 'collapse-is-initiated';
  $('.collapse--header:not(.' + collapseInitiatedCls + ')').click(function() {
    var $this = $(this);
    $this.next().toggleClass('is--collapsed');
    $this.toggleClass('is--active');
    $this.addClass(collapseInitiatedCls);
  });
}

initContentCollapse();
$.subscribe("plugin/swEmotionLoader/onLoadEmotionFinished", function(me) {
  initContentCollapse();
});

 

3

Hey, sorry für die späte Antwort.

Ich habe die Collapse Box tatsächlich schon anders zum Laufen bekommen.

Ich musste nur das jeweilige Modul im State Manager bei größerem Screen schon laden lassen. 
Dass man darauf achten muss, war mir zu dem Zeitpunkt nicht klar.

Aber danke für deine Hilfe! :slight_smile:

4

Hallo zusammen,

ich bekomme die Collapse Box auch nicht zum Laufen und kann eure bisherigen Antworten nicht deuten:

  • zu ChidVanid: Wo speichert man die JS-Datei?
  • zu MSTON: Ja WIE um Himmels Willen hast du sie denn zum Laufen bekommen? Und was bedeutet „… das jeweilige Modul im State Manager“?
5

Du legst ne .js Datei in deinem Theme an und verweist dann via Theme.php auf diese Datei.

An deiner Stelle würde ich aber den Weg von MSTON bevorzugen.
Den grundsätzlichen Javascript State Manager findest du im Responsive Theme.

6

Du brauchst dazu gar kein JS.

Kannst du alles über data-attr machen => https://github.com/shopware/shopware/blob/5.6/themes/Frontend/Responsive/frontend/_public/src/js/jquery.collapse-panel.js#L18-L79

1 „Gefällt mir“
7

@Shopwareianer schrieb:

Du brauchst dazu gar kein JS.

Kannst du alles über data-attr machen => https://.com/shopware/shopware/blob/5.6/themes/Frontend/Responsive/frontend/_public/src/js/jquery.collapse-panel.js#L18-L79

Da hat Shopwareianer recht.

Es müsste eigentlich auch schon funktionieren, indem du einfach das Element so aufbaust:

  Titel


  Hier dein Inhalt ...




  Titel


  Hier dein Inhalt ...

Das wiederum müsste funktionieren, da im StateManager das Plugin „swCollapsePanel“ schon im Responsive-Theme auf das Data Attribute registriert ist.

.addPlugin('*[data-collapse-panel="true"]', 'swCollapsePanel')

Ich hoffe, dass dir das soweit hilft.

Gruß
MSTON

1 „Gefällt mir“
8

Zwar schon 1 Jahr alt, aber vielen Dank an Shopwareianer und MSTON! Funktioniert perfekt!