#javascript #html #css #e-commerce #webstore
Вопрос:
Я разрабатываю веб-магазин, и когда я добавляю товар из band.html в свою корзину я получаю два экземпляра одного продукта, и это также приводит к неправильному расчету промежуточного итога и общей суммы на cart.html страница. Кроме того , это откладывает мой дизайн, так как эти продукты добавляются выше названия продукта, названия, цены, которые я создал на cart.html страница.
Проблема в том, что всякий раз, когда я добавляю продукт из band.html файл , нажав кнопку «Добавить в корзину», он добавляет два экземпляра одного и того же продукта, и часть расчета также дает неправильные ответы, т. Е. промежуточный итог и общую цену всех продуктов. Расчет продукта производится в cart.js файл в функции updateCartTotal. Я вызываю эту функцию в конце всех функций в cart.js файл, чтобы в случае каких-либо изменений в корзине общая сумма корзины оставалась обновленной.
Проблемы, с которыми я сталкиваюсь, заключаются в следующем:
- Два экземпляра продукта band добавляются в cart.html страница каждый раз, когда нажимается кнопка «Добавить в корзину» в band.html страница.(даже если кнопка нажата только один раз)
- Общая цена и промежуточная цена дают неверную сумму продуктов
- Я хочу добавить продукт в раздел «Все товары» в cart.html но он не позволяет мне этого сделать.
это тот самый cart.html файл
<!DOCTYPE html>
<!-- Cart items details section -->
<div class="small-container cart-page">
<table>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Subtotal</th>
</tr>
<div class="all-items">
<script type="text/javascript" src="cart.js">
function addItemToCart(title, price, imageSrc) {
var cartItems = document.getElementsByClassName('all-items')[0]
var cartRow = document.createElement('div')
cartRow.classList.add('cart-row')
var cartRowContents = `
<table class="all-items">
<tr class="cart-row">
<td>
<div class="cart-info">
<img src="${imageSrc}">
<div>
<p>${title}</p>
<small>${price}</small>
<br>
<button class="btn btn-danger" type="button">Remove</button>
</div>
</div>
</td>
<td><input class="cart-quantity-input" type="number" value="1"></td>
<td class="cart-price">${price}</td>
</tr>
`
cartRow.innerHTML = cartRowContents
cartItems.append(cartRow)
cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
}
</script>
</div>
</table>
<div class="total-price">
<table>
<tr>
<td>Subtotal</td>
<td class="cart-subtotal-price">₹0</td>
</tr>
<tr>
<td>Tax</td>
<td>18%</td>
</tr>
<tr>
<td id="total">Total</td>
<td class="cart-total-price">₹0</td>
</tr>
<tr>
<td><button class="btn btn-purchase" id="checkout" onclick="clk()">Checkout</button></td>
<script>
function clk(){
window.localStorage.clear();
}
</script>
</tr>
</table>
</div>
</div>
<!-- script for cart functioning -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
<script src="cart.js"></script>
это тот самый cart.js файл и продукты-это массив, содержащий sn (для серийного номера типа числа), название (которое является названием продукта строкового типа), цену (цену продукта числового типа), imageSrc (хранит исходное местоположение файла изображения и имеет строковый тип) и количество (хранит количество продукта числового типа и инициализируется -1 для всех продуктов).
if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded', ready)
} else {
ready()
}
function ready() {
var removeCartItemButtons = document.getElementsByClassName('btn-danger')
for (var i = 0; i < removeCartItemButtons.length; i ) {
var button = removeCartItemButtons[i]
button.addEventListener('click', removeCartItem)
}
var quantityInputs = document.getElementsByClassName('cart-quantity-input')
for (var i = 0; i < quantityInputs.length; i ) {
var inputs = quantityInputs[i];
inputs.addEventListener('change', quantityChanged)
}
addToCartClicked()
if (document.getElementById('checkout') != null) {
document.getElementById('checkout').addEventListener('click', checkoutClicked)
}
}
function removeCartItem(event) {
var buttonClicked = event.target
buttonClicked.parentElement.parentElement.parentElement.parentElement.remove()
updateCartTotal()
}
function quantityChanged(event) {
var inputs = event.target
// to check if the value is a number or not
if (isNaN(inputs.value) || inputs.value <= 0) {
inputs.value = 1
}
updateCartTotal()
}
function addToCartClicked(event){
var fl = 0;
var i;
outer: for (i = 0; i < 13; i ) {
fl = 0;
var q = JSON.parse(localStorage.getItem(i));
for (var j = 0; j < 13; j ) {
if (products[j].sn == q) {
fl = 1;
break outer
}
}
}
if( fl == 1)
{
addItemToCart(products[i].title, products[i].price, products[i].imageSrc)
updateCartTotal()
}
}
function checkoutClicked() {
alert("Thank you for shopping with us.")
var cartItems = document.getElementsByClassName('all-items')[0]
while (cartItems.hasChildNodes()) {
cartItems.removeChild(cartItems.firstChild)
}
updateCartTotal()
}
function updateCartTotal() {
var cartItemContainer = document.getElementsByClassName('cart-row')
var total = 0;
for (var i = 0; i < 13; i ) {
var q = JSON.parse(localStorage.getItem(i));
for (var j = 0; j < 13; j ) {
if (products[j].sn == q) {
for (var k = 0; k < cartItemContainer.length; k ){
var cartRow = cartItemContainer[k];
var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
var quantityFinal = quantityElement.value;
total = total products[j].price * quantityFinal;
}
}
}
}
document.getElementsByClassName('cart-subtotal-price')[0].innerText = "₹" total
total = total (total * 0.18);
total = Math.round(total * 100) / 100
document.getElementsByClassName('cart-total-price')[0].innerText = "₹" total
}
this is the band.html file from which I add the product and send it to cart.html file
<!-- Single product details section -->
<div class="small-container single-product shop-item">
<div class="row">
<div class="col-2">
<img class="shop-item-image" src="images/exclusive.png" width="100%" id="ProductImg">
</div>
<div class="all-items">
<div class="col-2 shop-item-detail cart-row" id="cart">
<p>Exclusive / Smart Band</p>
<h1 class="shop-item-title cart-item-title">Smart Band 4</h1>
<h4 class="shop-item-price cart-price">₹3299</h4>
<input class="cart-quantity-input" id="qt" type="number" value="1">
<a href="#" class="btn shop-item-button" onclick="clicked()">
<script>
function clicked(){
var sn = 12;
var qty = document.getElementsByClassName('shop-item')[0];
var qq = qty.getElementsByClassName('cart-quantity-input')[0].value;
localStorage.setItem(sn, qq);
window.location.replace("cart.html");
}
</script>
Add to Cart</a>
<h3>Product Details <i class="fa fa-indent" aria-hidden="true"></i></h3>
<br>
<p>Mi Smart Band 4 features a large 0.94-inch AMOLED Color Display, 20 Days Battery life,
5ATM Water Resistance, Music Control, Unlimited Watch Faces and is
compatible with both Android and iOS.
</p>
</div>
</div>
</div>
</div>