Créez un site de commerce électronique full-stack à partir de zéro
De Wikiprompt, l’encyclopédie libre de prompts
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.
Discussion
0 commentaires