ComputerBase Menü
Aktuelles

Shopware 5 Accordion funktioniert nicht

J

jpinsign

Newbie
Registriert
Juli 2023
Beiträge
1
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::placeholder {
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<sup>&reg;</sup> 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<sup>&reg;</sup> 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<sup>&reg;</sup>-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>
 
Zuletzt bearbeitet:
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.
 
jpinsign schrieb:
for (i = 0; i < acc.length; i++) {
acc.addEventListener("click", function() {
Zum Vergrößern anklicken....

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

statt

acc.addEvent.....

so:

Code: 
acc[i].addEvent....

Das gleiche gilt für die Schleife mit der formularListe
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

N
Dark/light mode funktioniert nicht ganz
Antworten
3
Aufrufe
1.193
abcddcba
A
O
PHP HTML: Wieso funktioniert width nicht
Antworten
10
Aufrufe
770
zenokortin
Z
N
Schriftgröße via Chrome Console ändern
Antworten
5
Aufrufe
1.422
floq0r
floq0r
N
Bilder wird oben an der Suchleiste abgeschnitten (HTML/CSS)
Antworten
3
Aufrufe
945
Janush
Janush
M
Dropdown-Menü verschiebt Seiteninhalt nach unten (CSS?)
Antworten
7
Aufrufe
1.622
McMoneysack91
M
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 165 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz