Goods cart

Author: dobkir

scripts/script.js

@@ -69,14 +69,75 @@ const enableScroll = () => {
 
 
 
-// =======================  Modal window  ======================= //
+
+// =======================  Product cart  ======================= //
+
+// Getting data from an array of objects
+const getLocalStorage = () => JSON?.parse(localStorage.getItem('cart-lomoda')) || [];
+
+// Storing data in an array of objects in local storage
+const setLocalStorage = data => localStorage.setItem('cart-lomoda', JSON.stringify(data));
+
+// Writting on the variable the list of goods
+const cartListGoods = document.querySelector('.cart__list-goods');
+
+// Writting on the variable the total cost
+const cartTotalCost = document.querySelector('.cart__total-cost');
+
+// The action of cart rendering
+const renderCart = () => {
+  cartListGoods.textContent = '';
+
+  const cartItems = getLocalStorage();
+
+  let totalPrice = 0;
+
+  cartItems.forEach((item, index) => {
+
+    const tr = document.createElement('tr');
+    tr.innerHTML = `
+      <td>${index + 1}</td>
+      <td>${item.brand} ${item.name}</td>
+      ${item.color ? `<td>${item.color}</td>` : '<td>-</td>'}
+      ${item.size ? `<td>${item.size}</td>` : '<td>-</td>'}
+      <td>${item.cost} &#8381;</td>
+      <td><button class="btn-delete" data-id="${item.id}">&times;</button></td>
+    `;
+
+    totalPrice += item.cost;
+
+    cartListGoods.append(tr);
+  });
+
+  cartTotalCost.textContent = totalPrice + ' ₽';
+}
+
+const deleteItemCart = id => {
+  const cartItems = getLocalStorage();
+  const newCartItems = cartItems.filter(item => item.id != id);
+  setLocalStorage(newCartItems);
+}
+
+cartListGoods.addEventListener('click', event => {
+  if (event.target.matches('.btn-delete')) {
+    deleteItemCart(event.target.dataset.id);
+    renderCart();
+  }
+});
+
+// =====================  End Product cart  ===================== //
+
+
+
+// ================  Modal window (product cart) ================ //
 
 const subheaderCart = document.querySelector('.subheader__cart');
 const cartOverlay = document.querySelector('.cart-overlay');
 
 const cartModalOpen = () => {
   cartOverlay.classList.add('cart-overlay-open');
   disableScroll();
+  renderCart();
 };
 
 const cartModalClose = () => {
@@ -105,7 +166,7 @@ document.addEventListener('keydown', event => {
   }
 });
 
-// ====================  End of Modal window  ==================== //
+// =============  End of Modal window (product cart)  ============= //
 
 
 
@@ -185,14 +246,12 @@ try {
           <h3 class="good__title">${brand} <span class="good__title__grey">/ ${name}</span></h3>
 
           <!-- Checking whether the data element has a "sizes" property? -->
-          ${sizes ?
-        `<p class="good__sizes">Размеры (RUS): <span class="good__sizes-list">${sizes.join(' ')}</span></p>` :
-        ''}
+          ${sizes ? `<p class="good__sizes">Размеры (RUS): <span class="good__sizes-list">${sizes.join(' ')}</span></p>` : ''}
 
           <a class="good__link" href="card-good.html#${id}">Подробнее</a>
       </div>
     </article>
-    `
+    `;
 
     return li;
   };
@@ -224,7 +283,7 @@ try {
   getGoods(renderGoodsList, 'category', hash);
 
 } catch (err) {
-  console.warn(err)
+  console.warn(err);
 }
 
 // ========== End od Display data response on goods.html  ========== //
@@ -246,16 +305,20 @@ try {
   const cardGoodSelectWrapper = document.querySelectorAll('.card-good__select__wrapper');
   const cardGoodColorList = document.querySelector('.card-good__color-list');
   const cardGoodSizes = document.querySelector('.card-good__sizes');
-  const cardGoodSelectList = document.querySelector('.card-good__select-list');
+  const cardGoodSizesList = document.querySelector('.card-good__sizes-list');
+  const cardGoodBuy = document.querySelector('.card-good__buy');
 
   const generatedList = data => data.reduce((html, item, index) => html +
     `<li class="card-good__select-item" data-id="${index}">${item}</li>`, '');
 
-  const renderCardGood = ([{ brand, name, cost, color, sizes, photo }]) => {
+  const renderCardGood = ([{ id, brand, name, cost, color, sizes, photo }]) => {
+
+    // Creation of an object for rendering a product cart
+    const data = { brand, name, cost, id };
 
     cardGoodImage.src = `goods-image/${photo}`;
     cardGoodImage.alt = `${brand} ${name}`;
-    cardGoodBrand.alt = brand;
+    cardGoodBrand.textContent = brand;
     cardGoodTitle.textContent = name;
     cardGoodPrice.textContent = `${cost} ₽`;
     if (color) {
@@ -268,11 +331,38 @@ try {
     if (sizes) {
       cardGoodSizes.textContent = sizes[0];
       cardGoodSizes.dataset.id = 0;
-      cardGoodSelectList.innerHTML = generatedList(sizes);
+      cardGoodSizesList.innerHTML = generatedList(sizes);
     } else {
       cardGoodSizes.style.display = 'none';
     }
 
+    if (getLocalStorage().some(item => item.id === id)) {
+      cardGoodBuy.classList.add('delete');
+      cardGoodBuy.textContent = 'Удалить из корзины';
+    }
+
+    // Sending values to the goods cart
+    cardGoodBuy.addEventListener('click', () => {
+      if (cardGoodBuy.classList.contains('delete')) {
+        deleteItemCart(id);
+        cardGoodBuy.classList.remove('delete');
+        cardGoodBuy.textContent = 'Добавить в корзину';
+        return;
+      }
+
+      if (color) data.color = cardGoodColor.textContent;
+      if (color) data.size = cardGoodSizes.textContent;
+
+      cardGoodBuy.classList.add('delete');
+      cardGoodBuy.textContent = 'Удалить из корзины';
+
+      // Getting actual data from the local storage
+      const cardData = getLocalStorage();
+      // Pushing into the gettings data new data.
+      cardData.push(data);
+      // Setting new data to the local storage
+      setLocalStorage(cardData);
+    });
   };
 
   cardGoodSelectWrapper.forEach(item => {
@@ -287,7 +377,7 @@ try {
         const cardGoodSelect = item.querySelector('.card-good__select');
         cardGoodSelect.textContent = target.textContent;
         cardGoodSelect.dataset.id = target.dataset.id;
-        cardGoodSelect.classList.remove('card-good__select-item');
+        cardGoodSelect.classList.remove('card-good__select__open');
       }
     });
   });