Kann mir jemand bei dem Popup auf meiner Webseite helfen?
Hallo liebe Community,
wieder mal habe ich ein kleines Problem, was meine Webseite angeht.
Ich habe in meiner Shopseite nun alles soweit fertig, jedoch wollte ich, wenn man den "Kaufen"-Button drückt, dass dort darüber ein Popup mit dem Titel "Gekauft" erscheint.
Soweit funktoniert alles, jedoch kann ich es nur bei maximal zwei machen, ansonsten erscheint das Popup nicht mehr und auch wenn ich bei dem einen drücke, erscheint es bei dem anderen. Kann mir da vielleicht jemand helfen?
Danke schon einmal und frohe Feiertage.
2 Antworten
Eine ID darf nur einmal im Dokument verwendet werden. Ähnliches gilt für die Auszeichnung von Überschriften in Bezug auf dessen Semantik. Von einer wiederholten Verwendungen der <h1> Überschrift also absehen solltest.
Was jetzt deine Karten angeht, erstellst du eine „addToCart” Funktion mit der du auf ein Click-Event reagierst. Die Funktion dann z.B. mit einer ForEach-Schleife für alle Karten ausführen lässt, sobald die jeweilige Karte der Button geklickt wurde.
HTML:
<div class="card">
<div class="card-body">
<h4>Article...</h4>
<button class="card-btn">Add to cart</button>
</div>
<div class="card-popup">
<p>Article added to cart.</p>
</div>
</div>
JavaScript:
const cards = document.querySelectorAll('.card-body button');
const popup = document.querySelectorAll('.card-popup');
const addToCart = (item, index) => {
item.addEventListener('click', () => {
popup[index].classList.add('active');
setTimeout(() => {
popup[index].classList.remove('active');
}, 1500);
});
}
cards.forEach(addToCart);
CSS:
.card-popup {
display: none;
}
.card-popup.active {
display: flex;
}
Kurz und knapp: Ja, das reicht aus.
Mit querySelectorAll werden alle Buttons angesprochen, die als Child-Element von einem Element mit der Klasse card-body enthalten sind. Dasselbe gilt ebenfalls für das Popup - und beim Ausführen über eine ForEach Schleife durch iteriert wird.
Es spielt somit keine Rolle ob du am Ende nur 5 oder 500 solcher Elemente angelegt hast. Solange die Struktur gleich ist, wird es auf alle anderen angewendet. Die Funktion kannst jedoch auch für andere weiter verwenden.
Also ich habe es grade so eingefügt aber es geht irgendwie nicht
html: <div class="card6">
<div class="card-body">
<img src="Plektren.jpg" style="width:70%">
<h1>Redamancy 24 Stück Guitar Picks</h1>
<p class="price6">3,99€</p>
<p>Guitar Picks, 3 Verschiedene Stärke Plektrum 0,46mm
/ 0,71mm / 0,96mm, für Bass E-Gitarre Akustikgitarre Ukulele </p>
<p><button class="card-btn">Kaufen</button></p>
</div>
</div>
<div class="card-popup">
<p>Gekauft.</p>
</div>
Java:
const cards = document.querySelectorAll('.card-body button');
const popup = document.querySelectorAll('.card-popup');
const addToCart = (item, index) => {
item.addEventListener('click', () => {
popup[index].classList.add('active');
setTimeout(() => {
popup[index].classList.remove('active');
}, 1500);
});
}
css:
.card-popup {
display: none;
}
.card-popup.active {
display: flex;
}
so sieht es jetzt aus
Ich war die vergangenen Tage sehr beschäftigt und deine Rückmeldung ist bei irgendwie untergegangen. Wenn du alles so übernommen hast und die Funktion aufrufst, sollte es auch wie beschrieben funktionieren.
Hab es in codepen jetzt geschrieben wie kann ich das hier einfügen ?
Den Link kopieren und hier einfügen.
https://codepen.io/Jason680/pen/PoLNaZE das wäre es. Hatte es so eingefügt jedoch klappt es nicht
Ich habe es mir gerade angesehen und es funktioniert, sofern das HTML von meinen Snippet richtig übernommen wurde. Du hast es nicht bei allen Items angepasst und du <button> Elemente in einem <p> Element verschachtelt sind.
Lade dir das Zip-Archiv herunter und schau dir die Demo an. Danach überträgst du es auf dein Projekt, dann funktioniert es auch so wie es sein soll.
Okay vergiss die zip ich habs irgendwie meine letzte frage ist: das pop up ploopt rechts neben jeder karte auf und ist immer schwarz (sowohl balcken als auch schriftfarbe kann ich das noch verändern das das direkt über dem jeweiligen button ist ? und das man die Schrift erkennen kann ? (andere farbe?)
Das liegt daran, dass du in der JS Funktion fest das Element mit der ID"myPopup" referenzierst. IDs sollten einmalig sein, was in deinem HTML nicht der Fall ist. Am Besten die ID entfernen und das dem Button zugehörige Popup mit closest() ermitteln.
Das könntest du z.B. so ändern:
function myFunction(this){
const popup = this.closest('.popuptext');
popup.classList.toggle('show');
}
Im HTML dann entsprechend
<button class="popup" onclick="myFunction(this)">
Noch besser wäre es, keinen inline onclick zu verwenden, sondern den EventListener mit addEventListener und einer forEach Schleife anzuhängen.
so wie du es mir geschrieben hast, funktoniert es nicht so richtig weßt du woran es liegen kann ? Weil das Ding ist ich brauche das ja für sechs button.
Kannst du den Code mal z.B. auf Codepen oder jsfiddle einfügen, und den Link hier teilen? Ist sonst immer sehr schwer, ohne den aktuellen Stand zu sehen...
Habe kein codepen ja gut wie gesagt hab es nur um das verändert wie du es geschrieben hast
dann nimm einfach jsfiddle, da brauchst du keinen Account
Und das sollte für alle 6 produkt karten helfen wenn ich das in html bei allen einfüge ?