Add template for inserting product into cart on DOM

w3dd1e · Nov 19, 2023 · 82bbe30 · 82bbe30
1 parent bcb3d1a
commit 82bbe30
Showing 1 changed file with 35 additions and 0 deletions.
diff --git a/front/js/cart.js b/front/js/cart.js
@@ -7,3 +7,38 @@ let cartStoredProduct = Object.keys(sessionStorage);
 let cartStoredQtys = Object.values(sessionStorage);
 let product ={};
 let productID = "";
+
+
+
+    let newProductCard = `
+    <article class="cart__item" data-id="${product.id}" data-color="${product.color}">
+    <div class="cart__item__img">
+      <img src="${productData[product.id].imageUrl}" alt="${productData[product.id].altTxt}">
+    </div>
+    <div class="cart__item__content">
+      <div class="cart__item__content__description">
+        <h2>Name of the product</h2>
+        <p>Green</p>
+        <p>€42.00</p>
+      </div>
+      <div class="cart__item__content__settings">
+        <div class="cart__item__content__settings__quantity">
+          <p>Quantity : </p>
+          <input type="number" class="itemQuantity" name="itemQuantity" min="1" max="100" value="42">
+        </div>
+        <div class="cart__item__content__settings__delete">
+          <p class="deleteItem">Delete</p>
+        </div>
+      </div>
+    </div>
+  </article>
+    `;
+
+    cartList.insertAdjacentHTML("beforeend", newProductCard);
+};
+
+
+
+
+
+