Shopware 5 Accordion funktioniert nicht

[jpinsign]

Auf dieser Seite:
https://www.warmies.de/testshop/hilfe-kontakt

Sind Accordion Punkte die wie ein dropdown funktionieren sobald man sie anklickt.
Dies funktioniert leider nicht.
Der JS Code ist im Plugin JavaScript/CSS genauso wie der CSS Code dafür ( Im Abschnitt Holle FAQ )

Der HTML Code ist unter Shop Seiten Footer Column 1 / Hilfe & Kontakt

Bisherige Analysen / Geprüfte Punkte:

Der Code ist richtig ( HTML, CSS & JS )
Habe dafür sogar einen anderen Code genutzt wobei das selbe Problem war.
Hier ist der Code:

JS:

if (document.getElementById("Holle_FAQ_JavaScriptAktiviert")) {
var acc = document.getElementsByClassName("Holle_FAQ_accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc.addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}

// Filtert das FAQ
function Holle_FAQ_filterFaq() {
var input, filter, accordion, panel, p, i, txtValue, accordionGroup;
input = document.getElementById("Holle_FAQ_searchInput");
filter = input.value.toUpperCase();
accordion = document.getElementsByClassName("Holle_FAQ_accordion");
accordionGroup = document.getElementsByClassName("Holle_FAQ_Kategorie_Block");


// Handle always-visible-accordion
var alwaysVisibleAccordion = document.getElementsByClassName("Holle_FAQ_always-visible-accordion")[0];
var alwaysVisiblePanel = alwaysVisibleAccordion.nextElementSibling;
if (filter !== "") {
alwaysVisibleAccordion.style.display = "";
// alwaysVisiblePanel.style.maxHeight = alwaysVisiblePanel.scrollHeight + "px"; // Open the always-visible-panel
}
else {
alwaysVisibleAccordion.style.display = "";
alwaysVisiblePanel.style.maxHeight = null;
}

for (i = 0; i < accordion.length; i++) {
// Ignore the always-visible accordion
if (accordion.classList.contains('Holle_FAQ_always-visible-accordion')) {
continue;
}

panel = accordion.nextElementSibling;
p = panel.getElementsByTagName("p")[0];
var keywords = panel.getElementsByClassName("Holle_FAQ_Stichwort")[0];
var category = panel.getElementsByClassName("Holle_FAQ_Kategorie")[0];
// Add the keyword and category content to the txtValue
txtValue = accordion.textContent + p.textContent +
(keywords ? keywords.textContent : "") +
(category ? category.textContent : "");
var group = accordion.parentNode;


if (txtValue.toUpperCase().indexOf(filter) > -1) {
accordion.style.display = "";
// panel.style.maxHeight = panel.scrollHeight + "px"; // This line causes the accordion to open when searching
group.style.display = "";
}
else {
accordion.style.display = "none";
panel.style.maxHeight = null;
var accordionsInGroup = group.getElementsByClassName("Holle_FAQ_accordion");
var allHidden = true;

for (var j = 0; j < accordionsInGroup.length; j++) {
if (accordionsInGroup[j].style.display !== "none") {
allHidden = false;
break;
}
}

if (allHidden && !group.classList.contains('Holle_FAQ_always-visible')) {
group.style.display = "none";
}
}
}

if (filter === "") {
for (i = 0; i < accordion.length; i++) {
// Ignore the always-visible accordion
if (accordion.classList.contains('Holle_FAQ_always-visible-accordion')) {
continue;
}

accordion.classList.remove("active");
panel = accordion.nextElementSibling;
panel.style.maxHeight = null;
}
}
}

// class Holle_FAQ_Versteckt wird ausgeblendet
// document.getElementsByClassName('Holle_FAQ_Versteckt')[0].style.visibility = 'hidden';

// Sorgt dafür, dass die Nachricht angezeigt wird, ob die Email versandt wurde oder es einen Fehler gab.
document.addEventListener("DOMContentLoaded", function() {
const urlParams = new URLSearchParams(window.location.search);
const mailsend = urlParams.get('mailsend');
const messageElement = document.getElementById('Holle_FAQ_Formularrueckmeldung');
if (mailsend === 'Holle_FAQ_success') {
messageElement.textContent = 'Ihre Anfrage wurde erfolgreich gesendet. Wir werden uns umgehend bei Ihnen melden.';
messageElement.classList.add('Holle_FAQ_Formularrueckmeldung_success');
}
else if (mailsend === 'Holle_FAQ_fail') {
messageElement.textContent = 'Es gab einen Fehler beim Versenden der Anfrage. Bitte achten Sie darauf, alle erforderlichen Felder zu füllen und nur zulässige Dateiformate zu verwenden.';
messageElement.classList.add('Holle_FAQ_Formularrueckmeldung_fail');
}
});

function sanitizeInput(input) {
return input.replace(/(<([^>]+)>)/gi, "");
}

// Sorgt dafür, dass die Nachricht angezeigt wird, ob die Email versandt wurde oder es einen Fehler gab.
var formularListe = document.getElementsByClassName('Holle_FAQ_Formular');

for (var i = 0; i < formularListe.length; i++) {
formularListe.addEventListener('submit', function(event) {
event.preventDefault();
var form = event.target;
var eingabeFelder = form.getElementsByClassName('Holle_FAQ_Formular_Felder');
for (var j = 0; j < eingabeFelder.length; j++) {
var eingabe = eingabeFelder[j].value;
var bereinigteEingabe = sanitizeInput(eingabe);
eingabeFelder[j].value = bereinigteEingabe;
}
form.submit();
});
}

}


CSS:
.Holle_FAQ_body {
background-color: #ffffff;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
text-rendering: optimizeLegibility;
font-weight: 370;
color: #7c7c7b;
line-height: 1.5rem;
font-size: 14px;
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}


.Holle_FAQ_Antwort {
font-size: 14 !important;
color: #7c7c7b !important;
}


.Holle_FAQ_Stichwort {
opacity: 0;
height: 0;
}

.Holle_FAQ_Datenschutzbestaetigt {
display: inline;
padding-left: 10px;
}

.Holle_FAQ_Datenschutzbestaetigt a:link{
color:#582582;
}


.Holle_FAQ_Formularrueckmeldung_success {
box-sizing: border-box;
padding: 10px;
border-radius: 8px;
border: 1px solid green;
background-color: rgb(241, 255, 242);
font-weight: bolder;
color: green;
text-align: center;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: x-large;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
cursor: pointer;
margin-bottom: 40px;
}

.Holle_FAQ_Formularrueckmeldung_fail {
font-weight: bolder;
color: red;
text-align: center;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: x-large;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
cursor: pointer;
margin-bottom: 40px;
}

.Holle_FAQ_accordion:hover,
.Holle_FAQ_accordion.active {
color: #582582;
box-sizing: border-box;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

button.Holle_FAQ_accordion {
margin-bottom: 10px;
width: 100%;
border: 1px solid #7c7c7b;
border-radius: 4px;
background-color: #ffffff;
color: #7c7c7b;
cursor: pointer;
font-weight: 370;
padding: 18px;
text-align: left;
outline: none;
font-size: 12pt;
transition: 0.4s;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.Holle_FAQ_Formular_Felder {
box-sizing: border-box !important;
margin-bottom: 10px !important;
width: 600px !important;
max-width: 100% !important;
border: 1px solid #7c7c7b !important;
border-radius: 4px !important;
background-color: #ffffff;
color: #7c7c7b !important;
padding: 10px !important;
outline: none !important;
font-weight: 370 !important;
font-size: 11pt !important;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.Holle_FAQ_Formular_Felder_nach_auswahlfeld {
margin-top: 10px !important;
}


.Holle_FAQ_Formular_Auswahlfelder {
border: 1px solid #7c7c7b !important;
border-radius: 4px !important;
background-color: #ffffff;
width: 600px !important;
max-width: 100% !important;
color: #7c7c7b !important;
padding: 10px !important;
line-height: 1rem !important;
height: fit-content !important;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.Holle_FAQ_panel {
padding: 0 18px !important;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
text-rendering: optimizeLegibility;
font-weight: 370;
color: #7c7c7b;
line-height: 1.5rem;
}

.Holle_FAQ_Formular {
display: flex;
flex-direction: column;
}

.Holle_FAQ_Formular_Datei:hover {
color: #582582;
width: 600px;
max-width: 100%;
box-sizing: border-box;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}


.Holle_FAQ_Formular_Datei {
box-sizing: border-box;
margin-bottom: 10px;
width: 600px;
max-width: 100%;
border: 1px solid #7c7c7b;
border-radius: 4px;
background-color: #ffffff;
color: #582582;
padding: 10px;
outline: none;
text-align: center;
font-size: 14pt;
font-weight: light;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.Holle_FAQ_Formular_Senden {
box-sizing: border-box;
margin-bottom: 20px;
width: 600px;
max-width: 100%;
border: 1px solid #7c7c7b;
border-radius: 4px;
background-color: #582582;
color: #ffffff;
padding: 10px;
outline: none;
font-size: 14pt;
font-weight: light;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}


#Holle_FAQ_searchInput {
box-sizing: border-box;
margin-bottom: 10px;
width: 100%;
border: 1px solid #7c7c7b;
border-radius: 4px;
background-color: #ffffff;
color: #a7a7a7;
padding: 20px;
outline: none;
font-size: 14pt;
font-weight: 370;
box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

#Holle_FAQ_searchInput:laceholder {
color: #a8a8a8;
font-style: italic;
}

.Holle_FAQ_Kategorie {
text-align: left;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #582582;
font-size: 14pt;
font-weight: 500;
cursor: pointer;
}

.Holle_FAQ_left-align {
text-align: left;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #7c7c7b;
font-size: 14pt;
font-weight: bold;
cursor: pointer;
}

.Holle_FAQ_headline {
text-align: left;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #7c7c7b;
font-weight: 700;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
cursor: pointer;
}


Hier ein Abschnitt vom HTML:

<div class="Holle_FAQ_Kategorie_Block">
<h3 class="Holle_FAQ_Kategorie Holle_FAQ_Kategorie_Block">Erw&auml;rmen</h3>
<button class="Holle_FAQ_accordion">Wie lange darf ein Warmies^&reg; in die Mikrowelle?</button>
<div class="Holle_FAQ_panel">
<p class="Holle_FAQ_Antwort">Nach nur 90 Sekunden Erw&auml;rmung in der Mikrowelle bei 800 Watt Leistung geben Warmies^&reg; f&uuml;r bis zu 1,5 Stunden eine angenehme, wohltuende W&auml;rme ab. Dies kann selbstverst&auml;ndlich variieren. Erw&auml;rmen Sie Ihr Warmies^&reg;-Produkt nur gem&auml;&szlig; der jeweiligen Erw&auml;rmungsdauer. Sie finden diese auf dem Papier-Etikett, der Verpackung oder dem eingen&auml;hten Stofflabel des Produkts. Die Produkte der MINIS-Serie d&uuml;rfen zum Beispiel nur bis zu 30 Sekunden bei bis zu 800 Watt erw&auml;rmt werden. (siehe jeweilige Produktseite)</p>
<div class="Holle_FAQ_Stichwort">Erhitzen, erw&auml;rmen, Gradzahl</div>
</div>

 

[Faust2011]

Was ist denn nun genau die Frage? Wenn das Accordion nicht funktioniert und das kommerzielle (?) Software ist, dann würde ich nicht den Code debuggen, sondern den Hersteller um Support bitten und/oder ihm das Problem schildern.

 

[jb_alvarado]

Shopware 5 ist auch so gut wie EOL: shopware-5-zu-shopware-6. Würde da nicht mehr viel Zeit für investieren.

 

[GustlPC]

Shopware kostet in der kleinsten Option 600€ oder 600$ im Monat! LOL, wer da wohl mit Euro bezahlt 😀

Aber wenn soviel Geld bezahlt wird, würde ich mir nicht die Mühe machen und versuchen das Problem selbst zu lösen.

 

[ColdGlow]

for (i = 0; i < acc.length; i++) {
acc.addEventListener("click", function() {

Du hast garnicht durch alle Objekte iteriert und die Events drangehängt, daher reagiert auch nichts

statt

acc.addEvent.....

so:

acc[i].addEvent....

Das gleiche gilt für die Schleife mit der formularListe