Créer un site e-commerce avec Django - Afficher tous les produits sur la page d'accueil

00:00:00 :Maintenant qu'on a une page d'accueil, on va vouloir afficher les produits de notre boutique sur cette page d'accueil.Donc la première chose à faire, c'est de récupérer ces produits.
00:00:08 :On va le faire ici dans la vue.Donc déjà, il faut importer la classe Product qui va me permettre de récupérer les produits dans la base de données.
00:00:16 :Donc on va dire from store.models import Product.Et à l'intérieur de ma vue ici, je vais utiliser cette classe Product.Et puis on va utiliser le manager object, qui est le manager par défaut, qui me permet de récupérer les produits.
00:00:30 :Donc là, on va utiliser all, ce qui me permet de récupérer toutes les entrées de la base de données.On pourrait utiliser d'autres choses, par exemple filter, pour filtrer les éléments qu'on souhaite récupérer,en indiquant par exemple la quantité.
00:00:41 :Donc on pourrait dire stock et récupérer uniquement les produits qui ont au moins un élément en stock, etc.Donc ça, c'est des options de filtres qu'on ne verra pas pour l'instant.
00:00:49 :Là, on veut juste récupérer tous les produits, donc quelque chose de très simple.On va récupérer ça dans une variable que je vais appeler Product.
00:00:55 :Et on va la passer au contexte de notre render ici.Donc le contexte, c'est le troisième paramètre ici.Vous n'êtes pas obligé de le spécifier, sinon vous pouvez mettre contexte égal, mais on peut juste le laisser comme ça.
00:01:06 :Et par défaut, le troisième argument que vous passez après request et le fichier HTML, ça va être le contexte.Donc moi, pour que ce soit bien clair, je vais le préciser.
00:01:14 :Je vais mettre le nom du paramètre, donc contexte égal.Et je vais mettre un dictionnaire.Et donc dans ce dictionnaire, on va avoir la clé et la valeur.
00:01:21 :Donc on va avoir une clé Product.Et on va passer notre variable Product, qui est égale à tous les produits que l'on a récupéré de la base de données.
00:01:30 :Donc là ici, on pourrait mettre n'importe quoi.On pourrait mettre là encore Patrick.C'est juste qu'il faut qu'ensuite, on utilise ce nom ici dans notre fichier d'index.
00:01:37 :Donc moi, je vais laisser Product.Et dans le fichier index.html ici, je vais créer une boucle qui va boucler à travers ces produits.Puisque là, on va récupérer plusieurs produits, même si on n'en a qu'un pour l'instant dans notre base de données.
00:01:49 :Donc quand on utilise All ici, on va récupérer un query set qui va être un ou plusieurs produits.Ou zéro si on n'en a aucun.
00:01:55 :Mais dans ce cas-ci, on en a au moins un.Donc ce que je vais faire, c'est une boucle.Là encore, on utilise le langage de gabarit.
00:02:01 :Donc avec la collade et le pourcentage.Et ensuite, c'est assez similaire à une boucle for avec Python.Donc for product in product.On ferme notre balise ici.
00:02:10 :On va tout de suite fermer la boucle for.Donc end for comme ceci.Donc là, c'est nécessaire de fermer cette boucle for.Contrairement à ce qu'on a avec Python.
00:02:18 :Puisque avec Python, tout est basé sur l'indentation.C'est l'indentation qui fait que Python sait quand est-ce qu'une boucle est terminée.Dans un fichier HTML, comme on n'a pas cette logique d'indentation,il faut préciser avec ces balises de fin,comme on l'a fait avec le end block ici,où se terminent les différents éléments.
00:02:34 :Donc à l'intérieur de cette boucle for ici,je vais pouvoir boucler sur chacun des produits que je vais récupérer dans cette variable product.Je vais pouvoir afficher les informations.
00:02:44 :Donc on va faire une balise h2 pour afficher un titre.Et on va utiliser cette fois-ci les doubles accolades qui nous permettent d'insérer des éléments, donc des variables.
00:02:51 :Dans ce cas-ci, c'est la variable product qui nous intéresse.Et donc ça, ça va tout simplement correspondre à une entrée dans notre base de données qui est basée donc sur notre fichier model.
00:03:00 :Donc si je vais dans mon store, dans models,ça va être l'équivalent d'une instance de ce produit.Donc on va avoir accès à tous les attributs ici que l'on a créés à l'intérieur de notre fichier HTML.
00:03:09 :Moi, ce qui m'intéresse ici, c'est le nom du produit.Donc je vais mettre product.name tout simplement.Ensuite, on va afficher l'image.Pour ça, je vais faire une balise image, donc img.
00:03:19 :En source, on va aller récupérer le thumbnail.Donc là, n'ayez pas peur.La coloration syntaxique, c'est normal.C'est parce qu'on a les guillemets.Donc c'est bien important de laisser les guillemets.
00:03:28 :Et là, les accolades sont en vert puisqu'on est à l'intérieur d'une chaîne de caractères.Mais ça ne pose pas de problème.Cette expression ici va bien être interprétée correctement.
00:03:36 :Donc là, ce qu'on souhaite, c'est afficher l'image.Donc l'image, elle est dans thumbnail.Et thumbnail, ça va nous retourner un objet image.Donc un objet image field.
00:03:44 :Donc nous, ce qu'on veut, c'est récupérer l'URL de l'image.Donc on va tout simplement faire thumbnail.url.Et en texte alt, on va mettre tout simplement product.name.
00:03:52 :Donc on remet le nom du produit.Pour le texte alt, qui est en fait une description de l'image au cas où cette image n'est pas affichée.
00:03:59 :Ou pour, par exemple, des gens qui sont aveugles et qui ne voient pas les images.Donc sur notre site, ils vont pouvoir avoir la description de l'image grâce à ce texte alt.
00:04:07 :Donc là, on rentre plus dans le HTML.Mais je préfère quand même vous expliquer de quoi il s'agit.Donc on a notre boucle, on a nos produits.
00:04:13 :Et normalement, si je retourne sur la page de la boutique et que j'actualise, je vais bien retrouver le nom du produit.Et pour l'instant, vous voyez, on a juste le alt text.
00:04:22 :Donc ce fameux texte que l'on a mis dans le HTML.Et on n'a pas l'image.Donc ça, c'est normal.Et là, il va falloir rajouter des éléments dans le fichier qui ne sont pas forcément très clairs, très explicites.
00:04:32 :Tout est expliqué en détail dans la documentation de Django.C'est vraiment quelque chose que vous faites une fois.En fait, ce qu'on va faire, c'est qu'on va rajouter dans les URL ici, quelque chose qui va nous permettre de servir les images statiques, donc les fichiers statiques à l'intérieur de notre environnement de développement.
00:04:48 :Donc ce qu'on va faire, c'est qu'on va le rajouter après URL Patterns.On va concaténer cette liste avec un plus.Et on va utiliser static,qui est quelque chose qu'il faut qu'on importe.
00:04:57 :Donc là encore, on va utiliser la puissance de PyCharm pour qu'il nous trouve où se trouve cette fonction static.Et elle se trouve dans django-conf-url-static-static.
00:05:06 :Donc je clique là-dessus, static.Et donc cette fonction, il va falloir lui passer deux éléments qu'on va rajouter dans le fichier de settings.Donc le premier élément, c'est media-url.
00:05:16 :C'est tout simplement l'URL que vous allez avoir dans votre navigateur.Donc là, on va mettre slash media slash.Et en fait, ce que ça veut dire ici, c'est tout simplement que quand on va servir des fichiers statiques dans la barre d'URL, on va avoir le nom de notre site,
00:05:29 :slash media slash, et ensuite le chemin vers l'image.Et la deuxième variable qu'on va devoir définir,c'est media-route.Et cette fois-ci, cette variable, c'est tout simplement le dossier dans lequel on va stocker les médias.
00:05:41 :Donc on va concatener notre dossier de base, base-dir,et dans mon cas, je vais le mettre dans un sous-dossier que je vais appeler médias.C'est ce qu'on fait généralement, mais là encore,vous pourriez choisir un autre dossier.
00:05:50 :Si on retourne dans la structure de dossier,vous voyez que pour l'instant, on a notre dossier product qui va contenir les images que l'on a uploadées sur l'interface d'administration.
00:05:59 :Donc ça, c'est parce que dans models ici,on avait spécifié qu'on voulait les mettre dans un sous-dossier product.Et nous, ce qu'on dit avec ça ici,c'est qu'en fait, on va devoir déplacer ce dossier product dans un dossier média.
00:06:09 :Donc comme ça, tous nos dossiers de médias,tous les fichiers statiques qu'on va uploader sur notre site seront bien rangés dans un dossier média.Donc ça permet de mieux organiser les choses parce qu'imaginez qu'on ait d'autres modèles avec des dossiers ici.
00:06:20 :Eh bien, on n'a pas envie d'avoir plein de dossiers directement dans l'arborescence ici.Donc comme ça, tout va être regroupé dans ce même dossier média.
00:06:27 :Donc tout ça, on va devoir le préciser à l'intérieur de URL, donc à cette fonction statique.On va lui passer en premier le média URL.
00:06:34 :Donc il va falloir les importer depuis le fichier de settings.Donc pour ça, on va importer les settings.On va dire from shop import settings.
00:06:41 :Et ici, on va spécifier en premier settings.mediaURL.Et en deuxième, on va spécifier settings.mediaRoot,qu'on va passer au paramètre documentRoot.Donc documentRoot égale settings.mediaRoot.Et on va devoir déplacer également ces images pour les afficher dans un dossier qu'on va appeler média,qui correspond au dossier qu'on a spécifié ici.
00:07:02 :Donc je vais créer ce dossier dans Docshop.Clique droit, new directory.Je l'appelle média.Et je vais prendre les products ici et je vais les déplacer tout simplement dans ce dossier.
00:07:11 :Là, il va me demander si je souhaite chercher des références pour pouvoir modifier les chemins s'il faut.Alors je décoche tout ça parce que je veux juste tout déplacer sans qu'il fasse de search and replace.
00:07:21 :Et je vais également décocher l'open in editor puisque je ne veux pas ouvrir les fichiers après coup.Donc là, on a tout déplacé.On a bien média, products.
00:07:28 :Et ça va me permettre d'afficher donc les images.Donc je retourne sur mon site.J'actualise.Et là, vous voyez qu'on a bien l'image qui s'affiche.
00:07:36 :Alors elle est énorme.C'est une image très très grande.Donc ce qu'on va faire également,c'est rajouter dans le HTML,dans index.html ici,une petite ligne de CSS qu'on va mettre directement en inline.
00:07:47 :C'est vraiment juste pour fixer ça très rapidement.Normalement, on le ferait avec un fichier CSS.Mais pour l'instant,on va faire ça directement avec un style inline.
00:07:54 :Donc je dis max width à 250 pixels.Ça me permet comme ça d'avoir une image qui ne va pas prendre toute la largeur de l'écran.
00:08:00 :Donc on a bien notre image qui est servie.Et si je fais un clic droit,open image in new tab,vous voyez qu'on a bien le chemin vers slash media slash et ensuite product sneakers 5.jpg.
00:08:10 :Et pour vous montrer ce que je vous disais avec le fichier de settings,si à la place ici,je mets Patrick.Alors pas ici,pas dans la variable média root parce que là,il faudra modifier le nom du dossier.
00:08:19 :Mais dans média URL,si je mets Patrick,que je reviens sur mon site,j'actualise.L'image est toujours là.Mais si je fais open image in new tab cette fois-ci,vous voyez que l'URL,cette fois, c'est Patrick.
00:08:31 :Donc voilà pour la distinction entre les deux.Média URL, c'est vraiment au niveau de votre navigateur,l'URL de l'image.Et média root,c'est l'endroit,donc le dossier dans votre arborescence de dossier dans lequel vont se trouver les images de votre projet.
00:08:42 :Et pour les servir à partir de votre environnement de développement,quand vous êtes en mode debug à true,donc si je vais voir dans settings,là je remonte un petit peu,on a une variable debug qui est égale à true quand on est en mode développement.
00:08:53 :Et donc pour pouvoir servir ces fichiers statiques,il faut le faire de cette façon.Et après,c'est différent quand vous êtes en ligne,quand vous êtes sur un serveur.
00:09:01 :On ne va pas les servir de cette façon,on va les servir différemment.Mais en local,on a besoin de faire cette technique.Donc voilà pour ces fichiers de médias.
00:09:08 :J'ai essayé de vous expliquer à peu près ce qui se passait sans rentrer trop dans les détails puisque ce n'est pas forcément très intéressant.Là, on veut juste avoir accès rapidement en local à nos images.
00:09:16 :Et après,c'est vraiment toute une autre façon de faire quand on veut les servir sur un serveur en ligne.C'est complètement différent.Donc je ne m'attarde pas trop là-dessus.

Afficher tous les produits sur la page d'accueil

Débloquez votre potentiel ! ✨

Prêt à passer au niveau supérieur ?

Toutes les questions

Caroline

Utilisation des views basées sur des classes

Thibaut

Affichage incorrect des produits dans Django

Thibaut44300

probleme pendant l'affichage de ma vue d'accueil du site e-commerce

Prérequis

Rechercher sur le site