如何将已删除项目按钮添加到我的购物车？
[英]how Add a deleted item button to my cart?
问题描述
I am currently in training as a web developer, and I am currently on an e-commerce site project.
我目前正在接受 web 开发人员的培训，我目前正在从事电子商务网站项目。 I have made rather good progress, but I find myself facing a problem, the button "delete the article".我取得了不错的进展，但我发现自己面临一个问题，“删除文章”按钮。 I tried several methods, but none was successful, I would like that when clicking on my button, the article is deleted from the local storage as well as on my shopping cart page.我尝试了几种方法，但都没有成功，我希望当点击我的按钮时，文章会从本地存储以及我的购物车页面中删除。 here is my code:这是我的代码：
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 个解决方案
解决方案1
0 2021-04-09 16:04:10
This is a small solution for your use case.这是您的用例的一个小解决方案。 if you are learning it is better to review development design patterns.如果您正在学习，最好回顾一下开发设计模式。
I strongly recommend you this我强烈推荐你这个
https://addyosmani.com/resources/essentialjsdesignpatterns/book/ 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.