Создаётся массив "products" в localStorage при заходе на страницу. По кнопке на страницах товаров "купить", ID товара (взятый из БД) кладётся в localStorage.
<button class="k"><a class="product_link_id" data-id="<?php echo $product->ID?>">Купить</a></button>
Код JS по добавлению товара в localStorage (если нужно):
let count;
if (localStorage.getItem('products') && localStorage.getItem('products') != 0) {
count = JSON.parse(localStorage.getItem('products'))
} else {
count = []
}
this.keyName = 'products';
// Получаю ID'шник кнопки.
document.querySelector('.product_link_id').onclick = () => {
getItemId(event.target.dataset.id);
}
// Убираю object Object из localStorage
localStorage.setItem(this.keyName, JSON.stringify(count));
id = JSON.parse(localStorage.getItem(this.keyName));
// Добавление товара в корзину
const getItemId = id => {
count.push(id);
let Duplic = [];
count.forEach((element) => {
if (!Duplic.includes(element)) {
Duplic.push(element);
}
});
console.log(localStorage.setItem(this.keyName, JSON.stringify(Duplic))); //id
}
В итоге, добавив 2+ товара, мы имеем в localStorage массив с ключом "products" и значением в нём - ["ID товара 1", "ID товара 2", и т.д]. В корзине товары отрисовываются (находится по ID в БД все сопутствующие элементы, по типу: название, цена и т.д) на странице динамически. Добавил кнопку для удаления динамически созданного тега с информацией о товаре. Теперь нужно, чтоб этот товар также удалялся и из localStorage. Делаю через data-атрибуты, но что-то не особо получается...
Основной код с отрисовкой и прочим:
$.post("/answer", //Отправляю данные
{data: data_id_prod},
function (response) {
console.log(response);
let chill = response.id_prod //Получаю данные и засовываю внутренности ответа в переменную chill
//console.log(chill);
let j = 0
$.each(chill, function(key, value) { // Отрисовка товаров на странице
j++
var new_div = document.createElement('ul'); // Создаю новый элемент, куда помещу отрисовку
new_div.className = ('prod_in_cart' +[j]) // J - номер названия класса, чтоб они не "слипались"
new_div.innerHTML = (value.ID + ' \n ' + value.product_name + ' \n - ' + value.product_price + ' рублей'); // Сама отрисовка
new_div.insertAdjacentHTML('beforeend', '\n<button data-locnum = ' + value.ID + ' class = "remove">X</button>'); // Отрисовка кнопки, куда засовываю название класса (для задания ей функций) и ID-товара, схожий с ID-товара в localStorage!!!
divvv.appendChild(new_div); // Помещаю всё это в существующий div на странице
const buttons = document.querySelectorAll('.remove'); // Собираю все кнопки, дабы дать им функцию
buttons.forEach(button => { // Сама функция кнопки
button.addEventListener('click', function () {
//button.parentElement.remove() --- Удаляет отрисованную кнопку СО СТРАНИЦЫ (не с хранилища)!!!
let key = JSON.parse(window.localStorage.getItem("products")); // Присваиваю значения "products" (ключа с массивом)
//console.log(key);
let etdl = event.target.dataset.locnum; // Присваиваю ID товара из data-атрибута в переменную
for (let i in key) {
//console.log(etdl === key[i])
if (etdl == key[i]) { // Нахожу, есть ли подобный ID-шник в массиве localStorage'а
key.splice(i, 0); // Меняю значение i в key на 0
localStorage.getItem["products"] = JSON.stringify(key); // По-логике, должно заменяться старое value в lS на новый с данными из key
};
};
});
});
});
});
