Aby stworzyć koszyk w HTML, czyli funkcjonalność niezbędną dla każdego sklepu internetowego, należy połączyć HTML z JavaScriptem (opcjonalnie z backendem, np. PHP), aby użytkownik mógł dodawać produkty do wirtualnego koszyka, podglądać ich listę oraz sumę wartości zamówienia. Poniżej znajduje się szczegółowy poradnik oraz praktyczne przykłady zastosowań.
1. Czym jest koszyk w HTML?
Koszyk w sklepie internetowym to sekcja strony, w której użytkownik widzi wybrane produkty przed złożeniem zamówienia. Pozwala:
- Dodawać/usuwać produkty,
- Wyświetlać listę wybranych produktów,
- Pokazywać łączną cenę oraz liczbę sztuk.
2. Podstawowa struktura HTML dla koszyka
Przykładowy kod HTML (fragment):
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykładowy sklep - Koszyk</title>
</head>
<body>
<h1>Sklep internetowy</h1>
<!-- Lista produktów -->
<div id="produkty">
<div class="produkt" data-id="1" data-nazwa="Koszulka" data-cena="49">
<span>Koszulka</span> - <span>49 zł</span>
<button class="dodaj-do-koszyka">Dodaj do koszyka</button>
</div>
<div class="produkt" data-id="2" data-nazwa="Spodnie" data-cena="99">
<span>Spodnie</span> - <span>99 zł</span>
<button class="dodaj-do-koszyka">Dodaj do koszyka</button>
</div>
<!-- Możesz dodać więcej produktów -->
</div>
<!-- Wyświetlanie koszyka -->
<h2>Twój koszyk</h2>
<ul id="koszyk"></ul>
<div>
Liczba produktów: <span id="suma-sztuk">0</span><br>
Suma do zapłaty: <span id="suma-cena">0</span> zł
</div>
</body>
</html>
3. JavaScript – obsługa dodawania produktów
Dodaj poniższy skrypt tuż przed zamknięciem tagu </body>, aby koszyk działał dynamicznie:
<script>
const koszyk = [];
const koszykList = document.getElementById('koszyk');
const sumaSztuk = document.getElementById('suma-sztuk');
const sumaCena = document.getElementById('suma-cena');
function aktualizujKoszyk() {
koszykList.innerHTML = '';
let suma = 0, liczba = 0;
koszyk.forEach(produkt => {
const li = document.createElement('li');
li.textContent = `${produkt.nazwa} x${produkt.sztuk} – ${produkt.cena * produkt.sztuk} zł`;
koszykList.appendChild(li);
suma += produkt.cena * produkt.sztuk;
liczba += produkt.sztuk;
});
sumaSztuk.textContent = liczba;
sumaCena.textContent = suma;
}
document.querySelectorAll('.dodaj-do-koszyka').forEach(btn => {
btn.addEventListener('click', function() {
const el = this.closest('.produkt');
const id = el.dataset.id;
const nazwa = el.dataset.nazwa;
const cena = parseFloat(el.dataset.cena);
const istnieje = koszyk.find(p => p.id === id);
if (istnieje) {
istnieje.sztuk += 1;
} else {
koszyk.push({ id, nazwa, cena, sztuk: 1 });
}
aktualizujKoszyk();
alert('Produkt został dodany do koszyka.');
});
});
</script>
4. Rozbudowa – usuwanie i zmiana ilości produktów
Możesz dodać do kodu funkcje usuwania produktów i zmiany ilości sztuk. W koszyku wystarczy dodać przyciski plus, minus, usuń przy każdym produkcie i obsłużyć je w JavaScript. Dzięki temu użytkownik otrzymuje pełną obsługę koszyka z poziomu przeglądarki.
5. Jak wdrożyć koszyk na większą skalę?
- Trwałość danych – w praktycznych zastosowaniach dane koszyka zapisuje się w localStorage lub w sesji na backendzie (np. PHP, session);
- Backend (PHP, SQL) – gdy budujesz sklep z bazą danych, koszyk łączy się z systemem logowania i bazą produktów. Po dodaniu do koszyka, dane przechowywane są w zmiennej sesyjnej.
Przykład inicjalizowania koszyka w PHP:
<?php
session_start();
if (!isset($_SESSION["koszyk"])) {
$_SESSION["koszyk"] = [];
}
?>
Przykładowy formularz do dodawania produktu (PHP + HTML):
<form method="post">
<input type="hidden" name="produkt_id" value="1">
<button type="submit">Dodaj do koszyka</button>
</form>
Obsługa dodania produktu do koszyka (PHP):
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["produkt_id"])) {
$id = $_POST["produkt_id"];
$_SESSION["koszyk"][] = $id;
echo "Produkt został dodany do koszyka.";
}
6. Dobre praktyki UX
- Informuj użytkownika o każdej zmianie w koszyku, np. przez komunikat „Produkt został dodany do koszyka”.
- Pokazuj bieżącą wartość zamówienia, liczbę sztuk oraz zawartość koszyka.
- Upewnij się, że koszyk nie jest indeksowany przez wyszukiwarki (SEO), np. ustawiając
noindexna stronie koszyka.
7. Przykłady zastosowań
- Mały sklep internetowy – prosty koszyk na JavaScripcie dla pojedynczych produktów bez backendu;
- Sklep z backendem (PHP, MySQL) – rozbudowany koszyk połączony z bazą danych i panelem administracyjnym;
- Aplikacje SPA (React, Vue, Angular) – koszyk jako komponent z obsługą stanów globalnych (np. Redux).
Tworząc koszyk w HTML warto zadbać zarówno o techniczną poprawność, jak i wygodę użytkownika – umożliwi to zwiększenie konwersji w sklepie oraz pozytywne doświadczenie zakupowe.
