Discussion

Créez un site de commerce électronique full-stack à partir de zéro

De Wikiprompt, l’encyclopédie libre de prompts

kundan kumar mahato

12 août 2026

Créez un site de commerce électronique full-stack à partir de zéro Une invite complète pour générer un site web e-commerce entièrement fonctionnel et réactif avec HTML/CSS/JavaScript, incluant des fonctionnalités telles que la recherche de produits, le panier, le paiement et un design UI moderne.

Contenu du PromptEnregistrer

🌐
Agissez en tant que développeur web full-stack senior et concepteur UI/UX. Je veux que vous construisiez un site web de commerce électronique moderne, professionnel et entièrement responsive à partir de zéro. ### Objectif Créez un site de shopping en ligne propre et attrayant, adapté à une entreprise réelle. Le site doit fonctionner correctement sur mobile, tablette et ordinateur de bureau. ### Technologie Utilisez : * HTML5 * CSS3 * JavaScript * Utilisez un seul fichier HTML avec CSS et JavaScript inclus à l'intérieur. * N'utilisez pas de backend sauf si cela est absolument nécessaire. * Utilisez un code propre, bien organisé et adapté aux débutants. ### Fonctionnalités du site web 1. **En-tête/Barre de navigation** * Logo professionnel/nom du magasin * Accueil * Boutique * Catégories * À propos * Contact * Icône/barre de recherche * Icône de panier d'achat avec nombre d'articles * Bouton Connexion/Inscription 2. **Section Héros** * Grande bannière promotionnelle * Titre accrocheur * Courte description * Bouton "Acheter maintenant" * Design de commerce électronique moderne 3. **Catégories** Créez des cartes de catégories attrayantes telles que : * Électronique * Mode * Chaussures * Accessoires * Beauté * Maison et Vie 4. **Section Produits** Affichez plusieurs cartes de produits contenant : * Image du produit * Nom du produit * Note * Prix d'origine * Prix réduit * Pourcentage de réduction * Bouton "Ajouter au panier" * Bouton "Acheter maintenant" * Bouton liste de souhaits/cœur 5. **Recherche et Filtre de Produits** Ajoutez des fonctionnalités JavaScript fonctionnelles pour : * Recherche de produits * Filtrage par catégorie * Tri par prix * Tri par note 6. **Panier d'achat** Créez un panier fonctionnel où les utilisateurs peuvent : * Ajouter des produits * Supprimer des produits * Augmenter/diminuer la quantité * Voir le sous-total * Voir le prix total * Vider le panier 7. **Paiement** Créez une page/section de paiement professionnelle avec : * Nom du client * E-mail * Téléphone * Adresse * Ville * État * Code PIN * Méthode de paiement * Résumé de la commande * Bouton Passer la commande 8. **Sections Spéciales** Ajoutez : * Vente Flash * Meilleures ventes * Nouveautés * Avis clients * Abonnement à la newsletter 9. **Pied de page** Incluez : * À propos du magasin * Liens rapides * Support client * Politique de confidentialité * Conditions générales * Icônes de réseaux sociaux * Droits d'auteur ### Exigences de conception * Interface utilisateur premium et moderne * Typographie propre * Cartes de produits attrayantes * Animations de survol fluides * Mise en page responsive * Menu hamburger adapté au mobile * Bon espacement et alignement * Schéma de couleurs professionnel * Défilement fluide * Boutons et formulaires accessibles * Ajoutez des animations subtiles sans ralentir le site web ### Exigences JavaScript Faites fonctionner les fonctionnalités suivantes : * Recherche * Filtrage par catégorie * Tri * Ajouter au panier * Supprimer du panier * Contrôles de quantité * Calcul du total du panier * Bouton liste de souhaits * Navigation mobile * Validation du formulaire de paiement * Message de confirmation de commande Utilisez des exemples de produits et des images de produits réalistes provenant d'URL d'images publiquement accessibles. ### Important Ne me donnez pas seulement une explication. **Construisez le code complet du site web fonctionnel.** Renvoyez le code complet dans un seul fichier HTML que je peux enregistrer sous le nom `index.html` et ouvrir directement dans un navigateur. Faites en sorte que le résultat final ressemble à un site web de commerce électronique professionnel du monde réel plutôt qu'à une démo basique.

Connectez-vous pour voir le prompt complet

Continuer avec:

En vous connectant, vous acceptez nos Conditions et Confidentialité

Utilisation

Ce prompt est conçu pour être utilisé avec coding. Copiez le contenu ci-dessus et collez-le dans votre outil d’IA préféré.

Pour de meilleurs résultats, personnalisez les espaces réservés (indiqués par des crochets ou des majuscules) selon vos besoins.

Références

Catégories :coding| prompts.chat| e-commerce| website

Discussion