Umschreiben von JQuery nach Vanilla JavaScript

Shopware 6 (German) Programmierung
1

Hallo zusammen,

ich versuche gerade den JS-Code eines Plugins für 6.5.0.0 und Vanilla JavaScript umzuschreiben. Leider fehlt mir hier die Erfahrung und der JS-Code funktioniert bisher noch nicht.

JS-Code für 6.4 - funktioniert:

import Plugin from 'src/plugin-system/plugin.class';

export default class XYZ extends Plugin {
    init() {
        $('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
            if (!$(this).next().hasClass('show')) {
                $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
            }
            var $subMenu = $(this).next('.dropdown-menu');
            $subMenu.toggleClass('show');


            $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
                $('.dropdown-submenu .show').removeClass('show');
            });

            return false;
        });
    }
}

JS-Code für 6.5 - funktioniert nicht. Konsole liefert keine Hinweise:

import Plugin from 'src/plugin-system/plugin.class';

export default class XYZ extends Plugin {
	init() {
		document.querySelector('.dropdown-menu a.dropdown-toggle').addEventListener('click', function(e) {
			if (!document.querySelector(this).nextElementSibling.classList.contains('show')) {
				document.querySelector(this).parents('.dropdown-menu').first().querySelector('.show').classList.remove('show');
			}
			var $subMenu = document.querySelector(this).next('.dropdown-menu');
			$subMenu.classList.toggle('show');


			document.querySelector(this).parents('li.nav-item.dropdown.show').addEventListener('hidden.bs.dropdown', function(e) {
				document.querySelector('.dropdown-submenu .show').classList.remove('show');
			});

			return false;
		});
	}
}

Könnte vielleicht jemand mit Erfahrung einen Blick darauf werfen? Vielen Dank vorab.

Viele Grüße,
Frank

2

Teste den eigentlich Code, Block für Block, in deiner Browser Console und kreise so den Fehler ein.

3

Auf die Schnelle ist mir nur das hier aufgefallen:

document.querySelector('.dropdown-menu a.dropdown-toggle').addEventListener(

ist vermutlich nicht richtig, da der Eventlistener nur auf das erste a.dropdown-toggle-Element angewendet wird. Du müsstest querySelectorAll nehmen, loopen und auf jedes Element den Listener setzen (gilt auch für die anderen EventListener).