Créer un site e-commerce avec Django - Modifier la quantité d'articles dans le panier

00:00:00 :Dans cette partie, on va voir comment on peut mettre à jour les quantités d'articles qu'on a dans notre panier.Pour l'instant, on affiche que la quantité, donc on voit qu'on a par exemple 1 dans le panier de 7 articles,mais on ne peut pas le modifier, donc ce n'est pas très pratique.
00:00:13 :On aimerait pouvoir sélectionner ici le nombre d'articles qu'on souhaite acheter,et éventuellement également le mettre à jour.Donc c'est ce qu'on va faire dans cette partie, et pour ça on va utiliser un formulaire,et ce qu'on appelle un modèle Formset.
00:00:24 :Donc ça va nous permettre d'ajouter plusieurs formulaires sur une même page.Donc c'est une notion un petit peu avancée des formulaires, et il y a pas mal de codes à écrire aussi,donc je vais faire quelques copier-coller dans cette vidéo pour ne pas que vous me voyez taper plein plein de lignes de code.
00:00:37 :Mais bien sûr, je vais vous expliquer à chaque fois toutes les lignes qui sont dans les fichiers qu'on va créer.Donc la première chose qu'on va faire, c'est créer le formulaire.
00:00:44 :Pour ça, on va aller dans notre projet, dans l'application Store.On va ajouter un nouveau fichier, comme on l'avait fait dans les accounts ici,quand on avait ajouté le fichier forms.py.
00:00:54 :Donc on va faire la même chose dans ce cas-ci pour notre application Store.Je vais faire clic droit New, et on va créer un fichier qu'on va appeler Forms.
00:01:01 :Et donc c'est un fichier Python.A l'intérieur de ce fichier, on va donc créer notre formulaire.Donc comme je vous disais, je vais coller le code et je vais vous expliquer ce qu'il se passe ici.
00:01:09 :Donc déjà, on importe le module Forms qui va me permettre de créer un formulaire de type ModelForm,puisqu'on va lier notre formulaire à un modèle.
00:01:17 :Ce modèle, c'est le modèle Order qui représente les articles dans le panier.Donc on importe ce modèle ici tout en haut.On fait une classe que j'ai appelée tout simplement OrderForm,donc qui hérite de cette classe ModelForm.
00:01:29 :Et ici, ce qu'on fait, c'est qu'on va modifier le widget qui est utilisé.Parce que par défaut, je vais commenter cette ligne,et vous allez voir ce que ça donne au niveau du HTML.
00:01:37 :Et on reviendra par la suite remettre cette ligne pour vous montrer la différence.Donc là, qu'est-ce qu'il y a à part ça ?On a juste la classe méta qui me permet de spécifier quel est le modèle concerné,puisque là on est avec un formulaire lié à un modèle.
00:01:49 :Donc on va vouloir lier ce formulaire aux articles dans notre panier,donc le modèle Order.Et nous, ce qu'on veut, c'est uniquement afficher le champ de la quantité,puisque c'est la seule information qu'on souhaite modifier.
00:02:00 :Dans ce cas-ci, c'est un formulaire qui va être affiché pour l'utilisateur.On pourrait faire un autre formulaire, par exemple pour l'interface d'administration,qui serait similaire à ce qu'on a quand on va voir un article ici.
00:02:09 :On peut modifier pas mal de choses.Nous, ce qu'on veut, c'est juste donner la possibilité à l'utilisateur de modifier la quantité dans le panier.Donc on va juste afficher ce champ de quantité dans notre formulaire.
00:02:19 :On va ensuite aller dans notre vue qui affiche le cartes,donc dans la vue ici, cartes, qui récupère l'objet,donc le panier et qui l'affiche, avec le fichier cartes.html.
00:02:29 :Donc ce fichier cartes.html, pour l'instant,on fait juste boucler à travers les articles et les afficher.Donc ce qu'on va faire, c'est créer, comme je vous disais, un Formset.
00:02:37 :Donc là, il y a juste deux lignes à écrire, donc je vais les écrire avec vous.On va utiliser donc modèle Formset-Factory, comme ceci.Donc on va l'importer avec option Entrée.
00:02:46 :Il est à l'intérieur du module django.forms,donc ça va aller l'importer automatiquement en haut de mon fichier from django.forms, import modèle Formset-Factory.Alors pourquoi on a besoin de passer par ça ?
00:02:57 :Parce que, comme je vous disais, on va avoir potentiellement plusieurs formulaires sur la même page.Je vais aller ajouter un autre article dans le panier,donc le deuxième article ici, pour vous montrer ce dont je veux parler.
00:03:06 :Donc là, on a deux éléments dans le panier, alors forcément,là, je n'ai rien mis, je vais commenter la ligne pour pouvoir réafficher mon panier correctement.
00:03:12 :Donc là, j'ai deux éléments dans le panier,et on va donc avoir deux formulaires.Et nous, on n'a pas envie à chaque fois d'afficher un formulaire et de devoir mettre à jour chaque élément individuellement.
00:03:21 :On veut modifier le nombre d'éléments dans le panier pour tous les articles qu'on a,et ensuite, cliquer sur un seul bouton qui va nous permettre de mettre à jour tous les éléments qui sont dans le panier.
00:03:30 :Donc c'est pour ça qu'on va devoir rassembler tous ces éléments dans ce qu'on appelle un modèle Formset.Donc on va le créer avec cette fonction modèle Formset.
00:03:38 :La première chose qu'on doit lui donner, c'est le modèle qu'on souhaite utiliser.Donc ici, ça va être le modèle Order.Ensuite, on peut préciser un formulaire.
00:03:46 :Dans ce cas-ci, on va le préciser puisque nous, on a créé un formulaire spécifique ici qui nous permet de n'afficher que la quantité.Donc on va préciser ce Order Form qui n'est pas importé.
00:03:55 :Donc là encore, option entrée pour l'importer à partir du module Store.Forms.Et pour finir, on va mettre Extra égale 0.Pourquoi on doit mettre ça ?
00:04:03 :Eh bien tout simplement parce que par défaut,il va nous proposer de pouvoir rajouter des éléments.Donc ça, c'est en fait quelque chose qui peut être pratique si, par exemple, vous êtes dans l'interface d'administration,vous souhaitez afficher plusieurs éléments,par exemple plusieurs produits,et vous voulez avoir la possibilité
00:04:17 :de rajouter également des produits qui ne sont pas encore dans votre base de données.Donc vous voulez avoir un formulaire vierge dans lequel vous allez pouvoir rentrer des informations.
00:04:24 :Dans notre cas, on ne souhaite pas rajouter des éléments,on souhaite juste afficher les éléments qui sont existants.Et donc pour ça, on doit spécifier que l'on ne souhaite pas rajouter des formulaires vides en extra.
00:04:34 :Donc ça, on va le récupérer dans une variable qu'on va mettre comme ceci avec des majuscules puisqu'en fait, on va créer une instance à partir de cette variable.
00:04:42 :Donc on va lui donner un sort de nom de classe avec donc la convention PEP8 et une majuscule sur chaque mot.Donc ça, ça nous permet de créer, en fait,si vous voulez, une classe à partir du modèle FormSetFactory.
00:04:52 :Et ensuite, on va créer une instance à partir de cette classe qu'on va mettre cette fois-ci dans une variable que je vais mettre tout en minuscules et qui va s'appeler FormSet.
00:05:00 :Donc, qu'est-ce qu'on va faire là-dedans ?On va préciser le QuerySet qu'on souhaite utiliser pour ce FormSet,puisque par défaut, il va récupérer tous les éléments du modèle qu'on a ici, donc Order.
00:05:10 :Donc ça veut dire que si on avait plusieurs utilisateurs qui avaient des articles dans leur panier,on récupérait tous les articles de tout le monde.
00:05:16 :Donc nous, c'est pas ce qu'on souhaite.On souhaite vraiment récupérer uniquement les articles de l'utilisateur qui souhaite accéder à son panier.Donc on va préciser le paramètre QuerySet ici et on va tout simplement faire un QuerySet avec le modèle Order en disant Order.object.filter
00:05:30 :et on va filtrer en disant qu'on souhaite uniquement récupérer les orders,donc les articles qui correspondent à l'utilisateur qui est dans Request.user.Donc comme ça, on affichera que ce qu'on a en fait actuellement dans le panier,donc pour l'utilisateur courant,et on va passer ce FormSet à notre contexte
00:05:45 :en le mettant par la suite ici.Et donc je vais le passer dans une variable que je vais appeler Forms tout simplement.Donc maintenant, on revient dans notre fichier HTML.
00:05:53 :Pour l'instant, dans l'affichage, rien n'a changé.Si je reviens ici et que j'actualise,vous voyez qu'on a toujours la même chose qu'auparavant.Et donc ce qu'on va devoir faire,c'est afficher ces formulaires.
00:06:03 :Donc on va devoir modifier notre HTML,puisque pour l'instant, on boucle sur les articles.Donc là encore, il y a pas mal de choses à écrire,donc je vais faire un copier-coller,je vais vous montrer la différence entre tout ça.
00:06:13 :Donc je vais coller le formulaire ici,et je vais vous montrer ce qu'on va faire dans ce cas-ci.Donc déjà, on commence par faire un formulaire.
00:06:19 :Là, vous voyez qu'auparavant,on faisait juste boucler sur les articles,donc on n'avait aucun moyen de modifier cette quantité.On avait juste, si on descend en bas,le formulaire pour commencer le checkout session avec Stripe,donc pour aller hacher les articles.
00:06:32 :Mais on n'avait aucun moyen auparavant de modifier la quantité de produits.Donc nous, ce qu'on va vouloir faire,et ce qu'on va voir dans les prochaines parties,c'est modifier le nombre d'articles qu'on a dans le panier.
00:06:40 :Donc on va devoir faire une requête post vers une URL qui va nous permettre de récupérer les nouvelles données et de les sauvegarder.Donc je mets le jeton CSRF Token pour la sécurité.
00:06:50 :Ensuite, on va ajouter quelque chose qu'il est très important d'ajouter,c'est le Management Form.Donc ça, en fait, c'est juste quelque chose qui est utilisé en interne par Django,qui va rajouter des inputs invisibles avec des valeurs qui vont lui permettre par la suite de savoir combien de formulaires on a
00:07:06 :et de pouvoir correctement les traiter du côté du back-end.Donc ça, c'est très important.Si vous ne le mettez pas,vous n'aurez pas d'erreur.Et depuis les dernières versions de Python,depuis la version 3.2,
00:07:15 :je trouve que c'est assez sournois parce qu'en fait, si vous ne le mettez pas,vous n'aurez aucune erreur qui va être levée.C'est-à-dire que votre site va, entre guillemets, fonctionner et vous n'aurez pas d'erreur.
00:07:24 :Ça ne va pas planter, en fait,si vous ne mettez pas cette variable ici.Donc en fait, il va manquer les inputs.Django ne pourra pas correctement sauvegarder les formulaires,mais il ne vous le dira pas.
00:07:34 :Donc j'ai vu beaucoup de gens être un peu perturbés avec ça.Donc vraiment, n'oubliez pas de mettre le management from,surtout si vous utilisez la version 3.2 de Python
00:07:41 :puisque vous pourrez tourner des heures à vous demander pourquoi ça ne marche pas.Donc ensuite, qu'est-ce qu'on fait ?Eh bien, on va tout simplement boucler sur les formulaires,donc sur notre variable from ici.
00:07:51 :Donc là, plutôt que de boucler sur les articles comme on le faisait auparavant,là, on va boucler sur les formulaires.Et qu'est-ce qu'on fait à l'intérieur de cette boucle ?
00:07:58 :On va afficher, en fait,les informations dont on a besoin puisque là, en fait,on veut quand même afficher la vignette de l'article.On veut afficher également, peut-être,la description et des choses du genre.
00:08:08 :Avant, on affichait uniquement,si je me souviens bien,le nom de l'article,le thumbnail et la quantité dans le panier.Donc nous, on veut quand même afficher ces informations-là.
00:08:17 :Et pour ça, on va utiliser form.instance qui va nous retourner l'instance qui est accolée à ce formulaire.Donc en fait, ça va nous retourner l'article et sur l'article,on peut récupérer le produit.
00:08:28 :Donc en fait,on fait exactement la même chose qu'ici,sauf qu'avant, on avait directement order.Là, vu qu'on passe par le formulaire,il faut récupérer l'instance qui est accolée au formulaire.
00:08:37 :Donc form.instance et puis après, c'est la même chose,product, thumbnail, URL.Et ensuite, ici,on fait juste la même chose qu'au-dessus avec le texte alt et le style ici pour limiter la largeur de l'image.
00:08:49 :Donc ça, c'est pour l'image.Ensuite, on fait pareil,on rajoute un paragraphe ici pour la description.On ne l'avait pas mis avant,mais là, je l'ai juste rajouté.
00:08:55 :Donc là encore,form.instance.product.description.Et ensuite,on va mettre le formulaire en tant que tel.Donc form.asp.Donc je le mets asp pour qu'il soit à l'intérieur d'un paragraphe et qu'il soit à la ligne pour ne pas qu'il soit en fait directement accolé à la description du produit.
00:09:10 :Donc là, avec ça,on va vraiment intégrer le formulaire et ce formulaire,il ne va contenir qu'un élément pour afficher la quantité puisqu'on lui a passé le order form ici.
00:09:18 :Donc ça, si je reviens,c'est dans ma vue.Si vous vous souvenez bien,on avait passé le formulaire avec order form et order form ici,on ne lui passe que la quantité.
00:09:26 :Donc notre formulaire,en fait,il ne va contenir qu'un seul élément qui nous permettra de changer la quantité.Pour finir,donc on a le end for ici qui termine la boucle et on rajoute un bouton submit qui va nous permettre de soumettre le formulaire et de mettre à jour les quantités.
00:09:40 :Donc voilà pour tous ces formulaires,vous voyez qu'on garde en fait un seul formulaire et je vais vous montrer le HTML, ce que ça donne.
00:09:45 :En fait,on va avoir plusieurs inputs avec des éléments qui vont permettre à Django de savoir de quel article il s'agit.Je vais enlever la boucle que j'avais au-dessus auparavant puisqu'on n'en a plus besoin.
00:09:54 :On a toutes les informations qu'il faut maintenant directement à l'intérieur de cette boucle et de ce formulaire.Et donc,si je reviens sur mon site et que j'actualise,cette fois-ci,vous voyez qu'on a bien l'image.
00:10:04 :On n'a plus le nom,alors je pourrais rajouter le nom au-dessus.On va le rajouter ici,on va faire un H3 et on va mettre dans des accolades comme ceci.
00:10:12 :On va aller chercher form.instance.product.name.Donc on va chercher le nom du produit qui est attaché à l'instance.Voilà,donc là j'ai bien le nom.Et là,vous voyez que,c'est ce que je vous disais,par défaut,on a un widget comme ceci qui nous permet de changer la quantité
00:10:28 :en cliquant sur les flèches ou en rentrant une quantité ici.Donc moi,je n'aime pas trop ça.En plus,on peut mettre beaucoup de valeurs ici.
00:10:34 :On pourrait le limiter avec ce même widget mais moi,ce que je préfère,c'est en fait une boîte dans laquelle on va pouvoir cliquer et sélectionner le nombre de quantités.
00:10:41 :Donc pour ça,je vais revenir dans mon formulaire et je vais décommenter cette ligne.Donc ce qu'on fait ici,c'est qu'on fait un autre type d'input qui est un choice field.
00:10:47 :Et ce qu'on va faire ici,c'est tout simplement récupérer les nombres de 1 à 10 donc avec une boucle qui boucle sur le range de 1 à 10.
00:10:54 :Et ensuite,on a un tuple ici puisque le choice field ici,en fait,c'est exactement comme dans les modèles.Quand on a un chart field et qu'on lui passe un choice,on va avoir l'élément qui va être affiché pour l'utilisateur.
00:11:04 :Donc ça,c'est le deuxième élément du tuple et l'élément qu'on va récupérer,la valeur en tant que telle qu'on va récupérer et qu'on va traiter de notre côté dans le back-end.
00:11:11 :Ça, c'est le premier élément.Donc dans ce cas-ci,c'est la même chose.J'ai mis i et i dans les deux cas de figure mais on pourrait avoir un texte d'affichage qui soit différent.
00:11:19 :Par exemple,ici, on pourrait mettre en chaîne de caractère 1, 2, 3, 4, etc.comme ceci.Dans ce cas-ci,on va juste afficher le nombre.
00:11:26 :Donc je vais vous montrer ce que ça donne maintenant si je reviens dans le panier et que j'actualise.Vous voyez que maintenant,on a un drop-down comme ceci qui me permet de sélectionner le nombre de quantités et qui s'arrête à 10.
00:11:36 :Donc voilà pour notre formulaire.Je vais vous montrer juste avant de terminer cette vidéo ce que ça donne au niveau du HTML.Donc je vais faire un clic droit Inspect et on va aller inspecter les différents éléments de notre formulaire.
00:11:46 :Et vous voyez ici dans le From Post,on a déjà le input hidden qui est le CSRF Middleware Token.Donc ça, c'est le jeton CSRF qui va nous permettre de s'assurer que le formulaire n'a pas été corrompu.
00:11:58 :Donc ça, c'est géré par Django avec le CSRF Token.Donc ce jeton ici.Ensuite, on va voir le Front Management Front.Donc ce fameux formulaire comme je le disais qui est caché.
00:12:07 :Donc là encore,c'est un type hidden qui ne sont pas affichés dans l'interface.Ici, vous voyez qu'on a tout simplement des variables qui vont permettre à Django de savoir combien de formulaire il doit traiter.
00:12:17 :Donc on voit ici Total Forms.On voit le nombre minimal de formulaire qu'on peut avoir,le nombre maximal.Et ensuite,on va rentrer dans les divs qui contiennent les différents formulaires.
00:12:26 :Donc on va avoir le nom,l'image du produit, etc.Et à l'intérieur du paragraphe,on va retrouver notre formulaire qui contient uniquement la quantité.Et vous voyez qu'ici,on a donc le Select avec toutes les options disponibles.
00:12:37 :Et si on regarde ici,on a un input qui est lui aussi hidden qui va contenir la clé primaire de notre article.Donc si je retourne dans l'interface d'administration,si on va sur les articles ici,vous allez voir que là,ici, on a par exemple l'article 34 et l'article 35.
00:12:53 :Si je clique ici,on peut voir la clé primaire en fait dans l'URL.Donc on voit qu'on est en présence de l'article 34 pour les sneakers qui sont associés à cet utilisateur.
00:13:01 :Donc il s'agit de cet article ici.Et on a bien donc dans un input hidden cette valeur de la clé primaire et donc c'est ça qui va permettre à Django de savoir que quand il va récupérer les informations du formulaire,qu'il va devoir mettre à jour l'article qui a le ID de 34
00:13:16 :dans la base de données.Donc voilà pour le HTML et dans la prochaine partie,on va voir comment justement récupérer ces données du formulaire pour les sauvegarder parce que pour l'instant,si je change les quantités et que je clique sur mettre à jour,on est juste redirigé vers la même page du panier
00:13:29 :mais il n'y a rien qui ne s'est passé puisqu'on n'a pas traité ces données du formulaire.Donc c'est ce qu'on va voir dans la prochaine partie.

Modifier la quantité d'articles dans le panier

Débloquez votre potentiel ! ✨

Prêt à passer au niveau supérieur ?

Toutes les questions

Thibaut44300

Problème lors de la suppression de mon panier

Christian Aucane

Récuperer la quantité du produit dans le form

Prérequis

Rechercher sur le site