Aby stworzyć koszyk w HTML, należy połączyć kilka technologii: HTML (do struktury), CSS (do stylizacji) oraz JavaScript (do dynamicznej obsługi zdarzeń i logiki koszyka). Poniżej znajduje się szczegółowy poradnik, który pozwoli krok po kroku stworzyć prosty koszyk zakupowy z mechanizmem dodawania produktów i prezentacją zawartości koszyka bez użycia back-endu. Takie rozwiązanie świetnie sprawdzi się w demonstracjach, prostych sklepach lub w projektach edukacyjnych.
Struktura html
Najpierw zdefiniujmy produkty i miejsce na koszyk na naszej stronie.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Prosty Koszyk w HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Produkty</h1>
<div id="products">
<div class="product" data-id="1" data-name="Produkt A" data-price="29.99">
<h2>Produkt A</h2>
<p>Cena: 29.99 zł</p>
<button class="add-to-cart">Dodaj do koszyka</button>
</div>
<div class="product" data-id="2" data-name="Produkt B" data-price="49.99">
<h2>Produkt B</h2>
<p>Cena: 49.99 zł</p>
<button class="add-to-cart">Dodaj do koszyka</button>
</div>
<!-- Dodaj więcej produktów w analogiczny sposób -->
</div>
<h1>Koszyk</h1>
<div id="cart">
<p>Koszyk jest pusty.</p>
</div>
<script src="script.js"></script>
</body>
</html>
Stylizacja koszyka (css)
Dodaj prosty plik style.css, by poprawić wygląd strony:
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#products, #cart {
margin-bottom: 40px;
}
.product {
border: 1px solid #ddd;
padding: 16px;
margin-bottom: 10px;
max-width: 300px;
}
.add-to-cart {
background: #007bff;
color: white;
border: none;
padding: 8px 16px;
cursor: pointer;
}
.add-to-cart:hover {
background: #0056b3;
}
Logika koszyka (javascript)
Stwórz plik script.js, który będzie obsługiwał zdarzenia dodawania produktów do koszyka oraz ich wyświetlanie.
const cart = [];
document.querySelectorAll('.add-to-cart').forEach(button => {
button.addEventListener('click', function() {
const productDiv = this.closest('.product');
const id = productDiv.getAttribute('data-id');
const name = productDiv.getAttribute('data-name');
const price = parseFloat(productDiv.getAttribute('data-price'));
// Sprawdź, czy produkt już jest w koszyku
const existingProduct = cart.find(item => item.id === id);
if (existingProduct) {
existingProduct.quantity += 1;
} else {
cart.push({ id, name, price, quantity: 1 });
}
updateCartDisplay();
});
});
function updateCartDisplay() {
const cartDiv = document.getElementById('cart');
cartDiv.innerHTML = '';
if (cart.length === 0) {
cartDiv.innerHTML = '<p>Koszyk jest pusty.</p>';
return;
}
const ul = document.createElement('ul');
let total = 0;
cart.forEach(item => {
const li = document.createElement('li');
li.textContent = `${item.name} x${item.quantity} – ${(item.price * item.quantity).toFixed(2)} zł`;
ul.appendChild(li);
total += item.price * item.quantity;
});
cartDiv.appendChild(ul);
const totalP = document.createElement('p');
totalP.innerHTML = `<strong>Łącznie: ${total.toFixed(2)} zł</strong>`;
cartDiv.appendChild(totalP);
}
Dodatkowe funkcjonalności
Możesz dalej rozwinąć swój koszyk, np. o usuwanie produktów, zmniejszanie ilości, zapis zawartości koszyka w localStorage (by nie znikała po odświeżeniu) czy podsumowanie zamówienia. Oto przykłady rozszerzeń:
- dodaj przyciski „Usuń” obok każdego produktu w koszyku,
- dodaj obsługę zapisu stanu koszyka do localStorage i wczytywanie go przy starcie strony,
- dodaj obsługę formularza zamówienia.
Przykłady zastosowań
Koszyk HTML znajduje zastosowanie między innymi w:
- Prototypach sklepów internetowych – szybkie prezentacje działania sklepu bez back-endu;
- Stronach promocyjnych produktów – np. strony z jednym, wybranym produktem, gdzie użytkownik może skompletować zamówienie;
- Szablonach edukacyjnych – do nauki podstaw programowania webowego;
- Testach użyteczności – badania reakcji użytkowników na interfejs koszyka przed wdrożeniem na dużą skalę.
Wskazówki użyteczności
- Informuj użytkownika o każdej zmianie w koszyku (np. komunikaty „Produkt został dodany do koszyka”),
- Prezentuj aktualną zawartość koszyka i sumę zamówienia w widocznym miejscu,
- Zadbaj o bezpieczeństwo – w realnych wdrożeniach operacje na koszyku powinny być obsługiwane po stronie serwera, m.in. w celu ochrony danych i weryfikacji cen oraz stanów magazynowych.
Powyższy poradnik pozwala samodzielnie stworzyć działający koszyk w HTML z prostą logiką, gotowy do dalszej rozbudowy o kolejne elementy niezbędne w profesjonalnych projektach internetowych.
