Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Подсчитать сумму заказ исходя из цены и количества (https://javascript.ru/forum/events/66058-podschitat-summu-zakaz-iskhodya-iz-ceny-i-kolichestva.html)

smart-create 22.11.2016 22:29

Подсчитать сумму заказ исходя из цены и количества
 
Добрый вечер, уважаемые знатоки!
Прошу помочь мне найти способ сосчитать сумму заказа в корзине товаров.
Схема проста, есть корзина, у каждого товара в ней есть поля: "Цена", "Количество", "Сумма" и "Сумма всего заказа", для наглядности вот изображение:
https://srv109-h-st.jino.ru/download...2Fjs-forum.jpg

Вот разметка краткая разметка корзины:
<div class="wrapper">
	<header>
		<div class="row cart-result">
			<div class="col-lg-4 col-md-4 col-sm-5 hidden-xs text-center cart-color-1">
				<span id="head-cart">К оплате: </span><h2 сlass="result-summa">0</h2><span> грн</span> // здесь вместо "0" должна выводиться итоговая стоимость всех товаров в корзине с учетом количества
			</div>
		</div>
	</header>
	<div class="body">
		<div class="col-lg-2 col-md-2 col-sm-2 hidden-xs">
			<h2 class="cost-ed">0</h2><span> грн/шт</span> // здесь вместо "0" указанна цена за единицу товара (данное значение выводиться из БД)
		</div>
		<div class="col-lg-2 col-md-2 col-sm-2 hidden-xs number-update">
			<h2>
				<span class="valueNumber">0</span> // здесь вместо "0" указанно количество (данное значение выводиться из БД)
			</h2>
		</div>
		<div class="col-lg-2 col-md-2 col-sm-2 hidden-xs">
			<h2><?=$getName["cost"];?></h2><span> грн</span> // здесь вместо "0" должен выводиться результат подсчета: "цена * на количество товара", то есть сумма
		</div>
	</div>
</div>


Я уже достаточно долгое время борюсь с этой задачей, но пока особых успехов не добился, потому как слабоват в синтаксисе JS.
Лучший результат которого я смог достичь самостоятельно это функции-монстр из 53 строчек, которая полна костылей и обсчитывает только один товар, а если в корзину добавить еще товар то она начинает вытягивать все значение подряд без разбору и получается кошмар.
Я имею огромное желание быстрее решить данную задачу и заполнить пробелы в своих знаниях касаемо JS. Прошу поделиться со мной своими знаниями и практическим опытом, всех кого заинтересовала данная тема.

Заранее благодарен за любую помощь!:)

laimas 23.11.2016 01:43

Цитата:

Сообщение от smart-create
слабоват в синтаксисе JS

А почему именно JS должен считать, если этим должен заниматься та сторона, которая хранит саму корзину?

Если данные корзины у сервера (сессия/база), то по запросу корзины сервер строит ее html-код. Какая проблема сразу все и просчитать?

Если данные корзины у клиента (куки/локальное хранилище), то по запросу корзины клиент строит ее html-код. Какая проблема сразу все и просчитать?

А вот, если, пользователь изменяет количество товаров в корзине и при этом нужно отобразить и итоговую сумму изменений, тогда (без Ajax) при любом раскладе этим должен заниматься клиент.

smart-create 23.11.2016 15:32

laimas, Спасибо Вам большое я об этом не подумал совсем, так и сделаю, сосчитаю все на сервере.

smart-create 25.11.2016 15:52

Добрый день! Хотел бы возобновить тему, данную тему. Я сделал так как мне и посоветовал laimas, сосчитал все значения, которые мне были нужны, на сервере. НО все же есть одно значение, которое на сервере сосчитать невозможно? если быть точнее то возможно конечно, но не целесообразно.

Для наглядности попрошу взглянуть на этот скрин-шот:


Как видите, я выделил в верхнем правом углу, значение "К оплате". Оно должно формироваться из сумы всех значений содержавшихся в столбце "СУММА". То есть на примере данного скриншота, Значение в графе оплата должно состоять из 32 997 + 29 997 и должно равняться 62 994.

Вот разметка графы "К оплате":
<div class="col-lg-4 col-md-4 col-sm-5 hidden-xs text-center cart-color-1">
	<span id="head-cart">К оплате: </span>
        <h2 class="summa_result">123</h2> // вместо 123 должно быть 62 994 (если рассматривать значения на скриншоте)
        <span> грн</span>
</div>


А вот разметка графы "СУММА":
<div class="col-lg-2 col-md-2 col-sm-2">
	<h2 class="clac_summa"><?=number_format($getName["summa"],0,',',' ');?></h2> // здесь "<?=number_format($getName["summa"],0,',',' ');?>" выводит из таблицы значение суммы, в моем примере это 32 997 и/или 29 997 (имеется в виду что по запросу к корзине, сервер сам строит ее html-код и таких блоков как этот будет столько же сколько и товаров, соответственно у каждого своя сумма)
        <span>грн</span>
</div>


Если перевести требуемый js-код в "людской" язык, то мне нужно:
1) Определить все числовые значения содержащиеся в блоках с классом "clac_summa";
2) Суммировать их;
3) Вывести полученный результат в блок с классом "summa_result"

Я уже писал что слабоват еще в js. По этому прошу помочь с реализаций данного алгоритма, ибо у самого получается полная ерунда

Заранее благодарен за любую помощь

Dilettante_Pro 25.11.2016 18:02

<div class="col-lg-4 col-md-4 col-sm-5 hidden-xs text-center cart-color-1">
	<span id="head-cart">К оплате: </span>
        <h2 class="summa_result"></h2> 
        <span> грн</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
	<h2 class="clac_summa">32997</h2>
        <span>грн</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
	<h2 class="clac_summa">29997</h2>
        <span>грн</span>
</div>
<script>
 var items = document.querySelectorAll('.clac_summa'),
      summa = 0;
  [].forEach.call( items, function(el) {
       summa += +el.innerText;
});
 document.querySelector('.summa_result').innerText = summa;
</script>

smart-create 27.11.2016 13:52

Dilettante_Pro, Спасибо огромное за помощь. Все работает, но есть еще одна недоработка, она собственно возникла из-за того что я не описал все картину целиком(

Если Вы посмотрите на скрин шот, увидите там графу "Количество" и кнопки "+" и "-", она соответственно добавляют либо уменьшают это количество. Графа "СУММА", соответственно тоже либо уменьшается либо увеличивается в зависимости от значения в графе "Количество".

То есть алгоритм который вложен в скрипт должен обновлять конечное значение каждый раз когда мы нажимаем на кнопку + или -

Я Пытаюсь сейчас самостоятельно решить эту проблему, но если Вас не затруднит попросил бы помочь

laimas 27.11.2016 16:31

Оформите вам предложенное функцией, к которой обращайтесь после изменения количества и после изменения суммы за новое количество.

smart-create 27.11.2016 16:56

laimas, я прошу прощения, но я не понимаю :(
Вернее, я понимаю о чем вы говорите, но как это оформить, увы не доходит, могли бы хотя бы примерно показать?

laimas 27.11.2016 17:30

Чтобы примерно показать, нужно иметь не примерную корзину, а действительную.

Посмотрите на html-код своей корзины - это не форма, после внесения изменений в которую (того же количества товара) эти изменения можно отослать серверу. Если корзина храниться на сервере, по запросу клиента ее отдает сервер, а клиент ее запрашивает и для редактирования в том числе, то сервер должен знать какие изменения в ней произошли. А это можно сделать только отправив форму после всех изменений в корзине, либо все все изменения в корзине, это Ajax запросы к серверу, который изменяет данные в самой корзине и возвращает результат. В последнем случае все просчеты на клиенте можно не делать, это может делать и сервер.

У вас нет в коде ни того, ни другого. Поэтому затруднительно что-то показать даже примерно.

sovsem-nub 04.12.2016 23:58

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


Часовой пояс GMT +3, время: 04:45.