Accordion in Shopware 5 (jQuery UI)

Shopware 5 Themes & Design
41

Hallo,

als mittelmäßig erfahrener Shopware-Admin, leider aber JavaScript-Anfänger habe ich mir nun diesen Thread von vorne bis hinten mehrfach durchgelesen.

Ich kann vieles verstehen und nachvollziehen, leider verstehe ich nicht alles komplett, weil die Lösung verstreut über mehrere Antworten verteilt liegt.

Kann jemand alle lösungsrelevanten Ausführungen in einem kleinen Tutorial zusammenfassen?

Dabei interessiert mich sowohl der Teil mit als auch der Teil ohne Einkaufswelt.

 

Vielen Dank.

42

Hallo HenkEvans

hier noch alles schön zusammen kopiert, Datei anlegen mit diesem Inhalt, speichern unter frontend/_public/src/js/ einenNamen für diese Datei ganz wie du das möchtest.js

;(function($) {
    'use strict';
	//collapse Content //
	document.asyncReady(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(400);
				trig.removeClass('is--active');
			} else {
				$('.collapse--header.is--active').next('.collapse--content').slideToggle(400);
				$('.collapse--header.is--active').removeClass('is--active');
				trig.next('.collapse--content').slideToggle(400);
				trig.addClass('is--active');
			};
			return false;
		});
	});
})(jQuery);

in der deiner theme.php kommt das 

protected $javascript = [
        'src/js/einenNamen für diese Datei ganz wie du das möchtest.js',
	];

Und zu letzt kommt das hier auf deine Seite ( unter Inhalte -  Shopseite … )

    Test1
    
  
  
    Lorem Ipsum
  
  
    Test2
    
  
  
    Lorem Ipsum
  
  
    Test3
    
  
  
    Lorem Ipsum

Stylen nicht vergessen, Cache leeren fertig.

Einkaufswelten

In Einkaufswelten wählst du das  Code Element aus, im oberen Teil kommt der Javscript Teil rein und unten der HTML Teil rein, hierfür musst du keine js Datei anlegen und auch nicht deine Theme.php ändern.

So hoffe das es dir weiterhilft.

Viel Spaß

1 „Gefällt mir“
43

Hallo an alle, die hier schon geschrieben haben…

funktioniert das auch mit Shopware 5.6.x ? irgendwie bekomme ich es nicht hin.

Ich möchte auf der Detailseite des Artikels im TAB Beschreibung ein Accordeon einbauen, welches quasi den Inhalt des Artikels aufschlüsselt. Also mehrere Artikel in einem Artikel…

Wie genau muß den der HTML-Code aussehen? Irgendwie sind hier bei mir immer nur die anzuzeigenden Texte zu sehen. Die DIV , CLASS, etc. kann ich aus euren Beispielen nicht erkennen.

Viele Grüße

Tino

44

Hallo tgloeckner,

für den mobilen Footer der 5.6.x -Version wird folgender Code aufgerufen
.addPlugin(’.footer–column .column–headline’, ‚swCollapsePanel‘, {
contentSiblingSelector: ‚.column–content‘
}, [‚xs‘, ‚s‘])

das HTML dazu etwa so:
Bildschirmfoto von 2021-04-27 14-14-26

Der Trigger ist also der erste Parameter. Das „Ziel“ wäre dieses Element: „.column–content“.
Wenn Du das Ziel nicht definierst definiert SW als default class „collapse–content“.

Das könntest Du jetzt nach Deinen Wünschen anpassen.
Hoffe, das hilft Dir.