Transcription
1. Introduction: D' accord, les gars. Bienvenue à ces cours sur la façon de construire un panier d'achat en utilisant JavaScript vanille. Donc nous avons ici un exemple du projet que nous allons construire dans ce cours. Il s'agit donc d'un exemple de site Web de commerce électronique. Comme on peut le voir, on a quelques profits ici quelques grands T-shirts et Ray qui ? Ceux-ci et quelques T-shirts noirs et sweats à capuche noirs. Lorsque nous au-dessus de la souris sur l'un d'eux, nous pouvons voir que nous avons ces boutons que nous pouvons simplement cliquer et arts au panier et nous avons ici sur le dessus. Notre carte que nous pouvons voir en ce moment est complètement vide. Alors ajoutons quelques produits là pour voir comment fonctionne notre application. Donc je vais ajouter deux de ces super T-shirts, par
exemple. Donc je vais cliquer sur 12 et on peut voir ça en haut ici. On est sur notre carte pour le moment, et puis je vais cliquer sur trois de celui-ci, donc je vais faire 123 Donc maintenant je sais que j'ai un total de cinq produits dans mon panier. Je vais cliquer dans ces maintenant je peux voir ceci est ma page de carte,
qui, qui, comme pour le moment, à de grands T-shirts si vous vous souvenez, avec les 15$ chacun, nous avons obtenu un total de 30$ et ensuite nous avons ajouté trois de ces T-shirts noirs pour 10$ ce qui donne un total ainsi de 30. Donc 30 plus 30 nous avons obtenu notre panier total de 60$. Mais qu'est-ce qu'on peut faire d'autre ici ? Ecoute, je peux si je veux augmenter ou diminuer les quantités de ces produits que nous avons sur la carte. Donc, par
exemple, je vais cliquer ici orteil, en avoir un de plus. Alors voyons si je vais en ajouter un de plus. Je vais probablement ajouter 15$ de plus sur tout ça, donc ça va être 45 ici devrait être 75. Voyons si ça marche. Je vais cliquer sur 45 parce que ses trois et moi avons 75 au total. Évidemment, je peux juste, genre, réduire les choses pour simple, juste pour un. Si je veux regarder maintenant sont juste 15 15 avec ces 30 de ces trois. J' ai 45 et je peux aussi, comme je l'ai dit, monter et descendre avec ça. Vous pouvez vraiment les essayer après qu'il y ait un bouton ici que vous pouvez vous débarrasser de tous les produits de cette ligne de profits. Disons que j'ai quatre T-shirts noirs au total ici. Je peux me débarrasser de tous en cliquant sur ces X. et regardez, je viens de gagner des t-shirts de 15$ avec mon total et ici sur le dessus. Voyez-vous que j'ai encore Onley averti. D' accord. Et je peux revenir entre les pages pour ça. Si je peux aller à ma page d'accueil, retournez à la voiture et c'est toujours là. D' accord, les gars. Donc c'est le projet que nous allons construire va être génial pour vous parce que vous
allez apprendre comment traiter orteil avec un stockage local de l'de votre navigateur. Comment créer ces applications comment utiliser des fonctions modulaires en javascript. Nous allons utiliser beaucoup de fonctions modulaires et oui, j'espère que vous étiez excité de commencer la partition, donc je vais voir quand l'autre côté
2. Créer l'interface Frontend: Bon, gars, bienvenue à une autre vidéo aujourd'hui. On va construire le panier de commerce électronique avec du javascript vanille. Donc le site est ici. Comme vous pouvez le voir, nous avons quatre produits que si vous êtes sur elle, vous pouvez voir sur l'anémie qui dit est après panier. Donc disons, par
exemple, je vais avoir et deux noirs qui ces. Donc, je vais juste double-cliquer 12 et en haut, nous devrions voir ici un bouton de carte que, comme, comme dans cela pour le moment. Donc, nous sommes arrivés aux produits. Je vais devoir avertir de ce sweat à capuche gris aussi. Donc, quand je clique dessus maintenant, j'en ai trois. Donc, si je recharge la page, regardez, si je recharge la page, elle est toujours là. Le numéro trois. Pourquoi c'est ça ? Parce qu'on va utiliser quelque chose appelé le stockage local. Tous les navigateurs modernes. Ils l'ont. Et c'est génial pour l'avant et des obligations comme celle-ci que nous allons construire. Donc si je vais cliquer maintenant pour obtenir ces cartes, Ok, je vais cliquer ici, et maintenant je peux voir que j'ai deux de ces hoodies noirs que nous avons sélectionnés avant, nous pouvons voir le prix individuel de celui-ci et le prix total de deux. Donc si chacun est de 20$, le total sera de 40. Et nous avons aussi un sweat à capuche gris, qui est de 20$. D' accord. Et au total, le prix devrait être de 60$. Peut-être que je vais faire un peu plus. Donc ils savent si nous avons besoin, mais j'espère que vous verrez mieux. Donc, nous pouvons aussi simplement cliquer sur ces bouteilles pour changer la quantité. Disons que je vais ajouter un de ces gris. Qui ça. Ok, je vais cliquer maintenant. Le prix total, parce qu'il a aussi 40 ans. Et maintenant, si vous enregistrez encore aussi le panier, j'ai quatre produits au total et hors cours. Le prix total est également mis à jour. Je peux également cliquer dans ces boutons supprimer qui va se débarrasser de tous ces produits. Donc, par
exemple, si je clique dessus,
Ok, Ok, maintenant je n'ai que deux noirs. Qui ça sur le chariot ici ? Je n'en ai que deux, ce qui est parfait. Et maintenant, le prix total est de 40$. Et ici aussi 40$. Pourquoi ? Les gars ? Donc c'est le projet que nous allons construire. J' espère que tu veux excité pour ça. Et la première chose que nous allons faire est juste,
genre, genre, commencer à construire le HTML et CSS de ce projet. Je ne vais pas passer trop de temps sur ces HTML et CSS. J' ai le coach Justin ici. Je vais l'utiliser, mais je vais m'expliquer, mais je veux passer un peu plus de temps en javascript parce que c'est tout ce cours. Mais comme d'habitude, si vous avez des questions, faites-le moi savoir. Dans les commentaires ci-dessous, je réponds à toutes vos questions. Et aussi, je vais mettre des liens corrects pour certains de ces fichiers que tous ces fichiers à la fin, si vous voulez juste les utiliser, c'est vraiment à vous de choisir. Si vous ne voulez pas, vous pouvez juste, genre, suivre et devrait être facile. Alors commençons. D' accord. Donc, la première chose que nous devons faire est juste de créer notre fichier html dot index. C' est ce que je vais faire. HTML et ah, je vais juste écrire un modèle simple ici. Html cinq. Je vais juste fermer ça que je vais mettre ici,
genre, genre, sur la cour de shopping supérieure et à l'intérieur. Je vais juste mettre celui-là disant la page d'accueil de ces mers. Je vais également créer maintenant un nouveau fichier pour les styles point CSS Okay. Et je vais créer un autre fichier, qui va être pour mon panier dot html. Donc ça va être comme une page pour aller au panier où nous avons tous les produits. Donc, je vais juste copier tout ce que j'ai sur mon index html point quand un mettre ces à l'intérieur de mon panier html point et ce devrait être pour l'instant. Très bien, comme je l'ai déjà mentionné, les gars, je ne vais pas passer trop de temps avec HTML et CSS sur les partitions parce que je veux juste
donner un peu plus de temps juste pour javascript parce que c'est un cours JavaScript. Quoi qu'il en soit, eso je vais juste coller du code ici que j'ai déjà du projet. Vous pouvez toujours avoir un lien sur la description si vous voulez obtenir les fichiers. Um, si vous obtenez ces fichiers, alors vous devriez avoir les fichiers s'il est vous voulez juste, comme suivre et juste mettre la vidéo en pause et juste la copier. ce que Alorsce queje vais faire,
c'est je vais juste commencer nous, la Heather. Ok, je vais juste copier ça, que j'ai été là sur le côté. Je vais le coller. Je suis juste fermé. Celles-ci, je vais les rythmer. Donc, en ce moment, j'ai ah, des éléments
du ciel. Nous le Deve avec une superposition de classe. Assez avec le titre H deux et avec une sorte de barre de navigation. Donc si je vois, comment ça ressemble au moment où ça ressemble à ça. D' accord. Est une normale est une
navigation normale, hum, hum, mais d'un site Web. Comme je l'ai dit, les gars, je vais vous donner juste un peu de temps si vous voulez. Copiez ceque j'ai ici. Copiez ce Donc une fois que vous avez ces, on pourrait juste, genre, commencer à coiffer notre site, donc je vais juste mettre le lien vers mon CSS, et je pense que je l'ai appelé styles. Ok, petit point CSS là-dedans. Je vais juste coller quelques choses que je mets d'habitude donc je mets toujours ces ou non, mes sites Web orteil juste, genre, réinitialiser tous ces types de propriétés, puis évidemment, nous avons ici une famille amusante Roboto que nous n'avons pas pour le moment. Nous devons donc l'importer à partir de Google. Ok, donc si vous allez dans les fonds Google, Ok, je vais cliquer sur Google téléphones, et j'utilise juste ce robot. Ok, alors vous cliquez ici en bas. Tu devrais voir Laisse-moi les déplacer un peu sur le côté. Vous devriez voir comme un lien pour importer ces. C' est ce que je vais faire. Je vais juste copier des copies de coin et coller juste, hum, ici. J' ai aussi besoin de mettre hors cours un lien. Je ne sais pas si j'ai mis le Lincoln. Ouais, j'ai mis le lien sur le mauvais que j'ai mis sur la voiture pour pointer html au mauvais endroit. Je vais les enlever du chariot. Non, en fait, je dois le laisser ici de toute façon, parce qu'on va les utiliser pour le chariot alors je vais juste le mettre ici, OK ? Styles dot CS dit Ok. Donc on a fait ça. Laisse-moi rentrer ici. Il suffit d'enregistrer vous laisser mettre quelques styles plus. Je vais mettre le style pour mon hever. D' accord ? Je vais mettre la bruyère en année pour le moment, comme vous pouvez le voir, Mon paradis, il a juste, genre, une image de fond qui est bien stylée avec une hauteur de 150 pixels. Alors si vous vous souvenez, j'ai dans mon oui, je pense que j'ai mordu collé tous ces trucs. Je vais copier tout ça parce que ça va être exactement le même pour mon index. C' était juste une erreur. Les gars. Vous pouvez aller copier le même code pour l'index et la voiture pour pointer html parce que ce sera la même chose. Ecoute, je vais cliquer ici. La carte d'accueil est toujours la même. Euh, ok, il y a une chose pour le moment dont nous avons besoin, c'est de faire des copies superposées. Vous voyez ces superposition dif que je vais mettre dans
des années, un CSS qui le rend, hum, un peu plus sombre. C' est ce que je voulais. Alors je vais mettre des styles pour ma nuff aussi, donc je vais mettre ici. Donc, en ce moment mon novice ici avec le titre et je suis arrivé ici le menu, nav Lings. Ensuite, je vais mettre quelques styles d'accord pour mes liens de navigation. Donc je vais les mettre ici. Je lui donne un peu de temps. Comme je l'ai dit, si vous voulez juste si vous voulez juste
mettre la vidéo en pause et copier ces styles au moment où nous venons de rentrer chez nous. Et panier, si vous avez un avis ici sur la navigation de la mine. OK, j'utilise quelque chose appelé icônes de fer. Ok, C'est une sorte d'icônes avant que vous pouvez utiliser que vous pouvez augmenter la taille, changer l'appelant et tout, et j'aime vraiment les utiliser. Je possède des icônes, Donc je vais mettre ici sur les icônes de fer de Google qui sont complètement libres. Ok, quelqu'un qui clique ici. Et regardez, vous avez toutes ces icônes que vous pouvez utiliser lorsque vous cliquez sur l'utilisation et que vous voulez écrire ici que vous devez mettre sur le corps hors de la page. Et puis si votre pays continue à défiler vers le bas, il y aura un autre lien ici qui indique l'installation. Vous devriez le mettre juste avant votre style point CSS. Ok, donc, um, si tout va bien et qu'on rafraîchit notre page, ça devrait marcher. Laisse-moi voir si je manque quelque chose. Je pense que ça, euh peut-être que je ne suis qu'à propos de Ouais. Ok, maintenant je suis à la maison et c'est là. Ok, mettons un peu plus de styles pour la carte. Donc je vais juste les copier. Je vais mettre, hum en bas. Regarde, maintenant est joliment stylé mon chariot. Comme je l'ai dit, il est ici tous les styles, donc je suis juste en retrait ceux-ci un peu mieux, Donc tout est bien organisé. Laisse-moi juste copier tous ces enroulés dans mon panier parce que ce sera exactement le même index
et la même carte en ce moment. Laisse-moi juste copier tous ces enroulés dans mon panier parce que ce sera exactement le même index Ils devraient être exactement les mêmes. Donc si tu vas entre la maison et le chariot, il sera pareil. On a eu ça pour notre bruyère. Maintenant, nous pouvons commencer à construire, par
exemple, les produits et maintenant ces produits est juste pour la page html point index. Ok, laisse-moi juste voir. Je vais juste les copier, d' accord ? J' ai un conteneur. Donc je vais copier mon conteneur que j'ai ici, et je vais te montrer. Donc après la bruyère, tu vois, je vais juste donner un peu d'espace, ok ? Quand dépassé ces. Et voici mon Deve avec une classe de conteneur avec deux de ces images que si vous ne vous souvenez pas, j'ai été ici sur le côté du dossier avec ces images, ok ? Et ces images qu'ils ont à l'intérieur de toutes ces choses que je vais utiliser, alors laissez-moi juste augmenter. Mais je vais les mettre en année. Je vais augmenter les choses pour que vous puissiez voir un peu mieux. Donc vous avez le départ du conteneur, et puis vous avez un accord avec une image de classe que ce sera chacune des images avec l'image à l'intérieur avec le titre avec le prix. Et puis nous avons eu le bouton demandé au panier que nous ne voyons pas. Je vais me débarrasser de ces entrées parce que je pense que je ne les utilisais même pas à la fin. D' accord. Ainsi, vous pouvez vous débarrasser de ces entrées. J' essayais juste de faire autre chose. Donc, si je rafraîchis la page, regardez, vous devriez voir quelque chose comme ça maintenant. D' accord. Je pense que je viens de mettre comme, quatre produits. Tu peux en mettre autant que tu veux. Revenons aux styles que CSS Maintenant laissez-moi voir. Carte A. Je vais juste mettre mon conteneur, donc je vais mettre mon conteneur ici. Débarrassez-vous de ce truc. Je vais vous expliquer ça après, donc si vous mettez ce conteneur maintenant, vous devriez voir ici les projets. Alors je vais juste mettre l'image. C' est pour styliser nos images. Ok, donc ils ont l'air un peu mieux comme ça. Alors je vais faire à deux cartes parce qu'on doit ramasser le bouton à l'intérieur. Quoi d'autre alors ? Bien sûr. Je crois que j'ai oublié. Non, Non, je ne me suis pas battu pour le mettre, je vais juste les mettre pour quand on espère que quand on espère les images, on peut voir le bouton de la carte ARTO. Il est là. D' accord. Organismes de bienfaisance 30. Sterritt, facilité. D' accord. Et si je vais au chariot, il n'y a rien. Et si je rentre à la maison, j'ai tout ça. Bon, donc je pense que c'est tout pour ces gars de la vidéo. Nous avons mis en place notre projet. Notre projet initial. Ce n'est rien lié avec javascript, mais je pense que c'est toujours bon pour vous de voir un peu comment nous avons commencé le projet, comment nous avons ajouté tous ces différents éléments. Et bien sûr, vous pouvez le coiffer comme vous le souhaitez. Bon, donc c'est tout pour ces gars de la vidéo et aussi pour la prochaine.
3. Ajouter des numéros à le panier: Bon, les gars, bienvenue. Donc dans ces vidéos, nous allons cliquer sur ce sont deux boutons de carte et nous allons mettre à jour le bouton que nous avons ici. C' est une cicatrice. Donc, autant de fois que nous cliquons sur l'ajout au panier, nous allons compter le nombre de produits que nous ajoutons à la carte. Donc la première chose que nous allons faire est d'aller à notre index HTML point. D' accord ? Et juste après le script que nous avons ici, je vais créer un autre script. Ok, nous la source du point principal Js. Ok, donc je vais les ajouter ici sur le côté, donc je vais juste faire un clic droit sur un nouveau fichier, et je vais faire un point principal Jess. Et je vais juste mettre la console, le journal de la course. Ok, assurez-vous
juste que ça marche. Donc je vais faire un clic droit sur ma page. Je vais faire une inspection, d' accord ? Et je vais regarder ici dans la console, et je peux voir ici sur le côté courir. D' accord. Si vous pouvez voir ici, c'est mon journal de consulat. Donc, cela signifie que mon fichier principal dot Js est connecté donc c'est parfait. Eso La première chose que je veux faire est juste d'aller ici au sommet, et je vais faire un lâcher et je vais faire des cartes. Égale deux documents dot Quary sélecteur tous et ce que je veux sélectionner est mon point au panier . Ok, je vais te montrer maintenant. Qu' est-ce que c'est ici sur mon index dot html ? Ecoutez, nous avons ces éléments d'ancrage qui avec une classe de invités à chariot, si vous voulez voir c'est ce bouton. Bon, donc je veux que les orteils les obtiennent tous avec JavaScript. Donc je dois les cibler. C' est pour ça que j'utilise ça. Et ce que je vais faire, c'est juste que je vais faire un auditeur d'événements. Donc, chaque fois que je clique dans l'un d'eux, je veux faire quelque chose. Donc parce qu'on en a plein quand on a attrapé ça va être, comme dans une sorte de tableau. On peut juste faire une boucle de quatre pour Let I égal à 20 Donc on va les parcourir tous, et je vais le faire. Il va être un dernier. Puis les cartes de la longueur des points, d'accord ? Et puis on va faire un I plus. Plus. Ok, donc c'est juste une boucle simple qui va courir à partir du panier zéro orteil de cette longueur. Alors, combien coûte la carte ? Longueur de départ. On a 1234 Donc je vais être moins que des coupures que ça va aller de zéro sur l'affaire 30123 Ok, donc si je gagne ici un cours,
tenez ce journal,
je vais faire tenez ce journal, ma boucle. D' accord ? Je vais les sauver. Et écoute, j'ai fait tourner ma boucle sur ces quatre regards quatre fois. Alors, qu'est-ce que je veux faire ici ? Je veux prendre mes cartes. D' accord. Et je vais juste mettre ici. Je parce que mon oeil va changer sur ces boucles va commencer à partir de zéro qui va pour un et des trucs pour que je puisse attraper toutes mes cartes basées sur ça. Parce que de toute évidence,
si vous vous souvenez,
vous pouvez avoir des cartes. Parce que de toute évidence, si vous vous souvenez, Zéro pour l'attraper ici, vous pouvez avoir des cartes. Une carte. Je veux prendre celui-là. Et ainsi de suite. C' est pour ça que j'utilise la boucle. Donc, je vais faire un écouteur d'événement ajoute. Et quel écouteur d'événement je veux. Je veux cliquer. Ok, alors je vais mettre la fonction. Donc, ce que je fais ici, c'est que chaque fois que je clique sur l'un de ces boutons, je veux faire quelque chose. En ce moment. Je vais juste faire une console dot lord off button, ou je vais en faire d'autres aussi. Cartes. Ok, je vais juste y aller. Regarde ce truc sur le côté. Ma console. Je vais cliquer sur ces sur le panier, et il dit deux autres voitures, je vais cliquer à nouveau et regarder deux fois je vais cliquer à nouveau. 34 Donc tous ces boutons, maintenant ils fonctionnent. Alors, euh, qu'est-ce que je veux faire ici ? Fondamentalement, je viens de faire ce genre d'événement. Écoutez si je veux, mais pour le moment, je vais créer une fonction appelée numéros de carte. Donc, je sais combien d'articles j'ajoute au panier, donc je vais faire une fonction. J' ai appelé les numéros de chariot. Donc peut-être que la première chose que je vais faire est juste d'ajouter une sorte de valeur au
stockage local . C' est comme ça que nous allons économiser tous ces profits que nous ajoutons ici sur la page. Et même si tu te rafraîchis, on se souviendra de eux. Donc à chaque fois que je clique ici, je vais juste faire les numéros de cartes de voiture. Ok, je vais mettre ça ici au lieu de ce journal de console. Et ce que je vais faire, c'est que je vais faire un point de stockage local dit article, et ensuite je vais mettre un numéro de panier et le suivant, je vais juste mettre celui, par
exemple, et je vais te montrer dans une seconde. Donc si je vais ici, je rafraîchis la page. Je vais cliquer maintenant d'abord, avant de cliquer, je vais ici en haut. Je vais dans les applications. D' accord. Au fait, les gars, j'utilise le navigateur Google Chrome. Je pense que ce sera quelque chose de similaire. Si vous utilisez Mozilla Water Opara ou quoi que ce soit. Vous les gars ou safari, si vous voulez suivre exactement ce que je vais, juste les utiliser. Le navigateur Google Chrome. Donc ici, attendez. Dit application sur le dessus. Vous allez à l'entrepôt local ? Et si vous voyez ici, il n'y a pas de clés et pas de valeurs pour le moment. Ok, donc quand je fais le stockage local, pas définir les numéros de panier un, c'est que nous allons ajouter quelque chose là-dedans. Donc je vais te montrer en cliquant ici sur ça. J' ai une carte numéro un, d'
accord ? J' ai une carte numéro un, d' Et si je clique à nouveau va juste faire re la même chose encore et encore. Donc, par exemple, maintenant j'ai cliqué une fois et il a mis à jour mes numéros de panier. Mes numéros de cartes clés et la valeur 1. Si je clique à nouveau, rien ne se passe. Alors peut-être que lorsque je clique sur ceux-ci, je veux vérifier s'il y a au départ une sorte de valeur clé
là-dedans . Donc, par
exemple, si je sais que c'est ici déjà, je veux que la prochaine fois que je
vais cliquer va augmenter ces un peu. Donc, obtenons ces valeurs la première fois que nous cliquons sur le bouton. Prenons ces valeurs. Donc je vais faire des numéros de produit Flett va aller à la pensée de stockage local, et je vais faire je vais obtenir article ok. Et l'article est appelé si vous vous souvenez ici sur les cartes du dessus, chiffres Ok ,
donc ,
hum, je vais juste enregistrer ces produits en chiffres. Ok, alors regarde ça. Je vais me laisser voir ma console en ce moment. Ce n'est rien ici. Je peux juste me débarrasser de ça. Ne vous inquiétez pas pour ces, hum, erreur que c'était là-dedans. Je vais juste cliquer ici et regarder, j'ai eu mes numéros de produits correctement à partir de là. Mais si vous allez ici et que vous faites une escroquerie, alors point déconnectez-vous tapez les numéros de produit. Ok, laisse-moi juste sortir ça. Je vais cliquer à nouveau. Et il dit qu'il est un que nous saisissons de notre entrepôt local. Il est livré sous forme de ficelle. Ok, donc nous devons faire quelque chose pour convertir ces nombres d'une chaîne en un nombre. Donc, pour cela, je peux juste faire, um, les numéros de
produit vont être égaux à un int d'analyse. D' accord. Désactivez les numéros de produit d'avant. Ok, maintenant, vous dernier journal encore. Le type de numéros de produit. D' accord. vais juste vérifier ma console, rafraîchir la page, débarrasser de ceux-ci quand je clique dessus, et il dit maintenant que c'est un nombre parce que j'ai utilisé ces parties pour convertir la chaîne en un nombre. Ok, alors débarrassons-nous de ces journaux de points de consul pour l'instant. Ok, donc une chose que je vais faire avant de commencer avec ça, c'est juste de commencer ici. Variable dans le top appelé produits. Ce sera égal à un tableau. Et ces tableaux vont avoir des objets à l'intérieur avec le nom éteint, par
exemple. T-shirts gris. D' accord. Et puis il va parler. Ok, c'est un moyen que nous allons utiliser pour saisir les images après. D' accord ? L' attaque de Ray T shirt. Et puis il aura un prix 15 et il aura des cartes à zéro. Donc, c'est une façon que nous pouvons juste, comme suivre combien de fois cet article que ce produit est sur le panier ? Eso je vais aller faire la même chose pour le reste des produits. Je vais juste copier ceux qu'ils ont sur le côté. Quand une copie de ces, je vais le mettre ici. Donc c'est tous les produits que je vais utiliser. D' accord. Le grand T-shirt,
le sweat à capuche gris, le T-shirt noir et le sweat à capuche noir. Ok, comme vous pouvez les voir tous au début, ils ont des cartes. Il n'y a rien sur la carte. D' accord. Hum ok, donc ici, quand je clique sur une de ces choses Ah, tout d'
abord, bien sûr, je veux exécuter ces, euh, numéros de
cartes. Je veux vérifier. Tout d'abord, s'il y a quelque chose dans mon entrepôt local, OK, donc pour ça, je vais faire une déclaration ici, OK ? Parce que si je vais supprimer ces look, si vous les gars juste cliquez sur ces effacer tout et juste rafraîchir la page si j'ai essayé de faire un journal de points de
console de ces numéros de produits la première fois que vous venez à la page et vous juste de cliquer sur jusqu'à la carte. Si vous essayez de les obtenir à partir du stockage local et que vous essayez de faire cette partie parce qu'il n'existe pas va vous donner, comme, indéfini ou non. Vérifions. Je vais le faire sur la console. Je vais cliquer et je vais être, genre, pas un numéro. D' accord ? Eso, faisons ça. Si déclaration donc je vais faire si Ok, il y a des numéros de produit, Ok. Cela signifie que nous avons déjà cliqué là-bas d'avant. Nous avons été quelque chose à la carte. Je veux faire un ensemble de points de stockage local. Ah, les chiffres. Ok, donc je vais juste couper ce que je vais mettre celui-là dans le stockage local de l'année. Cet article pour que mes numéros de cartes soient ce qu'il y avait d'avant. C' est ce qu'on fait ici. D' accord ? Plus un. D' accord. Et s'il n'y a pas de produit d'accord ici avec soit s'il y avait déjà des produits sur notre stockage local, si ce n'est pas le cas,
Ok,
Ce que Ok, je vais faire est juste de régler mon stockage local pour définir les numéros de carte d'article pour être un. Ok, donc c'est ce qu'on va vérifier maintenant. Laisse-moi juste aller application des orteils. Je veux
dire, supprimez ce truc dans vos gars. N' oubliez pas de le faire, parce que vous ne fonctionnerez pas comme prévu. Donc, je vais rafraîchir la page. Je vais cliquer ici. Donc, la première fois que nous entrons ici,
évidemment, nous essayons d'obtenir quelque chose là-dedans. Tu ne reçois rien. Donc ce ne sera pas un numéro. Donc, quand nous essayons de le faire, si des numéros de produit existent, ce qui n'est pas le nombre que cela signifie est faux, il signifie que ces codes vont fonctionner. Ok, donc le stockage local, on va définir les numéros de carte. C' est ce que nous avons ici sur le dessus. Et il va fixer la valeur d'un. La deuxième fois que je vais cliquer sur l'une de ces cartes, Nous allons obtenir les numéros de produit du stockage local. Nous allons obtenir le numéro un sous forme de chaîne. Ensuite, nous allons les convertir en un nombre. Maintenant, je vais dire que si les numéros de produit existent maintenant est un donc il existe et c'est vrai. Donc, ce que nous allons faire est de faire un stockage local. L' article de notre panier sera les numéros de produit, qu'on vient d'avoir avec le numéro un. Donc un plus un sera ce qu'il faut essayer. Voilà, tu y vas. Et si vous continuez à cliquer ? Regardez, vous avez tout le nombre de produits sur lesquels vous cliquez dessus. Maintenant, il y a encore une chose que nous pouvons faire. Ce qui est quand nous cliquons ici sur ou rien de ces au stockage local. Je veux ça. Si c'est le premier article, je peux juste porter des documents. Laissez-moi juste faire un documents Docks, Query Sélecteur. D' accord. Et je veux sélectionner ma portée de panier. Ok, laissez-moi vous montrer les gars. Qu' est-ce que c'est ou ma barre de navigation que j'ai ici ? Mon Où est-il ? Ally, avec une classe de cartes à l'intérieur, nous avons une portée avec le numéro zéro. Ok, si vous ne vous souvenez pas, c'est ici. Ok, écoutez, ça s'étend avec le numéro zéro. C' est ce que je saisis là-dedans. Ok, alors laisse-moi y retourner. Et je voulais accéder au texte. Ah, contenu. Toby est égal à deux eso. Je veux être, par
exemple, si c'est la première fois qu'on fait ça va être proche d'un. D' accord ? Sinon, ce que nous allons faire est juste de définir, um, le contenu des decks comme des numéros de produit, nous récupérerons de tout ce
qui est ici. D' accord. Plus un. Ok, Donc nous saisissons tous les produits que nous avons déjà sur notre stockage local, et nous en ajoutons un. Donc, fondamentalement, nous faisons la même chose qu'ici, mais nous mettons à jour notre panier. D' accord ? Je veux dire, débarrassez-vous de toutes ces clés de stockage locales que nous avons actualisé la page. Et maintenant, regarde, je vais cliquer sur après les cartes. D' accord ? Donc on en a un. Je vais cliquer à nouveau. Je suis arrivé à et aussi ici sur le dessus. Je vais cliquer ici trois et donc un. Si je rafraîchis le look de la page, maintenant c'est parti, OK ? Nous avons toujours nos valeurs de stockage locales, mais ici en haut, notre carte est vide, donc nous devons faire quelque chose à ce sujet. Donc ce que je vais faire est juste de créer la fonction, ok ? Avoir la fonction appelée sur les charges, les cartes, les numéros. D' accord. Et cette fonction va juste vérifier la même chose comme ici d'avant, nous allons créer une variable appelée numéros de produit va vérifier l'
orteil de stockage local , obtenir une nuit, um, off numéros de panier s'il existe. Donc je vais le faire s'il y a des numéros de produits du stockage local. D' accord. Ce que je veux faire est juste de définir mon document que la plage de la carte de sélecteur de requête, le contenu de texte. Toby est égal au nombre de produits qui se trouvent sur mon stockage local. Ok, maintenant, ces fonctionnements ici ne vont jamais courir à moins qu'on ne l'appelle ça. Si vous vous souvenez de cette fonction de numéros de carte est attaché orteil un clic écouteur d'événement orteil ces boutons. Mais cette fonction que nous venons de créer maintenant ne fonctionnera jamais tant qu'on ne l'appellera pas. Donc je vais juste appeler cette fonction ici. Donc, quand on charge la page pour la première fois, ça va courir, et il va la vérifier. Donc si je rafraîchis la page, regarde, le panier est tout le temps. Trois. Donc si je vais sortir, par
exemple, comme un à nous en avons cinq en haut,
comme vous pouvez le voir, si je me rafraîchis ou si je vais à la page du panier et puis je reviens. Regarde, c'est là. D' accord, les gars. Donc, c'est tout pour ces vues v et tous poursuivre le prochain
4. Ajouter des produits à l'espace local: Bon, les gars, bienvenue. Donc, dans la dernière vidéo, si vous vous souvenez, nous étions comme cliquer sur ce sont deux cartes. Et il mettait à jour le boutonnage de notre panier ici sur la conversation avec le nombre d'articles que nous avons dans le panier. Mais pour le moment, nous ne savons pas exactement quels produits nous avons dans notre pays. Donc c'est ce qu'on va apprendre dans ces vidéos. Donc la première chose que je veux faire est que si vous vous souvenez quand nous avons besoin de ces quatre coups Teoh à ces écouteurs d'événements, cliquez sur ces Afghans Buttons. Nous ne savons pas pour le moment sur quel type de produit nous
cliquons, nous savons juste que nous pouvons cliquer, et cela va ajouter quelque chose à la voiture. Laissez-moi vous montrer ce que je veux faire quand j'appelle des numéros de carte de dysfonctionnement. Je veux passer à l'intérieur de ces cartes membres que je veux passer. Oui, des produits. OK, ces produits d'un an. Alors où sont les produits et je vais mettre ici. Comme vous vous en souvenez, nous faisons ces quatre regards qui commencent par l'indexation ici. Zéro. Et c'était jusqu'à trois ans. Donc chacun de ces produits va avoir un indice. Donc, chaque fois que je clique dessus et que j'appelle cette fonction, je pourrais juste les attraper ici cul un produit, OK ? Et juste au début, je vais te montrer. D' accord ? Je suis juste rempli de maïs Soul. Ne regarde pas. Et je vais dire que le clic sur les produits est que je vais juste mettre des années, euh, espace virgule et je vais mettre ensemble produit. Ok, donc je vais faire un clic droit ici sur la page, inspecter pour que je puisse ouvrir les outils du développeur. Je vais dans ma console et regarde ce que je vais faire si je clique dessus. Mon super t-shirt. Ok, écoute, le frère qui a cliqué sur l'ISS et il va me montrer ici. Nommez les grands T-shirts. Fatigué. T-shirt gris prix 15 en carte zéro. D' accord, et si vous vous souvenez, c'est
ce qu'il y a ici en haut. Ok, alors laissez-moi juste effacer ces Rafraîchir la page. Imaginez ça. Maintenant je vais cliquer, ou celui-là le sweat à capuche noir. Je vais cliquer sur son Je suis juste rafraîchir la page. Effacer ces maintenant cliquez sur le sweat à capuche noir et regardez ce qu'il dit. Nom Black. Qui ? La cible. Noir. Qui ? Le Nous avons obtenu le prix et dans les cartes comme celles-ci. Nous sommes donc sur le bon pas. Maintenant, les
orteils à notre entrepôt local. Si vous vous souvenez de notre entrepôt local, la seule chose que nous avons en ce moment est juste, euh juste rafraîchir. Je vais cliquer là-dedans. On n'est pas là pour le moment. Juste les numéros de cartes. Ok, donc ce que je ferai, c'est si je fais défiler ici. Donc je passe ça aux numéros de carte et ici après que j'ai tout fait, juste prendre ce bloc de gendarme avec seulement besoin plus. Je vais appeler une fonction appelée Sit IV. D' accord. Et je suis aussi avec un laissez-passer ces produits. Ok, donc je transmets le produit ici, celui sur lequel je clique dans mes numéros de voiture. Je l'attrape ici sur le dessus de ces numéros de cartes, et puis je le transmets ici à ces autres fonctions qu'il n'existe pas pour le moment , mais nous allons créer est maintenant. Ok, alors fixez des objets. Créons ces éléments de détection de fonction. D' accord ? Et attrapons ces produits. Mettons-le ici aussi. Et je vais juste voir un paquet de Lord et je vais dire même signer la
fonction de l'article , et je vais faire un autre consulat. Ecoute, mon projet est, et je vais juste bousculer l'avant. C' est bon. Assurez-vous juste que ces fonctionnements ici sont en cours d'exécution. Donc je vais les effacer. Je vais cliquer ici sur nous à Cartland, vérifier ma console et regarder à l'intérieur de la fonction de l'article. Mon frère a utilisé un bon plat en ce que je viens de cliquer dessus. Ok, je les ai rafraîchis à nouveau quand je clique sur ce sweat gris maintenant, à l'intérieur de la fonction de l'article de série. Mon produit, c'est qu'il veut le nom. Tu veux lier ça ? Le prix et le revenu Parfait. Ok, donc ce qu'on veut faire, tout d'
abord, c'est que je vais faire, hein ? Produits points dans les cartes dans le panier. Il sera égal à un. Ok, Donc la première fois que vous avez cliqué ici, vous êtes qu'il pourrait faire des points de produit dans le panier, parce que si vous vous souvenez Ah, nous avons ces dans les cartes, les options ? Oui, des produits
médicaux dans le panier. Et puis je vais faire un stockage local. Ne définissez pas l'élément Je pense que cet élément de jeu que Yeah, Dieu a mis l'élément et ce que je vais appeler ceux-ci est sous le problème. Je pense que c'est ce que j'avais d'avant. Oui. OK, donc les produits dans les cartes, et puis je vais mettre une virgule et la valeur que je veux. Ok, donc maintenant je vais juste mettre, euh, peut-être que je vais commencer une nouvelle variable dans le véhicule. Laissez les cartes. D' accord. Ça va être égal. Deux personnes ont vu un objet, et je vais mettre ici c'est une attaque. Je vais mettre les produits de type point. Ok, je vais juste mettre ces noms et à l'intérieur de ceux-ci, je vais mettre juste le produit lui-même, ok ? Quelque part pour les sauver, laissez-moi les pousser tout d'abord, ici sur le dessus. Et maintenant, je vais passer ces articles de voiture ici. D' accord ? Laisse-moi entrer ici. Laisse-moi t'enlever toutes les choses à l'intérieur. Lorsque vous actualisez la page, je vais cliquer dans l'un de ceux-ci et regarder ce qui se passe. Il dit produit dans la carte et j'ai eu l'objet. Objet. Ok, donc le problème, c'est quand on crée ces objets que je vais passer dans mon
stockage local . On doit faire quelque chose qui s'appelle Jason. Ne pas étrange si je parce que nous devons passer ceux-ci non pas comme un objet javascript, mais comme objet adjacent e à notre stockage local. Donc ce qu'on peut faire est Jason dot string si ça va, et si je mets ça ici, Jason pas string. Si moi et moi allons faire du bateau,
je pense que c'est si je ne me trompe pas. Débarrassons-nous de ça. C' est du rafraîchissement. Je vais cliquer sur le 1er 1 et maintenant c'est bon. Ok, je vais juste les pousser ici. C' est ce que nous avons maintenant à l'intérieur de notre solide local sur les produits à carte. J' ai un grand T-shirt avec le nom de grand T shirt pour attaquer le prix. Et j'ai été dans le premier chef. Ok, parfait. Donc on a eu la première partie. Mais la chose est, si je veux un rapide maintenant sur le 2ème 1 par exemple, ces graves Woody. Maintenant, vous voyez que ça est fini écrit, alors commençons avec cette partie. Parce que nous ne voulons pas ces obtenir plus écrit tout le temps Donc, pour cela est,
chaque fois que nous cliquons sur les éléments de série pour la première fois, nous devons vérifier si existe déjà une sorte d'éléments de voiture ici déjà ou non. Ok, alors faisons-les. Donc je vais vous dire que les objets de cartes vont être des aigles au stockage local. Ok, laisse-moi juste passer par ça. Parce que je l'ai déjà initialisé ici dans le hall d'abord. Donc le stockage local n'a pas d'objet, d'accord ? Et l'article que je veux obtenir est ces produits en nature. D' accord. Pour vérifier s'il existe. Déjà, quelque chose dans notre stockage local ne reçoit donc pas de tirage. C' est des cartes. Ok, donc c'est ce que vont être mes articles de panier. Ok, et puis je vais dans une voiture, alors marche. Et je vais dire que mes articles le sont, et je vais juste mettre ici des articles de cartes. Ok, alors vérifions ça. Je vais rafraîchir la page. Je vais aller dans ma console. Je vais cliquer sur ces grable, le par exemple, et regarder ce que nous avons à obtenir sur le dessus. Mes articles de panier sont, et puis on a une mauvaise humeur, et on a le nom et si vous les vérifiez. C' est dans un Jason pour les images et quatre mois. Exactement. Parce que son ancien plein de ces guillemets n'est pas dans un objet javascript normal. Donc, pour cette façon, avoir à Qui est obtenu des articles égale deux. Jason. Pas difficile, parce que nous voulons passer de Jason dans un objet JavaScript. Ok, euh, donc je vais faire ici est, hum juste les objets. Ok, maintenant je vais cliquer sur ces gourmets à nouveau. Et, Lou, ce que j'ai eu cette fois, d'accord. J' ai eu mon grand film avec le nom avec le temps du prix et dans le panier un, c'est
ce qui est exactement là pour le moment, ce
qui est parfait, qui est parfait qui est parfait, pour nous
puissions voir ce qu'il y a dedans. Eh bien, regardons juste faible vérification ici et d'abord dans chaque déclaration. Si c'est OK, gardes, objets de
voiture, il fait la différence, alors. Non. D' accord. Ça veut dire qu'il est déjà quelque chose dans un magasin local dans nos cartes. Ok, si nous essayons d'obtenir quelque chose de notre stockage local et nous avons eu un prendre ceux-ci avec adjacent est comme un objet javascript. Et puis nous faisons un chèque Si nos articles sont différents de non, cela signifie quelque chose qui existe déjà. C' est donc ce que nous voulons faire. On veut faire des cartes, des objets, et ensuite je vais mettre ces supports pour mettre mes produits. Le genre sera égal à tous. Désolé. Je veux accéder aux méthodes de cartes. Toby est égal à deux ou plus Waas égal à un. Donc c'est pour en augmenter un qui est déjà là, et je vais te le montrer maintenant. D' accord ? C' est presque, comme des objets de cartes sur. Donc, par
exemple, si je vais choisir le 1er 1 l'attaque du produit si vous vous souvenez, c'est un super T-shirt. Ok, c'est ce qui va se passer. Où est-il ? Où est-il ? Est-ce juste ceci C'est exactement la même longueur facilité. D' accord. Et puis nous obtenons ces biens appelés dans la carte, et nous l'augmentons d'un. Ok, je suis juste tout ça, donc, euh, je suis juste clair ces rafraîchissements que je vais cliquer sur la 1ère 1 Regardez ces super trucs la première fois. On en a un sur le nombre total de cartes et ce qu'on a à l'intérieur, on a un non-objet avec une clé de grands T-shirts et à l'intérieur,
on a le nom. Le temps le prix. Et on est dans le chariot 1. Je vais aller en état pur une fois de plus. Regarde. Ok, donc rien ne s'est passé. Laisse-moi voir. Parce qu'avec ça, si les déclarations et nous devons mettre ça d'autre chose OK, ce sera d'autre si nous cliquons sur la première fois. D' accord ? Lorsque vous cliquez pour la première fois, vous voulez simplement définir votre produit dans les coupes pour qu'il en soit un. C' est la première fois que vous cliquez sur. Cela signifie que vos articles de voiture est non. Il n'y a rien là-dedans. Ok, alors laisse-moi m'occuper de ça. Rafraîchir. Je vais trembler ici. Et nous avons un super t-shirt avec le nom Talk price dans la coupe. Quoi ? Parce que c'était la première fois que nous avons cliqué. Je vais y aller et je vais cliquer sur le suivant. Et si j'ai l'air ouvert, j'ai eu un impact sur deux de ces T-shirts. Et quand je clique encore une fois, regarde, j'ai trois dans la carte et je sais que le nombre total de cartes aussi est trois sur le dessus OK, mais il y a un problème maintenant avec ceux-ci parce que si je vais entrer, cliquez, par exemple sur ce t-shirt noir pourrait dire,
Regarde, Regarde, que va-t-il se passer ? Rien n'est autre qu'ici. Je vais rafraîchir la page en cliquant ici. Rien ne se passe. D' accord ? Parce que, regardez, nous avons tout le temps encore ces et grand T-shirt d'avant. Donc, nous allons réparer cela, Par ailleurs, je vais juste cliquer ici sur la console pour vous laisser montrer les gars, regarder et erreur de type cour ne peut pas re propriété de dans le panier de indéfini. Ok, donc le problème est quand j'essaie de le faire,
si j'essaie de faire où les articles du panier et puis l'attaque du produit point dans le panier de quelque chose qui
n'a pas été ajouté avant, comme, par
exemple, si vous vérifiez ici en ce moment, nous avons eu ces grands problèmes parce que c'était la première chose sur laquelle nous avons cliqué. Ok, vous vous souvenez quand on clique sur ça la première fois, on met à jour notre produit dans des chariots. Toby est égal à un orteil. Ok, Peu importe ce que vous cliquez sur, alors vous créez ces très lait sont des articles. D' accord ? Toby est égal à n'importe quel nom de temps de votre produit. Ok, Donc si vous cliquez, par
exemple sur le T-shirt noir pour la première fois quand il vient de rafraîchir, elle a été rapide sur le T-shirt noir pour la première fois. Regarde, le produit
est vu des cartes ? Vous avez ce t-shirt noir clé, et puis vous avez tout à l'intérieur avec dans la voiture une la deuxième fois que vous cliquez. OK, il va vérifier facilement. articles ne peuvent pas savoir si vous vous souvenez que les articles du panier essayent juste de récupérer ce que nous avons ici. Si on ne sait pas que nous faisons demi-articles et puis imaginez que je vais cliquer sur ces sweat à capuche
gris parce que ces grande humeur n'existe pas en entendant ces objets, comme vous pouvez le voir va nous donner cette erreur. Donc, nous allons vérifier ça. Maintenant, je vais faire un look confortable juste pour vous montrer les gars faire un point de console Déconnectez les
objets de voiture frère à attaquer. Ok, donc pour le moment on a juste un T-shirt noir dans notre entrepôt local. Donc, si j'essaie de semaine sur ces sweat à capuche gris, regardez sur mangy s 66 qui est ces lignes il dit que ces indéfinis. Ok, donc si ce n'est pas défini, si j'essaie de prendre celui-ci Israël, ça dit indéfini. Ok, donc on ne peut rien faire parce que c'est un produit différent de celui sur
lequel on a cliqué. Donc, nous ferons n'importe quelle déclaration. Je vais ici. Si les cartes, iTunes, points, type de
produits est la différence, puis sur la recherche. D' accord. Je veux mettre à jour les éléments de ma voiture pour être égal à un nouvel objet. D' accord. Et ce que je vais faire, c'est que je vais prendre tout ce qu'il y a sur mes articles de voiture d'avant, en utilisant l'opérateur de repos des travaux. Super. Alors ne fais pas nos pensées, cartes , nos
articles, et alors ce que je vais mettre ce sont juste mes produits avec mon produit là-dedans. Ok, donc ça devrait être ça. Et enfin, puis hors cours, je viens de mettre à jour les chariots. Toby Bliss un. Ok, laisse-moi les sauver. C' est rafraîchir. Je vais cliquer, par
exemple. C' est la première fois. Donc, la première fois que nous cliquons sur un produit est très bien. Alors je vais cliquer sur ce super t-shirt. Ecoute, j'ai le super t-shirt avec un seul. Je vais cliquer une fois de plus et j'ai des revenus. Mais maintenant, si j'essaie d'aller et de cliquer sur une différence Produits, par
exemple, ces sweat à capuche gris Okay, um ne fonctionne pas. Voyons ce qui ne va pas sur la console. Il est toujours en train de dire que sur le 73 ils utilisent une sorte de jamais eso Nous allons juste vérifier mon juste effacer ces rafraîchissements et regarder ici. Désolé, je ne veux pas que ça soit différent que très bien. Je voulais être égal à un défini, comme on vérifiait avant. Si quand je clique, une de ces cibles de ces produits va me dire que c'est indéfini. Je veux juste mettre à jour mes articles de voiture pour être tout ce qu'il est sur mon stockage local d'avant
puis à ces nouveaux produits. Ok, alors nous allons rafraîchir. Je vais cliquer sur ces T-shirts. On va vérifier. On a des cartes de ragoût. Je vais cliquer un de plus. Donc tous les trois. Maintenant, je vais cliquer sur le grand Moody, par
exemple. D' accord. Hum oh, je n'ai pas enregistré mon dossier. Désolé pour ça, les gars. Ok, allons juste dans l'application ici. Débarrassez-vous de ça. Rafraîchir. Je vais laisser 123. Je veux trois de ceux-là. Je vais cliquer sur le Saint et regarder, j'ai eu le grand Houdini aussi. Avec un dans la carte. Je vais ici et je clique. Je suis dans le contre et si tu vois, j'en ai trois ici du super t-shirt que j'ai eu du sweat gris. Et je n'ai pas besoin d'un total d'éléments sur le dessus que nous venons d'attraper avant de la vidéo 5
précédente. Ok, je ne peux même pas en avoir une de plus. Disons que les navires de thé noir qu'il est T-shirt noir,
nom, nom, prix de
temps et dans le panier. Bon, donc je pense que c'est tout pour ces vrais et juste voir si je manque autre chose. Non, je pense que les sièges sont bien, les gars, comme d'habitude. Si vous avez des questions, faites-le moi savoir dans les commentaires ci-dessous. Et c'est tout pour toi. Les gars de la vidéo. Je te verrai dans la prochaine
5. Calculer les coûts totaux en panier: Bon, les gars, bienvenue. Donc, dans cette vidéo, nous allons calculer le coût total de nos produits que nous ajoutons au panier. Donc je vais créer la fonction. Hum, probablement. Oui, ça peut le faire. Juste ici. Après tout ça. Il suffit d'organiser ces codes un peu mieux. Juste pour qu'on n'ait pas,
genre,
beaucoup d'espaces différents partout. Juste pour qu'on n'ait pas, genre, Ok, je pense que c'est bon. Donc je vais créer la fonction ici appelée Coût total. D' accord. Et ces fonctions chaque fois que je vais et je fais un coup d'oeil à travers ma propre application à Carter Button
va passer ce fonctionnement ici. Coût total. Et je veux passer à l'intérieur des valeurs de ces produits. Ok, donc je vais faire des ponts. J' aime juste avant. Donc, quand je clique dans l'un de ces, je peux avoir accès à leurs propriétés que nous avons ici. Ça va être des produits. Bon, donc je vais prendre ces valeurs. Nous prendrons ces volumes dans l'année. Nous avons un paramètre hors produit. Vous pouvez l'appeler comme vous voulez, parce que c'est le périmètre que vous venez de saisir. Donc, je vais juste dio console ne Seigneur pas sur les produits Fries est et ensuite je vais passer l'appel. Je ne vais pas mettre de produits. Des pois, des frites. Ok, testons ça. Je vais à ma console. Je vais cliquer,par
exemple,sur
ce sweat à par
exemple, capuche noir, qui est de 25$ avec un clic, et il va dire les prix des produits 20. Ok, parce que je ne les ai pas mis à jour correctement ici. Donc j'en ai 25. J' en ai 10. Alors 25 10, puis j'en ai 20 et puis j'en ai 50. Ok, désolé pour ça, les gars. Je n'avais pas les mêmes prix, comme ceux de l'année sur la page html. Alors laissez-moi juste aller supprimer l'ancien stockage local. Rafraîchissez la page pour que nous n'ayons rien en garde ou quoi que ce soit. Je vais cliquer sur ce sweat à capuche noir. Ok, donc on a ce sweat à capuche noir dans notre entrepôt local. On a un produit dans la carte, ce qui est très bien. On a les numéros de carte 1, et je vais aller voir mon avocat, et il dit que c'est le prix du produit East 25. Parfait. Parce qu'on a cliqué sur ce sweat à capuche. Je vais cliquer sur ce super t-shirt maintenant. Alors devrait me dire le produit. Prix 50. D' accord. Et les années 80. Ok, donc on saisit les choses en premier. Ce que je veux faire, c'est que je vais faire un stockage local. Ne définissez pas l'article. D' accord. Ce ouais, set article. Et celui que je veux définir, sera appelé un coût total. Et ce que je veux mettre à l'intérieur, c'est le prix de mon produit. OK, le prix de
mon produit. Alors passons à l'application. Supprimez tout le stockage local afin que nous puissions redémarrer. Je vais cliquer sur ce super t-shirt et regarder, maintenant nous avons le coût total de réduction. 15. Donc si je vais cliquer une fois de plus dessus, , on vient de se porter dans des cartes, ok ? Je n'ai pas cliqué. Je suppose que oui. J' ai des cartes jumelles de ce super t-shirt. Le nombre total de cartes est toujours aussi. Mais notre coût total n'est pas mis à jour parce que lorsque nous cliquons la première fois, nous définissons la première valeur. Mais si vous cliquez la deuxième fois, vous devez vérifier s'il y a quelque chose sur le stockage local qui existe déjà ou non. Donc c'est ce qu'on va faire. Je suis juste d'empêcher ces lois du consulat et je vais créer la nouvelle variable ici. Je vais appeler ça des pistes. Coût de la carte. Il va être égal à deux rangements locaux pensé obtenir article. Et quel article dois-je obtenir ? Je veux saisir celui-là qu'on appelle ça le coût total. Ok, donc je vais dio Karl Soule dot verrouiller mon chariot. Leur coût est, et ensuite je vais juste mettre ces coûts sculptés que nous prenons dans le stockage local . Ok, regardons dans cette console. Je vais cliquer ici sur ces super moody, par
exemple, et ça va me dire que ma carte coûte 15. D' accord ? Et si je dois faire un cours, le cadenas, je vais juste faire quel type de réduction du coût actuel. C' est juste pour vous montrer quel type de données est-il ? Donc je vais cliquer ici dans cette super humeur, et il va me dire que mon panier coûte 20 et c'est une ficelle. Donc, chaque fois que nous obtenons quelque chose du stockage local, il vient comme une chaîne parce que nous voulons le nombre. Je vais mettre à jour ma voiture. Ok, laisse-moi entrer ici. Quand j'ai joué mes cartes coûtent être égal à deux A analyser le coût de la carte. Nous sommes donc en train de convertir d'une force en un nombre. Alors je vais essayer encore une fois. Maintenant, je veux que le type de données de la variable est l'un de votre nombre, donc nous pouvons réellement utiliser le maintenant toe calculer le coût total de notre panier. Ok, donc la prochaine chose, c'est que je vais vérifier si mon coût total est nul ou non. Parce que, par
exemple, la première fois que je clique dessus, je veux juste le faire,
OK, OK, Mais si mon coût de chat n'est pas dans l'ensemble, cela signifie que existe déjà quelque chose dans mon stockage local. Je veux faire quelque chose de différent. Donc mon coût de carpe est la différence, alors ? Non, ça veut dire que l'existe. Je vais faire autre chose. Je vais les mettre dans mon entrepôt local. Ok, sauvegardons ça. Quoi ? Je veux mettre l'intérieur de l'année. Je veux définir mon stockage local, pas définir l'article de ces coûts totaux. Et ça va être tout ce qu'il y a là-dedans d'avant à partir du coût du panier plus ces nouveaux prix de
produit que nous cliquons sur Ok, donc dont le coût de la voiture plus le prix. Ok, euh, essayons ça. Non, vider le stockage local. Actualisez la page. Donc, si je clique une fois sur mon super t-shirt, on a une sorte de diffusion ici. On n'a pas de numéro. Voyons ce qui ne va pas ici. Eh bien, je pense que le problème est peut-être parce que nous voulons seulement convertir le coût de notre panier. Quand sont coulés coûts de coupe est en fait différent de non. Peut-être que c'est ce qui nous pose un problème. Il suffit donc d'effacer l'actualisation du stockage local. Je vais cliquer sur mon super e shift. Ecoute, j'ai 15$. Je vais cliquer à nouveau maintenant. J' ai obtenu le total de 30 et j'ai obtenu le total des produits ici pour vérifier aussi nos produits dans les cartes. J' ai un super problème. Si je clique dessus, j'ai obtenu le nom attaque un prix et combien couper à. Je vais faire exactement la même chose pour le sweat à capuche. Peut-être juste comme aussi bien un deux. Donc, le prix total est 2020. Ainsi est 40 plus 15 15 30 40 en 30 est le coût total 70 qui est parfait et je suis arrivé à Gray. Qui ? Celles-ci en cartes. J' ai deux grands T-shirts dans le panier et le total ici sur les quatre premiers et mes numéros de carte pour donc tous ces maintenant fonctionne bien. D' accord, les gars. Nous avons donc nos coûts totaux. Je vais juste les effacer une fois de plus et juste cliquer. Par exemple, Un grand T-shirt. Je vais cliquer sur un sweat à capuche gris et, par
exemple, T-shirt noir
usé. Ok, donc on a 15 plus 2035 plus puis 45. Combien coûte notre coût total ? 45. Combien d'articles devrait-on avoir sur la carte ? Trois, regarde. Numéros de cartes. Trois. Combien y a-t-il ici sur le dessus ? Trois. Ok, si je clique ici produits dans la voiture, j'ai le grand t-shirt. J' ai le sweat à capuche gris et le T-shirt noir. Ok, tous ici. Très bien, les gars, ça prend pour ces vidéos, et je vous verrai dans la prochaine.
6. Créer la page Créer le panier avec tous les produits: Bon, les gars, bienvenue dans cette vidéo, nous allons commencer à faire notre page de comptage quand nous pourrons voir tous nos produits que nous devons couper. Donc, si vous vous souvenez que nous avions ici,
c'est le
bouton haut qui nous emmène à la page du panier en ce moment. Rien ne se passe ici. Si vous regardez même sur les cartes ici, rien ne se passe. Ok, donc c'est ce qu'on va faire en ce moment. Nous avons ajouté ici encore notre stockage local avec les choses que nous avons ajoutées d'avant. Si vous vous souvenez, nous sommes juste dans la dernière vidéo un super T-shirt, un sweat capuche
gris, un T-shirt noir, toutes ces choses. Et une fois qu'on va à notre chariot, rien n'est là-dedans. Ok, allons arranger ça. Donc la première chose, c'est qu' on a besoin d'orteil qui charge notre script, ok ? Parce que notre script ne se charge pas pour le moment. Donc, si je les mets maintenant, nous chargeons au moins notre nombre de cartes de produits dans le panier. Donc, ceci est maintenant mis à jour ici en haut. Le déjeuner est fermé. Il en est un pour une seconde. Commençons à mettre une sorte d'éléments HTML de style. Pour que vous puissiez voir ce qui se passera. Donc, la première chose que je veux faire est juste de créer un voleur avec une classe de produits. Contient ça. Ok, alors à l'intérieur de ceux-ci ont été créés voleur avec une classe de produits que j'avais, euh je vais avoir sur h 5 avec griffes hors produit titre, OK ? Et je vais juste mettre ces produits. Je vais mettre un autre H 5 à la classe de prix, et je pense que c'est tout. Et je vais mettre un prix. D' accord ? On va le sortir de cinq heures. J' ai oublié de pointer pour la classe, Thésée sera avec une classe de quantité. Tu veux du thé ? Et enfin, je vais en mettre un à travers le H 5 avec une classe d'accord total, et je vais dire que ça va donc c'est bon après ces vacances avec la classe de candidat frère . Je vais passer un marché avec la classe des produits. Donc, c'est là que nous allons mettre tous nos produits qu'ils sont sur le stockage local. Je vais juste le laisser vide parce que nous allons les remplir avec du javascript. Actualisez la page. Vous filmez des CD en ce moment, juste ce frère jette le prix total. Alors peut-être que nous pouvons commencer à ajouter du CSS. Ok, donc je vais juste les mettre ici pour mettre la division. Donc je le sais maintenant. C' est ce qui va arrêter la page des cartes de mine, et je vais faire, euh, tout d'
abord, où faire avec Container Pro ? C' est, euh où est-il ? Mes contenants. Si je me souviens, cela devrait être appelé comment nous pouvons l'appeler conteneur de produits. C' est très bien. Donc je vais appeler ces conteneurs de produits, d' accord ? Et ce que je veux faire avec celui-ci ISS ont été mis un mois avec des marques hors de 650 pixels. Je vais mettre le contenu de justification pour être des sons d'espace, et je vais mettre une marge zéro aussi, donc il se concentre sur la page. Et enfin,
voyons, hum, hum, les
marges sont aussi et je vais mettre les mauvais diesels Jim 50 pour les 50 meilleurs pixels. D' accord, comme
vous pouvez le voir, nous avons maintenant ces derniers un peu centrés sur la page. Venir. Je vais inspecter. Ecoute, c'est mon école privée. Donc tout est un peu plus centré sur la page, comme vous le verrez dans une seconde. Alors quoi ? Qu' est-ce que je veux faire d'autre ? Je veux aussi mettre ces produits conteneur. Je pense que si je ne me trompe pas, est sur mon contenant juste regarder ici les produits contenant donc nous allons appliquer ces mêmes styles sur toutes ces choses. La prochaine chose que je veux faire est juste de mettre un peu de style pour mon produit. En-tête quelqu'un mettre des ponts de tirage et là. Ok, il va être avec la vague à 100%. Va être avec Max avec 650 pixels éteints avec le projecteur de Flex Flex. Ok, maintenant je veux que les gens justifient le contenu. Je ne pense pas avoir besoin de mettre ce drapeau de départ. Je vais mettre la frontière là. En bas. Quatre pixels, fils
lents, lumières. Super. D' accord. Comme vous, comme vous pouvez le voir, c'est un peu mieux. Je vais mettre la marge de votre fils zéro aussi. D' accord. C' était mon produit. Heather, c'est oui. Donc, c'est bien. Donc il est, genre, bien centré sur la page. Maintenant que je veux ces, je veux laisser tomber mes produits son titre avec une semaine de réduction 45%. Regarde, c'est mon produit. D' accord ? Alors je vais vérifier mon prix pour être avec off, hum, 15%. Je suppose que je vais aussi mettre un peu d'eau à la frontière exactement la même chose. Comme, d'avant. Et je vais mettre le flocon de thèse sur des taches, justifier le contenu ? Non, une ligne s'élève. L' un d'entre vous verra dans une seconde. Pourquoi ? Donc ces choses pour le prix, je pense que ça devrait être bien. Ouais, parce qu'après, je vais faire autre chose là-dedans, Eso j'ai ça. On les a pour les grosses cellules. Je ne pense pas avoir besoin de mettre ces deux frontières. Euh, en fait, euh, on verra. On verra. Laissons ça pour l'instant. Et après nous, nous allons juste nous en débarrasser. Je vais juste copier ce sera exactement la même chose. Donc je ne veux pas mettre la vidéo trop longtemps juste à cause de ça, vous pouvez toujours tomber et juste copier ces styles que j'ai. Ok, donc nous sommes pour mon total et pour mes produits. D' accord. Quand une quantité de rafraîchissement, je pense qu'il manque quelque chose pour mon, um, panier. J' ai eu l'image de mes produits, mes produits. Ça va être pour après que ça sera pour mes produits. Je crois que c'est tout. Oui. Waas Une fois qu'on y retourne, ma quantité me manque. C' était le truc après le prix. Ok, je pense que vous attendez mon prix ? Ouais, je pense que c'est bien pour l'instant. Ok, c' est ça. Donc on a ces parties, et évidemment on n'a rien d'autre. Je veux juste maintenant aller dans mon point principal Js. Donc nous avons tous ces styles que je veux créer maintenant, une autre fonction qui va vérifier s'il y a quelque chose dans mon stockage local pour vérifier s' il y a un produit en ce moment, c'est trois d'entre eux ici. Si vous vous souvenez, on a ça. Il suffit de pousser ça. On a un produit dans la carte. T-shirt gris, un gris. Qui ? Le Juan. On a un T-shirt noir. Un coût total 45 a obtenu le compte. Numéros trois. Ok, donc, euh, allons et commençons à les mettre avec notre script de travail, donc je vais créer la fonction appelée ces cartes à jouer, ok. Et je veux que cette fonction fonctionne chaque fois que nous aimons la page. Donc, chaque fois que nous chargeons la page pour la première fois, je veux que ces fonctions s'exécutent immédiatement. C' est pour ça que je vais l'appeler ici. Et ce que ces fonctions vont faire, c'est que je vais le faire. Allons glucides articles égaux. Donc, les daunts de stockage local obtient l'élément. Et quel est l'article que je veux obtenir ? Si vous vous souvenez, nous avons ces produits en carte. Ok, donc les chariots de produits, puis de toute évidence trouver un article de carte équivaut à des points Jason. Parce que lorsque vous prenez quelques objets du stockage local, ils viennent est Jason Avec toutes ces chaînes autour, nous voulons convertir de Jason en objets JavaScript. C' est pour ça que j'utilise ça, Jason, pas des pars. Je vais les mettre ici et maintenant. Je voulais juste un look confortable. Assurez-vous juste que cela fonctionne. Je vais passer ici. Cette carte, d' accord ? Tu vas les sauver ? Je vais vérifier. Mon élément de carte console n'est pas défini en ligne. 98 articles de panier. Ok, c'est ce que je voulais venir. Je Teoh. D' accord. Le contact est ce qu'ils trouvent quand, Ok, il y a eu des mariages ici. Je pense que c'est du genre d'articles. Donc, si vous
regardez, regardez, quand on aime la page sur ma console,
c'est que quand on aime la page sur ma console,
c'est que
j'ai toutes ces choses qui viennent de mon entrepôt local,ce
qui est vraiment ce qu'on veut. j'ai toutes ces choses qui viennent de mon entrepôt local, Nous voulons vérifier quel type de produits nous avons lors de notre stockage local. droite. Donc vraiment, la première chose que je vais faire est juste de vérifier si des articles de cartes. Ok, donc si je mets quelque chose comme ça, cartes vont vérifier s'il existe ou pas, s'il va être non ou s'ils trouvent que ça ne va pas courir, ok, je veux vérifier ça si la carte articles. Et je veux aussi vérifier si ces conteneurs ces conteneurs de produits parce que sur notre page d'
accueil, parce que nous avons partagé ces JavaScript final sans page d'accueil et avec cette carte. Donc je veux juste que ça marche. Si ces produits ne contiennent pas d'élément est sur la page. Donc je sais que ce dysfonctionnement ne va courir que pour la page de thèse. Donc ce que je vais faire, c'est juste faire mon conteneur Let's products. Il sera égal. Deux documents, chiens, requête, sélecteur désactivé. Qui s'était souvenu de ces produits. Uh, conteneur. D' accord. Donc, si l'élément de la page existe, je veux que ces deux choses s'exécutent. Je vais mettre ces mains. Assurez-vous simplement que cela fonctionne sur le web. Regardez de plus près, Seigneur. Et je vais dire que je cours. C' est juste un test. Je vais aller dans ma console en haut, je dis courir. Donc, cela signifie que nous sommes sur la page du panier avec le produit ne contenant pas l'élément existe. Et nous avons aussi quelque chose sur nos articles de voiture dans le stockage local. Ok, c'est ce qu'on m'a eu. Cette condition d'instruction if. Alors maintenant, Vraiment ? Ce que je veux faire, c'est que je viens de séparer cette loi du conseil. Je vais faire mes produits contenant ok, Don't Skinner html. D' accord. Je veux d'abord lorsque nous chargeons la page pour être vide. S' il y a quelque chose qui va déjà bien, et ce que je vais faire, c'est que je vais regarder à travers. Si vous vous souvenez de la loi sur le consulat où on prenait toutes nos affaires avec ces voitures, je veux regarder tout ça. Laissez-moi juste faire ici une autre horloge du consulat pour que vous puissiez voir fermer la serrure des articles du panier. Ok, écoutez, c'est un objet avec une clé de T-shirt
gris, sweat à capuche gris, T shirt
noir et à l'intérieur il y a un objet nominal , bien sûr, mais je veux regarder à travers tous ces
. Donc, je vais bien faire des objets points valeurs de mes articles de panier. D' accord ? Et puis je veux vérifier les valeurs de mes articles de carpe. Je ne veux pas vérifier ces clés. Je veux juste vérifier les valeurs à l'intérieur. Donc je vais regarder d'abord à travers ces objets que par celui-ci plutôt que par celui-ci et ainsi de suite. Je vais faire une serpillère. Et ici, je vais juste appeler ça un article, par
exemple. D' accord. Et maintenant il est ce que je vais ajouter. Je vais faire un conteneur de produits. Pensé en html, je vais faire un plus égal plus égal. Donc je sais que la première fois qu'il va courir pour la première fois. Quoi ? On n'a rien. Donc la prochaine fois va ajouter quelque chose là-dedans, il va bizarre, parce que si vous avez plusieurs produits
que vous ne voulez pas remplacer, c'est pourquoi vous devez mettre le plus égal. OK, donc je vais utiliser des tiques arrière. Ok, parce que je ne suis pas familier avec ces tactiques est juste le moyen pour qu'on puisse injecter des variables Cem à l'intérieur avec les stries. Et ici, laissez-moi voir. Je vais juste mettre un voleur, d' accord ? Avec cette classe de produits, OK. Et ici, je veux y aller. Si vous vous en souvenez, vous
êtes mes cartes ? Ok, je coupe. Je veux mettre une Bata de près celle-là si vous voulez vérifier. Je ne sais pas si vous en demandez à cause de mon image que vous me verrez. Je vais pousser ici. Vous pouvez toujours les copier. J' aime un élément. D' accord. Je vais le coller juste en dessous. D' accord ? Je me laisse voir l'icône de fer de quelqu'un et après le désir Nikon, je vais mettre une image. Moi aussi , nous avons cette force, accord. Et c'est la source. Ce que je vais mettre, c'est, euh, ne slash pas et je vais mettre des images, des chiens, un signe de dollar, et maintenant je vais prendre les pensées de l'objet. Je pense qu'il est fatigué. Ne payez pas et vous ne trouvez pas mal. Je pense que les sièges et ensuite je vais juste mettre des vêtements, le's. Je mettrais aussi le Spahn ok. La classe Coran en ce moment. Je vais juste mettre le nom du chien. Je crois que c'est tout. Fermez ça. Rafraîchissons la page et allons dans la voiture. Ecoute, c'est
ce qu'on a en ce moment, OK ? Je viens juste avec ça. Alors, nous allons style T-shirt gris. Allons un problème ici avec ma travée. Alors qu'est-ce que c'était ? Peut-être que ça va, c'est bon. On a notre,
j'ai notre bouton de
fermeture parce qu'on fermera le bouton après avoir obtenu le nom,
on a l'image,
et c'est tout. bouton de
fermeture parce qu'on fermera le bouton après avoir obtenu le nom, on a l'image, Mettons quelques styles là-dedans. Laisse-moi voir. Trouve quelque chose qui manque. Je vais mettre mes, euh, styles juste ici après mon conteneur de produits. D' accord. Je vais mettre ça, euh, vous
êtes Nikon ? Pour que je puisse mettre ces styles, accord ? Il suffit d'augmenter leurs produits de taille de téléphone contenant je peux. Je pense que tout va bien si je ne me trompe pas. Je vois ce qui pourrait ne pas être dans notre conteneur de produits. Je veux juste pleurer ici. Ces produits Look, c'est
ce qui a été le problème. Ok, nous avons ces produits qui devraient être quand on veut mettre si vous vous souvenez dans notre chariot, c'est le voleur où nous allons mettre tout ça. Donc maintenant, c'est mieux. Ok, c'est donc bien. Allons sur le reste des affaires. Donc je vais juste entrer dans ma carte à points. Laisse-moi juste voir. Qu' est-ce que je veux mettre d'autre là-dedans ? Je veux mettre un autre cadeau. D' accord. Avec les griffes de Price. D' accord. Donc je vais juste faire en sorte que Steve maintenant, ce que je veux mettre ici, c'est juste que je peux juste mettre ça en une seule ligne. Je veux mettre un an. Juste l'article Dogs Price. Ok, donc j'ai l'orteil, sortez ces choses de ce produit du chariot. J' ai le nom, j'ai le prix. Maintenant, faisons un autre pour la quantité. Donc je vais le faire maintenant, Deif Ok. Avec Kloss hors quantité, classe de quantité, et ensuite je vais fermer le voleur, ok ? Et ce que je veux mettre à l'intérieur, c'est que je vais mettre en fait quelques icônes de fer pour augmenter et diminuer. Donc si je vais juste entrer dans ces icônes, vous voyez ces choses ? Je vais juste mettre quelque chose comme ça. Je vais juste copier certaines choses que j'ai ici quand une police moi et moi pourrions. Ok,
ça va à l'intérieur. Après, je vais mettre ce que je vais mettre la travée et on mettra les mauvaises herbes. Mon article point dans le panier. Si effrayé partie eso a eu ces. Et quoi d'autre ? J' ai juste besoin de mettre un autre va être celui-là. La flèche vers la droite. Donc je vais juste copier aussi. Je vais le mettre un an après le contrôle de la colonne vertébrale. Ecoute, ça a l'air beaucoup mieux, ok ? Cela ressemble beaucoup mieux à mélanger quelque chose sur mes styles sur mon prix. J' ai besoin de les mettre aussi. D' accord. Oui, parce qu'il manquait ça d'ici. Enfin, nous avons juste besoin de mettre quelque chose sur le total. Ok, donc je vais mettre Rester Dot Js ici. Mets juste un autre voleur. D' accord ? Appelle donc la vue. Je ne ferais pas ça avec un total de classe. Et maintenant à l'intérieur, je vais juste mettre un signe de dollar ces pour mettre mes pensées d'objet en cartes fois ma taille et le prix des pensées. Donc, par exemple, ici, nous avons juste 15. Donc ça va être 15 fois un sera le total. Donc si tu as, genre, deux ou trois produits, le nombre va se multiplier par ça, et ça va te donner, genre, un total. D' accord. Eso C'est bien. Je veux être comme un signe de dollar supplémentaire comme une force. Et puis c'est Coleman 00 pour qu'on puisse l'avoir comme si c'était des dollars. Je vais à la même chose pour le prix ici. Je vais avoir un autre dollar comme le sien. Donc on a eu ces 2010. C' est très bien. Et enfin, ce que je veux faire, c'est juste après que nous ayons fait ça. Si déclaration, laissez-moi juste voir si c'est après. Ouais, après ma boucle, je voulais juste faire à nouveau mon conteneur de produit dot html interne Il va égal à plus égal ok, et ce que je veux demander. Donc je vais mettre quelques tactiques. J' ai besoin de les mettre. C' est juste semi. Colon est juste une bonne pratique pour aller mettre un si ok, et je vais mettre la classe hors. Um, panier. Alors ? Donc conteneur rapporte un NH 4 cette classe hors paniers. Donc c'est tout ce que j'ai dit. Ok, à l'intérieur. Je vais juste verser,
um, um, Baskets total. Faisons l'école ces quatre mains. Je vais mettre chaud ou quatre h. Ok, cette fois avec un cours hors paniers, je veux fermer ces h 4 et à l'intérieur. Je veux juste avec des signes de 1$ pour qu'on puisse voir le signe du dollar sur la page. Ensuite, j'aurais mis des accolades signe de porte pour que je puisse mettre mon chariot. Ok, si vous vous souvenez du stockage local pour l'application des orteils de notre coût total, je dois l'attraper ici. Donc je vais faire la même chose. Comme d'avant. Ce qui ne peut pas coûter quand une copie ces d'avant. Je vais le mettre ici. Laissez la carte coûter. Et ici, je vais juste mettre des cartes. En plus d'accord, donc c'est bon. La seule chose qui nous manque maintenant si je ne me trompe pas, c'est juste ajouter un peu de style parce qu'il manque pour eux. Donc pour le panier total conteneur, on va danser ça. Ok, alors pour le titre du panier, je vais mettre 30 % de réduction de la semaine et mes paniers au total. Je vais juste mettre la semaine de 10%. D' accord ? Comme ça. Et comme on peut le voir, évidemment, nous n'avons toujours pas ces choses qui fonctionnent. C' est ce qu'on va faire ensuite. Mais nous avons tous les produits que nous ajoutons et nous voulons au total. Donc, nous allons juste lire tous ces stockages locaux. Comme vous pouvez le voir, nous n'avons rien ici pour le moment. Et je vais rentrer chez moi. Je vais ajouter, par
exemple, peut-être comme deux noirs. Qui ? Ces 12 ? Je vais sortir peut-être trois, hum, 33 de ces T-shirts noirs. 123 Donc nous avons eu deux hoodies noirs et trois T-shirts noirs avec un total de 50$ pour 1 30$ pour ces 4, et nous avons eu ce total. D' accord, les gars, c'est tout pour ces gars de la vidéo. Maintenant, la seule chose qui nous manque maintenant est juste comme quand nous cliquons ici. On peut enlever tous ces frères même s'il y en a 123 ou quoi que ce soit. Et puis juste je clique sur ces flèches pour m'assurer que nous pouvons augmenter ou diminuer les quantités. D' accord, les gars, c'est tout pour cette vidéo. Je te verrai dans le prochain
7. Supprimer des produits de la page panier: Bon, les gars, bienvenue. Donc, dans cette vidéo, nous allons orteil ajouté la fonctionnalité pour supprimer ces éléments avec ce bouton que nous
avons ici. Si on clique dessus, même s'il peut y avoir deux ou trois de ces hoodies noirs ou même si tu vas retirer ce t-shirt noir ici,
on peut les enlever en même temps en cliquant sur ce bouton. Donc, pour cela, je vais juste créer ici après ma fonction de carte d'affichage. vais juste faire un peu d'espace, et je vais créer une fonction appelée Supprime les pistes, boutons. Ok, quelque chose. Et maintenant, vraiment, ce que je veux faire est juste comme lorsque je clique sur l'un de ces boutons, je veux juste tester pour m'assurer qu'il y a une console, journal ou quelque chose pour m'assurer que cela fonctionne. Donc, tout d'abord, nous allons cibler tous ces boutons sur la page, Donc je vais juste créer,
um,une um, variable appelée boutons de suppression aussi bien. Ce serait le même nom. D' accord ? Il sera égal aux documents dot queary sélecteur tout ce que vous savez, parce qu'il y aura plusieurs de ces éléments sur la page. Je veux dire, juste poussé ça un peu plus pour qu'on puisse en voir assez pour que je puisse juste le redimensionner. Ah, et ces articles, si vous entrez ici quand vous cliquez dessus, on peut aller sur un produit. Et puis je suis à Aiken. D' accord. Donc je peux faire des produits, puis je suis Icahn. C' est l'élément. Ok, ça devrait être bon. Maintenant, je vais mettre en place une boucle quatre ici. Alors, quatre, allons-y. Salut égale 20 Je vais faire je moins que supprimer la longueur des points de fond. Donc, comme il y a beaucoup de boutons, on va faire un quatre regardé à travers tous, puis je vais faire un I plus plus. Ok, donc maintenant je peux faire une boucle à travers tous ces boutons, OK ? Faire les boutons principaux que je dot arts écouteur d'événement et l'écouteur d'événement que je veux avoir ici est juste un clic. Donc je vais passer une fonction ou des besoins. Et maintenant, juste pour le tester, bien
sûr. Je veux faire une console qui verrouille cliqué. Ok, donc les pages se sont rafraîchies. Allons ici, laisse-moi ouvrir ma console. Je vais juste me débarrasser de ça. Je vais cliquer sur ces boutons et rien ne s'est passé. Euh, d'accord. Évidemment rien ne s'est passé parce que nous avons créé cette fonction, mais nous ne l'appelons jamais, donc nous devons l'appeler quelque part pour que ces Teoh puissent fonctionner. Bien sûr. Alors faisons ça. Donc, je veux appeler cette fonction, Supprimer les boutons pour appliquer ces écouteurs d'événement, cliquez sur un jamais avec ceci. Joue le chariot. Ok, Donc avant sur nos vidéos précédentes, nous avons configuré notre fonction de carte d'affichage, qui affiche tous ces éléments ici. Donc, une fois que tout est affiché sur la page juste à la fin de ces cartes d'affichage, je vais juste appeler la fonction de boutons de suppression. Ok, Maintenant, notre carte est tout est affiché à la fin, nous appelons la fonction de boutons de suppression et la fonction de boutons de suppression. Il suffit de configurer un écouteur d'événement ofc fuite que chaque fois que nous cliquons sur ces boutons, il juste comme un journal de points consul de cliqué. Donc c'est exactement ce que je vais faire. Je vais cliquer ici et il enregistre cliqué sur le haut lorsque vous cliquez sur ces un regard , et il vient deux fois comme cliqué. Donc maintenant ces boutons sont ROK sont avec une fonction que nous pouvons faire quelque chose avec elle. Donc probablement la première chose qui veut faire maintenant est chaque fois que je clique sur ces boutons, je veux saisir ces, um, nom du produit lui-même. Ok, donc si vous retournez ici dans le HTML, vous pouvez voir ça. C' est notre oeil dans Aiken, par
exemple, où nous cliquons réellement avec le bouton. Ah. Ensuite, si vous allez vers le parent, vous pouvez réellement aller à l'intérieur du parent, obtenir le contenu des decks, qui devrait vous donner au nom du produit. Alors essayons ça. Donc je vais faire ici les boutons des pistes. Je chiens élément parent. Donc nous sommes ici sur ces Aiken de fer. Je veux monter d'un niveau au produit, alors. Ok, je vais faire un condiment de texte à points. Ok, mais évidemment, je dois les mettre à l'intérieur de ah, variable. Donc je vais juste appeler celui-là ici. Laissez-nous le nom du produit, par
exemple, le nom du
produit. Donc, je suis juste en train d'initialiser la variable ici et maintenant je vais mettre le nom du produit égal
au bouton de suppression. D' accord ? Les blessés. En fait, je clique. Imaginez, par
exemple, si je clique sur celui-ci, je vais au produit de l'élément parent. Je vais obtenir le contenu du texte de celui-ci. On devrait être un sweat à capuche noir. Donc ça va s'appliquer de la même façon pour tous les autres produits que vous pourriez avoir ici parce que, euh, ce sera juste le même modèle que nous avons mis pour tous les différents produits ici. Donc, faisons juste une console qui regarde hors de ce nom de produit en ce moment. D' accord ? Laisse-moi les sauver. Laisse-moi entrer dans la console. J' en ai un. Ah, consulat ici d'avant à partir de 102 Um, lequel est celui-là ? Permettez-moi de commenter ces derniers,
parce que je ne pense pas que nous en ayons besoin pour l'instant. Ok, laisse-moi rafraîchir la page. Laissez-moi cliquer ici et regardez ce que j'ai. J' ai le sweat à capuche noir, OK, mais le problème est que parce que nous saisissons tous ces trucs de l'intérieur tout le
contenu du texte apporte aussi beaucoup d'espaces blancs différents que nous ne voulons pas. Donc probablement ce que nous devons faire est chaque fois que nous avons attrapé ces contenus de texte, je veux faire un rêve de point ces points Treem supprime fondamentalement tous les espaces blancs avant et après et les noms que nous avons là-dedans. Alors essayons-le quand un clic. Et maintenant, je suis devenu noir. Qui le Si j'essaie celui-ci et quand un clic et il va me donner bloc T shirt parfait . Mais je veux aussi mettre toutes ces attaques que nous avons toutes en minuscules parce que je vais te montrer après ce que je vais faire. Donc je vais faire pour transformer tout cela en minuscules. Laissez-moi juste nous voir tous pour que nous puissions juste envelopper notre code pour qu'il ne sorte pas de l'écran. J' ai donc un nom de produit égal au bouton de suppression. Lequel sur lequel je clique en ce moment. Je vais à l'élément parent, saisissant le contenu du texte, streaming afin qu'il supprime tous les espaces avant et après. Et maintenant, je vais en faire un autre, qui est de minuscules. Je pense que vous devez mettre comme ça afin de ne pas trop local. Trop bas pour minuscules. Ok, allons-y banal. Je vais cliquer sur celui-ci,
et regarde, maintenant, maintenant, j'ai un sweat à capuche noir, par
exemple, et tout est en minuscules. Ce n'est pas des capitales. Rien. Ok, après qu'on les ait, je veux aussi enlever l'espace entre les deux. Donc je veux que le monde ne soit qu'un, parce que je vais te montrer ce que je vais faire avec ça. Donc, pour ça, je peux juste entrer ici et nous sommes à point remplacer. Ok, je vais faire un peu de chiffon X. Je ne sais pas si vous avez déjà entendu parler de ça, donc je peux mettre deux de ces quatrième slashes, et je vais mettre le G. je vais faire un peu de chiffon X.
Je ne sais pas si vous avez déjà entendu parler de ça,
donc je peux mettre deux de ces quatrième slashes,
et je vais mettre le G. donc cela signifie que cela va chercher n'importe quel match pour certains Ah, comme l'espace, comme le seul espace globalement. Et je vais juste remplacer les mauvaises herbes, une herbe vide. Donc, c'est essentiellement supprimer cet espace d'avant. Je suis juste en train d'augmenter ici pour que vous puissiez le voir mieux. Donc ça devrait être comme si la fille remplaçait. On veut. Nous recherchons un espace partout dans le monde et nous le remplaçons simplement par l'espace vide. Fondamentalement comme l'enlever, comme je l'ai dit. Ok, laisse-moi rafraîchir la page. Effacez ces. Je vais cliquer ici et regarder ce que j'ai maintenant. Sweat à capuche noir. Et si je clique dessus,
j'ai un T-shirt noir. Alors pourquoi ai-je eu tout le mal d'avoir ces noms ? Parce que si vous vous souvenez d'ici, Ok, quand nous créons nos produits variables, nous avons le nom. On a l'attaque. Et maintenant avec le stock, si vous les gars vérifier est égal à ces noms que nous fabriquons juste pour que nous puissions réellement saisir ces produits toutes les informations pour faire quelque chose avec elle. Ok, alors commençons à faire ça. Donc je vais maintenant en bas. D' accord. Ah, aux boutons de suppression. Je vais juste commencer la nouvelle variable appelée numéros de produit au lait, et il sera égal à deux points de stockage locaux Obtenir l'article. D' accord. Et l'article que je veux obtenir, c'est que si vous revenez à l'application, je veux prendre ces numéros de cartes. Donc je veux savoir combien de produits nous avons dans notre panier, donc je vais mettre ici les numéros de cartes. D' accord. Ah. Et maintenant, chaque fois que je clique sur un de ces boutons, je veux juste savoir, par
exemple, je vais faire un journal des points consul, euh, du nombre de produits que nous avons. Alors je vais le faire ici ? Nous l'avons fait. Je vais mettre un plus, puis je vais mettre un autre plus et ensuite je vais mettre les produits spatiaux dans un chariot. Ok, donc je vais rafraîchir mon application en entrant dans la console. Je vais cliquer ici, accord ? Et il me dit que nous avons cinq produits dans le panier est juste me dire combien de produits
avons-nous et bien sûr, si vous allez à l'application, nous avons cinq produits dans le panier et vous pouvez le voir ici aussi. On a deux sweats noirs et trois T-shirts noirs. Ok, alors pourquoi est-ce que j'ai attrapé ça ? Je vais te montrer. Maintenant. Laisse-moi juste me débarrasser de ces, consul dot Log maintenant. Super. Un peu d'espace. Je veux mettre en place un nouveau stockage local ici point Définir IDM pour les numéros de carte. Donc je vais faire des numéros de cartes. Toby est égal à quoi ? Aux numéros de produits. Ok, donc si vous vous souvenez,
au départ, nous saisissons juste les valeurs initiales du produit que nous avons ici sur notre entrepôt
local. Et puis chaque fois que je clique sur l'un de ces boutons de suppression, je veux d'abord savoir lequel est le nom du produit, que nous venons de saisir. Et maintenant, je suis en train de mettre à jour les numéros de carte de stockage locaux. Celui-ci ici qui me dit le total des produits sur la page, et je veux saisir ces numéros de produits totaux et ensuite mon infirmière, le total des produits que nous avons ici dans ces rangs. Ok, alors comment peut-on faire ça ? Je vais aller ici sur le dessus et,
eh bien, eh bien, laisser les articles de cartes qu'il va être égal à deux stockages locaux pensé obtenir des produits IDM dans le panier. Ok, donc si vous vous souvenez des produits e dans le panier, euh, où est-il ? Où est-il ? Je peux juste aller ici et vérifier les produits dans le panier. On a le sweat à capuche noir et le T-shirt noir. Et puis il me dit que le sweat à capuche noir, par
exemple, il me donne le nom. Il me donne le discours, me
donne le prix et dans le panier le même ici pour le prix et dans le panier. Ok, euh, je ne suis pas sûr. Pourquoi suis-je sur le Peut-être que j'ai une erreur, Je pense que dans l'année sur ma console. Oui. Où est-il ? En ligne. 151 Ah, parce que je n'ai toujours pas fini les. C' est très bien. Ok, on n'a toujours pas fini ça de toute façon, donc j'ai eu ce panier d'articles. Comme d'habitude,
je vais faire un consul. Comme d'habitude, Ce journal de ces articles de cartes. Ok, donc, hum, laissez-moi juste commenter ça pour l'instant. Je vais les sauver, et comme vous pouvez le voir, quand on charge la page et que les boutons de suppression deviennent froids, on peut voir ces, hum, Conseil pas enregistrer que nous avons ici à partir des articles du panier. Évidemment, tout ce qui vient du stockage local, comme je l'ai couvert avant qu'il ne vient avec toutes ces chaînes parce qu'il est dans un format adjacent. Donc, nous devons convertir ces formats adjacents de toutes les chaînes en objet
JavaScript réel . Donc c'est ce qu'on va faire maintenant. Je dois faire des cartes. Les articles vont être égaux à Jason points, pars, et je veux analyser ce que ces articles de panier. Ok, alors maintenant quand je fais ça, regarde la page. Regardez ici maintenant est un objet javascript normal. D' accord. D' accord. Alors regarde ça. J' ai ces noms ici. Sweat à capuche noir. J' ai ces noms ici Block T shirt, qui est la même chose que lorsque je clique dans l'un de ces boutons. Ecoute, t-shirt noir à capuche pour que je puisse vraiment prendre ces objets dans le magasin local en faisant ça ? Ecoute, je vais faire une console que Locke est là aussi bien. En fait, je dois le faire à l'intérieur. Je dois le faire à l'intérieur de l'année quand je clique sur le bouton. Donc articles de panier et puis à l'intérieur, je vais mettre le nom du produit. Donc, ceux-ci vont me donner soit l'accès à ces objets, soit l'accès à ces objets. Donc je pourrais faire, par
exemple, disons, qu'est-ce qu'on veut attraper ? Nous voulons saisir le nom, l'étiquette, le prix ou le panier. Je vais juste mettre ah, tout d'
abord le nom. Ok, donc je vais mettre le nom du point, et ensuite je vais mettre le plus pour donner de l'espace, puis un autre plus et je vais
faire des articles de panier, le nom
du produit, et puis je vais juste mettre ici, par exemple, dans le panier. Combien y en a-t-il dans la carte ? Ok, donc si je clique ici, vais me dire le nom et combien il y en a dans le panier ? Essayons. Regarde. T-shirt noir. Trois cartes. Ok, si je clique, ce sweat à capuche noir me donne le nom à capuche noir et deux en carte. Donc fondamentalement, maintenant que nous savons comment saisir les valeurs que nous voulons, je pourrais juste mettre en place. Laisse-moi juste me débarrasser de ça. Consul, ces journaux, je peux juste faire un point de stockage local numéro de carte d'article, Toby, le nombre total qui était là avant, ce qui est cinq moins. Ok, ces produits, Ok, articles
de carte, nom
du produit dans le panier. Donc, il devrait juste se débarrasser de ceux-ci du total sur la page. Mais ce n'est qu'une partie du problème, parce que nous allons mettre à jour sur Lee les numéros de panier et les numéros de carte. Ok, je vais juste mettre à jour cette partie en haut et le nombre total de cartes dont nous avons besoin pour mettre à jour le coût total. Très bien, donc nous allons faire un point de stockage local, et je veux configurer le coût total pour être égal à deux de nos coûts de carte qui existe déjà ici sur le stockage local. Donc je vais aller ici sur le dessus et juste laisser les cartes. Le coût est égal à deux points de stockage locaux obtient l'article. Et quel est le nom ? Coût total. Maintenant, je peux utiliser ici mes frais de carte. C' est donc le total que nous avons actuellement sur nos mineurs de stockage locaux. Le prix de ces deux articles que j'ai ici. Alors je le ferai. Je vais mettre quelques parenthèses dans l'année. Je vais mettre des cartes, articles, des produits, le nom, le prix
des points. Ok, donc on en a eu le prix pour un, et ensuite je vais les multiplier par la quantité que nous avons. Comment pouvons-nous obtenir la quantité déjà vue ? Que nous pouvons accéder à travers ces dans le panier. Bien. Donc, ceux-ci devraient maintenant prendre en charge notre coût total. Mais enfin, nous devons supprimer chaque fois que je clique dans ceux-ci, et je veux le supprimer je veux le supprimer aussi. De notre stockage local de ces produits dans le panier. Je veux avoir une nouvelle lecture de ça là-dedans. Donc, pour cela, je peux juste faire Si je peux aller ici, je peux juste faire les couvercles articles de carte, nom
des produits. Donc, ceux-ci supprimeront ce que j'ai ici dont je n'ai plus besoin. Et enfin, je dois juste mettre à jour ces produits dans le panier sur mon stockage local. Comme cet élément de jeu de points de stockage local. Quel article ? Je veux les produits dans les cartes. Toby est égal à Jason points. Étrange Si je me souviens des gars que chaque fois que nous voulons mettre à jour une sorte d'objets sur le stockage
local, ils doivent être sur le format adjacent. Soto convertir de notre objet régulier au format Jason. Tu fais juste Jason Dot String Si moi et puis je passe juste ici les éléments de carte. Ok, fermons ça enfin. Je veux juste appeler que cette plaque cartes à nouveau et la fonction sur charges sur les
numéros de cartes de charge qu'ils vont prendre soin de notre page pour juste recharger avec les produits exacts que nous
avons sur le stockage local. Alors essayons ça. Je vais juste rafraîchir la page. Je veux que vous soyez attentif à ce que nous avons ici, parce qu'après nous allons essayer avec d'autres choses de toute façon, donc nous avons sur les cinq premiers frères dans la carte. Nous savons que notre coût total est de 80. Ok, donc je vais enlever ces deux sweat à capuche noirs. Donc deux d'entre eux. Nous devrions donc en avoir enfin trois au total. Quand je les retire et parce que je retire ces deux noirs qui ils coûtent 50$, le total devrait être, quoi, 30 ? Parce qu'il n'y a que des T-shirts noirs là-dedans. Essayons ça et voyons s'il travaille. Je vais cliquer dessus. Écoutez, j'ai trois frères dans le panier. Ce sont les trois produits. Je ne vois que ces trois produits. J' ai le total ici, et c'est tout. Si je rafraîchis la page, si je vais supprimer
celle-ci, tout est parti. D' accord ? Donc, fondamentalement, vous pouvez même aller à l'arrière de la page d'accueil pour plus de choses. Ah, et ça va marcher. Laisse-moi te montrer vite. Si je vais à ma page d'accueil, j'ai, par
exemple, un grand T-shirt à gris. Qui ces. J' ai donc trois au total sur le chariot. Si je clique sur ceux-ci. J' en ai trois sur la carte. Si je retire Ah, tous ces deux gris qui ? Ce qu'ils ont coûté 40. Je devrais avoir un total de, quoi, $15,1 produit. Alors essayons ça. Donc 15$ 1 produit, un produit sur le dessus. Ça marche comme prévu. Très bien, les gars, il ne reste qu'une vidéo maintenant que nous allons examiner comment on peut juste cliquer sur les
boutons de quantité pour changer, augmenter les quantités et la diminuer comme vous le souhaitez. Bon, donc je vais bientôt la prochaine vidéo.
8. Amélioration ou diminution des produits dans la page Cart: Bon, gars, bienvenue à la dernière partie de la construction d'un panier avec du javascript vanille. Donc la dernière vidéo que nous venons de gérer Teoh, si vous vous souvenez, genre, art quelque chose aux cartes, ok ? Et puis on pourrait juste, genre, enlever les choses comme ça. Mais maintenant, dans ces vidéos, nous allons juste pouvoir cliquer ici sur ces quantités et simplement les augmenter ou les
diminuer. Bon, donc si vous vous souvenez d'ici quand on a fait nos cartes à jouer, on a mis ces boutons ici. Ces travées. Ok, laisse-moi juste ramper ça. Donc ces mots ici, ils ont une classe de décrets ou d'augmentation, quels sont ces boutons ici ? Ces icônes. Donc la première chose que je vais faire ici, donc je ne veux pas rendre ces vidéos trop longues, donc je vais juste commencer avec ça. Je vais créer une fonction froide. Gérer, Kwan Teoh T. Ok,
ça devrait aller. Donc, je vais créer cette fonction. Et la première chose que je veux faire est que je veux saisir tous ces boutons, tous ces boutons, qu'ils vont diminuer les quantités et aussi je veux saisir tous ces boutons qu'ils vont saisir l'augmentation des quantités. Alors commençons ici d'abord. Les boutons de cris vont être égaux. Deux documents, points, sélecteur de
requête. Tout va bien. Et quelle est la classe qu'ils ont ? Si vous vous souvenez, laissez-moi faire défiler vers le bas. Ici, il y a diminution. Ok, donc on a eu Laisse-moi juste me débarrasser de la diminution de l'espace. Donc c'est ce que je vais mettre ici. Où est-il ? conduit à diminuer les boutons égaux au sélecteur de requête tous. Ah, diminuez. Donc je vais prendre tous ces boutons qu'ils vont diminuer, et je suis la même chose pour les boutons qu'ils augmentent. Ok, donc je vais mettre des boutons d'augmentation, et ce sera égal à documenter ce sélecteur de requête tout et je pense que c'est augmenter. Ok, laisse-moi voir si c'est ce que j'ai mis ici. Cette classe de ces boutons est augmentée, donc nous les félicitons comme ça. Ok, maintenant, je vais aller ici et juste regarder à travers tous ces boutons et Adam, un auditeur d'événements. Donc, quand on clique sur eux, on peut faire quelque chose Faisons notre quatre look comme d'habitude. Je vais faire un quatre. Écoute, je suis égal à 20. J'ai besoin d'être moins que les décrets Hopes. Donc j'ai besoin de copier est la longueur des bouteilles de points parce que vous vous souvenez que nous saisissons beaucoup d'entre eux. Donc c'était comme un tableau. On peut vraiment voir. On en a combien ici ? Et puis je vais juste mettre I plus plus, donc on va augmenter d'un à chaque fois qu'on fait la boucle. Ok, maintenant, je sélectionne ces boutons diminués, et je vais mettre ici pour qu'on puisse les regarder tous. Donc la première fois que ça va être, je serai zéro. Donc, on va les attraper. Ah, bouton
de diminution. La prochaine fois, c'est celle-là et ainsi de suite. Donc je vais faire des pensées, des arts, même l'auditeur. Quel écouteur d'événement dois-je transmettre ? Voici juste un clic. Je veux juste cliquer dessus. Donc, disons-le comme maintenant je vais juste mettre la fonction normale et la perspicacité. Je veux juste le faire maintenant. Une console que la loi des décrets. Buttle. Assure-toi juste que ça marche, d' accord ? Maintenant, évidemment, cela ne va rien faire tant que nous n'appelons pas ces fonctions appelées « gérer la quantité ». Jusqu' à ce que nous l'appelons, cela n'ajoutera jamais ces écouteurs d'événement clics à quoi que ce soit. Donc, le meilleur endroit pour appeler cette fonction serait probablement quand nous faisons notre panier d'affichage. Donc, chaque fois que nous montrons toutes ces choses sur la page, je veux lancer dans ces fonctions. Donc, nous le ferons. Les écouteurs d'événement ne sont-ils pas liés à ces boutons de diminution ? Laisse-moi ouvrir ici. L' inspecteur. Je vais ouvrir la console. D' accord ? Laissez-moi juste rafraîchir la page. Laissez-moi les ouvrir un peu plus. Rafraîchir quand il clique ici, un regard. Bouton Diminuer. Je vais cliquer sur ce bouton de diminution. Donc, ça marche. Je peux faire exactement la même chose. Maintenant, je vais faire une autre boucle de quatre, ok ? Ce temps va être pour les boutons augmentés. Ok, donc je vais juste les remplacer. Ce sera exactement la même chose. Je ne pouvais pas mettre ici. Augmentation de la bouteille. D' accord. Bouton augmenté. Je vais rafraîchir la page clairement C'est le consul. Je vais cliquer sur les boutons augmentés et regarder, ça marche. Ok, donc maintenant que c'est fait, nous devrons commencer à saisir les choses dans le stockage local comme nous l'avons fait
auparavant et commencer à manipuler les données. Alors faisons-les maintenant. abord, je vais prendre tous les articles que j'ai dans mon entrepôt local. Donc, si vous vous souvenez de l'application, où est-il ? Mon entrepôt local. Laisse-moi ouvrir ces entrepôts locaux. Et je suis arrivé ici sur le dessus. Laisse-moi juste mettre ça en place. Nous avons des numéros de cartes, des articles
totaux et tout, donc je veux prendre mes articles de panier. Donc c'est comme les produits dans le panier, celui-ci. Alors, attrapons-le. Maintenant. Je vais aller ici et faire des articles de cartes va être égal. Deux points de stockage locaux obtient l'élément. Et l'article que je veux attraper est ces produits en carte. Alors je sais. Quels sont les produits que j'ai en carte en ce moment ? Permettez-moi de les augmenter un peu plus pour que nous puissions le voir mieux. Ok, alors qu'est-ce que c'était ? Produits dans ? Ah, carte. Je pense que c'est le nom. Laisse-moi juste sur ça maintenant. Augmenter. Oui, Exactement. D' accord. Produits dans le panier. Ok, laisse-moi juste mettre l'année. Et évidemment, maintenant que je prends juste ces produits dans le panier, je dois faire adjacent, pas analyser, ok ? Parce qu'ils viennent comme Ah, Jason objet. J' ai donc besoin de les convertir en objet javascript. Alors je vais faire des cartes. Articles est égal à, um Jason points pars. D' accord. Et je veux analyser ces objets de cartes. Je pense qu'on l'a déjà fait dans quelques vidéos il y a. Hum et c'est tout. Parce que si vous essayez juste de faire une console, ce journal de ces cartes, articles regardent de près un petit journal de ces articles de panier. Ok, juste avant qu'on fasse les pièces. Écoute, ça va toujours dans la console. Rafraîchissons. Regarde, tu vois que ça arrive avec ces cinq trucs. C' est comme dans le format adjacent, donc nous avons vraiment besoin de l'analyser dans des objets javascript réguliers. Tu vois, après que j'ai fait ça maintenant, je fais ma consultation du journal. Si je rafraîchis la page où nous rafraîchissons le Beijing ici maintenant, j'ai quelques bons
objets javascript que vous demandez. NC. Ok, maintenant qu'on a ça, j'ai besoin de savoir quand je clique sur un de ces boutons, je veux connaître la quantité actuelle que nous avons ici. Ok, donc c'est ce qu'on va faire maintenant d'abord, bien
sûr. Laisse-moi juste un an avant que je ne clique sur ces décrets que je vais faire ici. Euh, en fait, non, je n'ai pas besoin de ça. Laisse-moi juste les faire ici. Je vais faire où la quantité actuelle. Il sera égal à deux. Et maintenant je vais faire un document, pas un sélecteur queary. Oh, désolé. Je n'ai pas besoin de faire ça. Laisse-moi juste me débarrasser de ça. Je peux juste faire celui-là, d'accord ? C' est le bouton. Par exemple, si je clique sur celui-ci, je peux simplement les saisir. En fait, ces boutons où je clique et puis seulement deux adultes, éléments
parents, élément
parent. Laisse-moi te montrer ici sur l'écran. Um, où est-ce que j'ai ? Donc c'est l'Aiken de fer. Ok, donc je clique. Disons, par
exemple, que je clique ici. Je veux attraper l'élément parent, qui est celui-ci le dif. Donc, c'est ce que je fais avec ces éléments parents points. Alors je peux juste faire un sélecteur Dodds Queary. D' accord. Et quel est le sélecteur de requête que je veux faire ? Je veux prendre ces casseroles. Donc je vais juste faire ici travée, et ensuite je veux juste saisir le contenu du texte, accord ? Et maintenant, je devrais avoir la valeur de tout ce qui est ici en ce moment. D' accord, rappelez-vous , les gars qui avant qu'on ait pris ces valeurs de ce qui était sur le stockage local. Mais maintenant, lorsque nous cliquons ici, nous n'avons pas accès au stockage local tout de suite, donc nous devons saisir quelle que soit la valeur ici. Alors laissez-moi juste faire ici un consul, pas de les enregistrer pour m'assurer que cela fonctionne. En passant, j'ai commencé ces variables dans la quantité actuelle ici, mais je ne l'initialise jamais,
donc j'ai besoin de l'initialiser ici sur le dessus. Donc, la quantité actuelle est égale à 20 par exemple, quand vous commencez. Donc, nous allons la quantité actuelle. Mettez-le ici et maintenant je vais faire une console. Ne consignez pas ces quantités actuelles. Donc, chaque fois que je clique sur le bouton, je le saurai sur la console. D' accord. Alors laissez-moi rafraîchir la page. Je ne suis pas clair ces si je clique ici,
je devrais en voir un. Il dit que le contenu des enjeux n'est pas une fonction. Laisse-moi voir ce que j'ai mal ici. Oh, je crois que je sais ce qui pourrait être. Je mets le contenu du texte est une fonction. Ce n'est pas une fonction est juste comme ça. Essayons encore. OK, c'est clair sur ces Cliquons ici et j'ai eu celui. Je l'ai cliqué ici maintenant, j'ai eu celui aussi. Ok, donc j'ai toujours eu cette valeur de ces quantités quand j'essaie de cliquer vers le bas pour que
je puisse faire la même chose ici pour l'augmentation de la quantité. Donc, je peux juste, genre, dupliquer ce code, en
gros, alors faisons juste ça. Copions ceci maintenant. Je vais les faire ici cette fois. Évidemment, on va faire les boutons plus élevés. J' allais être la même chose parce que les deux, ils ont le même élément parent. Et puis nous saisissons la même portée de sélecteur de requête et c'est tout OK, maintenant que nous allons à ces, la prochaine chose serait en fait prendre le nom de ce produit chaque fois que nous
cliquons sur l'un de ces boutons. Ok, donc chaque fois que je clique ici, je veux traverser l'aube. D' accord ? Je veux monter et essayer de saisir ce nom que nous avons ici. Ok, donc c'est ce qu'on va faire maintenant. Je vais dire les produits actuels, d' accord ? Actuel pour les objets. Ça va être égal à deux. N' oubliez pas d'initialiser ce produit actuel, il va être égal à une chaîne vide en ce moment. Ok, maintenant, ne ratez pas quelque chose. Peut-être que j'ai raté quelque chose ici parce qu'on n'a pas fini. Donc, le produit actuel est égal à deux e crees en bas. J' ai vu notre bouton actuel. Ensuite, j'ai besoin d'aller dans les éléments parents. Ok, donc laissez-moi juste vous montrer quand je clique sur ces boutons, par
exemple, où est ce bouton va être celui-ci. Je veux attraper le parent. C' est ce qu'on vient de faire en ce moment. Ensuite, je veux passer à l'élément précédent aux éléments frères précédents. Alors faisons des points. Les éléments précédents, regard
frère, arrive même ici sur le code visuel de studio. Alors maintenant je l'ai fait une fois que nous sommes ici dans ces live avec une classe de prix. Maintenant, je veux revenir une fois de plus à ces produits qui conviennent à ces produits. Donc, nous allons dio éléments de plafond précédents une fois de plus. Des points. Ok, donc maintenant je veux dire ici dans ces produits dif Maintenant, je veux aller à l'intérieur de ces voleurs de produits et chercher Laissez-moi voir comme j'ai une image. J' ai cette casserole. Ok, j'ai des Oops. J' ai ce qui s'étend ici. Donc je vais faire, hum, points, sélecteur
Queary. Je veux saisir l'élément span, et je veux saisir le contenu du texte. Bon, maintenant que j'ai ça, laisse-moi te montrer que tu fais un consulat pour déconnecter le produit actuel. D' accord ? Je fais juste ces Lorsque je clique sur ce petit bouton, je suis juste rafraîchir la page qui va dans la console. C' est clair que je vais cliquer ici. Et j'ai attrapé le sweat à capuche gris et j'ai attrapé la quantité d'avant. Je vais cliquer sur le T-shirt noir. J' ai celui-là et j'ai ce t-shirt noir en ce moment. Ce que je veux aussi faire est en fait parce que j'ai ces noms, je veux convertir ces noms d'une manière similaire à ce que nous avons ici sur le dessus, tout comme cette pile. OK, qu'est-ce que je peux faire avec ça ? Je peux tout d'abord, juste secrète tous ces noms que nous avons ici en minuscules je peux supprimer ces espaces que j'ai entre les mots et puis même rêver certains espaces sur les côtés s'il y en a,
Donc, je vais avoir attaque nommée exactement, comme ceux-ci. Parce que si j'ai les noms d'actions après, je peux juste ,
genre, manipuler toutes les données que j'ai
sur mon ,
genre,
manipuler toutes les données que j'ai
sur monstockage local. Donc c'est ce qu'on va faire. Donc ici, comme ce qu'on faisait maintenant. Et alors, où était-ce ? Gérer la quantité. Nous vérifions ici le produit actuel Après que j'ai saisi ce contenu de texte. Je vais aussi faire ah pour les minuscules. Donc noeuds trop minuscule et je pense est comme ça Si je ne me trompe pas, OK, essayons juste. Laisse-moi voir la console. Je veux dire cliquer ici. Non, écoute, maintenant, sweat à capuche
gris est tout en minuscules, et ce t-shirt noir est le même. Ok, la prochaine chose serait de supprimer ces espaces ici, entre
les mots. Alors faisons ça maintenant. vais juste ici après les deux minuscules, je ne vais pas remplacer, donc ne remplace pas, ok ? Et on va faire une sorte de reggae X. Je ne sais pas si vous en avez entendu parler, alors oups. Je ne sais pas pourquoi. C' est comme sauter tout le temps. Je vais chercher un espace partout. Tu vois que je suis en train de mettre deux fois ces quatre slash et je vais mettre ces g 2 signifie que ça va regarder globalement sur ce texte. Ensuite, on va le remplacer par quoi ? Je vais juste le remplacer par une chaîne vide. Donc ça veut dire que ça va supprimer cet espace. Donc, comme je l'ai dit, nous allons utiliser ces filles pour remplacer qu'il cherche de l'espace vide. Donc, tout ce que vous mettez entre ces quatre barres obliques est ce que vous cherchez. Et puis cela signifie globalement regarder partout. sur le contenu du texte, puis remplacez-le simplement par la chaîne vide. Ok, voyons si ça marche. Rafraîchir. Je vais cliquer ici. Laisse-moi juste cliquer ici. Ecoute, sweat à capuche
Gray est maintenant complètement fini et la même chose ici dans celui-ci. Ok, T-shirt
noir est parti, mais parfois il y a des espaces vides avant et après les mots qu'on ne
sait pas s'ils viennent ou non. Donc juste pour être en sécurité, nous pouvons juste adopter flux qui se débarrasse de ces espaces avant assez que nos mots. Alors faisons ça. Donc point rêve, ok, et ça devrait être tout pour l'instant. Donc, si vous vous souvenez avant au début de ces vidéos, nous prenons juste tous nos articles de panier que nous avons, je suis juste rafraîchir la page pour vous les gars de voir. Donc, regardez, c'est l'article actuel que j'ai sur mon stockage local en utilisant ces articles de panier. Je peux en fait simplement descendre ici après avoir sélectionné mon produit actuel. Je peux faire des articles de panier, et maintenant je peux sélectionner les produits actuels parce que nous venons de saisir son nom. Ok, je vais le mettre ici. Et maintenant je peux juste dire que le point dans les cartes sera égal à ce qu'il y avait dedans d'avant . Le mien est un. Ok, alors laisse-moi te montrer. Parce que si vous vous souvenez, regardez, vous avez ces propriétés de dans la carte. D' accord ? Donc, je vérifie mes articles de panier. Je sélectionne celui avec les noms. Donc, par
exemple, c'est le nom que nous venons de saisir. J' accède au point dans le panier, et puis j' et puis j'
accède à la valeur qui était là et en supprime un. C' est ce que je fais quand je clique ici. Ok, alors essayons. Je vais me rafraîchir. Je vais cliquer ici. Je vois ce qui se passe. Je suis tellement quelque chose n'a pas vraiment combattu correctement. Laisse-moi voir. Ah, OK, donc c'est bon. Ecoute, maintenant mon dans la voiture t zéro parce que j'ai vraiment besoin de mettre à jour le maintenant, donc je dois appeler la carte d'affichage juste après je le fais. C' est juste après ça. D' accord. J' ai besoin d'appeler la carte d'affichage, donc notre page va être arrière après, alors regarde, laisse-moi me rafraîchir. D' accord ? Ecoute, si je dois cliquer ici. Ok, donc j'ai eu ça. Maintenant, laissez-moi voir. D' accord ? Quelque chose ne fonctionne pas exactement comme je le soupçonnais. Alors je vais me laisser voir. Qu' est-ce que j'ai de mal ici ? Hors cours. Je n'ai jamais mis à jour mon stockage local. Oui. Donc, après avoir mis à jour
ces, euh, ces objets près de cette copie du stockage local. Je n'ai pas copié ici. J' ai mis à jour ces, hum, dans les cartes qu'on a là-dedans, au ,
on peut même juste ,
genre, court et ça, juste faire comme
, comme nous l'avons fait d'avant. Maintenant, je dois aller dans mon entrepôt local. D' accord. Je vais faire un chasseur de points de stockage local. D' accord. Et ce que je comités, ce sont les produits produits dans les cartes. Et qu'est-ce que je veux passer ? Je veux passer un Jason. Ne fais pas de ficelle. Si je, si vous vous souvenez, nous devons le faire au format Jason hors cours. Et qu'est-ce que c'est ? Les choses que je veux envoyer à l'intérieur sont ces articles de voitures que je viens de mettre à jour. Et après que je l'ai fait, je vais appeler les cartes d'affichage que nous avons créées avant pour que nous puissions réellement voir sur la page ? Je mettrais à jour la carte,
alors actualisons la page maintenant. Je mettrais à jour la carte, Ça devrait fonctionner. Très bien. D' accord. Si je clique ici un. Ok, nous les dieux, je vois juste un sweat à capuche gris dans le chariot. Ce n'est toujours pas des limites exactes. Laisse-moi voir une fois de plus. Désolé pour ces gars. Laisse-moi voir si ça marche. Je suppose que je sais ce qui ne va pas dans l'année. Ecoute, la première chose serait que ces miennes en sont une. OK, donc nous avons juste besoin de faire moins égal,
donc nous mettons juste à jour le dysfonctionnement. Et aussi, je mets mes produits dans le panier que Mme ici une capitale C. Maintenant, ce devrait être le problème. Donc je vais juste rafraîchir la page. Je vais cliquer ici et regarder,
maintenant, maintenant, nous venons de mettre à jour la quantité de ceux-là à zéro. D' accord ? Ce qui est fondamentalement, genre, n'
est pas ici, donc on ne veut pas de ça. On veut diminuer la quantité d'orteil d'un minimum d'un, parce que si on a zéro affaiblissement, juste ,
genre, aller ici et juste supprimer le produit, OK, donc je vais le faire ici alors. Si déclaration, je vais dire si Okay, si les articles de panier produit actuel dans les cartes ok, va être supérieur à un. Ok, si c'est plus grand qu'un qu'il y a sur le chariot ? En fait, je peux juste faire passer ces trucs ici. Parce que si ce n'est pas plus grand qu'un, s'il est juste comme un, par
exemple, je ne veux rien faire du tout. Ok, alors laisse-moi entrer ici. Je vais cliquer et regarder, rien ne se passe. D' accord ? Allons à la page d'accueil. Je vais ajouter certains de ces super T-shirts. Peut-être comme 312 à 3. D' accord. Maintenant. Ah, si j'y vais,
je vais juste cliquer sur celui-là . Je l'ai fait ? Combien je vais en ajouter ? Un de plus. Pas sûr. Quoi exactement ? Laisse-moi juste que je pense que c'était avant. Laisse-moi tout éclaircir. Rafraîchissez en allant ici. 123 Ok, regarde ça. Si j'y vais et ici dans une presse celle-là, c'est ah, allez en deux. Donc 30, je vais cliquer un de plus. Ça va dans 15. Et si j'essaie à nouveau, ça ne fait rien d'autre. Ok, donc ces fêtes ici sont toutes réglées Maintenant, il y a un problème. Si vous regardez ici, en fait, quand j'ai diminué cette quantité, mes cartes ici en haut, mon nombre de produits sur la carte, ils sont toujours trois. Et mon panier encore 45. Nous devons donc également les mettre à jour. Donc je vais appeler ma fonction de numéros de carte que nous avons apparus quelque part. Où est-il ? Coûts totaux aux articles, numéros
de carte. Ok, donc je vais appeler ces numéros de cartes juste après ces numéros de cartes, et je veux passer ici mon produit actuel. D' accord. Et puis la deuxième chose que je veux passer est si je fais juste augmenter ou diminuer la fonction. Ok, donc si je diminue les éléments sur la carte ou augmente, alors je vais juste dire les Curries. Ok, alors allons à ces numéros de cartes apparaissent numéros de cartes. Où est-il ? Un peu plus de numéros de cartes pour le moment. On ne prend qu'un produit. Maintenant, prenons aussi une action. Ok, donc ces actions vont être la diminution ou l'augmentation. Ok, alors nous allons juste re facteurs un peu. Laisse-moi juste mettre ici comme d'habitude. Je vais prendre mes cartes de crédit. Les éléments sont égaux à deux locaux. Ah, fille
de stockage, récupérez l'objet. D' accord. Des produits chez Dieu. Et maintenant ce que j'ai besoin de faire. Il faut que je le revoie hors du cours. Les ceux-ci de l'objet Jason dans un objet JavaScript. Donc, comme je l'ai fait ici. J' ai besoin de faire des articles de panier égal à Jason. Les points analysent. D' accord. Et je veux analyser les objets de cartes. Ok, maintenant, je vais faire n'importe quelle déclaration. Juste re facteurs ceux-ci un peu. Je vais dire si c'est bon, si mon action est égale à deux diminutions. Tu sais, c'est l'action qu'on vient de transmettre là-bas. Ce que je veux faire, c'est que je veux définir ma pensée de stockage local cartes d'article, cartes, numéros pour être les numéros de produit que nous avons pris auparavant. Ok, donc c'est le nombre total de produits qu'on avait là-bas d'avant. Regardons ici. Ce numéro de carte
aussi,
si vous vous en souvenez. Ce numéro de carte
aussi, Ok, donc on l'a attrapé ici en tant que variable. Donc, je vais juste dire est les numéros de produit qui était là d'avant, et je vais juste en supprimer un aussi, J'ai besoin de mettre à jour orteil hors cours ces textes ici. Donc, ce que nous avons fait maintenant était juste de mettre à jour ces numéros de cartes de stockage locales, comme le nombre total des cartes. Mais nous devons aussi mettre à jour le numéro ici sur nos cartes sur notre page, essentiellement ici en haut. Donc, ce que je vais faire est que je vais juste entrer dans mon stockage et pas local,
mais les documents, mais les documents, pas le sélecteur de requête. D' accord ? Et je veux sélectionner ma carte. Ok, si vous vous souvenez de celle-ci ici comme une classe de carte, et que je veux saisir la portée à l'intérieur et le contenu du texte pour être ce qu'il faut être des
numéros de produit . Donc quoi que ce soit sur nos numéros de cartes que nous avons saisis ici d'avant, le
mien est un, et ça devrait être pour ces diminutions. Ok, alors laissez-moi juste me rafraîchir. Essayons encore ça. Euh, évidemment, laissez-moi juste effacer tous ces trucs de l'entrepôt local. C' est juste clair tout. Actualisez la page. Aller à la maison. Je vais 123 de ça. Maintenant, je vais cliquer sur un pour Ok. Donc, euh, j'ai oublié orteil, Nous toujours à ce genre de si les déclarations ici me permettent juste de me débarrasser de ces et nous allons juste re facteur. Donc c'est ce que nous faisons quand nous lançons ces numéros de carte. C' est ce que nous faisons lorsque nous cliquons sur l'un de ces boutons. Mais nous voulons aussi en faire une autre. Ok, s'il y a des numéros de produit. D' accord. Cela signifie que c'est comme la première fois que nous chargeons la page. S' il y a une sorte de choses ici, je veux définir mon stockage local, Pas définir l'élément à être. D' accord. Ce numéro de panier pour être Quels sont les produits ? Les numéros de produit plus un numéro de produit plus un. D' accord. Désolé. Pas des numéros de frère. Je ne sauverai pas l'action égale à augmenter. Ok, parce qu'on va augmenter ça après, Ok, à Caries. D' accord. Et donc on va les faire plus un, et ensuite on met évidemment à jour ces textes, Toby plus un aussi. Et après, si nous ne cliquons sur aucun de ces boutons et que nous chargeons simplement la page pour la première fois, ce que je veux faire est juste de définir l'élément de pensée de stockage local. C' est quoi l'objet ? Les numéros de cartes doivent être, hum, juste un. C' est ce que nous avons là-dedans au début. D' accord. Et aussi juste définir la requête sélectionnée du contenu du texte. Toby est égal à un. Ok, espère, Maintenant, tout
est bon, et je ne manque rien, Alors laissez-moi juste me débarrasser de ce code que nous avons ici d'avant, Après que nous avons juste mis les produits comme nous l'avions d'avant, et je pense que c'est tout. D' accord. Je suis juste, hum clair ce rafraîchissement. Accédez à la page d'accueil. Je vais avoir 123 Ok, hum, il manque quelque chose ici. Numéros de panier. D' accord. Ça peut être parfois quand je suis juste clair. Encore ça. Rafraîchir. D' accord. 123 D'accord. Quand je vais ici,
j'en ai trois. J' ai encore quelque chose d'autre ici. J' ai disparu. Laisse-moi voir vite. Je ne veux pas que ce soit vraiment ce que je veux dire. Je ne veux pas mettre ces mesures d'augmentation. Je veux mettre si il y a des numéros de produit en fait. D' accord. Lorsque nous cliquons dessus comme des arts orteils, quand nous sommes ici sur la page et nous avons cliqué sur la carte d'orteil ARDS et nous exécutons ces
numéros de carte . Je veux voir s'il y a des numéros de carte ici. Je veux juste augmenter la quantité là-dedans. Parce qu'on n'a même pas besoin de rien pour l'augmentation,
ce que je vais te montrer dans une seconde. Parce qu'on n'a même pas besoin de rien pour l'augmentation, Et donc c'est bien. Rafraîchissons les. Je vais cliquer. 12345 C'est bien. Maintenant, je vais à la page du panier, et je vais cliquer sur 123 et regarde, ces valeurs ici sont toutes les marchandises. Maintenant, nous avons juste besoin de mettre à jour ces valeurs ici sur le 100. Alors, allons par ici, d' accord ? Sur notre gestion de la quantité. Donc, quand je vais dans ma gestion de la quantité, euh, juste après que j'ai appelé ces numéros de carte, je peux aussi vérifier ici le coût total. Donc c'est ce qu'on va faire maintenant. Téléphone fera quelque chose de très similaire. Donc je vais appeler mon coût total. Je vais passer la diminution des articles du panier ainsi. Ok, donc maintenant je vais entrer dans mon coût total. Laisse-moi juste entrer ici sur le dessus. Quelle est ma fonction de coût total ? Juste celui-là, ici. J' ai besoin de passer à l'action aussi, parce que ce seront les décrets ou pas. Et je vais juste faire une déclaration Anethe ici. Donc si ça va, mon action, tu vas être égal à deux diminutions. Ok, alors laissez-moi juste les mettre ici maintenant comme un autre. Si c'est le cas, je vais mettre ici. Maintenant quoi ? Je vais régler le coût de mon chariot quand on les a attrapés dans le stockage local. Rappelez-vous que cela vient à un objet adjacent au zoo plein de ces cordes. Donc, j'ai besoin de les convertir en nombre réel en utilisant une analyse pour que les cartes coûtent. D' accord. Et maintenant j'ai besoin de régler mes locaux de stockage, euh, point de stockage
local dit que je terme. Et l'article que je veux définir si vous vous souvenez, je vérifie juste ici c'est le coût total. Coût total et va être égal à quoi ? Pour tout ce qu'il est là sur le coût de la carte. Disons que nos centaines et que je vais enlever quoi ? Mon produit actuel que je passe ici prix point parce que si vous vous souvenez
de chacun de ces produits qui passaient, ils ont un prix, une valeur clé. Donc je peux juste faire ici les frais de carte, ce qui était là d'avant. Ici, sur la mine supérieure est le produit que nous passons. Ok, quelque chose pour faire des produits le prix de Dieu. Ok, alors laisse-moi juste éclaircir tous ces trucs. Allons à la page d'accueil. Je vais ajouter 123 Ok, allons aux cartes. Vérifions ça. Ecoute, je vais cliquer une fois. Donc 33 60 Je lis,
genre, genre, une fois. Et regardez 2 à 40 11 2020. Et si je clique plus ne fonctionne pas. Parfait. Maintenant, la seule chose qui nous manque est de cliquer ici dans ces boutons d'augmentation. Alors, allons par ici. Ça va être très, très similaire maintenant, donc je peux simplement copier tous ces manteaux. Ok, je vais les copier. Il suffit de le coller ici, et ce que je vais faire, c'est eso. On a déjà ces courants, donc on peut s'en
débarrasser maintenant. Le produit actuel va être des boutons augmentés. Je vais bien. Ça va être la même chose, d' accord ? J' attrape le nom. Ok, alors. Je n'ai pas besoin de faire ces déclarations si maintenant parce que chaque fois que vous cliquez pour augmenter la quantité que vous n'avez pas besoin comme aucune limite. Donc, ce sera un article de panier actuel point de produit actuel dans le panier. Maintenant, cette fois va être plus égal à un pour augmenter. Maintenant, je veux exécuter ces numéros de cartes de fonction. Je veux juste que les orteils passent cette fois. Ok, euh, produit
actuel. Ok, donc si je vais ici sur le numéro de ses cartes ? Donc, je vais dire si l'action équivaut à diminuer. Ok, hum, ça ne va pas fonctionner alors va vérifier s'il y a des produits déjà dans la base de données dans le stockage local, ce qui est là. S' il y a déjà quelque chose là-dedans, je vais juste les exécuter qu'il augmentera d'un. Donc je n'ai pas besoin de faire ça. En fait, l'action équivaut à augmenter. Tu sais, tu pourrais le faire si tu veux, mais c'est très bien. Maintenant, qu'est-ce qu'on a d'autre ? Nous avons ceci pour que les numéros de carte soient corrects. On a eu celui-là pour le total, Costas. Eh bien, ce que nous n'avons pas besoin de passer ces actions parce que laissez-moi juste vous montrer les coûts totaux aussi . Donc le coût total, nous pouvons passer un produit en action. Je n'ai pas passé maintenant en action pour augmenter. Parce que regarde ça. Si l'action équivaut à diminuer, nous ne le faisons pas pour le moment. D' accord ? Maintenant, je vérifie aussi ces thèses d'une autre vidéo avant que je vérifie. Si le coût de ma carte est différent de non, Oui est différent de non, parce qu'il y a déjà des produits là-dedans et nous pouvons voir que notre voiture coût total de nos
coûts de carte ou tout ce qui est déjà avec une certaine valeur est donc différent de Non. Alors, qu'est-ce qu'on fait là-dedans ? Saisir tout ce qui est là, puis juste à un stockage local qui définit l'article du
coût total là-dedans, plus le prix du produit que nous venons de cliquer ici maintenant. Donc, cela devrait être tous les biens. Et enfin, qu'est-ce que je fais ? Il suffit de cliquer ici, bien sûr, les
configurer dans le stockage local pour être mis à jour et après tout comme l'exécution de la
carte d'affichage . Donc tout sur notre page est mis à jour, alors lançons ça, OK. Je vais y aller. Je vais cliquer une fois. Regarde, augmentation de 40. Je vais cliquer à nouveau. 60. Alors j'en ai trois. Laissez-moi entrer dans la page d'accueil. Je vais à 1 à 2 de ces T-shirts noirs. Alors regarde ça. J' ai deux T-shirts noirs et trois d'entre eux. Ok, donc j'ai 60 2080 Ok. Et de 3 à 5. Je veux dire, juste que j'aimerais encore quatre ou 3123 Donc cinq fois 10, c'est 50 60 plus 5100 et 10 et cinq et huit, c'est huit produits. Très bien, gars, les
gars,
je sais que c'était vraiment assez gros et c'est les
gars,
je sais que c'était vraiment assez gros et c'est
le dernier de la série,
mais j'espère que vous apprécierez vraiment ce genre de projet. le dernier de la série, C' est toujours bon. Donc pour vous de pratiquer et apprendre quelque chose de nouvelles. Mais oui,
comme d'habitude. Mais oui, Les gars, merci beaucoup d'avoir regardé. J' espère que ça vous plaira. Si vous avez des commentaires ou quoi que ce soit, mettez-les en bas ici. Je réponds à toutes vos questions, et je vais aussi mettre le lien. Je pense que le lien devrait être ici déjà avec les fichiers de ces projets. Parce que si vous avez raté quelque chose, vous pouvez toujours le regarder à nouveau. Mais il y aura quelques liens ici est tout simplement facultatif. Si vous voulez télécharger le fichier. Donc, vous avez tout qui fonctionne bien. Et vous pouvez également comparer avec votre propre code. D' accord, les gars, c'est tout pour cette vidéo. Merci beaucoup d'avoir regardé. Et je te verrai dans la prochaine vidéo.