Accordion in Shopware 5 (jQuery UI)

markito · 13. Oktober 2015 um 20:50

[quote=“konsi”]Kann mir niemand helfen und sagen wie man Links im Accordion hinkriegt :oops:[/quote] Mit ganz normalem HTML, oder ich verstehe nicht ganz… wie meinst du das genau?hier entlang

konsi · 15. Oktober 2015 um 20:47

Ja genau, nur passiert nichts beim Klick

konsi · 21. Oktober 2015 um 18:10

Ich habe zwar im Internet rausgefunden das es am jQuery liegt, aber ich finde keine Lösung um dies zu beheben =/

senana · 23. Oktober 2015 um 22:47

[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] Kann das mal jemand prüfen? Bei mir funktioniert das nicht mehr, glaube seit dem Update auf 5.1 ! Also die Collapses gehen nicht mehr auf. In der Console habe folgende Fehlermeldung Uncaught TypeError: element[pluginName] is not a functionwindow.StateManager.$.extend.\_initSinglePlugin @ 1445633001\_e09d98e2c3c51617cf69c8a5f33bdec9.js:323(anonymous function) @ 1445633001\_e09d98e2c3c51617cf69c8a5f33bdec9.js:320n.extend.each @ 1445633001\_e09d98e2c3c51617cf69c8a5f33bdec9.js:2window.StateManager.$.extend.\_initPlugin @ 1445633001\_e09d98e2c3c51617cf69c8a5f33bdec9.js:320window.StateManager.$.extend.addPlugin @ 1445633001\_e09d98e2c3c51617cf69c8a5f33bdec9.js:311(anonymous function) @ 1445633001\_e09d98e2c3c51617cf69c8a5f33bdec9.js:774j @ 1445633001\_e09d98e2c3c51617cf69c8a5f33bdec9.js:2k.fireWith @ 1445633001\_e09d98e2c3c51617cf69c8a5f33bdec9.js:2n.extend.ready @ 1445633001\_e09d98e2c3c51617cf69c8a5f33bdec9.js:2I @ 1445633001\_e09d98e2c3c51617cf69c8a5f33bdec9.js:2 weiß ja nicht, ob das zusammen gehört…jedenfalls gehen die Dinger nicht mehr

konsi · 12. November 2015 um 17:28

Nochmal Push, hat niemand eine Idee oder Lösung?

camelmoto · 13. November 2015 um 10:38

Damit die Links unter „.collapse–content“ funktionieren, muss folgende JS Code hinzugefügt werden: $('.collapse--content \*').click(function( event ) { event.stopPropagation(); }); Mehr Info unter: http://api.jquery.com/event.stopPropagation/

konsi · 24. November 2015 um 11:01

[quote=“camelmoto”]Damit die Links unter “.collapse–content” funktionieren, muss folgende JS Code hinzugefügt werden: $('.collapse--content \*').click(function( event ) { event.stopPropagation(); }); Mehr Info unter: http://api.jquery.com/event.stopPropagation/ ;)[/quote] Vielen Dank!!! Es funktioniert! Ich habe es vorher damit probiert…: $(".toggle-title a").click(function(event){ event.stopPropagation()}) Muss dazu aber auch sagen, ich habe null Ahnung von javascript

Misengo · 28. Dezember 2015 um 16:03

[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] Wie füge ich den Code denn in meine xxx.tpl?

konsi · 3. Februar 2016 um 16:46

Kann es sein, dass das mit dem Update 5.1.2 nicht mehr läuft?!

Fehler gefunden,

.addPlugin(’.collapse–header, .collapse–content’, ‚collapsePanel‘, [‚xs‘, ‚s‘, ‚m‘, ‚l‘, ‚xl‘])

zu

.addPlugin(’.collapse–header, .collapse–content’, ‚swCollapsePanel‘, [‚xs‘, ‚s‘, ‚m‘, ‚l‘, ‚xl‘])

geändert

hds · 20. März 2016 um 14:23

Soweit funktioniert das ganze aber bekomme es einfach nicht hin das sich das Accordion wieder schliesst wenn ein anderes geöffnet wird. Wieder soviel probiert und nicht geschafft. Könnte ein wenig Hilfe gebrauchen…

kanuma · 21. März 2016 um 01:01

Moin,

Ich bin gerade selber an dem Versuch ein Accordion einzubinden, jochdoch versage ich .

Kann mir nochmal bitte jemand erleutern was ich tuen muss um dieses tolle Werkzeug nutzen zu können.

Ich komme soweit, dass ich alles sehe, aber nicht nutzen kann -> keine Funktion.

habe nur den Code erstmal eingefügt… möchte eine FAQ seite bauen. Habe alles versucht was ich im Forum gelesen habe jedoch ohne erfolg…

https://developers.shopware.com/styletile/_components-collapse.html#collapse-box

Über Hilfe währe ich sehr froh

hds · 21. März 2016 um 07:22

Hallo kanuma

Wenn du der Anleitung von kayyy folgst funktioniert das ganze, musst es noch mit dem Beitrag von camelmoto erweitern und die Änderung von konsi übernehmen. Allerdings klappt das Menü auf wird aber nicht geschlossen wenn ein anderes geöffnet wird. Hier muss die eigene JS-Datei erweitert werden, habe aber von JS null plan. Willst du noch auch die Mobilansicht haben dann musst du noch die Erweiterung von senana einfügen.

VG

hds · 1. April 2016 um 21:15

habe mein Problem gelöst, vielleicht nicht die beste Methode aber es funktioniert ohne Probleme, falls jemand eine bessere Lösung oder Vorschlag hat dann gerne her damit.

wie kayyy beschriebn hat eigene js-Datei in die eigene Theme.php einfügen und in der eigen js-Datei kommt das hier rein:

$(document).ready( function() {
	$('.collapse--header').not('.is--active').next('.collapse--content').hide();
	$('.collapse--header').click( function() {
		var trig = $(this);
		if ( trig.hasClass('is--active') ) {
			trig.next('.collapse--content').slideToggle(1000);
			trig.removeClass('is--active');
		} else {
			$('.collapse--header.is--active').next('.collapse--content').slideToggle(1000);
			$('.collapse--header.is--active').removeClass('is--active');
			trig.next('.collapse--content').slideToggle(1000);
			trig.addClass('is--active');
		};
		return false;
	});
});

hinter .slideToggle in Klammer ist die Zeit in Millisekunden für das auf- und zuklappen, nach eigen Wunsch ändern bzw. anpassen.

VG

Olli2412 · 12. Juni 2016 um 19:00

Hallo Zusammen,

wo genau muss ich die selbst erstellte js Datei hinlegen?

themes/Frontend/Bezeichnung Eigenes template/frontend/_public/src/js

Zur Zeit liegt diese in folgendem Ordner

Muss der Pfad in der theme.php dann nicht anders heißen?

useg · 12. Juni 2016 um 19:53

@Olli2412 schrieb:

Hallo Zusammen,

wo genau muss ich die selbst erstellte js Datei hinlegen?

themes/Frontend/Bezeichnung Eigenes template/frontend/_public/src/js

Zur Zeit liegt diese in folgendem Ordner

Muss der Pfad in der theme.php dann nicht anders heißen?

es ist schon so richtig wie Kayyy es geschrieben hat.

@kayyy schrieb:

_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‘ );

der Pfad ist dann also „themes/Frontend/ dein_Theme /frontend/_public/src/js/deinedatei.js“, musst das natürlich in der Theme.php in deinem Theme einbinden.

Uwe

myfuntime · 26. Oktober 2016 um 16:18

Hallo,

WOW, jetzt muss ich mal echt meinen Hut ziehen, und mich hier bei den Forenmitgliedern 1000-Fach bedanken und Respekt zollen…

Da schreibe ich mir seit Tagen die Finger wund an Codezeilen, die einfach nicht klappen wollen, und hier findet man die Antwort als
komplettanleitung.

Einfach alle Schritte befolgen die hier erklärt sind und Ihr habt in 10 Min. ein Funktionierendes und gut anzusehendes Accordion (wems nicht gefällt kann ja die Less anpassen)
Danke auch an @hds‍ - Deine Lösung klappt wunderbar, und selbst nach den letzten großen updates von Shopware ist alles noch zu 100% Kompatibel
(Ich nutzte die 5.2.9)

Christian

eldan · 9. Mai 2018 um 12:27

Perfekt, vielen Dank für die top Anleitung!
Hat jmd von euch eine Idee wie man noch einen direkten Einstiegspunkt integrieren könnte?

Die Sprungmarke funktioniert leider nicht: https://wiki.selfhtml.org/wiki/HTML/Regeln/Seiteninterne_Verweise#Sprungmarken_zum_Seitenanfang

Von Seite 1 klick auf z.B.: Einstiegspunkt soll man auf uf Seite 2 gelangen und dann das Akkordion direkt an der richtigen Sprungmarke aufgehen.

eldan · 14. Mai 2018 um 12:16

Zu meiner Frage habe ich aufbauend auf anderen Lösungen aus dem Forum etwas entwickelt, evtl. kann es mal jemand gebrauchen.
Falls jemand Verbesserungen hat, gerne her damit.

Einmal auf der Startseite in einer Einkaufwelt ein Tab-Menü mit Einstiegspunkten zu einer anderen Seite mit Akkordion:

        Tab1
        Tab2
    

    
        
            Tab1
            
                
                  
                      
                        Lorem Ipsum
                      
                      
                          Lorem IpsumWeiterlesen
                      
                  
                  
                    
                      Lorem Ipsum
                    
                    
                        Lorem IpsumWeiterlesen
                    
                  
                
            
        
        
            Tab2
            
              
                
                    
                      Lorem Ipsum
                    
                    
                        Lorem IpsumWeiterlesen
                    
                
                
                  
                    Lorem Ipsum
                  
                  
                      Lorem IpsumWeiterlesen

$(function () {
    StateManager
        .addPlugin('.tab-menu--product', 'swTabMenu', ['xs', 's', 'm', 'l', 'xl'])
});

Die andere Seite mit Akkordion. Falls man von der Startseite über die Einstiegspunkte kommt, soll das Akkordion an entsprechender Stelle aufgehen und zu diesem Punkt in der Seite gesprunge werden:

    Test1
    
  
  
    Lorem Ipsum
  
  
    Test2
    
  
  
    Lorem Ipsum
  
  
    Test3
    
  
  
    Lorem Ipsum
  
  ...

document.asyncReady(function(){
    function scrollToAnker() {
        if(location.hash) {
          $('.collapse--header.'+location.hash.replace('#','')).not('.is--active').next('.collapse--content').slideToggle(200);
          $('.collapse--header.'+location.hash.replace('#','')).addClass('is--active');

          var anker = $('a[name='+location.hash.substr(1)+']');
          if($(anker).offset()) {
              $("html, body").animate({
                  scrollTop: $(anker).offset().top
              }, 100);
          }
        }
    }

    $(document).ready(function() {
        // Anker
        $.subscribe("plugin/swEmotionLoader/onLoadEmotionFinished", function(me) {
            scrollToAnker();
        });
        // Akkordion
        $('.collapse--header').not('.is--active').next('.collapse--content').hide();
      	$('.collapse--header').click( function() {
      		var trig = $(this);
      		if ( trig.hasClass('is--active') ) {
      			trig.next('.collapse--content').slideToggle(200);
      			trig.removeClass('is--active');
      		} else {
      			$('.collapse--header.is--active').next('.collapse--content').slideToggle(200);
      			$('.collapse--header.is--active').removeClass('is--active');
      			trig.next('.collapse--content').slideToggle(200);
      			trig.addClass('is--active');
      		};
      		return false;
      	});

        // Damit Verlinkung aus dem Akkordion funktioniert
        $('.collapse--content *').click(function( event ) {
            event.stopPropagation();
        });
    });
});

senana · 20. Mai 2018 um 18:48

@eldan schrieb:

Perfekt, vielen Dank für die top Anleitung!

Hallo Eldan,

ich versuche nun seit 2 Tagen irgendwie mit all den vorhandenen Bruchstücken aus diesem Thread eine Collapse-Box im Content zu integrieren, um so eine FAQ Seite zu erstellen. Leider Fehlanzeige. Egal wie ich es mache, das Ding will sich einfach nicht bewegen.

Kannst du mal in einfachen Schritten zusammfassen was genau du machst, damit es klappt?

Danke schon mal.

eldan · 23. Mai 2018 um 15:03

Hi senana,

wenn die FAQ-Seite mit den Einkaufswelten erstellen möchtest, kannst du wie folgt vorgehen:

Einkaufswelt erstellen und mit einem Code-Element belegen.

In JavaScript Code kommt:

$(document).ready( function() {
	$('.collapse--header').not('.is--active').next('.collapse--content').hide();
	$('.collapse--header').click( function() {
		var trig = $(this);
		if ( trig.hasClass('is--active') ) {
			trig.next('.collapse--content').slideToggle(1000);
			trig.removeClass('is--active');
		} else {
			$('.collapse--header.is--active').next('.collapse--content').slideToggle(1000);
			$('.collapse--header.is--active').removeClass('is--active');
			trig.next('.collapse--content').slideToggle(1000);
			trig.addClass('is--active');
		};
		return false;
	});
});

Und in HTML Code:

    Test1
    
  
  
    Lorem Ipsum
  
  
    Test2
    
  
  
    Lorem Ipsum
  
  
    Test3
    
  
  
    Lorem Ipsum

Wenn es auf einer CMS-Seite funktionieren soll, musst du eine JavaScript-Datei mit dem Code erstellen und über die Theme.php einbinden.

Hoffe es klappt.

Thema		Antworten	Aufrufe
[GELÖST] Accordion Menü in Shopseite einbinden Shopware 3.5 templates--design	18	6503	3. September 2013
jQuery korrekt ins Theme einbinden Shopware 5	2	558	27. April 2022
javascripts ? wohin damit? Shopware 3.5 themes--design	1	530	15. Oktober 2013
Eigenes JavaScript wird nicht geladen Shopware 3.5 themes--design	0	619	17. Mai 2013
Contentstyling - Accordion / Toggles (bitte moven!!!) Shopware 3.5 templates--design	0	884	27. Mai 2013

Accordion in Shopware 5 (jQuery UI)

Verwandte Themen