Как создать корзину покупок на JavaScript
Содержание
- Введение 🎯
- Как создать корзину покупок с помощью чистого JavaScript 🛒
- Шаг 1: Подготовка файла JavaScript 📄
- Шаг 2: Создание кнопок удаления элементов из корзины 🗑️
- Шаг 3: Обновление общей стоимости корзины 💰
- Шаг 4: Добавление товара в корзину 🛍️
- Шаг 5: Создание кнопки покупки и очистки корзины 📦
- Заключение и итоги 👏
Введение 🎯
В этом видео мы рассмотрим, как создать корзину покупок с помощью только чистого JavaScript. Мы создадим функциональность добавления и удаления товаров из корзины, а также обновления общей стоимости корзины. Это даст нам полностью функционирующую корзину покупок для нашего веб-сайта. Давайте начнем!
Как создать корзину покупок с помощью чистого JavaScript 🛒
Шаг 1: Подготовка файла JavaScript 📄
Прежде чем мы начнем писать код для корзины покупок, нам нужно создать файл JavaScript и подключить его к нашей странице HTML. Для этого мы создадим новый файл в нашем проекте и назовем его "store.js". Затем, чтобы подключить его к нашей странице HTML, мы добавим тег <script> в разделе <head>, указав путь к нашему файлу JavaScript.
<script src="store.js"></script>
Теперь наш файл JavaScript будет загружен на страницу и готов к выполнению кода.
Шаг 2: Создание кнопок удаления элементов из корзины 🗑️
Первое, что нам нужно сделать, это настроить кнопки удаления, чтобы они удаляли соответствующий элемент из корзины при нажатии. Для этого мы будем использовать метод querySelectorAll, чтобы получить все кнопки удаления с классом "button-danger". Затем мы будем использовать цикл for для добавления слушателя событий для каждой кнопки, чтобы слушать событие клика и запускать функцию для удаления соответствующего элемента из корзины.
const removeCartItemButtons = document.querySelectorAll('.button-danger');
for (let i = 0; i < removeCartItemButtons.length; i++) {
const button = removeCartItemButtons[i];
button.addEventListener('click', removeCartItem);
}
function removeCartItem(event) {
const buttonClicked = event.target;
const cartRow = buttonClicked.parentElement.parentElement;
cartRow.remove();
updateCartTotal();
}
В этом коде мы сначала получаем все кнопки удаления и добавляем слушателя событий для каждой кнопки. Затем мы получаем родительский элемент кнопки (который является строкой корзины) и удаляем эту строку из корзины. После удаления элемента из корзины мы вызываем функцию updateCartTotal(), чтобы обновить общую стоимость корзины.
Шаг 3: Обновление общей стоимости корзины 💰
Для того чтобы обновлять общую стоимость корзины при добавлении и удалении элементов, нам потребуется создать функцию updateCartTotal(). В этой функции мы должны пройти через каждую строку корзины, найти цену и количество каждого элемента, перемножить их и сложить, чтобы получить общую стоимость корзины. Затем мы обновим соответствующий элемент HTML, отображающий общую стоимость корзины.
function updateCartTotal() {
const cartRows = document.getElementsByClassName('cart-row');
let total = 0;
for (let i = 0; i < cartRows.length; i++) {
const cartRow = cartRows[i];
const priceElement = cartRow.getElementsByClassName('cart-price')[0];
const quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0];
const price = parseFloat(priceElement.innerText.replace('$', ''));
const quantity = quantityElement.value;
total += price * quantity;
}
const cartTotal = document.getElementsByClassName('cart-total-price')[0];
cartTotal.innerText = '$' + total.toFixed(2);
}
В этом коде мы сначала получаем все строки корзины и затем проходимся через каждую строку. Внутри цикла мы получаем элементы цены и количества для каждой строки, затем преобразуем цену в число и умножаем на количество для получения стоимости этой строки. Мы добавляем стоимость каждой строки к общей стоимости корзины. После прохождения всех строк корзины мы обновляем соответствующий элемент HTML, отображающий общую стоимость корзины.
Шаг 4: Добавление товара в корзину 🛍️
Теперь давайте настроим кнопки "Add to Cart", чтобы они добавляли соответствующий товар в корзину при нажатии. Для этого мы сначала получим все кнопки "Add to Cart" с использованием метода querySelectorAll, а затем добавим слушателя событий для каждой кнопки, чтобы слушать событие клика и запускать функцию для добавления соответствующего товара в корзину.
const addToCartButtons = document.querySelectorAll('.shop-item-button');
for (let i = 0; i < addToCartButtons.length; i++) {
const button = addToCartButtons[i];
button.addEventListener('click', addToCartClicked);
}
function addToCartClicked(event) {
const button = event.target;
const shopItem = button.parentElement.parentElement;
const title = shopItem.querySelector('.shop-item-title').innerText;
const price = shopItem.querySelector('.shop-item-price').innerText;
const imageSrc = shopItem.querySelector('.shop-item-image').src;
addItemToCart(title, price, imageSrc);
updateCartTotal();
}
В этом коде мы сначала получаем все кнопки "Add to Cart" и добавляем слушателя событий для каждой кнопки. Затем мы получаем родительский элемент кнопки (который является элементом товара), а затем мы получаем заголовок, цену и источник изображения из этих данных. После этого мы вызываем функцию addItemToCart(), чтобы добавить товар в корзину, а затем вызываем функцию updateCartTotal(), чтобы обновить общую стоимость корзины.
Шаг 5: Создание кнопки покупки и очистки корзины 📦
В нашем финальном шаге мы настраиваем кнопку "Purchase", чтобы она удаляла все элементы из корзины и выводила сообщение пользователю, что покупка совершена. Мы также добавляем кнопку "Очистить корзину", чтобы пользователь мог удалить все элементы из корзины.
const purchaseButton = document.querySelector('.btn-purchase');
const clearButton = document.querySelector('.btn-clear');
purchaseButton.addEventListener('click', purchaseClicked);
clearButton.addEventListener('click', clearCart);
function purchaseClicked() {
alert('Thank you for your purchase');
const cartItems = document.querySelector('.cart-items');
while (cartItems.hasChildNodes()) {
cartItems.removeChild(cartItems.firstChild);
}
updateCartTotal();
}
function clearCart() {
const cartItems = document.querySelector('.cart-items');
while (cartItems.hasChildNodes()) {
cartItems.removeChild(cartItems.firstChild);
}
updateCartTotal();
}
В этом коде мы сначала получаем кнопки "Purchase" и "Clear", а затем добавляем слушателей событий для каждой кнопки. При нажатии на кнопку "Purchase" мы выводим сообщение "Thank you for your purchase", а затем удаляем все элементы из корзины путем удаления всех дочерних элементов из элемента .cart-items. При нажатии на кнопку "Clear" мы также удаляем все элементы из корзины и обновляем общую стоимость корзины с помощью функции updateCartTotal().
Заключение и итоги 👏
В этом видео мы научились создавать полностью функционирующую корзину покупок, используя только чистый JavaScript. Мы добавили функциональность для добавления и удаления товаров из корзины, а также обновления общей стоимости корзины. Мы также добавили кнопку покупки и кнопку очистки корзины, чтобы пользователи могли завершить покупку и очистить свою корзину при необходимости. Надеюсь, вы научились многому из этого видео и сможете применить новые знания в своих проектах! Спасибо за просмотр!
AI SEO Assistant
WHY YOU SHOULD CHOOSE Proseoai
