Aby stworzyć sklep internetowy w HTML z elementami CSS i JavaScript, warto podejść do tematu etapami: od podstawowej struktury i dodania produktów, po prostą funkcjonalność koszyka oraz wytyczne dotyczące dobrych praktyk i optymalizacji SEO. Poniżej znajduje się szczegółowy poradnik z praktycznymi przykładami kodu oraz propozycjami rozbudowy funkcjonalności.
Struktura projektu sklepu internetowego
Podstawowy sklep można zbudować z trzech głównych plików:
index.html(strona sklepu),style.css(style graficzne),script.js(logika JavaScript, np. koszyk).
Struktura katalogów:
/sklep/
|-- index.html
|-- style.css
|-- script.js
|-- /images/
Przykład prostego sklepu – krok po kroku
Krok 1 – html – podstawowa strona produktu
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Mój Sklep Internetowy</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Mój Sklep Internetowy</h1>
<div id="cart">Koszyk: <span id="cart-count">0</span> produktów</div>
</header>
<main>
<section class="product-list">
<article class="product">
<img src="images/product1.jpg" alt="Produkt 1">
<h2>Produkt 1</h2>
<p class="price">19,99 zł</p>
<button onclick="addToCart('Produkt 1', 19.99)">Dodaj do koszyka</button>
</article>
<article class="product">
<img src="images/product2.jpg" alt="Produkt 2">
<h2>Produkt 2</h2>
<p class="price">29,99 zł</p>
<button onclick="addToCart('Produkt 2', 29.99)">Dodaj do koszyka</button>
</article>
<!-- Kolejne produkty -->
</section>
<section id="cart-details" style="display: none;">
<h2>Zawartość koszyka</h2>
<ul id="cart-items"></ul>
<p id="cart-total"></p>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
Krok 2 – css – podstawowy wygląd sklepu
body {
font-family: Arial, sans-serif;
background: #fafafa;
margin: 0;
padding: 0;
}
header {
background: #0052cc;
color: white;
padding: 1em 2em;
display: flex;
justify-content: space-between;
align-items: center;
}
.product-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2em;
margin: 2em 0;
}
.product {
background: white;
border: 1px solid #eee;
border-radius: 6px;
text-align: center;
padding: 1em;
width: 220px;
}
.product img {
max-width: 100%;
height: auto;
}
button {
background: #029a48;
color: white;
border: none;
border-radius: 3px;
padding: 0.7em 2em;
cursor: pointer;
margin-top: 1em;
}
button:hover {
background: #026437;
}
Krok 3 – javascript – prosty koszyk
let cart = [];
function addToCart(product, price) {
cart.push({ product, price });
updateCart();
}
function updateCart() {
document.getElementById('cart-count').textContent = cart.length;
renderCartDetails();
}
function renderCartDetails() {
const cartDetails = document.getElementById('cart-details');
const cartItems = document.getElementById('cart-items');
const cartTotal = document.getElementById('cart-total');
if (cart.length === 0) {
cartDetails.style.display = 'none';
return;
}
cartDetails.style.display = 'block';
cartItems.innerHTML = '';
let total = 0;
cart.forEach(item => {
let li = document.createElement('li');
li.textContent = item.product + ' - ' + item.price.toFixed(2) + ' zł';
cartItems.appendChild(li);
total += item.price;
});
cartTotal.textContent = 'Łącznie: ' + total.toFixed(2) + ' zł';
}
Najważniejsze funkcje i rozbudowa
- Dodawanie kilku produktów – zobacz powyżej przykład struktury
<article class="product">dla wielu pozycji; - Podgląd koszyka – w sekcji
<section id="cart-details">wyświetlają się wybrane produkty oraz łączna cena; - Obsługa usuwania z koszyka – możesz rozbudować funkcję
removeFromCart(index)do usuwania danego produktu; - Realizacja zamówienia – w pełni funkcjonalny sklep wymaga zapisu zamówień po stronie serwera. W czystym HTML/JS możesz jedynie symulować finalizację, np. wyświetlając podsumowanie;
- Responsywność – za pomocą media queries w CSS dostosuj widok sklepu do urządzeń mobilnych.
Wytyczne praktyczne
- Struktura SEO – stosuj poprawne nagłówki (
<h1>,<h2>), unikalne tytuły stron i opisy produktów, optymalizuj nazwy obrazków; - Optymalizacja wydajności – używaj lekkich obrazów, minimalizuj kod CSS i JS, korzystaj z cache;
- Bezpieczeństwo – rozbudowane sklepy wymagają backendu do bezpiecznej obsługi zamówień i płatności;
- Zgodność z prawem – publikując sklep, zadbaj o politykę prywatności, regulamin i warunki zwrotów.
Zastosowania i rozwinięcia
- Prosty katalog produktów – idealny do prezentacji kilku pozycji bez obsługi płatności online;
- Skrypt do nauki html/css/js – nauka obsługi DOM, zdarzeń i prostych skryptów;
- Podstawa pod integrację z backendem – możesz dodać obsługę zamówień przez API np. z PHP, Node.js lub innych technologii serwerowych;
- Landing page kampanii produktowej – szybka sprzedaż pojedynczego produktu z podstawowym koszykiem.
Co dalej?
- By stworzyć profesjonalny sklep, rozważ wykorzystanie gotowych rozwiązań e-commerce lub frameworków takich jak React, Next.js, Vue, a także systemów takich jak WooCommerce czy PrestaShop.
- Dobrą praktyką jest ciągła optymalizacja SEO i analityka (Google Analytics), co pozwala zwiększyć konwersje i zdobyć klientów.
Stworzenie sklepu w HTML, nawet w wersji bardzo uproszczonej, to doskonały sposób na naukę frontend developmentu oraz przygotowanie się do budowy bardziej rozbudowanych aplikacji i stron internetowych.
