Guten Tag die Herren und Damen,
Ich bin ein Informatik / Applikation Entwickler Student.
Und erstelle zurzeit meinen von Grund auf eigenen Webshop als Testzweck.
Ich hoffe ich stelle meine Frage am richtigen Ort, ansonsten darf mein Post gerne verschoben werden.
Ich habe wie schon erwähnt, einen Webshop in Html erstellt.
Ich habe ebenfalls bei meinen Artikel jeweils einen Button "Add to cart" hinzugefügt.
Wenn man also auf diesen Button klickt, wird via js der Artikel in den Warenkorb gelegt. Das heißt es wird via js in einem Popup Warenkorb ein div erstellt "Cart Row".
In diesem div wird das Item des Artikels sowie der Preis usw. importiert. Ebenfalls auch einen "Remove" Buttton der den Artikel aus dem Warenkorb entfernt.
Soweit so gut, alles funktioniert wie ich das möchte.
Wenn ich jetzt also auf den Button klicke, "Add to cart" so wird der Button (auch via js) rot gefärbt und der Text ändert sich von "add to cart" in "Already Added".
Nun zu meinem Problem:
Wenn ich den Artikel aus dem Warenkorb entfernen möchte, sollte der Button "Add to cart" zum Standardwert umgestellt werden. "Already added" zu "Add to cart" und die Farbe des Buttons von "rot" nach "schwarz" zurückgesetzt werden. Jedoch wenn ich mehrere Artikel im Warenkorb habe, wird lediglich der Letzte Artikel wieder zurückgesetzt. Ich verstehe natürlich weshalb, da beim "Add to cart" das erstellte div mit dem "Remove" Button keine eindeutige ID kriegt. Somit kann ich den Button "Remove" nicht via js ansprechen.
Die Idee wäre also, das wenn ich auf "Remove Item" klicke sei es "Artikel01" oder "Artikel08" auch den jeweiligen Artikel Button zurückgesetzt wird.
Als beispiel habe ich für eine bessere Vorstellung ein kleines video auf Youtube geladen:
Desweiteren zeige ich euch gerne mein js sowie auch mein HTML des "Artikels" und des Popup's (Warenkorb).
Nun die essentielle Frage. Wie kann ich in js ein div erstellen lassen, mit jeweils einem "Remove" Button der eine eindeutige ID erhält. Damit ich den auch ansprechen kann?
Gibt es da eine Möglichkeit, ohne das ich jeden Artikel separat in den Warenkorb als div erstellen muss. Weil das hieße ich müsste alle Artikel als div erstellen lassen via js, was bei 100 Artikel beispielsweise sehr aufwändig wäre. Ebenfalls wäre ich froh das nicht mit PHP machen zu müssen (wenn möglich).
Hier der Warenkorb:
Hier der Artikel mit dem Button "Add to cart"
Hier das Js "Add to cart": (Leider als image da ich den Fehler code 403 erhielt) ev. weil js mit html gemischt wurde?!
hier noch ein Beispiel das ich bei Stackoverflow gepostet habe:
Link:
falls jemand mehr Details / Code benötigt, bitte einfach sagen. Danke im voraus und in guter Hoffnung
Lg odbvirus
Ich bin ein Informatik / Applikation Entwickler Student.
Und erstelle zurzeit meinen von Grund auf eigenen Webshop als Testzweck.
Ich hoffe ich stelle meine Frage am richtigen Ort, ansonsten darf mein Post gerne verschoben werden.
Ich habe wie schon erwähnt, einen Webshop in Html erstellt.
Ich habe ebenfalls bei meinen Artikel jeweils einen Button "Add to cart" hinzugefügt.
Wenn man also auf diesen Button klickt, wird via js der Artikel in den Warenkorb gelegt. Das heißt es wird via js in einem Popup Warenkorb ein div erstellt "Cart Row".
In diesem div wird das Item des Artikels sowie der Preis usw. importiert. Ebenfalls auch einen "Remove" Buttton der den Artikel aus dem Warenkorb entfernt.
Soweit so gut, alles funktioniert wie ich das möchte.
Wenn ich jetzt also auf den Button klicke, "Add to cart" so wird der Button (auch via js) rot gefärbt und der Text ändert sich von "add to cart" in "Already Added".
Nun zu meinem Problem:
Wenn ich den Artikel aus dem Warenkorb entfernen möchte, sollte der Button "Add to cart" zum Standardwert umgestellt werden. "Already added" zu "Add to cart" und die Farbe des Buttons von "rot" nach "schwarz" zurückgesetzt werden. Jedoch wenn ich mehrere Artikel im Warenkorb habe, wird lediglich der Letzte Artikel wieder zurückgesetzt. Ich verstehe natürlich weshalb, da beim "Add to cart" das erstellte div mit dem "Remove" Button keine eindeutige ID kriegt. Somit kann ich den Button "Remove" nicht via js ansprechen.
Die Idee wäre also, das wenn ich auf "Remove Item" klicke sei es "Artikel01" oder "Artikel08" auch den jeweiligen Artikel Button zurückgesetzt wird.
Als beispiel habe ich für eine bessere Vorstellung ein kleines video auf Youtube geladen:
Desweiteren zeige ich euch gerne mein js sowie auch mein HTML des "Artikels" und des Popup's (Warenkorb).
Nun die essentielle Frage. Wie kann ich in js ein div erstellen lassen, mit jeweils einem "Remove" Button der eine eindeutige ID erhält. Damit ich den auch ansprechen kann?
Gibt es da eine Möglichkeit, ohne das ich jeden Artikel separat in den Warenkorb als div erstellen muss. Weil das hieße ich müsste alle Artikel als div erstellen lassen via js, was bei 100 Artikel beispielsweise sehr aufwändig wäre. Ebenfalls wäre ich froh das nicht mit PHP machen zu müssen (wenn möglich).
Hier der Warenkorb:
HTML Code:
<!-- Shopping cart popup --> <!-- The Modal --> <div id="myModalPopup" class="modalPopup"> <!-- Modal content --> <div class="modal-contentPopup"> <span class="closePopup">×</span> <!-- Cart --> <section class="content-section"> <h2 class="section-header">CART</h2> <div class="cart-row"> <span class="cart-item cart-header cart-column">ITEM</span> <span class="cart-price cart-header cart-column">PRICE</span> <span class="cart-quantity cart-header cart-column">QUANTITY</span> </div> <div class="cart-items"> </div> <div class="cart-total"> <strong class="cart-total-title">Total</strong> <span class="cart-total-price">$0</span> </div> <div class="button-purchase"><button class="btn-primary upCounter" type="button" id="btnReduce">PURCHASE</button></div> </section> </div> </div>
HTML Code:
<div class="shop-item"> <div class="card"> <img class="shop-item-image" src="../files/products/articles/dresser/dresser.png"> <div class="shop-item-details"> <div class="desc-background"> <span class="shop-item-title">Article 1</span> <p>Description:</p> <p class="shop-item-desc">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> <span class="shop-item-price">$12.99</span> </div> <button class="btn shop-item-button btn-color01" id="upCounter1" type="button" onclick="plus(), added1(), btnColor1()" value="Added to Cart">ADD TO CART</button> </div> </div> </div>
hier noch ein Beispiel das ich bei Stackoverflow gepostet habe:
Link:
falls jemand mehr Details / Code benötigt, bitte einfach sagen. Danke im voraus und in guter Hoffnung
Lg odbvirus
Comment