Accordion in Shopware 5 (jQuery UI)

[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

Ja genau, nur passiert nichts beim Klick

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

[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

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

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/ :wink:

1 Like

[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

[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?

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

 

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…

Moin,

Ich bin gerade selber an dem Versuch ein Accordion einzubinden, jochdoch versage ich  Sticking-out-tongue.

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

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

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

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?

@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

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

 

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.

Zu meiner Frage habe ich aufbauend auf anderen Lösungen aus dem Forum etwas entwickelt, evtl. kann es mal jemand gebrauchen. :slight_smile:
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();
        });
    });
});

 

@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.

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. :slight_smile: