Bootstrap 5
E Commerce
Template
Responsive
Variante
Galerie
Checkout
Boutique
Html
Css
Variante avancée du template e-commerce Bootstrap 5 avec mise en page alternative, galerie produits en grille et processus checkout optimisé.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Template E Commerce Bootstrap 5 2026 04291656 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
<!-- Animate.css pour les animations -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
</head>
<body class="bg-light">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top shadow-sm">
<div class="container">
<a class="navbar-brand fw-bold fs-3" href="#">
<i class="bi bi-shop"></i> Shop<span class="text-warning">Bootstrap</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto ms-3">
<li class="nav-item">
<a class="nav-link active" href="#"><i class="bi bi-house"></i> Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#products"><i class="bi bi-grid"></i> Produits</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-info-circle"></i> À propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-envelope"></i> Contact</a>
</li>
</ul>
<div class="d-flex align-items-center gap-3">
<div class="input-group" style="max-width: 300px;">
<span class="input-group-text bg-white border-end-0">
<i class="bi bi-search text-muted"></i>
</span>
<input type="text" class="form-control border-start-0" id="searchInput" placeholder="Rechercher...">
</div>
<button class="btn btn-warning position-relative" data-bs-toggle="modal" data-bs-target="#cartModal">
<i class="bi bi-cart3 fs-5"></i>
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" id="cartCount">
0
</span>
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="bg-gradient text-white py-5" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<div class="container py-5">
<div class="row align-items-center">
<div class="col-lg-6 animate__animated animate__fadeInLeft">
<h1 class="display-4 fw-bold mb-4">Collection <span class="text-warning">2024</span></h1>
<p class="lead mb-4">Découvrez notre sélection de produits tendance à prix imbattables. Livraison gratuite dès 50€ d'achat !</p>
<div class="d-flex gap-3 flex-wrap">
<a href="#products" class="btn btn-light btn-lg fw-bold px-4">
<i class="bi bi-eye"></i> Voir les produits
</a>
<button class="btn btn-outline-light btn-lg" data-bs-toggle="modal" data-bs-target="#promoModal">
<i class="bi bi-tag"></i> Offres spéciales
</button>
</div>
</div>
<div class="col-lg-6 text-center animate__animated animate__fadeInRight">
<i class="bi bi-bag-check display-1 text-warning"></i>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="py-4 bg-white shadow-sm">
<div class="container">
<div class="row text-center g-4">
<div class="col-md-4 animate__animated animate__fadeInUp">
<div class="p-3">
<i class="bi bi-truck display-6 text-primary"></i>
<h5 class="mt-2">Livraison Gratuite</h5>
<p class="text-muted mb-0">Dès 50€ d'achat</p>
</div>
</div>
<div class="col-md-4 animate__animated animate__fadeInUp animate__delay-1s">
<div class="p-3">
<i class="bi bi-shield-check display-6 text-success"></i>
<h5 class="mt-2">Paiement Sécurisé</h5>
<p class="text-muted mb-0">100% protégé</p>
</div>
</div>
<div class="col-md-4 animate__animated animate__fadeInUp animate__delay-2s">
<div class="p-3">
<i class="bi bi-arrow-counterclockwise display-6 text-info"></i>
<h5 class="mt-2">Retours Gratuits</h5>
<p class="text-muted mb-0">Sous 30 jours</p>
</div>
</div>
</div>
</div>
</section>
<!-- Products Section -->
<section id="products" class="py-5">
<div class="container">
<!-- Filters -->
<div class="row mb-4 align-items-center">
<div class="col-md-8">
<div class="btn-group flex-wrap" role="group">
<button class="btn btn-outline-primary active filter-btn" data-category="all">
<i class="bi bi-grid-3x3-gap"></i> Tout
</button>
<button class="btn btn-outline-primary filter-btn" data-category="electronique">
<i class="bi bi-laptop"></i> Électronique
</button>
<button class="btn btn-outline-primary filter-btn" data-category="mode">
<i class="bi bi-handbag"></i> Mode
</button>
<button class="btn btn-outline-primary filter-btn" data-category="maison">
<i class="bi bi-house-heart"></i> Maison
</button>
</div>
</div>
<div class="col-md-4">
<select class="form-select" id="sortSelect">
<option value="default">Trier par</option>
<option value="price-asc">Prix: croissant</option>
<option value="price-desc">Prix: décroissant</option>
<option value="rating">Meilleures notes</option>
</select>
</div>
</div>
<!-- Products Grid -->
<div class="row g-4" id="productsGrid">
<!-- Products generated by JavaScript -->
</div>
<!-- Load More -->
<div class="text-center mt-5">
<button class="btn btn-outline-primary btn-lg px-5" id="loadMoreBtn">
<i class="bi bi-arrow-repeat"></i> Charger plus de produits
</button>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="bg-primary text-white py-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6 text-center">
<h3 class="mb-3"><i class="bi bi-envelope-paper"></i> Newsletter</h3>
<p class="mb-4">Inscrivez-vous pour recevoir nos offres exclusives</p>
<div class="input-group input-group-lg">
<input type="email" class="form-control" placeholder="Votre email">
<button class="btn btn-warning fw-bold" type="button">
S'inscrire
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark text-white py-4">
<div class="container">
<div class="row g-4">
<div class="col-lg-4">
<h5><i class="bi bi-shop"></i> ShopBootstrap</h5>
<p class="text-muted">Votre boutique en ligne préférée pour des produits tendance et de qualité.</p>
</div>
<div class="col-lg-4">
<h5>Liens rapides</h5>
<ul class="list-unstyled">
<li><a href="#" class="text-muted text-decoration-none">Accueil</a></li>
<li><a href="#" class="text-muted text-decoration-none">Produits</a></li>
<li><a href="#" class="text-muted text-decoration-none">Contact</a></li>
</ul>
</div>
<div class="col-lg-4">
<h5>Suivez-nous</h5>
<div class="d-flex gap-3">
<a href="#" class="text-white fs-4" aria-label="Facebook"><i class="bi bi-facebook"></i></a>
<a href="#" class="text-white fs-4" aria-label="Instagram"><i class="bi bi-instagram"></i></a>
<a href="#" class="text-white fs-4" aria-label="Twitter"><i class="bi bi-twitter"></i></a>
</div>
</div>
</div>
<hr class="border-secondary">
<p class="text-center text-muted mb-0">© 2024 ShopBootstrap. Tous droits réservés.</p>
</div>
</footer>
<!-- Cart Modal -->
<div class="modal fade" id="cartModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header bg-primary text-white">
<h5 class="modal-title"><i class="bi bi-cart3"></i> Votre Panier</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="cartItems">
<div class="text-center text-muted py-5">
<i class="bi bi-cart-x display-1"></i>
<p class="mt-3">Votre panier est vide</p>
</div>
</div>
<div class="modal-footer">
<div class="d-flex justify-content-between align-items-center w-100">
<h5 class="mb-0">Total: <span class="text-primary fw-bold" id="cartTotal">0€</span></h5>
<button class="btn btn-success btn-lg" onclick="checkout()">
<i class="bi bi-check-circle"></i> Commander
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Promo Modal -->
<div class="modal fade" id="promoModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-warning">
<h5 class="modal-title"><i class="bi bi-star-fill"></i> Offres Spéciales</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="alert alert-success animate__animated animate__pulse animate__infinite">
<i class="bi bi-tag-fill"></i> <strong>-30%</strong> sur tous les produits électroniques !
</div>
<div class="alert alert-info">
<i class="bi bi-truck"></i> Livraison gratuite dès 50€ d'achat
</div>
<div class="alert alert-warning">
<i class="bi bi-gift"></i> Un cadeau offert pour toute commande > 100€
</div>
</div>
</div>
</div>
</div>
<!-- Toast Container -->
<div class="toast-container position-fixed top-0 end-0 p-3">
<div id="liveToast" class="toast align-items-center text-white bg-success border-0" role="alert">
<div class="d-flex">
<div class="toast-body" id="toastMessage">
<i class="bi bi-check-circle me-2"></i>
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
<!-- Bootstrap 5 JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Product Data
const productsData = [
{
id: 1,
name: "Smartphone Pro X",
category: "electronique",
price: 799.99,
rating: 4.5,
description: "Dernier cri de la technologie avec appareil photo 108MP",
badge: "Nouveau",
badgeClass: "bg-success",
icon: "bi-phone"
},
{
id: 2,
name: "Écouteurs Sans Fil",
category: "electronique",
price: 149.99,
rating: 4.8,
description: "Son haute fidélité avec réduction de bruit active",
badge: "Best Seller",
badgeClass: "bg-warning text-dark",
icon: "bi-earbuds"
},
{
id: 3,
name: "Montre Connectée",
category: "electronique",
price: 299.99,
rating: 4.3,
description: "Suivi santé, notifications et design élégant",
badge: "Promo",
badgeClass: "bg-danger",
icon: "bi-smartwatch"
},
{
id: 4,
name: "Sac à Main Élégant",
category: "mode",
price: 89.99,
rating: 4.6,
description: "Cuir véritable, design intemporel",
badge: null,
icon: "bi-handbag"
},
{
id: 5,
name: "Baskets Tendance",
category: "mode",
price: 129.99,
rating: 4.7,
description: "Confort et style pour tous les jours",
badge: "Populaire",
badgeClass: "bg-info",
icon: "bi-shoe-prints"
},
{
id: 6,
name: "Lampe Design LED",
category: "maison",
price: 59.99,
rating: 4.4,
description: "Éclairage intelligent pour votre intérieur",
badge: "Éco",
badgeClass: "bg-success",
icon: "bi-lightbulb"
},
{
id: 7,
name: "Tablette Tactile",
category: "electronique",
price: 449.99,
rating: 4.2,
description: "Parfaite pour le travail et les loisirs",
badge: "Premium",
badgeClass: "bg-primary",
icon: "bi-tablet"
},
{
id: 8,
name: "Plaid Confort",
category: "maison",
price: 39.99,
rating: 4.9,
description: "Doux et chaud, idéal pour les soirées cocooning",
badge: null,
icon: "bi-house-heart"
},
{
id: 9,
name: "Enceinte Bluetooth",
category: "electronique",
price: 199.99,
rating: 4.6,
description: "Son 360° avec basses puissantes",
badge: "Top Ventes",
badgeClass: "bg-warning text-dark",
icon: "bi-speaker"
},
{
id: 10,
name: "T-shirt Premium",
category: "mode",
price: 34.99,
rating: 4.1,
description: "Coton bio, coupe moderne",
badge: "Bio",
badgeClass: "bg-success",
icon: "bi-tag"
},
{
id: 11,
name: "Cadre Décoratif",
category: "maison",
price: 24.99,
rating: 4.3,
description: "Design scandinave pour votre décoration",
badge: null,
icon: "bi-image"
},
{
id: 12,
name: "Chargeur Sans Fil",
category: "electronique",
price: 44.99,
rating: 4.5,
description: "Charge rapide compatible tous appareils",
badge: "Utile",
badgeClass: "bg-info",
icon: "bi-battery-charging"
}
];
let cart = [];
let currentFilter = 'all';
let displayedProducts = 6;
// Toast Bootstrap
const toastElement = document.getElementById('liveToast');
const toast = new bootstrap.Toast(toastElement, {
delay: 3000
});
function showToast(message, type = 'success') {
const toastElement = document.getElementById('liveToast');
const toastMessage = document.getElementById('toastMessage');
// Changer la couleur du toast selon le type
toastElement.className = `toast align-items-center text-white bg-${type} border-0`;
toastMessage.textContent = message;
toast.show();
}
// Initialize products
function initProducts() {
displayProducts(productsData.slice(0, displayedProducts));
}
// Generate rating stars
function generateStars(rating) {
let stars = '';
for (let i = 1; i <= 5; i++) {
if (i <= rating) {
stars += '<i class="bi bi-star-fill text-warning"></i>';
} else if (i - 0.5 <= rating) {
stars += '<i class="bi bi-star-half text-warning"></i>';
} else {
stars += '<i class="bi bi-star text-warning"></i>';
}
}
return stars;
}
// Display products with Bootstrap cards
function displayProducts(products) {
const grid = document.getElementById('productsGrid');
if (products.length === 0) {
grid.innerHTML = `
<div class="col-12 text-center py-5">
<i class="bi bi-search display-1 text-muted"></i>
<h3 class="text-muted mt-3">Aucun produit trouvé</h3>
<p class="text-muted">Essayez de modifier vos critères de recherche</p>
</div>
`;
return;
}
grid.innerHTML = products.map((product, index) => `
<div class="col-md-6 col-lg-4 animate__animated animate__fadeInUp" style="animation-delay: ${index * 0.1}s">
<div class="card h-100 shadow-sm border-0 product-card" data-category="${product.category}">
${product.badge ? `
<span class="badge ${product.badgeClass} position-absolute top-0 end-0 m-2 fs-6">
${product.badge}
</span>
` : ''}
<div class="card-body text-center bg-light rounded-top">
<i class="bi ${product.icon} display-1 text-primary"></i>
</div>
<div class="card-body">
<div class="d-flex justify-content-between align-items-start mb-2">
<span class="badge bg-secondary">${product.category}</span>
<small class="text-muted">
${generateStars(product.rating)}
<span class="ms-1">${product.rating}</span>
</small>
</div>
<h5 class="card-title fw-bold">${product.name}</h5>
<p class="card-text text-muted small">${product.description}</p>
<div class="d-flex justify-content-between align-items-center mt-3">
<span class="fs-4 fw-bold text-primary">${product.price.toFixed(2)}€</span>
<button class="btn btn-primary btn-sm" onclick="addToCart(${product.id})">
<i class="bi bi-cart-plus"></i> Ajouter
</button>
</div>
</div>
</div>
</div>
`).join('');
}
// Add to cart with animation
function addToCart(productId) {
const product = productsData.find(p => p.id === productId);
const existingItem = cart.find(item => item.id === productId);
if (existingItem) {
existingItem.quantity++;
} else {
cart.push({ ...product, quantity: 1 });
}
updateCartCount();
showToast(`${product.name} ajouté au panier ! <i class="bi bi-emoji-smile"></i>`);
// Animation du compteur
const cartCount = document.getElementById('cartCount');
cartCount.classList.add('animate__animated', 'animate__heartBeat');
setTimeout(() => {
cartCount.classList.remove('animate__animated', 'animate__heartBeat');
}, 1000);
}
// Update cart count badge
function updateCartCount() {
const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
document.getElementById('cartCount').textContent = totalItems;
}
// Display cart in modal
function displayCart() {
const cartItems = document.getElementById('cartItems');
if (cart.length === 0) {
cartItems.innerHTML = `
<div class="text-center text-muted py-5">
<i class="bi bi-cart-x display-1"></i>
<p class="mt-3">Votre panier est vide</p>
</div>
`;
} else {
cartItems.innerHTML = `
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Produit</th>
<th>Prix</th>
<th>Quantité</th>
<th>Total</th>
<th></th>
</tr>
</thead>
<tbody>
${cart.map(item => `
<tr>
<td>
<div class="d-flex align-items-center">
<i class="bi ${item.icon} fs-3 text-primary me-2"></i>
<span>${item.name}</span>
</div>
</td>
<td>${item.price.toFixed(2)}€</td>
<td>
<div class="btn-group btn-group-sm">
<button class="btn btn-outline-secondary" onclick="updateQuantity(${item.id}, -1)">-</button>
<button class="btn btn-outline-secondary" disabled>${item.quantity}</button>
<button class="btn btn-outline-secondary" onclick="updateQuantity(${item.id}, 1)">+</button>
</div>
</td>
<td class="fw-bold">${(item.price * item.quantity).toFixed(2)}€</td>
<td>
<button class="btn btn-danger btn-sm" onclick="removeFromCart(${item.id})">
<i class="bi bi-trash"></i>
</button>
</td>
</tr>
`).join('')}
</tbody>
</table>
</div>
`;
}
const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
document.getElementById('cartTotal').textContent = `${total.toFixed(2)}€`;
}
// Update quantity in cart
function updateQuantity(productId, change) {
const item = cart.find(item => item.id === productId);
if (item) {
item.quantity += change;
if (item.quantity <= 0) {
removeFromCart(productId);
} else {
displayCart();
updateCartCount();
}
}
}
// Remove from cart
function removeFromCart(productId) {
cart = cart.filter(item => item.id !== productId);
updateCartCount();
displayCart();
showToast('Produit retiré du panier', 'warning');
}
// Checkout
function checkout() {
if (cart.length === 0) {
showToast('Votre panier est vide !', 'danger');
return;
}
const modal = bootstrap.Modal.getInstance(document.getElementById('cartModal'));
showToast('Commande validée avec succès ! Merci de votre achat. <i class="bi bi-party-popper"></i>');
cart = [];
updateCartCount();
displayCart();
setTimeout(() => {
modal.hide();
}, 1500);
}
// Filter products
function filterProducts(category) {
currentFilter = category;
// Update active button
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.classList.remove('active');
if (btn.dataset.category === category) {
btn.classList.add('active');
}
});
// Filter products
let filtered = category === 'all' ? [...productsData] : productsData.filter(p => p.category === category);
// Apply search
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
if (searchTerm) {
filtered = filtered.filter(p =>
p.name.toLowerCase().includes(searchTerm) ||
p.description.toLowerCase().includes(searchTerm)
);
}
// Apply sorting
const sortValue = document.getElementById('sortSelect').value;
if (sortValue === 'price-asc') {
filtered.sort((a, b) => a.price - b.price);
} else if (sortValue === 'price-desc') {
filtered.sort((a, b) => b.price - a.price);
} else if (sortValue === 'rating') {
filtered.sort((a, b) => b.rating - a.rating);
}
displayProducts(filtered);
}
// Load more products
function loadMore() {
displayedProducts = productsData.length;
filterProducts(currentFilter);
document.getElementById('loadMoreBtn').style.display = 'none';
}
// Event Listeners
document.addEventListener('DOMContentLoaded', () => {
initProducts();
// Search
document.getElementById('searchInput').addEventListener('input', () => {
filterProducts(currentFilter);
});
// Filter buttons
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', () => {
filterProducts(btn.dataset.category);
});
});
// Sort select
document.getElementById('sortSelect').addEventListener('change', () => {
filterProducts(currentFilter);
});
// Load more
document.getElementById('loadMoreBtn').addEventListener('click', loadMore);
// Cart modal
document.getElementById('cartModal').addEventListener('show.bs.modal', displayCart);
// Product cards hover effect
document.addEventListener('mouseover', (e) => {
if (e.target.closest('.card')) {
const card = e.target.closest('.card');
card.style.transform = 'translateY(-5px)';
card.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
card.style.boxShadow = '0 10px 20px rgba(0,0,0,0.15)';
}
});
document.addEventListener('mouseout', (e) => {
if (e.target.closest('.card')) {
const card = e.target.closest('.card');
card.style.transform = 'translateY(0)';
card.style.boxShadow = '0 2px 5px rgba(0,0,0,0.1)';
}
});
});
</script>
</body>
</html>
Télécharger le fichier source