Créer un site e-commerce avec Django - Faire le lien entre la page d'accueil et la page produit

00:00:00 :On a donc maintenant la possibilité d'afficher tous les produits sur la page d'accueil et un produit en particulier avec la page de détails qu'on a rajoutée.
00:00:08 :Le problème c'est qu'actuellement on est obligé d'aller taper cette URL dans la barre d'URL et de revenir à la page d'accueil en enlevant la fin de l'URL donc ce serait beaucoup plus pratique de pouvoir y accéder avec des liens.
00:00:19 :C'est ce qu'on va voir dans cette partie.On va commencer par ajouter une URL sur le titre de la boutique tout simplement pour pouvoir cliquer dessus et ainsi revenir à la vue d'accueil.
00:00:28 :Donc ça je vais le faire dans le fichier base.html puisqu'on a remis le titre directement dans ce fichier pour qu'il soit sur toutes les pages du site.
00:00:35 :Donc ce qu'on va faire c'est rajouter un tag pour le lien donc je mets A et j'appuie sur tab pour le compléter et à l'intérieur du href on va utiliser une balise, la balise URL qui va permettre de récupérer un chemin d'URL avec son nom.
00:00:48 :Donc c'est le fameux nom qu'on a mis dans urls.py ici je vous avais dit que c'était important de le mettre et donc là on va pouvoir l'utiliser en disant qu'on souhaite accéder à l'URL d'index.
00:00:58 :Donc dans mon fichier base ici je mets tout simplement le nom de l'URL et ici on va prendre notre balise et la mettre après le H1 comme ça, ça va entourer le H1 et on pourra ainsi cliquer sur le H1 ici pour revenir à la vue d'index.
00:01:11 :Donc je vais tester tout ça, j'actualise, j'ai bien le lien ici, je clique dessus et je reviens donc sur cette même page d'accueil.Donc c'est très pratique ça puisqu'en fait on va se baser sur le nom de l'URL et non pas sur l'URL elle-même, c'est-à-dire que là je pourrais changer l'URL
00:01:24 :dire que maintenant la page d'accueil c'est Patrick et ce changement serait automatiquement répercuté puisque le nom lui n'a pas changé.Donc si je reviens sur le site que j'actualise là vous voyez qu'on a la page qui n'est pas trouvée si je vais par contre sur slash Patrick là je vais bien avoir la vue d'accueil
00:01:40 :et si je clique sur le lien ici du titre et bien je reviens bien à la page d'accueil qui est Patrick.Donc on voit que le changement a bien été répercuté vu qu'on utilise le nom et non pas l'URL directement.
00:01:51 :Pour le produit ça va être sensiblement pareil je vais aller dans la page index.html cette fois-ci et on va rajouter un lien pour pouvoir voir l'article donc on va mettre là encore un tag A et on va mettre tout simplement voir l'article pour le texte et dans l'URL là on peut faire la même chose
00:02:08 :donc il y a deux façons de faire la première façon c'est de passer par cette même balise URL et de mettre ici l'URL du produit qui est le nom de l'URL qu'on a défini ici dans le name et on va devoir lui spécifier quelle est la valeur du slog
00:02:22 :donc si je reviens dans le index ici on peut lui spécifier après product.slog alors là plusieurs choses à noter vous n'êtes pas obligé de spécifier à quel paramètre cela correspond on peut le spécifier explicitement et dire que c'est slog qui est égal à product.slog
00:02:35 :si on ne le fait pas c'est exactement comme avec les fonctions Python il va prendre ce paramètre et l'envoyer au premier élément qui se trouve dans l'URL donc dans ce cas-ci le slog donc moi personnellement je préfère ne pas mettre le slog ici même si c'est moins explicite ça permet de gagner un petit peu de place
00:02:49 :également une erreur que je vois très souvent c'est des gens entourer cet élément de deux accolades comme ceci donc là vous n'avez pas besoin de le faire pour insérer comme on l'a fait ici par exemple le nom du produit puisque là on est déjà à l'intérieur de la balise URL
00:03:02 :donc il suffit de spécifier product.slog ici vous n'avez pas besoin de l'entourer lui aussi des accolades donc ça c'est la première façon de faire si on retourne voir sur la boutique et que j'actualise donc là ce n'est plus sur Patrick mais sur l'URL de base là j'ai bien un bouton voir l'article et si je clique dessus
00:03:17 :je suis bien redirigé vers la vue de l'article en question je peux revenir à la page d'accueil en cliquant sur la boutique de Docstring et on va vérifier si ça marche également pour le t-shirt il n'y a pas de raison que ça ne marche pas et voilà donc on a bien nos deux liens ça c'est la première façon de faire
00:03:30 :la deuxième façon de faire que je vais vous montrer qui est privilégiée dans ce cas-ci puisqu'elle va nous permettre également d'avoir l'URL pour l'interface d'administration donc je vais juste me reloguer sur cette interface donc là par exemple si je vais sur le produit, si je vais sur les sneakers
00:03:44 :vous voyez que pour l'instant en haut à droite on a juste l'option historique ici et on peut rajouter en fait un bouton automatiquement qui va nous permettre à partir de l'interface d'administration d'aller voir l'article sur le site donc pour ça on va devoir définir dans le Models.py
00:03:59 :donc dans notre classe Product ici une méthode qui s'appelle GetAbsoluteUrl donc là c'est très important qu'elle s'appelle exactement comme ceci puisque Django va reconnaître cette méthode et va nous permettre d'accéder à la page de l'instance avec cette méthode donc là si je reviens sur l'interface et que j'actualise vous allez voir qu'on a un bouton voir sur le site qui a fait son apparition
00:04:19 :donc pour l'instant il ne va pas rediriger vers la bonne page puisqu'on a juste mis un pass ici mais je pourrais par exemple retourner la chaîne de caractère de Google donc on pourrait mettre ici l'URL de Google tout simplement et si j'actualise et que je clique sur voir sur le site
00:04:33 :vous voyez qu'on arrive bien sur la page de Google donc nous là dans ce cas-ci ce n'est pas ça qui nous intéresse nous ce qu'on veut c'est l'URL de la page de détails donc pour ça on va utiliser une fonction qui s'appelle Reverse qu'on va importer donc option entrée
00:04:45 :ImportThisName et elle se trouve dans Django.urls et donc Reverse on va lui passer le nom de la fonction et on va lui passer les arguments qu'on va envoyer à l'URL donc le nom de l'URL c'est le même que celui qu'on a ici dans notre path donc Name égale Product et ensuite on va lui passer le Slug
00:05:01 :donc ici on va mettre après le nom de l'URL dans un paramètre Quarks on va lui passer un dictionnaire avec les différents éléments de l'URL donc le Slug et on va lui passer Self.Slug
00:05:11 :puisque là on est au niveau de l'instance donc ça va être le Slug de l'instance du produit et on le passe au paramètre Slug donc là encore c'est le nom que l'on retrouve dans notre URL ici donc là en fait cette fonction Reverse elle fait la même chose que ce qu'on a fait dans la vue ici
00:05:26 :donc avec cette balise URL ça nous permet à partir du nom de l'URL et des informations qu'on passe à l'URL de récupérer l'adresse qui va nous amener à la page du produit donc maintenant je peux remplacer cette balise URL et à la place avec les doubles accolades utiliser ma méthode et mettre donc Product.GetAbsoluteURL
00:05:45 :donc là ça va faire deux choses si je reviens ici et que j'actualise dans l'interface d'administration je peux maintenant cliquer sur ce bouton pour accéder à la vue de détail et je peux le faire également en revenant sur la vue principale en cliquant sur le bouton voir l'article de la même façon ça va utiliser cette méthode GetAbsoluteURL
00:06:03 :pour m'amener à la page de détail de l'article donc voilà comment faire le lien entre la page d'accueil et la page des articles soit avec ces balises URL directement dans le fichier HTML soit avec cette méthode GetAbsoluteURL qui est très pratique également pour pouvoir y accéder depuis l'interface d'administration

Faire le lien entre la page d'accueil et la page produit

Débloquez votre potentiel ! ✨

Prêt à passer au niveau supérieur ?

Toutes les questions

Caroline

Difficulté avec get_absolute_url() dans Django Admin

Wilfried

Erreur lors de l'exécution du template index.html après utilisation de REVERSE

Prérequis

Rechercher sur le site