Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.92/13: Рейтинг темы: голосов - 13, средняя оценка - 4.92
0 / 0 / 0
Регистрация: 31.10.2019
Сообщений: 1

Как сделать подсчет товара в корзине js?

31.10.2019, 15:22. Показов 2510. Ответов 1

Студворк — интернет-сервис помощи студентам
Добрый день я очень зеленый, сейчас стажируюсь. У меня есть задача, сделать товар и корзину в виде двух таблиц на странице. Почти все сделал, но сломал голову как мне реализовать изменение значений. То есть, что бы при клике на товар, в корзине увеличивалось кол-во товара, а в каталоге уменьшалось.Помогите пожалуйста, никак понять не могу. На картинке моя реализ



JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
let storageMock = [
    {id: 1, name: "GeForce GTX 980 Ti", price: 9790, amount: 35, amountInCart: 0},
    {id: 2, name: "GeForce GTX TITAN Black", price: 57000, amount: 54, amountInCart: 0},
    {id: 3, name: "AMD EPYC 7742", price: 133120, amount: 44, amountInCart: 0},
    {id: 4, name: "Intel Xeon W-3175X", price: 175000, amount: 23, amountInCart: 0},
    {id: 5, name: "Оперативная память Goodram 4 ГБ", price: 2456, amount: 111, amountInCart: 0},
    {id: 6, name: "Оперативная память Hyper-x 2 ГБ", price: 1456, amount: 123, amountInCart: 0}];
 
let Cart = [{ex:1}];
var Sum = 0;
var Amount = 0;
document.addEventListener("DOMContentLoaded", function() { 
  fillStorageTable(storageMock);
  changeDesc();
  
});
 
function fillStorageTable(items) {
    let storageTable = document.getElementById('storage');
    items.forEach(e => {
      let itemTR = document.createElement('tr');
      itemTR.innerHTML = `<td>${e.id}</td><td>${e.name}</td><td>${e.price}</td><td>${e.amount}</td>`
      itemTR.setAttribute('itemId', e.id);
      storageTable.append(itemTR);
      itemTR.addEventListener('click', addToCart);
    });
}
 
function addToCart(e) {
    let foundedId = e.target.parentElement.getAttribute("itemId");
    Sum += parseInt(this.childNodes[2].textContent.toString());
    document.getElementById('sum').innerHTML = Sum;
    let foundItem = changeDesc(foundedId);
    if (foundItem.amountInCart == 0) {
      let cartTR = document.createElement("tr");
      cartTR.innerHTML = `<td>${foundItem.name}</td><td>${foundItem.price}</td><td>${foundItem.amount}</td>`
      cartTR.setAttribute('id', foundItem.id);
      document.getElementById('cart').append(cartTR);
    } else {
      let bascketTR = document.getElementById(foundedId);
 
    }
    foundItem.amountInCart++;
 }
 
function changeDesc(id) {
  for (var i in storageMock) {
    if (storageMock[i].id == id) {
       return storageMock[i];
    }
  }
}
Миниатюры
Как сделать подсчет товара в корзине js?  
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
31.10.2019, 15:22
Ответы с готовыми решениями:

Как вычислить сумму товара в корзине
Как вычислить правильно на какую сумму товаров в карзине. Я создал сессию которая содержит все цены товаров которые выбрал пользователь ,...

Как узнать ID раздела товара, находящегося в корзине?
Здравствуйте. При оформлении заказа нужно проверить, товар какого раздела находится в корзине, и если товар находится в определенном...

Количества товара в корзине отображается после обновления страницы как исправить?
Добрый день! Возник такой вопрос на Virtuemart 2.0.14 при нажатии на кнопку Добавить в корзину ни чего не отображается (ни каких...

1
Эксперт JS
2037 / 1096 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
31.10.2019, 18:54
Nake141,

Дополните приведенный код html-ом и css-ом
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
31.10.2019, 18:54
Помогаю со студенческими работами здесь

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

Разные варианты товара в корзине
Есть корзина. нужно, чтоб выводились разные варианты товара в корзине при выборе их в select. То есть покупатель выбрал 1 вариант...

Нет картинки товара в корзине VirtueMart2
Добрый день. Столкнулся сегодня со следующей проблемой. В корзине не отображаются миниатюры товара. Joomla 2.5, VirtueMart 2. В...

Дублирование товара в корзине после обновления страницы
Я так понимаю это связанно с тем что запрос не закрывается , помогите разобраться http://hotchkis.bz/magazin

Баг при изменении количества товара в корзине
В общем такая проблема, при изменении количества товара с общей стоимостью происходит что-то странное. С неопределенной...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
Отображение реквизитов в документе по условию и контроль их заполнения
Maks 04.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II
kumehtar 04.04.2026
Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён
Maks 04.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .
Программный контроль заполнения реквизита табличной части документа
Maks 02.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .
wmic не является внутренней или внешней командой
Maks 02.04.2026
Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/
Программная установка даты и запрет ее изменения
Maks 02.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .
Вывод данных в справочнике через динамический список
Maks 01.04.2026
Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа
Maks 01.04.2026
Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru