Senkevich00
@Senkevich00
Belarus

Как настроить добавление в корзину?

Есть массив объектов, выведен в HTML, по клику каждый добавляется к корзину, как сделать так что бы уже существующий элемент не добавлялся в корзину повторно? И как сделать кнопку очищающую корзину польностью?
spoiler
const goods = [
{
name: "car 1",
price: 100
},
{
name: "car 2",
price: 200
},
{
name: "car 3",
price: 300
}
]

const goodsInStorage = JSON.parse(localStorage.getItem("goods"));
const goodsInCart = goodsInStorage ? goodsInStorage : [];

const store = document.querySelector(".root");
const cart = document.querySelector(".cart");

const addItemFromStorage = () => {
goodsInCart.forEach((item) => {
const goodInCart = document.createElement("div")
goodInCart.innerText = `Марка ${item.name}, цена ${item.price}`;
cart.append(goodInCart)

})
}

const goodClicklHandler = (item) => {
item.addEventListener("click", function () {
cart.innerHTML = ""
const itemIndex = this.getAttribute("data-good-id")
goodsInCart.push(goods[itemIndex])

localStorage.setItem("goods", JSON.stringify(goodsInCart))

addItemFromStorage()
})
}

goods.forEach((good, index) => {
const item = document.createElement("div");
item.dataset.goodId = index;
item.innerText = `Марка ${good.name}, цена${good.price}`;
store.append(item);

goodClicklHandler(item);
});

addItemFromStorage()

  • Вопрос задан
  • 63 просмотра
Пригласить эксперта
Ответы на вопрос 1
FinGanapre
@FinGanapre
1. При добавлении в корзину проверять нет ли этого товара в корзине (У вас будут id товаров в реальном приложении, проверяйте по ним. В корзину в принципе складывают только id товаров)
2. Кнопки добавить в корзину уже не должно быть в карточке товара, если он в корзине. На её место можно вставить выбор количества товара (с мин и макс значение, вводом в ручную и + -), а также добавить кнопку удалить если отдел маркетинга не против (можно удалять выбором менее 1)
3. Очистка корзины = присвоение пустого массива. Из локала можно удалить так
4. Подобное лучше писать на фреймворках, т.к. без них придётся ручками контролировать ререндеринг интерфейса. Как минимум стоит описать это через класс.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
04 дек. 2020, в 18:23
100 руб./в час
04 дек. 2020, в 17:59
100 руб./за проект
04 дек. 2020, в 16:45
50000 руб./за проект