JavaScript in CMS Plugin ohne Funktion / nur auf Desktopansicht

Shopware 5
1

Hallo zusammen,
wir wollen ein paar Contentseiten über das Plugin Shopware CMS von Dreischild mit eigenem CSS und JavaScript versehen.
Es handelt sich um ein einfaches FAQ Accordion.
Wenn wir den JS-Code über das Plugin einbinden wird er zu früh geladen bevor es die Klassen gibt. → Daher können wir die interne Pluginfunktion um JS einzubidnen nicht nutzen.
Daher ganz simpel das JS in eine Datei im Template und via Theme.php eingebunden:

protected $javascript = array(
    'src/js/accordion.js',
	);

Den Code selbst noch asynchron laden und es sollte laufen:

document.asyncReady(function() {
	$('.dm-accordion-item .heading').on('click', function(e) {
		    e.preventDefault();
		    if($(this).closest('.dm-accordion-item').hasClass('active')) {
		        $('.dm-accordion-item').removeClass('active');
		    } else {
		        $('.dm-accordion-item').removeClass('active');
		        $(this).closest('.dm-accordion-item').addClass('active');
		    }
		    var $content = $(this).next();
		    $content.slideToggle(50);
		    $('.dm-accordion-item .content').not($content).slideUp('fast');
		});
});

Soweit sollte alles korrekt sein.
Jetzt ist es aber so, dass der JS-Code beim Laden auf der Desktopansicht läuft jedoch bei einem kleineren Viewport nicht. Selbst wenn ich nur das Browserfenster minimal verschiebe funktioniert der Code nicht mehr.
Wenn ich die Seite auf Mobile lade läuft auch nichts.
Der Code selbst ist jedoch laut Browser drin, die CSS-Klassen sind auf allen Ansichten auch gleich.
Gibt es hier eine Idee/Lösung?
Gerne stelle ich euch den Link zum Staging via PN zur Verfügung.

Das gleiche Problem hatten wir bereits vor einem halben Jahr mit einem komplexeren JS-Code, damals haben wir auf die Funktion dann verzichtet. Daher kann ich den Code selbst fast ausschließen.

Bin für alle Ideen dankbar :blush:

Gruß

Dennis

2

Hi Dennis,

da streiten sich die Geister ob man für ein Accordion JS verwenden sollte oder nicht. Meistens werden hier Form Controls “missbraucht”, mit der Folge dass das HTML nicht mehr compliant ist, da die Controls sich nicht in einem <form> befinden. Ich habe viele Artikel zu diesem Thema gelesen, insbesondere auch im Hinblick auf SEO. Es scheint sich mittlerweile eine Präferenz für „pure HTML5“ ohne JS herausgebildet zu haben. Daher habe ich unsere FAQ dann auf Basis von <details> und <summary> erstellt und dabei auch gleich den Microcode für die FAQ Auszeichnung via schema.org implementiert, vgl. Häufig gestellte Fragen mit strukturierten Daten versehen

Google hat die Seite jedenfalls wohlwollend indiziert, der einzige Nachteil ist, dass mit diesem Ansatz kein Auto-Collapse möglich ist wenn eine andere Frage geöffnet wird, oder eine bestimmte Frage mit #<id> so verlinkt werden kann, dass die Antwort automatisch öffnet (Link auf die Frage geht jedoch). Dafür funktioniert details/summary absolut problemlos mit allen modernen Browsern, egal ob Desktop, Tablet oder Mobile.

LG Phil

3

Hallo phil,

danke erstmal für deine schnelle Antwort.
Vor lauter schöner JS Accordions im Netz habe ich html5 ganz vergessen.
Ich werde mich gleich mal auf die Suche nach einer HTML5 Lösung machen.

PS: Wir hatte noch eine mega coole Produktvergleichtabelle mit JS. Denkst du man bekommt das „fast“ responsive 1:1 in html5 umgesetzt?
Kannst du so etwas bieten?