1️⃣Мы добавляем обработчик событий для всего документа, который будет отслеживать клики.



2️⃣Если элемент, по которому был совершен клик, имеет класс 'add-to-cart', это означает, что пользователь нажал на кнопку добавления товара в корзину.



3️⃣Из этой кнопки мы извлекаем атрибут data-product-id, который содержит уникальный идентификатор товара, который пользователь хочет добавить в корзину.



4️⃣Функция addToCart отвечает за отправку AJAX-запроса на сервер для добавления выбранного продукта в корзину.



🔹Создаем новый экземпляр объекта XMLHttpRequest, который будет использоваться для выполнения асинхронного запроса.



🔹Мы устанавливаем метод запроса как POST и указываем URL-адрес сервера, куда будет отправлен запрос. Устанавливаем заголовок Content-Type как application/json;charset=UTF-8, указывая, что мы будем отправлять данные в формате JSON.



🔹Далее мы указываем функцию, которая будет вызвана, когда сервер ответит на наш запрос. При успешном ответе сервера мы обновляем содержимое корзины на странице.



🔹После, мы конвертируем объект с идентификатором продукта в строку JSON и отправляем его на сервер.



#AJAX #ОбучающийПост #JavaScript