Accordion in Shopware 5 (jQuery UI)

Hallo Shopware-Forum, ich möchte in den Shopseiten ein Accordion jQuery benutzen. Kann mir jemand sagen wie dafür der Code lautet? Hab es bis jetzt nicht gefunden… :shock: Vielen Dank! Alexander

Schau mal hier: https://devdocs.shopware.com/styletile/ … lapse.html

Vielen Dank für den Link! Hab ich jetzt gefunden. Leider gehts nicht wenn ich es in die Shopseite importiere. Muss ich vielleicht noch was an der jQuery Datei shopware.responsive.js ändern? Beste Grüße Alexander

Du müsstest deine eigene JS Datei in deinem eigenen Theme anlegen. Die JS Datei bindest du über die Theme.php ein protected $javascript = array( 'src/js/deinedatei.js' ); In deiner JS Datei dann $(function () { StateManager // Collapse panel .addPlugin('.collapse--header, .collapse--content', 'collapsePanel', ['l', 'xl']) });

1 Like

Vielen Dank hat geklappt. Hab die Datei noch erweitert, damit es gleich noch für Mobile funktioniert. $(function () { StateManager // Collapse panel .addPlugin('.collapse--header, .collapse--content', 'collapsePanel', ['xs', 's', 'm', 'l', 'xl']) });

Hallo, ich bin mir nicht sicher was ich falsch gemacht habe, aber bei mir sieht es etwas anders aus… Ich habe in der Theme.php die Datei collapse.js eingefügt, dann habe ich diese selbstverständlich erstellt und mit Inhalt gefüllt. Dann habe ich in der header.less den Code eingefügt. Wenn ich jetzt eine Shopseite erstelle, dann den HTML Code einfüge, löscht mir das Teil z.B. den Bereich mit dem einfach raus, nachdem ich auf aktualisieren klicke. Was mache ich also falsch?

Kann niemand helfen?

[/code] Ich habe es jetzt aber mit post28786.html#p28786 realisiert, da hat der Vorteil das sich ein Accordion-Menü wieder schließt wenn ein weiteres geöffnet wird. Muss natürlich für Shopware 5 angepasst werden und kann nicht so verwendet werden.

Nein das funktioniert so leider nicht, hab ich auch schon probiert :wink: Ich gucke mir mal an was das für ein Plugin ist, vielleicht hilft das ja schon. Ansonsten hoffe ich trotzdem auf die Hilfe von jemanden noch.

Das Plugin ereiterer TinyMCE ermöglicht die automatische Löschung durch den Editor selbst zu steuern. geloste-themen-f91/tinymce-editor-konfigurieren-t19474.html#p86973 Was ich aber nicht verstehe: Ich habe doch mit dem Responsive-Template bereits ein Akkordion in der Fußzeile (zumnindest in der mobilen Ansicht). Das heisst doch, dass alle Ressourcen für diese Funktionalität bereits geladen werden. Warum muss man dann weiteren JS-Code laden/integrieren. Sollte es nicht reichen, wenn man den richtigen HTML-Schnipsel einfügt? Mir ist weder das eine noch das andere (workaround wie hier beschrieben) gelungen. Irgendwie macht mich diese less-Geschichte ganz mürbe. Nichts funktioniert mehr wie früher, ich blicke da einfach nicht durch…

[quote=“kayyy”]Du müsstest deine eigene JS Datei in deinem eigenen Theme anlegen. Die JS Datei bindest du über die Theme.php ein protected $javascript = array( 'src/js/deinedatei.js' ); In deiner JS Datei dann $(function () { StateManager // Collapse panel .addPlugin('.collapse--header, .collapse--content', 'collapsePanel', ['l', 'xl']) });[/quote] [quote=“Shopware-5”]Vielen Dank hat geklappt. Hab die Datei noch erweitert, damit es gleich noch für Mobile funktioniert. $(function () { StateManager // Collapse panel .addPlugin('.collapse--header, .collapse--content', 'collapsePanel', ['xs', 's', 'm', 'l', 'xl']) });[/quote] Hallo Kayyy, Hallo Shopware-5, Ich hatte mal testweise euren Code für’s Accordion genommen und festgestellt das die Filter im Blog nicht mehr funktionieren. Könnt Ihr das mal prüfen.

[quote=“senana”] Was ich aber nicht verstehe: Ich habe doch mit dem Responsive-Template bereits ein Akkordion in der Fußzeile (zumnindest in der mobilen Ansicht). Das heisst doch, dass alle Ressourcen für diese Funktionalität bereits geladen werden. Warum muss man dann weiteren JS-Code laden/integrieren. [/quote] Hallo, ich würde mich bei dieser Frage gerne anschließen. Ich versuche auch Akkordeon Elemente einzubinden. Auch wenn ich das Plugin auf alle Veiwpports registriere, klappt es nicht. Im Footer wird anscheinend auch js–collapse-target genutzt und nicht collapse–content

Manchmal braucht man einfach noch ein bisschen Schlaf, oder 20 Liter Kaffee :oops: Ich habe versucht, das collapse plugin in einem Einkaufswelt-Plugin zu nutzen. Das klappt natürlich nicht. Hierfür muss ich das addPlugin nutzen, nachdem die Einkaufswelt nachgeladen wurde. Für die Nutzung im normalen Seitenbereich funktioniert die Einbindung über die theme.php und eigene .js tadellos.

Kann es sein, dass man wen man das Accordion Menü offen hat, keine verlinkungen funktionieren? Hier der Inhalt: [code]

Überschrift blabla

Text blablabla

Anfrage stellen

 

[/code] Also ich habe rausgefunden das es an dem .js liegt angeblich soll das hier helfen: .on('click', 'a', function(e) { e.stopPropagation(); }) es geht aber nicht, so sieht es jetzt bei mir aus: $(function () { StateManager // Collapse panel .addPlugin('.collapse--header, .collapse--content', 'collapsePanel', ['xs', 's', 'm', 'l', 'xl']) .on('click', 'a', function(e) { e.stopPropagation(); }) });

[quote="[blu:kauu]"] Ich habe versucht, das collapse plugin in einem Einkaufswelt-Plugin zu nutzen. Das klappt natürlich nicht. Hierfür muss ich das addPlugin nutzen, nachdem die Einkaufswelt nachgeladen wurde. [/quote] Hallo würdest du erläutern, wie du es geschafft hast, ein Accordion oder das collapse in der Einkaufswelt zu nutzen? Alle meine Versuche sind bisher gescheitern ein Accordion in der Einkaufswelt zu bewerkstelligen. Offenbar weil die Einkaufswelt dynamisch nachgeladen werden und daher die Einbindung über theme.php und eigenes.js nicht funktionieren. Vielen Dank im Voraus

Push

Hallo, sorry war etwas eingebunden in letzter Zeit. Ich habe über ein selbst geschriebenes Einkaufswelten-Plugin das Plugin nachgeladen. Über das HTML-Plugin kann man ja leider kein Javascript einbinden. Das Purehtml-plugin an einer beliebigen Stelle in die Einkaufswelt laden. Folgender code muss im purehtml-Plugin eingegeben werden: <script> $(function () { StateManager // Collapse panel .addPlugin('.collapse--header, .collapse--content', 'collapsePanel', ['xs', 's', 'm', 'l', 'xl']) }); </script> Dann kann man in den Einkaufswelten das Akkordeon nutzen, wie hier im styletile beschrieben. Das Plugin gibts hier. Leider auf mega, da ich hier keine Dateien anhängen kann.

1 Like

Hat niemand eine Idee wie man die Verlinkungen rein bekommt?

[quote="[blu:kauu]"] Ich habe über ein selbst geschriebenes Einkaufswelten-Plugin das Plugin nachgeladen. Über das HTML-Plugin kann man ja leider kein Javascript einbinden. Das Purehtml-plugin an einer beliebigen Stelle in die Einkaufswelt laden. Dann kann man in den Einkaufswelten das Akkordeon nutzen, wie hier im styletile beschrieben. [/quote] Super klappt bestens. Herzlichen Dank! Auch ein beliebig anderes Javascript lässt sich so prima in der Einkaufswelt nutzen.

Kann mir niemand helfen und sagen wie man Links im Accordion hinkriegt :oops: