JS метод добавления в корзину
Посмотреть и упростить
class UserCart { _key = 'userCart' _text = { add: 'Добавить в корзину', remove: 'Удалить из корзины' } _linkCreateOrder = '/orders/create'
constructor() { if (window.location.pathname !== this._linkCreateOrder) { this.cart = this.getCartLS() this._init() } }
_init = () => { document.querySelectorAll('.products-card__add-to-cart').forEach((button) => { const productId = button.closest('[data-productid]').dataset.productid if (this.cart.includes(productId)) button.innerText = this._text.remove button.addEventListener('click', () => this._onClick(button, productId)) }) this._toggleShowFloatingBasket() }
_onClick = (button, productId) => { const action = this.toggleProduct(productId) button.innerText = (action === 'added') ? this._text.remove : this._text.add }
getCartLS = () => { const userCartLS = JSON.parse(localStorage.getItem(this._key)) return userCartLS ?? [] }
resetCart = () => { this.cart = [] localStorage.removeItem(this._key) }
_setCartLS = () => { if (this.cart.length < 1) { this.resetCart() } else { localStorage.setItem(this._key, JSON.stringify(this.cart)) } }
addProduct = (id) => { if (!this.cart.includes(id)) { this.cart.push(id) this._setCartLS() this._toggleShowFloatingBasket() return 'added' } }
removeProduct = (id) => { if (this.cart.includes(id)) { this.cart.splice(this.cart.indexOf(id), 1) this._setCartLS() this._toggleShowFloatingBasket() return 'deleted' } }
toggleProduct = (id) => { return this.removeProduct(id) ?? this.addProduct(id) }
_toggleShowFloatingBasket = () => { if (this.cart.length > 0) { if (!this.floatingBasket) { this._createFloatingBasket() } this._fillFloatingBasket() } else { if (this.floatingBasket) { this.floatingBasket.remove() this.floatingBasket = null } } }
_fillFloatingBasket = () => { const list = this.floatingBasket.querySelector('.floating-basket__list') list.innerHTML = '' this.cart.forEach((productId) => { const text = `Элемент с id ${productId}` const newItem = this._createElement('div', 'floating-basket__item', text) const buttonRemove = this._createElement('button', 'floating-basket__remove') buttonRemove.addEventListener('click', () => { try { document.querySelector(`[data-productid="${productId}"] .products-card__add-to-cart`) .innerText = this._text.add } catch { } this.removeProduct(productId) }) newItem.appendChild(buttonRemove) list.appendChild(newItem) }) }
_createElement = (tag, classNames, text) => { const newElement = document.createElement(tag) if (classNames) newElement.classList.add(classNames) if (text) newElement.innerText = text return newElement }
_createFloatingBasket = () => { const floatingBasket = this._createElement('div', 'floating-basket')
floatingBasket.appendChild( this._createElement('span', 'floating-basket__title', 'Корзина') ) floatingBasket.appendChild( this._createElement('div', 'floating-basket__list') ) const link = this._createElement('a', 'floating-basket__button', 'Оформить') link.setAttribute('href', this._linkCreateOrder) floatingBasket.appendChild(link)
this.floatingBasket = floatingBasket document.body.appendChild(floatingBasket) }
}
const userCart = new UserCart()