Как реализовать функция запрета добавления повторного товара в корзину?

Question

Как реализовать функция запрета добавления повторного товара в корзину?

Артур Кириллов Профи (656), на голосовании 6 месяцев назад

каким способом можно реализовать функцию, чтобы при клике на товар, foreach проезжался по всем названиям карточек корзины и если совпадений названий товаров не будет, то товар добавится? У меня есть названия товара по которому произошел клик и метод foreach в конце кода.

if (el.classList.contains('main__container-product-content__burgers-btnAdd')) {

// Переменные данных карточки
const cardImg = el.parentNode.children[0].getAttribute('src')
const priceCard = el.parentNode.children[1].innerHTML
const titleCard = el.parentNode.children[2].innerHTML
const grammingCard = el.parentNode.children[3].innerHTML

containerProductCards.insertAdjacentHTML('afterbegin', `<div class="main__container-basket-products-card" data-card>
<div class="main__container-basket-products-card-img">
<img src="${cardImg}" alt="product">
</div>

<div class="main__container-basket-products-card-desc-wrapper">
<div class="main__container-basket-products-card-desc">
<h1 class="main__container-basket-products-card-desc-title">${titleCard}</h1>
<p class="main__container-basket-products-card-desc-gramming">${grammingCard}</p>
<p class="main__container-basket-products-card-desc-price">${priceCard}</p>
</div>

<div class="main__container-basket-products-card-counter">
<button class="main__container-basket-products-card-counter-btn-left" type="button">-</button>
<p class="main__container-basket-products-card-counter-number">1</p>
<button class="main__container-basket-products-card-counter-btn-right" type="button">+</button>
</div>
</div>
</div>`)

document.querySelectorAll('[data-card]').forEach(function(event) {
console.log(event.children[1].children[0].children[0]);
console.log(titleCard);
})

}

Answer 1

По счётчику, оператору и количеству или по совпадениям кода товара, артикул

Answer 2

А в чем здесь сложность? Просто проверяешь каждый элемент на соответствие добавляемому

Answer 3

 if (el.classList.contains('main__container-product-content__burgers-btnAdd')) { 
 
    // Переменные данных карточки 
    const cardImg = el.parentNode.children[0].getAttribute('src') 
    const priceCard = el.parentNode.children[1].innerHTML 
    const titleCard = el.parentNode.children[2].innerHTML 
    const grammingCard = el.parentNode.children[3].innerHTML 
     
    // Проверяем, есть ли уже товар с таким названием в корзине 
    let isAlreadyInCart = false; 
    document.querySelectorAll('[data-card]').forEach(function(event) { 
        const cardTitle = event.querySelector('.main__container-basket-products-card-desc-title').innerHTML; 
        if (cardTitle === titleCard) { 
            isAlreadyInCart = true; 
        } 
    }); 
     
    // Если товара еще нет в корзине, добавляем его 
    if (!isAlreadyInCart) { 
        containerProductCards.insertAdjacentHTML('afterbegin', ` 
         
         
        
 
         
         
         
        ${titleCard}
 
        ${grammingCard}
 
        ${priceCard}
 
        
 
         
         
         
        1
 
         
        
 
        
 
        
`); 
    } else { 
        // Если товар уже есть в корзине, можно выполнить какое-то действие, например, вывести сообщение об ошибке 
        console.log('Товар уже добавлен в корзину'); 
    } 
}