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

• Введение
• Что такое корзина на сайте?
• Планирование функционала корзины
• Создание HTML-структуры корзины
• Стилизация корзины с помощью CSS
• Добавление товаров в корзину
• Отображение содержимого корзины
• Обновление количества товаров
• Расчет общей стоимости
• Удаление товаров из корзины
• Заключение

Введение

Корзина является неотъемлемой частью любого интернет-магазина. Она позволяет пользователям выбирать товары, просматривать их и оформлять заказ. В этой статье мы подробно рассмотрим, как создать простую корзину для вашего сайта с помощью HTML и CSS.

Что такое корзина на сайте?

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

Планирование функционала корзины

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

• Возможность добавления товаров в корзину.
• Просмотр списка добавленных товаров.
• Обновление количества выбранных товаров.
• Удаление товаров из корзины.
• Расчет общей стоимости заказа.

Создание HTML-структуры корзины

Начнем с создания базовой HTML-разметки для нашей корзины.

HTML-код товаров

<!-- Секция товаров -->
<div class="products">
  <div class="product">
    <h3>Товар 1</h3>
    <p>Описание товара 1</p>
    <span class="price">1000 руб.</span>
    <button class="add-to-cart">Добавить в корзину</button>
  </div>
  <div class="product">
    <h3>Товар 2</h3>
    <p>Описание товара 2</p>
    <span class="price">1500 руб.</span>
    <button class="add-to-cart">Добавить в корзину</button>
  </div>
  <!-- Добавьте больше товаров по необходимости -->
</div>

HTML-код корзины

<!-- Секция корзины -->
<div class="cart">
  <h2>Корзина</h2>
  <table>
    <thead>
      <tr>
        <th>Товар</th>
        <th>Количество</th>
        <th>Цена</th>
        <th>Итого</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <!-- Товары будут добавляться динамически -->
    </tbody>
  </table>
  <div class="total">
    <strong>Общая стоимость: <span id="total-price">0 руб.</span></strong>
  </div>
</div>

Стилизация корзины с помощью CSS

Далее добавим стили для наших элементов, чтобы сделать отображение более приятным для пользователя.

CSS-код

<style>
/* Стили для секции товаров */
.products {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.product {
  border: 1px solid #ccc;
  padding: 15px;
  width: calc(33.333% - 40px);
  box-sizing: border-box;
}

.product h3 {
  margin-top: 0;
}

.product .price {
  color: #f00;
  font-weight: bold;
}

.product .add-to-cart {
  background-color: #28a745;
  color: #fff;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
}

.product .add-to-cart:hover {
  background-color: #218838;
}

/* Стили для секции корзины */
.cart {
  margin-top: 30px;
}

.cart table {
  width: 100%;
  border-collapse: collapse;
}

.cart th, .cart td {
  padding: 10px;
  border: 1px solid #ccc;
  text-align: center;
}

.cart .total {
  text-align: right;
  margin-top: 10px;
}

.cart .remove-item {
  background-color: #dc3545;
  color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

.cart .remove-item:hover {
  background-color: #c82333;
}

</style>

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

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

JavaScript для добавления товаров

<script>
// Массив для хранения товаров в корзине
let cartItems = [];

// Функция для обновления отображения корзины
function updateCart() {
  const cartTableBody = document.querySelector('.cart tbody');
  cartTableBody.innerHTML = '';

  let totalPrice = 0;

  cartItems.forEach((item, index) => {
    const itemTotal = item.price * item.quantity;
    totalPrice += itemTotal;

    const row = document.createElement('tr');

    row.innerHTML = `
      <td>${item.name}</td>
      <td>
        <input type="number" value="${item.quantity}" min="1" data-index="${index}" class="item-quantity" />
      </td>
      <td>${item.price} руб.</td>
      <td>${itemTotal} руб.</td>
      <td><button class="remove-item" data-index="${index}">Удалить</button></td>
    `;

    cartTableBody.appendChild(row);
  });

  document.getElementById('total-price').textContent = totalPrice + ' руб.';
}

// Обработчик события добавления товара в корзину
const addToCartButtons = document.querySelectorAll('.add-to-cart');

addToCartButtons.forEach((button) => {
  button.addEventListener('click', () => {
    const product = button.parentElement;
    const name = product.querySelector('h3').textContent;
    const price = parseFloat(product.querySelector('.price').textContent);

    const existingItem = cartItems.find((item) => item.name === name);

    if (existingItem) {
      existingItem.quantity += 1;
    } else {
      cartItems.push({ name, price, quantity: 1 });
    }

    updateCart();
  });
});
</script>

Отображение содержимого корзины

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

Обновление количества товаров

Пользователи должны иметь возможность изменять количество выбранных товаров напрямую в корзине.

JavaScript для обновления количества

<script>
// Добавляем обработчик для изменения количества товаров
document.body.addEventListener('change', function(event) {
  if (event.target.classList.contains('item-quantity')) {
    const index = event.target.getAttribute('data-index');
    const newQuantity = parseInt(event.target.value);

    if (newQuantity > 0) {
      cartItems[index].quantity = newQuantity;
      updateCart();
    }
  }
});
</script>

Расчет общей стоимости

Общая стоимость автоматически пересчитывается в функции updateCart() при каждом изменении корзины и отображается в элементе с id total-price.

Удаление товаров из корзины

Добавим возможность удалять товары из корзины.

JavaScript для удаления товаров

<script>
// Добавляем обработчик для удаления товаров
document.body.addEventListener('click', function(event) {
  if (event.target.classList.contains('remove-item')) {
    const index = event.target.getAttribute('data-index');
    cartItems.splice(index, 1);
    updateCart();
  }
});
</script>

Заключение

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

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