0

Как вывести список просмотренных товаров на чистом javascript, без всяких там плагинов в CMS и прочего, чисто на js взять допустим статику, которая потом будет динамичная и чтобы потом после клика на каждый товар и выходя потом на главную, отображался список, какие статические товары были открыты, какие ваши идеи и ссылки где есть готовые варианты, сам гуглил

2
  • Не думаю, что есть готовые решения под вашу идею. Если что и найдете, то это пример, как сделать. Вот например здесь можете посмотреть динамический рендер таблицы.
    – SwaD
    3 мар в 9:53
  • спасибо и на этом 3 мар в 10:44

2 ответа 2

0

// получаем список просмотренных товаров из sessionStorage или создаем пустой массив:
const viewedItems = JSON.parse(sessionStorage.getItem('viewedItems')) || [];

// добавляем id текущего товара в массив( если его там еще нет ):
const currentItemId = '1'; // здесь нужно будет использовать id товара
if (!viewedItems.includes(currentItemId)) {
  viewedItems.push(currentItemId);
}

// сохраняем обновленный список просмотренных товаров в sessionStorage:
sessionStorage.setItem('viewedItems', JSON.stringify(viewedItems));

// выводим список просмотренных товаров:
const viewedItemsList = document.getElementById('viewed-items-list');
viewedItemsList.innerHTML = '';
viewedItems.forEach(itemId => {
  const itemLink = document.createElement('a');
  itemLink.href = `/item/${itemId}`; // здесь нужно будет использовать ссылку на товар:
  itemLink.textContent = `Item ${itemId}`;
  viewedItemsList.appendChild(itemLink);
});
<!-- Кнопка для добавления товара в список просмотренных товаров -->
<button id="add-to-viewed">Добавить в список просмотренных</button>

<!-- Список просмотренных товаров -->
<ul id="viewed-list"></ul>

попробуй такой код

0

Тут прям решения ctrl+c ctrl+v , все же нет

Но есть варианты как решить

Документация по localStorage и sessionStorage: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

Пример реализации списка просмотренных товаров с использованием localStorage: https://www.sitepoint.com/simple-javascript-utilities-for-handling-local-storage/

Пример реализации списка просмотренных товаров с использованием Handlebars.js: https://www.sitepoint.com/javascript-local-storage-handlebars-js/

2
  • Две последние ссылки не валидные. Для этого и нужно приводить код прямо в вопрос, дабы в будущем не возникало таких проблем. 3 мар в 22:57
  • 404 Страница не найдена 4 мар в 23:03

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.