cart 相关问题

... <section id="cart" class="section-p1"> <table id="myTable" width="100%"> <thead> <tr> <td>Remove</td> <td>Image</td> <td>Product</td> <td>Price</td> <td>Quantity</td> </tr> </thead> <tbody class="cart-items"> <tr clas="cart-row"> <td class="delete"><input type="button" value="×" onclick="deleteRow(this)"></td> <td><img src="WEBpictures/ftpro shirt3.jpg" alt=""></td> <td>Red Plain Sleeves shirt</td> <td class="cart-price">$100</td> <td class="quantity"><input type="number" value="1"></td> </tr> <tr clas="cart-row"> <td class="delete"><input type="button" value="×" onclick="deleteRow(this)"></td> <td><img src="WEBpictures/ftpro shirt2.jpg" alt=""></td> <td>Red Plain Sleeves shirt</td> <td class="cart-price">$100</td> <td class="cart-quantity-input"><input type="number" value="1"></td> </tr> </tr> <tr clas="cart-row"> <td class="delete"><input type="button" value="×" onclick="deleteRow(this)"></td> <td><img src="WEBpictures/ftpro shirt4.webp" alt=""></td> <td>Red Plain Sleeves shirt</td> <td class="cart-price">$100</td> <td class="cart-quantity-input"><input type="number" value="1"></td> </tr> </tbody> </table> </section> <section id="cart-add"> <div id="coupon"> <h3>Apply Coupon</h3> <div> <input type="text" placeholder="Enter your coupon"> <button class="normal">Apply</button> </div> </div> <div id="subtotal"> <h3>Cart Total</h3> <table> <td>Shipping</td> <td>Free</td> </tr> <tr> <td><strong>Total</strong></td> <td class="cart-total">$300.00</td> </tr> </table> 这是我的 HTML 代码，我希望能够删除一个项目并更新总价。函数删除行（r）{ 变种我= r.parentNode.parentNode.rowIndex; document.getElementById("myTable").deleteRow(i); } 这是我的 Javascript 代码，我只能从购物车中删除商品，但还没有想出更新总数你的问题的答案是：首先读取总价去掉$符号以便能够将其转换为数字然后从中减去移除的项目价格，要保留小数点，您需要使用 toFixed(2) 方法，计算后在总价中再次加上您的$符号这里是如何做到这一点： function deleteRow(r) { const cartTotalEl = document.querySelector('.cart-total'); var i = r.parentNode.parentNode.rowIndex; document.getElementById("myTable").deleteRow(i); let sum = Number(cartTotalEl.textContent.replace('$','')) - Number(r.parentNode.parentNode.querySelector('.cart-price').textContent.replace('$','')) cartTotalEl.textContent = `$ ${sum.toFixed(2)}` } <section id="cart" class="section-p1"> <table id="myTable" width="100%"> <thead> <tr> <td>Remove</td> <td>Image</td> <td>Product</td> <td>Price</td> <td>Quantity</td> </tr> </thead> <tbody class="cart-items"> <tr clas="cart-row"> <td class="delete"><input type="button" value="×" onclick="deleteRow(this)"></td> <td><img src="WEBpictures/ftpro shirt3.jpg" alt=""></td> <td>Red Plain Sleeves shirt</td> <td class="cart-price">$100</td> <td class="quantity"><input type="number" value="1"></td> </tr> <tr clas="cart-row"> <td class="delete"><input type="button" value="×" onclick="deleteRow(this)"></td> <td><img src="WEBpictures/ftpro shirt2.jpg" alt=""></td> <td>Red Plain Sleeves shirt</td> <td class="cart-price">$100</td> <td class="cart-quantity-input"><input type="number" value="1"></td> </tr> </tr> <tr clas="cart-row"> <td class="delete"><input type="button" value="×" onclick="deleteRow(this)"></td> <td><img src="WEBpictures/ftpro shirt4.webp" alt=""></td> <td>Red Plain Sleeves shirt</td> <td class="cart-price">$100</td> <td class="cart-quantity-input"><input type="number" value="1"></td> </tr> </tbody> </table> </section> <section id="cart-add"> <div id="coupon"> <h3>Apply Coupon</h3> <div> <input type="text" placeholder="Enter your coupon"> <button class="normal">Apply</button> </div> </div> <div id="subtotal"> <h3>Cart Total</h3> <table> <td>Shipping</td> <td>Free</td> </tr> <tr> <td><strong>Total</strong></td> <td class="cart-total">$300.00</td> </tr> </table> </div> 但是我不会硬编码总价，为了获得更好的功能，请保持代码动态，因此如果您决定再添加一件商品，价格也应该更新 function deleteRow(r) { var i = r.parentNode.parentNode.rowIndex; document.getElementById("myTable").deleteRow(i); updateTotalPrice(); // call function to update the total price} function updateTotalPrice() { var cartItems = document.getElementsByClassName("cart-row"); var total = 0; for (var i = 0; i < cartItems.length; i++) { var priceElement = cartItems[i].getElementsByClassName("cart-price")[0]; var quantityElement = cartItems[i].getElementsByClassName("quantity")[0].getElementsByTagName("input")[0]; var price = parseFloat(priceElement.innerText.replace("$", "")); var quantity = quantityElement.value; total += price * quantity; } document.getElementsByClassName("cart-total")[0].innerText = "$" + total.toFixed(2);}

javascript html css e-commerce cart

回答 2 投票 0

在 WooCommerce 购物车页面的每个产品下方添加运输类别

我已经为我的产品配置了运输类别。但我想将它们显示在购物车页面中每个产品的下方。是这样的：这可以通过编辑 PHP 来完成吗？

php wordpress woocommerce cart

回答 2 投票 0

为什么 state.length 在 react-redux 中不起作用

我想在 redux 中将产品添加到我的购物车，但是当我添加 state.length 时，页面根本不显示。显示的错误是长度未定义我尝试删除 state.length 和页面出现

react-redux e-commerce cart

回答 0 投票 0

Woocommerce - 仅为购物车中具有特定属性的产品设置最小数量和步骤

我正在一个销售葡萄酒的 woocommerce 网站上工作。我只想为具有特定属性的产品设置多次购买价值（步骤）。每种产品都装在瓶中出售...