Как создать корзину на сайте html

 
  
Shopping Bag
  
 
 
 
Common Projects Bball High White 
 
        
 
$549
 
  
 
 
 
Maison Margiela Future Sneakers White 
 
        
 
$870
 
  
 
 
 
Our Legacy Brushed Scarf Brown 
 
        
 
$349
 
 

.is-active < animation-name: animate; animation-duration: .8s; animation-iteration-count: 1; animation-timing-function: steps(28); animation-fill-mode: forwards; >@keyframes animate < 0% < background-position: left; >50% < background-position: right; >100% < background-position: right; >>

@media (max-width: 800px) < .shopping-cart < width: 100%; height: auto; overflow: hidden; >.item < height: auto; flex-wrap: wrap; justify-content: center; >.image img < width: 50%; >.image, .quantity, .description < width: 100%; text-align: center; margin: 6px 0; >.buttons < margin-right: 20px; >>

$('.like-btn').on('click', function() < $(this).toggleClass('is-active'); >);

$('.minus-btn').on('click', function(e) < e.preventDefault(); var $this = $(this); var $input = $this.closest('div').find('input'); var value = parseInt($input.val()); if (value > 1) < value = value - 1; >else < value = 0; >$input.val(value); >); $('.plus-btn').on('click', function(e) < e.preventDefault(); var $this = $(this); var $input = $this.closest('div').find('input'); var value = parseInt($input.val()); if (value < 100) < value = value + 1; >else < value =100; >$input.val(value); >);

$(function () < $('.smart-basket__wrapper').smbasket(< productElement: 'product__element', >); >);

$(function () < $('.smart-basket__wrapper').smbasket(< productElement: 'product__element', buttonAddToBasket: 'product__add-to-cart-button', >); >);

 В корзину 

$(function () < $('.smart-basket__wrapper').smbasket(< productElement: 'product__element', buttonAddToBasket: 'product__add-to-cart-button', countryCode: '+7', >); >);

$(function () < $('.smart-basket__wrapper').smbasket(< productElement: 'product__element', buttonAddToBasket: 'product__add-to-cart-button', countryCode: '+7', smartBasketCurrency: '₽', >); >);

$(function () < $('.smart-basket__wrapper').smbasket(< productElement: 'product__element', buttonAddToBasket: 'product__add-to-cart-button', countryCode: '+7', smartBasketCurrency: '₽', productQuantityWrapper: 'product__quantity', >); >);

32 см
 
26 см
 
22 см
 

Для работы скрипта здесь важны атрибуты «data-sb-curent-price» и «data-sb-curent-size» и «data-sb-curent-id-or-vendor-code» так как в них содержаться параметры для подстановки цены, размера и артикула. То есть при размере 32 см, цена пиццы 320 рублей, при размере 22 см — цена пиццы 220 рублей и т.д. Если цена при любом размере остается одинаковой, просто укажите везде одну и туже стоимость. Аналогичная ситуация и с артикулом. Или укажите везде одинаковый, или вообще не используйте атрибут «data-sb-curent-id-or-vendor-code», если не планируете давать возможность добавлять один и тот же товар с разными характеристиками.

Чтобы цена в карточке менялась, нужно обернуть число с ценой в отдельный блок, например, span, со своим классом. У меня это выглядит так:

Теперь класс обертки «product__size» для блока с размерами и класс обертки цены «product__price-number» нужно передать в настройки скрипта:

$(function () < $('.smart-basket__wrapper').smbasket(< productElement: 'product__element', buttonAddToBasket: 'product__add-to-cart-button', countryCode: '+7', smartBasketCurrency: '₽', productPrice: 'product__price-number', productSize: 'product__size-element', >); >);

Теперь при клике на элемент с размером из «data-sb-curent-price» подставится цена в «product__price-number». Если не совсем понятно, напишите мне, попробую разъяснить.

Последняя настройка, которая сейчас доступна это вывод мини-корзины. То есть кнопки, которая отображает статус корзины (показывает текущее количество товара в корзине) и вызывает, при нажатии на нее, модальное окно с основной корзиной.

Я специально не задавал никаких стилей и ей, чтобы у вас был полный контроль если не над всей корзиной, то над максимальным количеством ее элементов. Принцип вывода, похож на настройку предыдущего поля. Нужно указать класс элемента, в котором отобразится кнопка в параметре ‘smartBasketMinArea‘.

$(function () < $('.smart-basket__wrapper').smbasket(< productElement: 'product__element', buttonAddToBasket: 'product__add-to-cart-button', countryCode: '+7', smartBasketCurrency: '₽', productQuantityWrapper: 'product__quantity', smartBasketMinArea: 'header__basket-min' >); >);

Кроме того, у вас есть возможность задать текст в кнопке, перед иконкой корзины и изменить саму иконку. Делается это при помощи параметров smartBasketMinText и smartBasketMinIconPath.

$(function () < $('.smart-basket__wrapper').smbasket(< productElement: 'product__element', buttonAddToBasket: 'product__add-to-cart-button', countryCode: '+7', smartBasketCurrency: '₽', productQuantityWrapper: 'product__quantity', smartBasketMinArea: 'header__basket-min', smartBasketMinText: 'Корзина: ', smartBasketMinIconPath: '/smartbasket/img/shopping-basket-wight.svg', >); >);

Для настройки отступов и внешнего вида, иконка и текст обернуты в теги с классами «smart-basket__min-icon» и «smart-basket__min-text».

Настройка почты для отправки

Для настройки отправки почты, нужно открыть файл config.php, который находится в папке /smartbasket/php/

Здесь нас интересуют 2 строки:

• const SENDER = ‘sender@yandex.ru’;
• const CATCHER = ‘catcher@list.ru’;

SENDER — это адрес, с которого будет отправляться письмо. CATCHER — адрес на который будет приходить письмо. Обратите внимание, что адрес отправителя должен быть реальными, чтобы не возникало проблем с доставкой.

SMTP

Если у вас возникают проблемы с отправкой формы, то воспользуйтесь SMTP протоколом передачи почты. Для этого в одном из последних обновлений я добавил специальные константы:

// *** SMTP *** // require_once($_SERVER['DOCUMENT_ROOT'] . '/smartbasket/php/phpmailer/smtp.php'); const HOST = ''; const LOGIN = ''; const PASS = ''; const PORT = ''; // *** /SMTP *** //

Раскомментируйте эти строки и заполните в соответствии с вашим почтовым сервисом. Возникнут вопросы — пишите.

Обязательность полей для заполнения пользователем

В новом обновлении, как вы и просили, добавил еще одно поле для связи (email), теперь, если кому-то накладно звонить в другие регионы, они могут сделать обязательным поле для заполнения почты.
По умолчанию обязательным оставил только телефон, но вы можете это исправить в настройках. Для этого предусмотрено 2 параметра:

• telIsRequired
• emailIsRequired

Чтобы сделать обязательным поле, поставьте ему значение «true». Чтобы сделать необязательным, укажите «false». Все это выглядеть может так:

$(function () < $('.smart-basket__wrapper').smbasket(< productElement: 'product__element', buttonAddToBasket: 'product__add-to-cart-button', countryCode: '+7', smartBasketCurrency: '₽', productQuantityWrapper: 'product__quantity', smartBasketMinArea: 'header__basket-min', smartBasketMinText: 'Корзина: ', smartBasketMinIconPath: '/smartbasket/img/shopping-basket-wight.svg', telIsRequired: false, emailIsRequired: true, >); >);

При этом поле с указанием телефона не пропадает, просто данные из формы можно отправить без заполнения этого поля.

Пользовательское соглашение

В последнем обновлении, как вы и просили, добавил чекбокс с принятием пользовательского соглашения. Настраивается аналогично другим параметрам:

agreement: < isRequired: true, isChecked: true, isLink: 'https://smartlanding.biz' >

• isRequired — включает или отключает поле;
• isChecked — автоматически делает отмеченным поле;
• isLink — ссылка на соглашение.

Пока это все, что есть. Да, впереди еще много работы и много идей. Будет больше проверок, больше функций, больше возможностей. Много раз еще придется переписать все и оптимизировать. Пока, это тестовый вариант, чтобы понять нужен ли кому-то подобный скрипт и насколько он актуален. Все пожелания и предложения пишите в комментариях, буду рад любой обратной связи и постараюсь улучшать функционал по мере свободного времени.

Надеюсь, что ничего не упустил, если что — пишите!

Если нужна видео-инструкция с описанием процесса установки настройки, напишите в комментариях, я попробую сделать.

06.11.22. Друзья, с радостью сообщаю, что начинаю разработку новой версии корзины (SmartBasket). Теперь это будет каталог товаров с удобным редактированием из админки. Многие просили упростить этот процесс и сделать более наглядным.

В связи с этим к вам есть небольшая просьба. Если у вас есть какие-то идеи, советы или пожелания – добавляйтесь в телеграм-чат. Так я пойму, что Smartbasket действительно кому-то нужен и есть смысл развивать проект. Будем голосовать за новый функционал, общаться и вместе делать корзину лучше. Хочется делать продукт не «в стол», а чтобы он реально было полезен людям.

Если за 2 месяца наберется более 150 человек, то буду продолжать развивать проект, добавляя новые функции и возможности. Если окажется, что потребности в корзине нет, то закончу минимально-рабочую версию и займусь чем-то новым.

Скрипт, который описан в статье выше больше не поддерживается.

06/11/2022 Дмитрий Давыдов

474 комментария

Дмитрий, с настройкой почты не получается, как правильно настроить отправку почты?

Добрый день! Спасибо большое за корзину. Я делаю небольшой проект по инжинирингу данных и это именно то, что нужно. Но вот беда: при увеличении/уменьшении количества товаров напрямую из корзины, не пересчитывается количество товаров (sbQuantity) и (sbPriceCommon) у каждого элемента в коллекции e в функции commonResult. И у t в функции updateBasket то же самое. При этом количество и сумма по отдельной позиции работает отлично, а общее количество и сумма пересчитываются при удалении строки с товаром из корзины. Видел демо, пробовал там ставить брейкпоинты на интересующих местах, это не помогло, перекидывает в код jQuery. jQuery подключал разные версии. Может быть дело совсем не там, где я ищу, я js никогда не видел раньше и очень тяжело разбираться, поэтому нужна помощь хотя бы в какую сторону копать. Я немного код под свои нужды как мог переделал в некоторых небольших местах, где теги формируются, но тоже не из-за этого. Возможно дело в вёрстке, буду разбираться дальше. ПС: Оставлю комментарий, если кто-то ещё упорется как я. Всё нормально и с вёрсткой и скрипт прекрасно работает. Вот это место: data-sb-id-or-vendor-code=»<< el.id >>» Дело в том, что айдишник товара у меня в базе — число и jinja в шаблоне «<< el.id >>» подставляет в этот параметр именно число, а не строку. И из-за этого всё ломается. Приведение к строке в шаблоне не помогло «<< el.id|string >>» .
Но помог вариант с добавлением пробела «<< el.id|string + ' '>>». Но обнаружил, что джаваскрипт это довольно забавно и нашёл эту строчку. let r = t(this).data(«sbId») Мои полдня мучений закончились 😀 Смотрите, как теперь могу:
let r = t(this).data(«sbId»).toString()

Создаем корзину для сайта

В этом уроке разберем, как можно создать корзину для сайта. Рассмотрим основные моменты. У нас будет страница с товарами, где для каждого товара будет кнопка купить со своим id, при клике на кнопку мы будем делать Ajax-запрос к php скрипту. В этом php файле будем создавать сессию корзины. Ну и напоследок сделаем страницу нашей корзины для сайта, где также при помощи Ajax-запросов можно будет менять количество товаров или удалять товар из корзины.

Вот наша страница с товарами:

         
 
 
   
Товар 1
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, modi!
 
Купить
 
 
 
 
 
   
Товар 2
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, modi!
 
Купить
 
 
 
 
 
   
Товар 3
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, modi!
 
Купить





 
 
 
 
    

Теперь напишем скрипт обработки клика на кнопку, в котором мы получим id кнопки, который является кодом нашего товара и отправим его аякс запросом в файлик addtocart.php.

Также добавим на нашу страницы ссылку на корзину со счетчиком товаров.

Теперь создадим наш файл addtocart.php, где мы будем получать данные от аякс-запроса, открывать сессию корзины и записывать в нее добавленный товар. Сессия корзины будет у нас в виде массива, где индексами будут id наших товаров, а значения количество товаорв. При добавлении товара будем устанавливать количество 1, которое можно будет менять на странице корзины.

  else > $count = count($temp);//считаем товары в корзине $_SESSION['cart'] = $temp;//записывае в сесию наш масив echo $count; //возвращаем количество товаров ?>

Теперь сделаем страницу корзины cart.php. Мы будем выводить товары в виде таблицы:

input с количеством

У себя по id товара можете вытаскивать из базы информацию о товаре, для отображения названия, картинки, цены…

Вот код нашей корзины:

         
Ваша корзина пуста
   id количество Удалить  $kol): ?> id товара: "> Удалить  

Теперь подключим на нашу страницу корзины jqery и напишем скрипт отбработки изменения количества и кнопки удалить. Тут мы также будем делать аякс-запрос к нашим php-обработчикам, где будет меняться сессия корзины.

Осталось написать два php обработчика. В cartamount.php мы будем изменять количество товаров в нашей сессии, а в cartdel.php удалять в сессии запись с нужным id . Начнем с cartamount.php

Теперь в нашей сессии изменено количество и если обновим страничку корзины, то количество товаров сохранится. Теперь создадим обработчик удаления товара cartdel.php

 $_SESSION['cart'] = $temp; //сохраняем сессию ?>

Вот и все наша корзина для сайта готова, теперь можно создавать кнопку «оформить заказ» и там уже работать с нашей сессией корзины.

Верстка компонентов корзины

Корзина состоит из двух компонентов — кнопки для вызова окна, а также всплывающего окно самой корзины.

Кнопка корзины

Представляет из себя круглую кнопку с изображением корзины. В правом верхнем углу находится счетчик выбранных товаров. Обязательно нужно сделать кнопку фиксированной, чтобы пользователь ее постоянно видел при прокрутке страницы.

Разметка для кнопки корзины:

Изображение корзины есть в исходнике проекта на GitHub

Стили для кнопки корзины:

.cart < width: 75px; height: 75px; border-radius: 50%; background-color: #364364; transition: 0.1s; cursor: pointer; position: fixed; /* Фиксированное расположение */ top: 50px; /* в правом верхнем углу */ right: 50px; display: flex; justify-content: center; align-items: center; object-fit: contain; padding: 15px; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); >/* Увеличиваем кнопку при наведении на нее */ .cart:hover < transform: scale(1.1); >/* Стилизуем счетчик товаров */ .cart__num

Окно оформления заказа

Представляет из себя список выбранных товаров с ценами и кнопками удалить. Внизу находится информация по стоимости заказа и скидки.

Разметка окна оформления заказа:

 
 
 
 
 
 
 
 
 
135000 
 
  

Стили окна оформления заказа:

.popup < position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.33); /* Небольшое затемнение на фоне */ z-index: 1000; /* Поверх всех окон */ width: 100%; height: 100%; display: none; /* По умолчанию скрываем окно */ justify-content: center; align-items: center; user-select: none; overflow-y: scroll; >/* Стилизация контейнера окна */ .popup__container < display: flex; flex-direction: column; justify-content: space-between; /* Распределяем элементы внутри равномерно */ width: 100%; max-width: 800px; min-height: 300px; background-color: #fff; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); border-radius: 4px; position: relative; >/* Элементы окна (заголовок, список товаров, вывод стоимости) */ .popup__item < border-bottom: 1px solid #ddd; padding: 20px; >.popup__item:last-of-type < border-bottom: none; >.popup__title < font-size: 20px; >/* Стили для вывода товара */ .popup__product < display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; >.popup__product-wrap < display: flex; align-items: center; >.popup__product-image < width: 100px; height: 100px; object-fit: contain; margin-right: 10px; >.popup__product-title < max-width: 300px; font-weight: 500; >.popup__product-price < font-size: 18px; margin-right: 15px; >/* Стили для кнопки удаления товара */ .popup__product-delete < font-size: 12px; padding: 5px; cursor: pointer; color: #d62240; >/* Стили для вывода стоимости товаров */ .popup__cost < display: flex; align-items: center; justify-content: flex-end; margin-bottom: 5px; >.popup__cost-title < margin-right: 15px; font-size: 20px; color: #364364; text-align: right; >.popup__cost-value < font-size: 20px; >/* Стили для кнопки закрытия окна */ .popup__close < position: absolute; cursor: pointer; top: 0; right: 0; padding: 20px; color: rgba(54, 67, 100, 0.7); font-size: 20px; >.popup__close:hover < color: rgb(54, 67, 100); >.popup--open

Скрипты для корзины

Утилиты

В начале напишем две вспомогательные функции: toNum и toCurrency.

function toNum(str) < const num = Number(str.replace(/ /g, "")); return num; >function toCurrency(num) < const format = new Intl.NumberFormat("ru-RU", < style: "currency", currency: "RUB", minimumFractionDigits: 0, >).format(num); return format; >

Функция toNum принимает строковый параметр и удаляет в нем все пробелы, затем преобразует его в число с помощью встроенной функции Number. Эта функция полезна для преобразования строк цен в числовые значения, которые можно использовать для расчетов.

Функция toCurrency форматирует число в строку валюты с использованием символа российского рубля.

Считываем элемент корзины и попапа

Считываем все элементы корзины:

const cardAddArr = Array.from(document.querySelectorAll(".card__add")); const cartNum = document.querySelector("#cart_num"); const cart = document.querySelector("#cart");

Считываем все элементы попапа:

const popup = document.querySelector(".popup"); const popupClose = document.querySelector("#popup_close"); const body = document.body; const popupContainer = document.querySelector("#popup_container"); const popupProductList = document.querySelector("#popup_product_list"); const popupCost = document.querySelector("#popup_cost"); const popupDiscount = document.querySelector("#popup_discount"); const popupCostDiscount = document.querySelector("#popup_cost_discount");

Обработчики кнопки открытия и закрытия корзины

Начнем с самого простого: открытие и закрытие окна корзины. Для открытия мы нажимаем круглую кнопку корзины, а для закрытия на крестик в самом окне.

Считываем нужные элементы и навешиваем обработчики на клик:

cart.addEventListener("click", (e) => < e.preventDefault(); popup.classList.add("popup--open"); body.classList.add("lock"); >); popupClose.addEventListener("click", (e) => < e.preventDefault(); popup.classList.remove("popup--open"); body.classList.remove("lock"); >);

Класс для товара

Далее опишем класс для одного товара.

class Product < imageSrc; name; price; priceDiscount; constructor(card) < this.imageSrc = card.querySelector(".card__image").children[0].src; this.name = card.querySelector(".card__title").innerText; this.price = card.querySelector(".card__price--common").innerText; this.priceDiscount = card.querySelector(".card__price--discount").innerText; >>

Класс Product представляет товар с некоторыми свойствами, такими как источник изображения, название, цена и цена со скидкой. У него есть конструктор, который принимает параметр card, который будет HTML-элементом, представляющим карточку продукта на веб-странице.

Конструктор инициализирует свойства объекта Product, запрашивая параметр card для определенных элементов с помощью CSS-селекторов и извлекая соответствующую информацию из этих элементов. Например, свойство imageSrc устанавливается путем получения исходного URL-адреса первого дочернего элемента с классом card__image внутри параметра card.

Класс для корзины

Класс для описания корзины покупок и расчета стоимости и скидок.

const cardAddArr = Array.from(document.querySelectorAll(".card__add")); const cartNum = document.querySelector("#cart_num"); class Cart < products; constructor() < this.products = []; >get count() < return this.products.length; >addProduct(product) < this.products.push(product); >removeProduct(index) < this.products.splice(index, 1); >get cost() < const prices = this.products.map((product) =>< return toNum(product.price); >); const sum = prices.reduce((acc, num) => < return acc + num; >, 0); return sum; > get costDiscount() < const prices = this.products.map((product) =>< return toNum(product.priceDiscount); >); const sum = prices.reduce((acc, num) => < return acc + num; >, 0); return sum; > get discount() < return this.cost - this.costDiscount; >>

Класс Cart, который представляет корзину покупок. У него есть конструктор, который инициализирует пустое свойство массива products.

Класс имеет методы для добавления и удаления товаров из корзины, которые изменяют массив products, добавляя или удаляя данный товар по указанному индексу.

Также определены три метода получения для стоимости корзины, стоимости со скидкой и скидки со скидкой. Эти методы вычисляют соответствующие значения путем перебора массива products и суммирования цен или скидок на каждый продукт.

Вспомогательная функция toNum используется для преобразования строк цен в числовые значения.

Создаем объект корзины и сохраняем его в localStorage

const myCart = new Cart(); if (localStorage.getItem("cart") == null) < localStorage.setItem("cart", JSON.stringify(myCart)); >const savedCart = JSON.parse(localStorage.getItem("cart")); myCart.products = savedCart.products; cartNum.textContent = myCart.count;

Этот код инициализирует новый экземпляр класса Cart и присваивает его переменной myCart. Затем он проверяет, есть ли какие-либо данные, хранящиеся в локальном хранилище браузера под ключом cart. Если таких данных нет, он сохраняет версию объекта myCart в формате JSON в локальном хранилище.

Далее код извлекает данные из локального хранилища под ключом «card» и преобразует их обратно в объект с помощью JSON.parse(). Затем проанализированный объект присваивается переменной savedCart.

Наконец, массив products из savedCart присваивается массиву products из myCart, а значение свойства count из myCart используется для обновления текстового содержимого элемента cartNum.

Обратите внимание, что этот код предполагает, что класс Cart имеет свойства products и count, и что переменная cartNum представляет элемент в DOM, который отображает количество товаров в корзине.

Добавляем товар в корзину

myCart.products = cardAddArr.forEach((cardAdd) => < cardAdd.addEventListener("click", (e) =>< e.preventDefault(); const card = e.target.closest(".card"); const product = new Product(card); const savedCart = JSON.parse(localStorage.getItem("cart")); myCart.products = savedCart.products; myCart.addProduct(product); localStorage.setItem("cart", JSON.stringify(myCart)); cartNum.textContent = myCart.count; >); >);

Этот код добавляет прослушиватель событий к каждому элементу в массиве cardAddArr, который содержит элементы DOM, представляющие кнопки cardAdd на веб-странице. Когда пользователь нажимает одну из этих кнопок, вызывается функция прослушивания.

Функция прослушивателя сначала предотвращает действие события click по умолчанию, используя e.preventDefault(). Затем он находит ближайший элемент .card к нажатой кнопке, используя метод closest().

Код создает новый экземпляр продукта, используя элемент card, извлекая информацию из card для создания объекта product.

Далее код извлекает сохраненные данные корзины из localStorage и присваивает свой массив products свойству myCart.products. Затем он добавляет объект product в экземпляр myCart, используя свой метод addProduct.

После добавления товара в корзину код сохраняет обновленный объект myCart в localStorage в виде строки JSON с помощью JSON.stringify(). Наконец, он обновляет текстовое содержимое элемента cartNum, чтобы отобразить новое количество товаров в корзине, используя свойство myCart.count.

Заполнение корзины

function popupContainerFill() < popupProductList.innerHTML = null; const savedCart = JSON.parse(localStorage.getItem("cart")); myCart.products = savedCart.products; const productsHTML = myCart.products.map((product) => < const productItem = document.createElement("div"); productItem.classList.add("popup__product"); const productWrap1 = document.createElement("div"); productWrap1.classList.add("popup__product-wrap"); const productWrap2 = document.createElement("div"); productWrap2.classList.add("popup__product-wrap"); const productImage = document.createElement("img"); productImage.classList.add("popup__product-image"); productImage.setAttribute("src", product.imageSrc); const productTitle = document.createElement("h2"); productTitle.classList.add("popup__product-title"); productTitle.innerHTML = product.name; const productPrice = document.createElement("div"); productPrice.classList.add("popup__product-price"); productPrice.innerHTML = toCurrency(toNum(product.priceDiscount)); const productDelete = document.createElement("button"); productDelete.classList.add("popup__product-delete"); productDelete.innerHTML = "✖"; productDelete.addEventListener("click", () =>< myCart.removeProduct(product); localStorage.setItem("cart", JSON.stringify(myCart)); popupContainerFill(); >); productWrap1.appendChild(productImage); productWrap1.appendChild(productTitle); productWrap2.appendChild(productPrice); productWrap2.appendChild(productDelete); productItem.appendChild(productWrap1); productItem.appendChild(productWrap2); return productItem; >); productsHTML.forEach((productHTML) => < popupProductList.appendChild(productHTML); >); popupCost.value = toCurrency(myCart.cost); popupDiscount.value = toCurrency(myCart.discount); popupCostDiscount.value = toCurrency(myCart.costDiscount); >

Этот код определяет функцию popupContainerFill(), которая заполняет всплывающий контейнер информацией о продукте из корзины покупок, хранящейся в локальном хранилище.

Функция сначала извлекает данные корзины из локального хранилища, а затем сопоставляет массив продуктов корзины, чтобы создать новый массив элементов HTML, представляющих каждый продукт в корзине. Каждый элемент продукта создается путем создания вложенных элементов div, которые содержат изображение продукта, заголовок, цену и кнопку удаления.

При нажатии кнопки удаления для данного продукта запускается прослушиватель событий, который удаляет этот продукт из корзины, вызывая метод myCart.removeProduct(), обновляет информацию о корзине в локальном хранилище, а затем обновляет всплывающий контейнер с обновленными данными. информацию о корзине, снова вызвав popupContainerFill().

Наконец, функция устанавливает значение полей общей стоимости, скидки и стоимости со скидкой во всплывающем контейнере, чтобы отразить обновленную информацию о корзине.