Я изобретаю велосипед и делаю свою корзину. Для добавления в корзину товара написал это:
let popularCars = document.querySelectorAll('.popularCarSlide '); //это карточка товара, который показывается в каталоге
let cartList = []
function addCartItem (title, price, img){ // это функция, которая создаёт элемент DOM
let cartItem = `
<div class="popupCartItem">
<img src="`+ img + `" alt="" class="popupCarItemtImg">
<p class="popupCartItemName">` + title + ` </p>
<div class="popupCartPrice">
<p class="popupCartPriceNum">` + price + `</p>
<p class="popupCartPriceCredit">в кредит</p>
</div>
<svg class="popupCartItemDelete" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.21311 1.57107L16.3552 15.7132M2.21311 15.7132L16.3552 1.57107" stroke="#404040" stroke-width="2"
stroke-linecap="square" />
</svg>
</div>
`
return (cartItem)
}
if(popularCars.length > 0) {
let cartWraper = document.querySelector('.popupCartWraper')
for(let i = 0; popularCars.length > i ; i++) {
let carBtn = popularCars[i].querySelector('.popularSlideOstavitZayavku'),
carTitle = popularCars[i].querySelector('.popularSlideName').textContent,
carPrice = popularCars[i].querySelector('.popularSlideItemPriceText').textContent,
carImg = popularCars[i].querySelector('.popularSlideImg').getAttribute('src');
carBtn.onclick = ()=>{
cartList.push ({
title: carTitle,
price: carPrice,
img: carImg
})
for(let o = 0; cartList.length > o; o++) {
cartWraper.insertBefore(addCartItem(cartList[o].title, cartList[o].price, cartList[o].img), cartWraper.childNodes[o]) //попытка вставить элемент как дочерний
}
}
}
}
Но сталкиваюсь с ошибкой, что это не node элемент "Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'." есть ли способ сделать из подобного элемента node и/или пихнуть его как дочерний элемент в контейнер?