Создайте корзину для интернет-магазина с помощью JavaScript

Содержание

• Введение
• Шаг 1: Загрузка стартового шаблона
• Шаг 2: Рендеринг товаров
• Шаг 3: Работа с корзиной
• Вывод

Введение

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

Шаг 1: Загрузка стартового шаблона

Первым шагом является загрузка стартового шаблона для нашей корзины. Вы можете найти ссылку на загрузку в описании видео. Распакуйте zip-архив и откройте папку "shopping_cart". В этой папке вы найдете все необходимые файлы для создания корзины.

Шаг 2: Рендеринг товаров

Когда мы открываем файл index.html, мы видим, что у нас уже есть некоторый HTML-код, который мы не будем трогать. В этом HTML-коде есть элемент с классом "products", в который мы будем рендерить наши товары. Чтобы сделать это, мы сначала найдем этот элемент с помощью JavaScript.

const productsElement = document.querySelector(".products");

Теперь, когда у нас есть доступ к элементу, мы можем создать функцию renderProducts, которая будет рендерить товары на странице. Для этого мы будем использовать метод forEach для перебора всех товаров в массиве products. Затем мы будем вставлять HTML-шаблон для каждого товара в элемент .products.

function renderProducts() {
  products.forEach((product) => {
    productsElement.innerHTML += `
      <div class="product">
        <img src="${product.image}" alt="${product.name}" />
        <h3>${product.name}</h3>
        <p>Price: $${product.price}</p>
        <button class="add-to-cart-btn">Add to Cart</button>
      </div>
    `;
  });
}

Мы также добавим обработчик событий на кнопку "Add to Cart", чтобы при нажатии на нее добавлять товар в корзину.

productsElement.addEventListener("click", (event) => {
  if (event.target.classList.contains("add-to-cart-btn")) {
    const productId = event.target.dataset.id;
    addToCart(productId);
  }
});

Теперь, когда мы определили функцию renderProducts и добавили обработчик событий для кнопки "Add to Cart", мы можем вызвать функцию renderProducts, чтобы отобразить товары на странице. Мы также добавим вызов функции updateCart для обновления отображения корзины после загрузки страницы.

renderProducts();
updateCart();

Шаг 3: Работа с корзиной

Теперь мы перейдем к работе с корзиной. У нас уже есть функция addToCart, которая добавляет товар в корзину на основе его ID. Мы также добавим функции для изменения количества единиц товара и удаления товара из корзины.

function changeItemUnits(action, itemId) {
  const item = cart.find((product) => product.id === itemId);

  if (item) {
    if (action === "decrement") {
      item.units--;
    } else if (action === "increment") {
      item.units++;
    }

    updateCart();
  }
}

function removeItemFromCart(itemId) {
  cart = cart.filter((product) => product.id !== itemId);
  updateCart();
}

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

function updateCart() {
  renderCartItems();
  renderSubtotal();
}

Функции renderCartItems и renderSubtotal отвечают за рендеринг товаров в корзине и вычисление суммы покупок соответственно.

function renderCartItems() {
  const cartItemsElement = document.querySelector(".cart-items");
  cartItemsElement.innerHTML = "";

  cart.forEach((product) => {
    cartItemsElement.innerHTML += `
      <div class="cart-item">
        <img src="${product.image}" alt="${product.name}" />
        <div class="item-details">
          <h4>${product.name}</h4>
          <p>Price: $${product.price}</p>
          <p>Quantity: ${product.units}</p>
          <button class="remove-btn" data-id="${product.id}">Remove</button>
        </div>
      </div>
    `;
  });

  const removeButtons = document.querySelectorAll(".remove-btn");
  removeButtons.forEach((button) => {
    button.addEventListener("click", (event) => {
      const itemId = event.target.dataset.id;
      removeItemFromCart(itemId);
    });
  });
}

function renderSubtotal() {
  const totalItemsElement = document.querySelector(".total-items");
  const totalPriceElement = document.querySelector(".total-price");

  const totalItems = cart.reduce((total, product) => total + product.units, 0);
  const totalPrice = cart.reduce((total, product) => total + product.price * product.units, 0);

  totalItemsElement.textContent = totalItems;
  totalPriceElement.textContent = totalPrice.toFixed(2);
}

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

Вывод

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

FAQ:

Q: Как добавить новый товар в корзину? A: Чтобы добавить новый товар в корзину, просто нажмите на кнопку "Add to Cart" рядом с описанием товара.

Q: Можно ли изменить количество единиц товара? A: Да, чтобы изменить количество единиц товара, используйте кнопки "+" и "-" рядом с описанием товара в корзине.

Q: Как удалить товар из корзины? A: Чтобы удалить товар из корзины, наведите курсор мыши на товар и нажмите кнопку "Remove".

Q: Где хранятся данные о корзине? A: Данные о корзине сохраняются в локальном хранилище браузера. Это позволяет сохранить корзину даже после обновления страницы.