Как сделать корзину товаров на javascript

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

Создание корзины товаров на JavaScript

Разработка корзины товаров на JavaScript может включать в себя применение следующих принципов: обработка данных на стороне клиента, хранение данных в массивах и использование функций для управления данными. Для реализации корзины товаров на JavaScript мы предлагаем вам следующий шаблон:

// Объявление массива с товарами
let cart = [];

// Объявление переменной для хранения общей стоимости товаров в корзине
let total = 0;

// Объявление функции для подсчета общей стоимости товаров в корзине
const countTotal = () => {
  total = 0;
  for (let i = 0; i < cart.length; i++) {
    total += cart[i].price;
  }
};

// Объявление функции для отображения товаров на странице
const showProducts = () => {
  let output = '';
  for (let i = 0; i < cart.length; i++) {
    output += `<li>${cart[i].name} ($${cart[i].price})</li>`;
  }
  document.querySelector('#products').innerHTML = output;
};

// Объявление функции для добавления товара в корзину
const addProduct = (name, price) => {
  const product = {
    name: name,
    price: price
  };
  cart.push(product);
  countTotal();
  showProducts();
  showTotal();
};

// Объявление функции для отображения общей стоимости товаров в корзине
const showTotal = () => {
  document.querySelector('#total').innerHTML = total;
};

// Объявление функции для проверки заполненности полей формы
const checkForm = () => {
  const form = document.querySelector('form');
  const name = form.querySelector('#name');
  const price = form.querySelector('#price');

  if (name.value && price.value) {
    addProduct(name.value, price.value);
    name.value = '';
    price.value = '';
  }
};

// Объявление обработчика события для проверки заполненности полей формы
document.querySelector('form').addEventListener('submit', e => {
  e.preventDefault();
  checkForm();
});

Как видно из приведенного выше кода, на JavaScript реализация корзины товаров достаточно простая. Для работы данного примера нам понадобится следующее: HTML-страница с формой для добавления товаров в корзину и списком товаров в корзине, а также с полем для отображения итоговой стоимости, а также для работы данного примера требуется подключение библиотеки JavaScript.

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

Таким образом, мы показали, как можно создать корзину товаров на JavaScript. Данный пример можно расширить, добавив дополнительные функции или модифицируя существующие. Таким образом, вы можете создать более сложную и функциональную корзину товаров на JavaScript.