Как в корзине вывести общую сумму заказа?

Question

[jitcompany]

function showCart() {
    //вывод корзины
    if (!isEmpty(cart)) {
        $('.main-cart').html('<center><h3>Корзина пуста!</h3></center>');
    }
    else {
        $.getJSON('goods.json', function (data) {
            var goods = data;
            var out = '';
            for (var id in cart) {
			out += '<div class="item2">'
				out += '<div class="buttons">'
					out += `<span data-id="${id}" class="del-goods delete-btn"></span>`;
				out += '</div>'	
				out += '<div class="image">'
					out += `<img src="images\\${goods[id].img}" width="70px">`;
				out += '</div>'	
				out += '<div class="description2">'
					out += `<span><a href="goods.html#${[id]}"> ${goods[id].name  }</a></span>`;
				out += '</div>'
				out += '<div class="quantity">'
				  out += '<button class="plus-btn" data-art="'+id+'">'
					out += '<img src="plus.svg" alt="" />'
				  out += '</button>'
				  out += `<input type="text" name="name" value="${cart[id]  }">`;
				  out += '<button class="minus-btn" data-art="'+id+'">'
					out += '<img src="minus.svg" alt="" />'
				  out += '</button>'
				out += '</div>'	
				out += '<div class="total-price">'
					out += cart[id]*goods[id].cost;
					out += '€'
				out += '</div>'
			out += '</div>'
                out += '<br>';
            }
            $('.main-cart').html(out);
            $('.del-goods').on('click', delGoods);
			$('.plus-btn').on('click', plusGoods);
			$('.minus-btn').on('click', minusGoods);
				
		function plusGoods(){
        var articul = $(this).attr('data-art');
        cart[articul]++;
        saveCart(); //сохраняю корзину в localStorage
        showCart();
		}
		function minusGoods(){
        var articul = $(this).attr('data-art');
        if (cart[articul]>1) {
            cart[articul]--;
        }
        else {
            delete cart[articul];
        }
        saveCart();//сохраняю корзину в localStorage
        showCart();
		}
        });
    }
}

Вот собственно сам скрипт cart.js в котором идет вывод товара, его кол-во, и общую сумму по товару

Как сделать, чтобы в корзине подсчитал общую сумму по всем товарам??

Comments

[shmatuan]

Для начала - это мультистрока:

var html = `
  <div>
    <span>Some HTML here ${someVar}</span>
  </div>
`;

Answer 1

[jitcompany]

В данный момент помощи нигде не нашел
Подскажите, что тут не так?

function totalcart (){
			  var total = '0';			  
			      total = total + cart[id]*goods[id].cost;				
			saveCart();
			showCart();			  
			}

$('.total-cart').html(total);

Comments

[Артем Андреев]

Функция ничего не возвращает.

И total это локальная переменная, ее не видно снаружи

[Валерий Чёрный]

out += '<button class="plus" data-id="' + [key] + '">+</button>';
                out += '<span class="sum">' + cart[key]*goods[key].cost + '₴</span>';
                out += '</div>';
                allsum = (cart[key] * goods[key].cost) + allsum;
            }
            out += '<span class="allsum">Всього:' + allsum + '₴</span>';
            $('.order').html(out);
            $('.del').on('click', delGoods);
            $('.plus').on('click', plusGoods);

Answer 2

[Dimd13]

Если в массиве cart есть количество и ценник за шт. то можно через Array.map() посчитать

let cart = [{
	qty: 2, //количество
	cost: 5, //ценник за шт.
},{
	qty: 2,
	cost: 5,
},{
	qty: 1,
	cost: 5,
},];

let total = 0;

cart.map((item)=>{
  return total = total + (item.qty * item.cost);
})

// total = 25

Comments

[jitcompany]

а вывод в html файл, как осуществить?
$('.total-cart').html(total); ??

[dbewedb]

через reduce логичнее

total = cart.reduce((acc, item) => {acc + (item.qty * item.cost)}, 0)

[Dimd13]

dbewedb, вы хоть проверяйте свой код перед тем как писать. Без return оно работать не будет.

//так будет работать
total = cart.reduce((acc, item) =>  acc + item.qty*item.cost, 0)
//и так будет работать
total = cart.reduce((acc, item) =>  {return acc + item.qty*item.cost}, 0)

[dbewedb]

Dimd13, я извиняюсь) на coffee пишу в основном

Answer 3

[Эмиль Рахматуллин]

Усложнил...))
Используй плагин angry-cart.js. Он на чистом JS + содержит всё необходимое. Даже считает сумму, да