Dobry Wieczór,
Mam w koszyku pare elementów. Stworzyłem sobie funkcje, która po zmianie ilośći zmienia mi cene danego produktu.
i wszytko śmiga, ale mam problem z ceną całkowitą koszyka, jak moge ją wyświetlić prawidłowo po zmianie ilości produktu?.
Poniżej kod, który odpowiedzialny jest za zmiane ilośći i ceny.
const selectQuantinity = (e) => {
let option = e.target.value;
let selectId = e.target.getAttribute("data-id");
let currentSelect = e.target.previousElementSibling;
const matchIdSelect = pricesAndIdObjArray.filter((item) => {return item.itemId === selectId});
if (matchIdSelect) {
const currentPrice = matchIdSelect.map((item) => {return item.itemPrice * option});
currentSelect.innerHTML = `${currentPrice}$`;
}
}
quantinitySelect.forEach((option) => {option.addEventListener('click', selectQuantinity)});
a tutaj kod Ceny za cały koszyk
const productPrices = [];
const productPricesData = document.querySelectorAll('[data-price]').forEach((price) => {
productPrices.push(price.getAttribute('data-price'));
});
const pricesToNum = productPrices.map((price) => {return price = +price});
let sum = 0;
const sumPrices = () => {
pricesToNum.forEach((item) => {return sum+=item});
totalPriceOfCartItems.innerHTML = `${sum}$`;
}
sumPrices()
Troche się głowie nad tym i już nie jestem w stanie nic wymyśleć, jak moge currentPrice podmieniac w pricesToNum ? i czy tutaj to coś da ?
Cały kod :
import { changeValueOfCounter } from "./utils.js";
const getCartProducts = async () => {
const response = await fetch('https://fakestoreapi.com/products');
const products = await response.json();
return products;
};
const showCartProducts = async () => {
const cartContainer = document.querySelector('.cart_container');
let products = [];
try {
products = await getCartProducts();
} catch (e) {
console.log(e)
}
let cartProductsID = (JSON.parse(localStorage.getItem('cartArray'))) || [];
const currentCartProducts = products.filter(product => cartProductsID.some(item => item == product.id)).map((product) => {
cartContainer.innerHTML += `
<div class="cart_container--product">
<div class="cart_product--image" >
<img src=${product.image} data-image=${product.id}>
</div>
<p class="cart_product--desc">${product.title}</p>
<div class="cart_product-price--quantinity">
<p data-price=${product.price} data-price-id=${product.id}>${product.price}$</p>
<select class="cart_select" data-id=${product.id}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<i class="fa-solid fa-trash" data-delete=${product.id}></i>
</div>
<div>`;
})
const deleteProduct = (e) => {
let deleteIconId = e.target.getAttribute("data-delete");
let deleteCurrentProduct = cartProductsID.filter((product) => { return product !== deleteIconId });
if (deleteCurrentProduct) {
cartProductsID = deleteCurrentProduct;
localStorage.setItem('cartArray', JSON.stringify(deleteCurrentProduct));
cartContainer.innerHTML = '';
showCartProducts();
changeValueOfCounter();
}
}
const cartProductDetails = document.querySelectorAll('.cart_product--image > img');
const showProductDetails = (e) => {
let productImage = e.target.getAttribute("data-image");
let url = `/product-details.html?id=${productImage}`;
window.location.href = url;
}
cartProductDetails.forEach((item) => item.addEventListener('click', showProductDetails));
const deleteBtn = document.querySelectorAll('[data-delete]').forEach((btn) => {
btn.addEventListener('click', deleteProduct);
});
const pricesAndIdObjArray = [];
const productPricesAndId = document.querySelectorAll('[data-price][data-price-id]').forEach((item) => {
pricesAndIdObjArray.push({itemId : item.getAttribute('data-price-id'), itemPrice : item.getAttribute('data-price')});
});
const quantinitySelect = document.querySelectorAll('.cart_select');
const totalPriceOfCartItems = document.querySelector(".total_price > p");
const productPrices = [];
const productPricesData = document.querySelectorAll('[data-price]').forEach((price) => {
productPrices.push(price.getAttribute('data-price'));
});
const pricesToNum = productPrices.map((price) => {return price = +price});
let sum = 0;
const sumPrices = () => {
pricesToNum.forEach((item) => {return sum+=item});
totalPriceOfCartItems.innerHTML = `${sum}$`;
}
sumPrices()
const selectQuantinity = (e) => {
let option = e.target.value;
let selectId = e.target.getAttribute("data-id");
let currentSelect = e.target.previousElementSibling;
const matchIdSelect = pricesAndIdObjArray.filter((item) => {return item.itemId === selectId});
if (matchIdSelect) {
const currentPrice = matchIdSelect.map((item) => {return item.itemPrice * option});
currentSelect.innerHTML = `${currentPrice}$`;
}
}
quantinitySelect.forEach((option) => {option.addEventListener('click', selectQuantinity)});
}
document.addEventListener('DOMContentLoaded', showCartProducts);
Miłego wieczoru :)