Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.11.2016, 22:29
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

Подсчитать сумму заказ исходя из цены и количества
Добрый вечер, уважаемые знатоки!
Прошу помочь мне найти способ сосчитать сумму заказа в корзине товаров.
Схема проста, есть корзина, у каждого товара в ней есть поля: "Цена", "Количество", "Сумма" и "Сумма всего заказа", для наглядности вот изображение:
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. Прошу поделиться со мной своими знаниями и практическим опытом, всех кого заинтересовала данная тема.

Заранее благодарен за любую помощь!
Ответить с цитированием
  #2 (permalink)  
Старый 23.11.2016, 01:43
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от smart-create
слабоват в синтаксисе JS
А почему именно JS должен считать, если этим должен заниматься та сторона, которая хранит саму корзину?

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

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

А вот, если, пользователь изменяет количество товаров в корзине и при этом нужно отобразить и итоговую сумму изменений, тогда (без Ajax) при любом раскладе этим должен заниматься клиент.
Ответить с цитированием
  #3 (permalink)  
Старый 23.11.2016, 15:32
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

laimas, Спасибо Вам большое я об этом не подумал совсем, так и сделаю, сосчитаю все на сервере.
Ответить с цитированием
  #4 (permalink)  
Старый 25.11.2016, 15:52
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

Добрый день! Хотел бы возобновить тему, данную тему. Я сделал так как мне и посоветовал 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. По этому прошу помочь с реализаций данного алгоритма, ибо у самого получается полная ерунда

Заранее благодарен за любую помощь
Ответить с цитированием
  #5 (permalink)  
Старый 25.11.2016, 18:02
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

<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>
Ответить с цитированием
  #6 (permalink)  
Старый 27.11.2016, 13:52
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

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

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

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

Я Пытаюсь сейчас самостоятельно решить эту проблему, но если Вас не затруднит попросил бы помочь
Ответить с цитированием
  #7 (permalink)  
Старый 27.11.2016, 16:31
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Оформите вам предложенное функцией, к которой обращайтесь после изменения количества и после изменения суммы за новое количество.
Ответить с цитированием
  #8 (permalink)  
Старый 27.11.2016, 16:56
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

laimas, я прошу прощения, но я не понимаю
Вернее, я понимаю о чем вы говорите, но как это оформить, увы не доходит, могли бы хотя бы примерно показать?
Ответить с цитированием
  #9 (permalink)  
Старый 27.11.2016, 17:30
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

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

У вас нет в коде ни того, ни другого. Поэтому затруднительно что-то показать даже примерно.
Ответить с цитированием
  #10 (permalink)  
Старый 04.12.2016, 23:58
Аватар для sovsem-nub
Профессор
Отправить личное сообщение для sovsem-nub Посмотреть профиль Найти все сообщения от sovsem-nub
 
Регистрация: 15.10.2014
Сообщений: 255

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выбор цены от количества sforce Ваши сайты и скрипты 1 21.12.2015 14:08
Нужен простой JS (смена количества + смена цены) RadCor Работа 1 27.04.2015 00:53
Нужен простой JS 500 руб (смена количества + смена цены) RadCor Работа 9 27.04.2015 00:45
Динамическое изменение цены при изменении количества товара MrNix21 Элементы интерфейса 9 08.12.2013 21:47
Подсчитать сумму igsavenko Общие вопросы Javascript 1 17.08.2010 16:25