Общая сумма товаров в корзине JS

@AnthonyS · Регистрация: 28.01.2019

Author24 — интернет-сервис помощи студентам

Здравствуйте! На страницу корзины динамически выводятся товары при помощи PHP скрипта. Для подсчета общей стоимости товара нашел пример JS скрипта, немного переделал под себя. Проблема в том что в итоговой стоимости отображается цена только первого добавленного товара. Предполагаю, что это из-за того, что товары выводятся на страницу динамически. Подскажите, пожалуйста, как можно все таки преобразовать скрипт для того, чтобы суммировались цены всех добавленных товаров.

Вывод товаров на экран:

PHP/HTML

         <section class="cart_container">
        <div class="items_cont">
            <?php if ($_SESSION['cart']){
                 foreach ($_SESSION['cart'] as $item) {
                    echo '<div class="item_container"> 
                    <div class="cart_item">
                    <img src="'.$item['image'].'" alt="" class="cart_img_item">
                    <p class="cart_item_name">'.$item['name'].'</p>
                    </div> 
                    <div class="kolvo">
                    <button class="cart_kolvo_b">-</button>
                    <p class="cart_kolvo_t">'.$item['qty'].'</p>
                    <button class="cart_kolvo_b">+</button>
                    </div>
                    <input type="hidden" class="item_f_cost" value="'.$item['price'].'">
                    <p class="item_price" value="'.$item['price'].'">от '.$item['price'].'₽</p>
                    <a href="del_item.php" class="delete_item">
                    <img src="./Img/Cross.svg" alt="">
                    </a>
                    </div>
                ';}
                 } 
 
            else {
                echo"Корзина пуста";
            }
 
            ?>
 
            <hr>
        </div>
    </section>
    
    <section class="final_price_cont">
        <div class="cart_final_price">
            <h1 class="final_price_h">Примерная итоговая стоимость:</h1>
            <p class="final_price_p">от <span id="total-price" ></span> ₽</p>
        </div>
    </section>
 
            ?>

JS скрипт:

Javascript

const init = () => {
    let totalCost = 0;
 
    [...document.querySelectorAll('.cart_container')].forEach((basketItem) => {
        totalCost += Number(basketItem.querySelector('.item_f_cost').value);
    });
 
    document.getElementById('total-price').textContent = totalCost;
};
 
init();

@DrType · 23.04.2022, 11:22

Javascript

1	[...document.querySelectorAll('.item_container')].forEach((basketItem) => {})

@AnthonyS · 23.04.2022, 11:52 **[ТС]**

Спасибо!

@AnthonyS 0 / 0 / 0 Регистрация: 28.01.2019 Сообщений: 28
	23.04.2022, 11:52 [ТС]	3
	Спасибо! 0

Общая сумма товаров в корзине JS

Решение