Warenkorb mit Javascript erstellen?
Hallo, Ich muss in meiner Schule eine Webseite erstellen, habe mich dazu entschieden einen Webshop zu erstellen. Nun bleibe Ich seit Tagen am selben Punkt hängen... Ich weiß nicht wie Ich einen Warenkorb erstelle mit JavaScript. Kann. mir da jemand eine Gute Anleitung zur Verfügung stellen?
Danke
2 Antworten
An sich brauchst du dir nur einen Cookie anlegen, in dem die ausgewählten Waren gespeichert werden. Zu Cookies findest du auf W3Schools einiges Material, nutze ruhig die dort aufgeführten Funktionen get-/setCookie.
Jeder Cookie hat eine Speichergröße von 4096 Bytes. Wenn du der Meinung bist, dass du mehr benötigst (was hoffentlich nicht der Fall ist), wäre der Browser Storage mit einer Speichergröße von 5 MB passender. In meinem folgenden Text bleibe ich weiter beim Cookie.
Zum Vorgehen: Du hast also je Produkt einen Zum Warenkorb hinzufügen-Button. Wenn du auf diesen klickst, schaust du erst, ob es den Cookie bereits gibt. Wenn ja, liest du seinen derzeitigen Wert aus und hängst das neue Produkt mit an.
HTML:
<button class="add-product-button" data-product-id="...">Add</button>
JavaScript:
const addButtons = document.getElementsByClassName("add-product-button");
for (const addButton of addButtons) {
addButton.addEventListener("click", function() {
const productId = this.dataset.productId;
// read cookie ...
// set cookie ...
});
}
Das obige Snippet geht einmal davon aus, dass es auf einer Seite mehrere Produkte mit jeweiligem Button geben kann. Deshalb sucht es nach allen Buttons und hängt denen einen Listener an.
Ob du dir die Produktdaten so holst, wie in meinem Beispielsnippet oder über andere Quellen, bleibt dir überlassen. Möglicherweise möchtest du auch andere Daten speichern (nicht nur die ID, sondern auch den Titel, ...).
Was ich jedenfalls noch empfehlen würde: Nutze ein Format wie JSON, um die Daten im Cookie zu speichern. Das lässt sich leichter erweitern.
Beispiel (im Cookie natürlich ohne Zeilenumbrüche/Whitespaces):
[
{
"id": "...",
"title": "...",
},
{
"id": "...",
"title": "...",
},
/* etc. ... */
]
JavaScript bietet als Hilfe die Funktionen parse und stringify. Der Zugriff auf die einzelnen Elemente (nach Parsen) erfolgt so:
const secondProductTitle = products[1]["title"];
// or:
const secondProductTitle = products[1].title;
Vergiss nicht verschiedene Checks vorher durchzuführen (Hat der Cookie Inhalt? Hat der Cookie Produkte in seiner Liste?).
Auf der Warenkorbseite selbst müsstest du alle Produkte auflisten. Du kannst dir dafür mittels DOM API dynamisch Listen (ul) erstellen. Ich denke, dieser Artikel sollte dir dabei schon weiterhelfen. Zu guter Letzt gilt es, die Produkte zu bündeln und bei Klick auf einen Button zum Server zu schicken. Du kannst ein FormData-Objekt dafür nehmen. Es muss sich ja nicht explizit auf ein form-Element beziehen, sondern kann auch mit eigenen Daten gefüllt werden.
Das Senden gelingt via AJAX-Request. Schau dir die Fetch API an oder nutze ein XMLHttpRequest-Objekt.
Der letzte Part (Validation der angeforderten Produktdaten) muss serverseitig durchgeführt werden. Andernfalls könnte man ja Produkte anfordern, die nicht im Angebot sind (weder vom Titel, noch vom Preis). Mit welcher Programmiersprache du auf Serverseite arbeiten möchtest / kannst, musst du entscheiden. Du kannst eine Node.js-Plattform verwenden und weiterhin JavaScript verwenden oder du nutzt PHP / C# / Java / .... Da das hier soweit noch nicht spezifiziert ist, gehe ich erst einmal nicht weiter darauf ein.
Die tatsächlichen Produktdaten würde ich mindestens in einer CSV-Datei, aber am besten in einer Datenbank speichern. So ist es auch leichter, nach diesen zu suchen und das Sortiment zu erweitern.
Mit JS wirst du da auch nicht wirklich weiterkommen.
Dafür wäre PHP besser geeignet.
Der Wahrenkorb müsste ja auf dem Server gehalten werden und dafür eignet sich besonders SQL
Dafür dass du für die Schule NUR eine Webseite erstellen sollst, scheint mit ein Webshop viel zu aufwändig und vermutlich zu kompliziert für Dich.
Du kannst PHP und weißt nicht wie man es erstellt?
Verstehe ich nicht ganz.
Genauso wie bei HTML oder CSS auch.
Eine Textdatei mit der Endung php (datei.php)
Mit dem Editor den PHP und HTML Code editieren und speichern
Zum Ausführen musst das PHP natürlich auf einen Server hochgeladen werden.
Da PHP ja nicht im Browser sondern auf dem Server ausgeführt wird.
PHP kann Ich auch... ich weiß nur nicht wie ich es erstelle