Je voudrais savoir vomcomment passe une commande ?
Quel système de paiement que bette life accepte pour le paiement de commande ?
Bienvenue !
Partagez et discutez du meilleur contenu et des nouvelles idées de marketing, développez votre profil professionnel et devenez ensemble un meilleur spécialiste du marketing.
Cette question a été signalée
2
Réponses
13
Vues
🤣🤣🤣 client ces histoires il part directement oh me repépondre les choses que je ne comprends pas 😂 😂
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beta Shop - Boutique en ligne</title>
<!-- Tailwind CSS pour un design rapide et moderne -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-50 font-sans text-gray-800">
<!-- Barre de navigation -->
<header class="bg-blue-600 text-white shadow-md sticky top-0 z-50">
<div class="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
<h1 class="text-2xl font-bold tracking-wide">Beta Shop</h1>
<button onclick="togglePanier()" class="relative bg-blue-700 px-4 py-2 rounded-lg hover:bg-blue-800 transition">
🛒 Panier (<span id="panier-badge">0</span>)
</button>
</div>
</header>
<main class="max-w-6xl mx-auto px-4 py-8 grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Section Produits -->
<div class="lg:col-span-2">
<h2 class="text-xl font-bold mb-6">Nos Articles Disponibles</h2>
<div id="liste-produits" class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<!-- Les produits s'afficheront ici dynamiquement -->
</div>
</div>
<!-- Section Panier / Tunnel d'achat -->
<div id="section-panier" class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 sticky top-24 h-fit">
<h2 class="text-xl font-bold mb-4">Votre Panier</h2>
<div id="contenu-panier" class="space-y-4 mb-4 max-h-60 overflow-y-auto">
<p class="text-gray-500 text-sm">Votre panier est vide.</p>
</div>
<div class="border-t border-gray-100 pt-4">
<div class="flex justify-between font-bold text-lg mb-4">
<span>Total :</span>
<span><span id="total-prix">0</span> $</span>
</div>
<!-- Formulaire Client -->
<form id="form-commande" onsubmit="validerCommande(event)" class="space-y-3 hidden">
<h3 class="text-sm font-semibold text-gray-600 uppercase tracking-wider">Informations de livraison</h3>
<input type="text" id="client-nom" placeholder="Votre nom complet" required class="w-full px-3 py-2 border rounded-lg text-sm focus:outline-blue-500">
<input type="tel" id="client-tel" placeholder="Numéro de téléphone" required class="w-full px-3 py-2 border rounded-lg text-sm focus:outline-blue-500">
<label class="block text-sm text-gray-600 font-medium">Mode de paiement :</label>
<select id="paiement-methode" class="w-full px-3 py-2 border rounded-lg text-sm focus:outline-blue-500">
<option value="Mobile Money">Mobile Money (Airtel, Orange, M-Pesa)</option>
<option value="Carte Bancaire">Carte Bancaire</option>
<option value="Paiement à la livraison">Paiement à la livraison</option>
</select>
<button type="submit" class="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-3 rounded-lg mt-4 transition shadow-md">
Confirmer la commande
</button>
</form>
</div>
</div>
</main>
<!-- JavaScript Logique Client -->
<script>
let panier = [];
let produitsDispo = [];
// 1. Charger les produits depuis l'API au démarrage
async function chargerProduits() {
try {
const res = await fetch('/api/produits');
produitsDispo = await res.json();
afficherProduits();
} catch (err) {
console.error("Erreur de chargement des produits", err);
}
}
// 2. Afficher les cartes produits dans le HTML
function afficherProduits() {
const container = document.getElementById('liste-produits');
container.innerHTML = produitsDispo.map(p => `
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition">
<img src="${p.image}" alt="${p.nom}" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-bold text-lg mb-1">${p.nom}</h3>
<p class="text-blue-600 font-bold text-xl mb-4">${p.prix} $</p>
<button onclick="ajouterAuPanier(${p.id})" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 rounded-lg text-sm transition">
Ajouter au panier
</button>
</div>
</div>
`).join('');
}
// 3. Ajouter un article au panier
function ajouterAuPanier(id) {
const produit = produitsDispo.find(p => p.id === id);
const itemExiste = panier.find(item => item.id === id);
if (itemExiste) {
itemExiste.quantite += 1;
} else {
panier.push({ ...produit, quantite: 1 });
}
mettreAJourPanier();
}
// 4. Mettre à jour l'interface du panier
function mettreAJourPanier() {
const contenu = document.getElementById('contenu-panier');
const badge = document.getElementById('panier-badge');
const totalElt = document.getElementById('total-prix');
const form = document.getElementById('form-commande');
const totalArticles = panier.reduce((acc, item) => acc + item.quantite, 0);
badge.innerText = totalArticles;
if (panier.length === 0) {
contenu.innerHTML = `<p class="text-gray-500 text-sm">Votre panier est vide.</p>`;
totalElt.innerText = "0";
form.classList.add('hidden');
return;
}
form.classList.remove('hidden');
let totalPrix = 0;
contenu.innerHTML = panier.map(item => {
totalPrix += item.prix * item.quantite;
return `
<div class="flex justify-between items-center bg-gray-50 p-2 rounded-lg text-sm">
<div>
<p class="font-semibold">${item.nom}</p>
<p class="text-gray-500">${item.prix}$ x ${item.quantite}</p>
</div>
<button onclick="retirerDuPanier(${item.id})" class="text-red-500 font-bold hover:text-red-700 px-2">✕</button>
</div>
`;
}).join('');
totalElt.innerText = totalPrix;
}
// 5. Retirer un article du panier
function retirerDuPanier(id) {
panier = panier.filter(item => item.id !== id);
mettreAJourPanier();
}
// 6. Envoyer la commande au serveur backend
async function validerCommande(event) {
event.preventDefault();
const commandeData = {
client: {
nom: document.getElementById('client-nom').value,
telephone: document.getElementById('client-tel').value
},
panier: panier,
total: document.getElementById('total-prix').innerText,
methodePaiement: document.getElementById('paiement-methode').value
};
try {
const response = await fetch('/api/commande', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(commandeData)
});
const resultat = await response.json();
if (resultat.success) {
alert(`🎉 ${resultat.message}\nNuméro de commande : ${resultat.numeroCommande}`);
panier = [];
document.getElementById('form-commande').reset();
mettreAJourPanier();
} else {
alert("Erreur : " + resultat.error);
}
} catch (err) {
alert("Impossible de traiter la commande pour le moment.");
}
}
// Initialisation
chargerProduits();
</script>
</body>
</html>
Vous appréciez la discussion ? Ne vous contentez pas de lire, rejoignez-nous !
Créez un compte dès aujourd'hui pour profiter de fonctionnalités exclusives et échanger avec notre formidable communauté !
S'inscrire
Je vous ai répondu en langue des machines😂😂😂😂😂😂