Bonjour à tous, ici Lucas Martin sur Cash Astuce. Vous souhaitez vendre des produits numériques (ebooks, templates, formations) directement depuis votre blog, mais vous refusez d'installer des plateformes lourdes qui détruiraient votre score PageSpeed ? Vous êtes au bon endroit.
Dans notre catégorie Création E-commerce, nous allons transformer Blogger en un véritable système de vente Serverless (sans serveur). Aujourd'hui, nous développons la pièce maîtresse : un panier d'achat persistant basé sur l'API LocalStorage et notre fidèle Vanilla JS. Le tout, pour un poids d'environ 2 Ko !
Pourquoi utiliser LocalStorage pour le E-commerce sur Blogger ?
- Vitesse éclair (Core Web Vitals) : Aucune requête vers une base de données MySQL. Le calcul se fait sur l'appareil du client.
- Expérience sans couture : Le panier flotte sur toutes vos pages sans rechargement.
Tutoriel : Construire le Panier d'Achat LocalStorage
Rappel de sécurité : Sauvegardez votre thème (Thème > Sauvegarder) avant de commencer.
Étape 1 : Le Design du Panier Flottant (CSS)
Ajoutez ce code dans votre zone CSS pour créer l'interface du panier (compatible Dark Mode) :
/* Panier E-commerce Blogger - Cash Astuce */
#ca-cart-widget {
position: fixed; bottom: 20px; left: 20px;
background: #28a745; color: white;
width: 60px; height: 60px; border-radius: 50%;
display: flex; justify-content: center; align-items: center;
cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.2);
z-index: 1000; transition: transform 0.2s; font-size: 24px;
}
#ca-cart-widget:hover { transform: scale(1.1); }
#ca-cart-count {
position: absolute; top: -5px; right: -5px;
background: #dc3545; color: white; font-size: 12px;
font-weight: bold; width: 22px; height: 22px;
border-radius: 50%; display: flex;
justify-content: center; align-items: center;
}
#ca-cart-panel {
position: fixed; top: 0; right: -350px;
width: 350px; height: 100vh; background: #fff;
box-shadow: -5px 0 15px rgba(0,0,0,0.1);
transition: right 0.3s ease; z-index: 1001;
display: flex; flex-direction: column; font-family: inherit;
}
#ca-cart-panel.open { right: 0; }
.ca-cart-header { padding: 20px; background: #f8f9fa; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; font-weight: bold; font-size: 18px; }
.ca-cart-close { cursor: pointer; color: #dc3545; font-size: 24px; }
.ca-cart-items { flex: 1; overflow-y: auto; padding: 20px; }
.ca-cart-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed #ddd; font-size: 14px; }
.ca-remove-item { color: #dc3545; cursor: pointer; font-weight: bold; }
.ca-cart-footer { padding: 20px; border-top: 1px solid #ddd; background: #f8f9fa; text-align: center; }
#ca-cart-total { font-size: 18px; font-weight: bold; margin-bottom: 15px; display: block; }
.ca-checkout-btn { background: #28a745; color: white; border: none; padding: 12px 20px; width: 100%; border-radius: 5px; font-size: 16px; font-weight: bold; cursor: pointer; }
/* Dark Mode */
[data-theme="dark"] #ca-cart-panel { background: #1e1e1e; color: #ddd; }
[data-theme="dark"] .ca-cart-header, [data-theme="dark"] .ca-cart-footer { background: #2a2a2a; border-color: #333; }
[data-theme="dark"] .ca-cart-item { border-color: #444; }
Étape 2 : Le Moteur Javascript (LocalStorage)
Placez ce script juste avant la balise </body> de votre thème :
<!-- Script Panier LocalStorage par Cash Astuce -->
<script>
//<![CDATA[
document.addEventListener('DOMContentLoaded', function() {
const cartHTML = `
🛒0
Votre Panier×
`;
document.body.insertAdjacentHTML('beforeend', cartHTML);
const cartPanel = document.getElementById('ca-cart-panel');
document.getElementById('ca-cart-widget').onclick = () => cartPanel.classList.add('open');
document.getElementById('ca-cart-close').onclick = () => cartPanel.classList.remove('open');
let cart = JSON.parse(localStorage.getItem('cashAstuceCart')) || [];
function updateCartUI() {
const itemsContainer = document.getElementById('ca-cart-items');
itemsContainer.innerHTML = '';
let total = 0;
if (cart.length === 0) {
itemsContainer.innerHTML = 'Votre panier est vide.
';
} else {
cart.forEach((item, index) => {
total += parseFloat(item.price);
itemsContainer.innerHTML += `
${item.name}
${item.price} €
×
`;
});
}
document.getElementById('ca-cart-count').innerText = cart.length;
document.getElementById('ca-cart-total').innerText = `Total : ${total.toFixed(2)} €`;
localStorage.setItem('cashAstuceCart', JSON.stringify(cart));
}
window.addToCart = function(id, name, price) {
if(!cart.find(item => item.id === id)) {
cart.push({ id, name, price });
updateCartUI();
cartPanel.classList.add('open');
} else {
alert("Ce produit est déjà dans votre panier !");
}
};
window.removeFromCart = function(index) {
cart.splice(index, 1);
updateCartUI();
};
updateCartUI();
});
//]]>
</script>Étape 3 : Ajouter des boutons d'achat dans vos articles
Vous pouvez maintenant placer ce bouton n'importe où dans vos articles en mode HTML :
<button style="padding:10px 20px; background:#0056b3; color:white; border:none; border-radius:5px; cursor:pointer;"
onclick="addToCart('ebook-01', 'Guide SEO 2026', 15.00)">
Ajouter le Guide au panier (15 €)
</button>🚀 Optimisez votre blog avec nos autres tutoriels
L'ajout de ce script Vanilla JS vous permet de conserver des performances optimales. Pour aller plus loin dans l'optimisation technique de votre blog Blogger, découvrez nos autres guides :
- 🛠️ SEO Technique : Comment intégrer les données structurées JSON-LD (Schema.org) pour booster votre SEO sur Blogger
- 💻 Développement : Créer un sommaire automatique (Table of Contents) en Vanilla JavaScript pour Blogger
- 💰 Monétisation : Optimiser le Lazy Loading pour Google AdSense et préserver vos Core Web Vitals
Commentaires
Enregistrer un commentaire