shopping cart, zmiana ceny za cały koszyk.

Fri, 03 Mar 2023 21:05:48 +0000

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 :)

Forum Pasja Informatyki - Najnowsze z tagiem shopping

shopping cart, zmiana ceny za cały koszyk.