Блог

Главная - Вопросы по программированию - как добавить кнопку «Удаленный товар» в мою корзину?

как добавить кнопку «Удаленный товар» в мою корзину?

#javascript #html #css

Вопрос:

В настоящее время я обучаюсь в качестве веб-разработчика и в настоящее время занимаюсь проектом сайта электронной коммерции. Я добился довольно хорошего прогресса, но столкнулся с проблемой-кнопкой «удалить статью». Я попробовал несколько методов, но ни один из них не увенчался успехом, я хотел бы, чтобы при нажатии на мою кнопку статья удалялась из локального хранилища, а также со страницы моей корзины покупок. вот мой код :

 if (productLocalStorage === null) {
  panierVide.innerHTML = '<p class="text-center">Le panier est vide !</p>';
  //sinon
} else {
  const table = document.getElementById("cart-tablebody"); //récupétation de l'élément qui contiendra nos articles

  productLocalStorage.forEach((element) => {
    // pour chaque éléments de mon local Storage
    let ligne = document.createElement("tr"); //Création d'une balise 'tr'

    ligne.innerHTML =
      //ces balises contiendront :
      `
            <td class="productName">${element.name}</td>
            <td>${element.color}</td>
            <td><input type="number" id="quantity" min="1" value="${element.quantity}"></td>
            <td class="prix">${element.price}</td>  
            <button id="sup" onclick="deleteProductEventHandler('${element.name}')">Supprimer</button>
            `;
    table.appendChild(ligne); // ajout de nos balises 'tr' à notre élément 'table'

    prixCalculer.push(element.price); //Envoie les prix de nos articles au tableau "prixCalculer"
  });
}

Ответ №1:

Это небольшое решение для вашего варианта использования. если вы учитесь, то лучше пересмотреть шаблоны проектирования разработки.

Я настоятельно рекомендую вам это

https://addyosmani.com/resources/essentialjsdesignpatterns/book/

 function ShopingCard(node) {
  const tbody = node.querySelector('tbody');
  
  function load() {
    const rawData = localStorage.getItem('products');
    if (rawData) {
      JSON.parse(rawData).reduce(createProductRow, tbody);
    }
  }
  
  function createProductRow(container, row) {
    const tr = document.createElement('tr');
    const name = document.createElement('td');
    const price = document.createElement('td');
    const action = document.createElement('td');

    const button = document.createElement('button');


    name.innerText = row.name;
    price.innerText = row.price;
    button.innerText = 'Delete';

    button.onclick = function () {
      tr.remove();
      remove(row.name);
    }

    tr.appendChild(name);
    tr.appendChild(price);
    tr.appendChild(action);
    action.appendChild(button);
    container.appendChild(tr);
    
    return container;
  }
  
  function remove(productName) {
    const rawData = localStorage.getItem('products');
    if (!rawData) { return; }
    const products =  JSON.parse(rawData);
    // you may want to filter by id
    localStorage.setItem('products', JSON.stringify(products.filter(product => {
      return product.name !== productName;
    })));
  }
  
  function add(data) {
    let products = [];
    const rawData = localStorage.getItem('products');
    
    if (rawData) {
      products = JSON.parse(rawData);
    }
    
    createProductRow(tbody, data);
    products.push(data);
    localStorage.setItem('products', JSON.stringify(products));
  }
  
  load();
  return {
    add
  }
}
localStorage.setItem('products', JSON.stringify([{
  name: 'Product A',
  price: 14
}, {
  name: 'Product B',
  price: 16
}, {
  name: 'Product C',
  price: 17
}]));
const card = ShopingCard(document.querySelector('table')); 
 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <td>Name</td>
        <td>Price</td>
        <td></td>
      </tr>
    </thead>
    <tbody>
      
    </tbody>
  </table>
</body>
</html>
Метки: