1
00:00:02,190 --> 00:00:07,590
Pour ajouter l'élément d'action à l'en-tête, je ferai quelque chose que j'ai également fait dans la section de navigation, dans

2
00:00:07,800 --> 00:00:09,480
le dossier des composants, je

3
00:00:09,660 --> 00:00:11,470
veux ajouter mon propre bouton d'en-tête et

4
00:00:11,550 --> 00:00:17,160
maintenant pour cela, je vais ajouter un nouveau sous-dossier dans là que je nommerai UI et mon idée ici est simple.

5
00:00:17,580 --> 00:00:23,340
J'ai le dossier de la boutique qui contient tous les composants que j'utilise dans ma boutique,

6
00:00:23,340 --> 00:00:30,090
qui produisent des informations liées à la boutique. Dans le dossier de l'interface utilisateur, je veux

7
00:00:30,090 --> 00:00:35,580
avoir des blocs de construction d'interface utilisateur généraux que j'utilise bien sûr également dans cette

8
00:00:35,610 --> 00:00:42,240
application de boutique, mais qui ne sont pas vraiment axés sur la sortie de données liées à la

9
00:00:42,270 --> 00:00:51,680
boutique ou au produit, mais qui sont simplement là pour fournir un style ou une disposition par défaut et c'est dans ce dossier d'interface utilisateur où

10
00:00:53,540 --> 00:01:02,330
j'ajouterai mon propre bouton d'en-tête en y entrant et en important React depuis React puis en important le bouton d'en-tête depuis les boutons d'en-tête

11
00:01:02,330 --> 00:01:10,370
de navigation React, ce package que j'ai installé au début du module, si vous ne l'avez pas fait , assurez-vous que npm

12
00:01:11,090 --> 00:01:15,760
installe ce package, puis importez également les Ionicons depuis @ expo / vector-icons.

13
00:01:15,850 --> 00:01:23,640
Maintenant, pour être sûr que vous l'avez installé, exécutez npm install --save @ expo / vector-icons, afin que ce

14
00:01:23,640 --> 00:01:26,220
package soit disponible dans votre projet.

15
00:01:26,220 --> 00:01:28,070
Ce sont les importations dont j'ai besoin

16
00:01:28,110 --> 00:01:35,990
ici, maintenant je veux aussi importer mes couleurs depuis le dossier des constantes et là, les couleurs. fichier js et maintenant ici, je vais ajouter mon composant

17
00:01:35,990 --> 00:01:43,880
de bouton d'en-tête personnalisé qui est un composant React normal à la fin qui reçoit des accessoires et doit retourner du

18
00:01:43,880 --> 00:01:51,390
jsx et j'exporterai bien sûr mon bouton d'en-tête personnalisé ici à la fin et maintenant le jsx que cela a

19
00:01:51,390 --> 00:01:51,830
renvoyé

20
00:01:52,560 --> 00:01:58,020
ici est le bouton d'en-tête que j'importe à partir des boutons d'en-tête de navigation

21
00:01:58,020 --> 00:02:05,090
de React mais je dois le configurer d'une certaine manière, utilisez le bouton d'en-tête ici à partir des

22
00:02:05,190 --> 00:02:10,280
boutons d'en-tête de navigation de React. D'une part, cela devrait recevoir tous les accessoires

23
00:02:10,280 --> 00:02:15,310
que nous obtenons ici, nous les transmettons donc, mais en plus, je définirai mon composant d'icônes ici

24
00:02:15,320 --> 00:02:18,460
sur Ionicons, afin que nous utilisions toujours les Ionicons pour le

25
00:02:18,470 --> 00:02:24,670
rendre et bien sûr, vous pouvez utiliser l'un des les différents jeux d'icônes vectorielles fournis par @ expo / vector-icons également.

26
00:02:24,860 --> 00:02:30,800
Je vais définir la taille de l'icône à 23, ce qui m'a semblé très bien fonctionner, mais bien sûr, vous

27
00:02:30,800 --> 00:02:33,140
pouvez également expérimenter différentes valeurs ici, peut-être

28
00:02:33,140 --> 00:02:40,370
que si vous utilisez un ensemble d'icônes différent, essayez une taille d'icône différente. Et pour la couleur, ça dépend parce que sur Android,

29
00:02:40,490 --> 00:02:41,990
nous avons comme

30
00:02:41,990 --> 00:02:47,150
un fond rouge ici, pour iOS nous ne l'avons pas, nous devons donc définir

31
00:02:47,150 --> 00:02:50,680
une couleur différente en fonction de la plate-forme sur

32
00:02:50,780 --> 00:02:59,760
laquelle nous fonctionnons, donc je vais importer la plate-forme de React Native ici et ensuite nous pouvons vérifier la plate-forme ici et si la

33
00:02:59,870 --> 00:03:01,870
version du système d'exploitation est

34
00:03:01,880 --> 00:03:04,970
Android, je sais que j'ai ce fond de

35
00:03:05,000 --> 00:03:10,820
champ solide, donc l'icône devrait être blanche. Sur iOS d'autre part, l'arrière-plan n'est pas rempli, il est

36
00:03:11,120 --> 00:03:19,090
transparent et donc sur iOS, je vais réellement définir la couleur de mon icône sur Couleurs. primaire.

37
00:03:19,150 --> 00:03:26,980
Maintenant, nous pouvons l'utiliser pour ajouter une icône ici sur l'écran de présentation des produits, là dans mes options de navigation

38
00:03:26,980 --> 00:03:27,490
ici,

39
00:03:27,490 --> 00:03:35,800
je veux ajouter ma section d'en-tête à droite, donc une icône à droite de mon en-tête et pour cela ici, nous devons

40
00:03:35,800 --> 00:03:42,610
importer quelques choses, nous devons importer les boutons d'en-tête et l'élément du package de boutons d'en-tête de navigation

41
00:03:42,610 --> 00:03:44,660
React que nous avons installé.

42
00:03:44,800 --> 00:03:53,780
Bien sûr, je dois également importer mon propre bouton d'en-tête à partir des boutons d'en-tête de l'interface utilisateur des composants, donc ce

43
00:03:53,780 --> 00:04:03,720
composant dans lequel nous venons de travailler et maintenant là-bas, l'en-tête à droite est des boutons d'en-tête comme un wrapper pour éventuellement contenir plusieurs éléments

44
00:04:04,140 --> 00:04:10,950
mais je n'en ajouterai qu'un élément, un élément à fermeture automatique, sur les boutons d'en-tête avant de

45
00:04:10,950 --> 00:04:17,430
continuer avec l'élément, nous devons définir le composant du bouton d'en-tête égal au bouton d'en-tête,

46
00:04:17,430 --> 00:04:23,820
donc à notre propre bouton d'en-tête ici. Et l'élément peut maintenant être configuré, il devrait recevoir un titre qui peut

47
00:04:23,820 --> 00:04:24,290
être

48
00:04:24,340 --> 00:04:28,840
un panier, il devrait recevoir un nom d'icône et je veux réellement utiliser une icône différente en fonction

49
00:04:28,980 --> 00:04:34,590
de la plate-forme sur laquelle nous fonctionnons, donc donc de React Native, je importera la plate-forme, ce qui est facultatif, vous pouvez utiliser

50
00:04:34,590 --> 00:04:39,270
une seule et même icône pour les deux plates-formes, mais je pense qu'il est également intéressant d'avoir différentes icônes.

51
00:04:39,270 --> 00:04:47,820
Et puis ici, je vais vérifier la plate-forme OS et si c'est Android, alors je veux utiliser l'icône du panier md qui est l'icône du panier Ionicon pour la

52
00:04:47,820 --> 00:04:54,360
conception matérielle et sinon j'utiliserai l'icône du panier iOS et encore une fois vous pouvez trouver tous les disponibles les icônes de

53
00:04:54,360 --> 00:04:57,140
cette liste d'icônes que je vous ai montrées

54
00:04:57,240 --> 00:05:03,540
plus tôt dans le cours, la liste d'icônes expo / vector-icon et enfin et surtout lorsque l'élément est pressé, nous voulons

55
00:05:03,540 --> 00:05:09,000
probablement faire quelque chose et pour l'instant, je ne fais rien mais nous je vais changer cela bientôt.

56
00:05:11,260 --> 00:05:12,850
Si nous enregistrons maintenant cela,

57
00:05:12,880 --> 00:05:13,500
nous

58
00:05:13,500 --> 00:05:15,220
devrions voir cette icône ici,

59
00:05:15,280 --> 00:05:21,250
la voici, voici notre panier, également sur Android et maintenant nous devons simplement nous assurer que lorsque nous tapons

60
00:05:21,340 --> 00:05:27,250
sur cela, nous sommes redirigés vers l'écran de notre panier. Pour cela, bien sûr, nous devons ajouter une logique ou une sortie à l'écran du panier.

61
00:05:27,880 --> 00:05:31,610
Donc, à l'intérieur de l'écran du panier, nous avons

62
00:05:31,720 --> 00:05:34,070
bien sûr un composant React

63
00:05:34,090 --> 00:05:43,420
normal, donc nous importons React de React, nous importons également quelque chose de React Native et que quelque chose est un composant de vue

64
00:05:43,540 --> 00:05:48,120
pour envelopper notre écran peut-être, nous sortirons probablement du texte ainsi que.

65
00:05:48,380 --> 00:05:54,780
Nous aurons quelques éléments de panier répertoriés, que nous pouvons faire avec une liste

66
00:05:54,800 --> 00:06:01,580
plate pour avoir l'optimisation intégrée, je veux probablement styliser certaines choses avec une feuille de

67
00:06:01,670 --> 00:06:11,060
style et j'importe également le composant de bouton intégré. Maintenant, mon écran de panier est comme toujours un composant React et je vais configurer cet

68
00:06:11,060 --> 00:06:16,910
objet de styles ici avec la feuille de style. créer afin que nous puissions également styliser ce composant

69
00:06:17,000 --> 00:06:21,030
et à la fin, nous exportons ici notre écran de panier par défaut.

70
00:06:21,070 --> 00:06:24,930
Maintenant, vous pouvez bien sûr créer cet écran de panier de la manière que vous voulez, je vais le construire

71
00:06:24,940 --> 00:06:32,640
de telle sorte que nous ayons une vue et dans cette vue, je veux avoir deux sections principales. La section supérieure est comme le résumé où je

72
00:06:32,640 --> 00:06:37,660
vois le montant total et où j'ai le bouton de commande maintenant.

73
00:06:37,980 --> 00:06:43,050
Ce sera dans une rangée, donc j'aurai une vue imbriquée ici où je peux placer les articles les

74
00:06:43,590 --> 00:06:46,810
uns à côté des autres où j'ai comme un texte où

75
00:06:46,810 --> 00:06:55,240
je dis total et puis ici signe dollar et puis mon mon prix total peut-être. Nous pouvons également imbriquer cela, vous pouvez avoir des composants de

76
00:06:55,250 --> 00:07:03,620
texte imbriqués si vous vous en souvenez sans problème pour lui donner une couleur distincte par exemple, donc pour l'instant,

77
00:07:03,620 --> 00:07:08,670
je code en dur 19. 99 là-dedans mais plus tard, cela sera dérivé dynamiquement.

78
00:07:08,840 --> 00:07:10,330
C'est donc une

79
00:07:10,430 --> 00:07:18,610
chose et en plus dans cette même ligne ici, je veux avoir un bouton avec un titre de commande

80
00:07:18,700 --> 00:07:26,120
maintenant où je peux appuyer dessus pour passer une commande, vider mon panier et l'ajouter à mes

81
00:07:26,120 --> 00:07:28,750
commandes que nous n'avons pas encore

82
00:07:28,760 --> 00:07:38,200
gérées et le sortir sur l'écran de commande à la fin. Maintenant, en dessous de cette section récapitulative, je veux avoir une liste plate avec mes articles de panier séparés, afin que

83
00:07:38,200 --> 00:07:39,960
nous puissions vraiment voir ce qu'il y

84
00:07:39,970 --> 00:07:43,360
a dans le panier, quels produits s'y trouvent, quelle quantité de chaque produit s'y trouve,

85
00:07:43,360 --> 00:07:47,860
c'est donc une autre chose que je y sortira. Pour le moment ici, je vais simplement ajouter

86
00:07:47,860 --> 00:07:52,090
une vue avec un texte des articles du panier en tant qu'espace réservé mais encore une fois, ce

87
00:07:52,090 --> 00:07:57,660
sera une liste plate à l'avenir, mais commençons par le total ici. Pour obtenir ce total, nous pouvons puiser

88
00:07:57,660 --> 00:08:04,780
dans Redux parce que nous gérons notre panier, nous pouvons donc utiliser le sélecteur de React Redux comme vous l'avez appris

89
00:08:04,780 --> 00:08:10,810
pour extraire des données de notre magasin et ici, j'ai le montant total de mon panier peut-être

90
00:08:11,010 --> 00:08:21,360
que j'obtiens avec l'aide du sélecteur d'utilisation de mon état. chariot, tranche. panier ici parce que

91
00:08:21,390 --> 00:08:27,030
dans l'application. Fichier js en réducteurs combinés, j'ai affecté ici une clé de panier à mon réducteur de panier.

92
00:08:29,060 --> 00:08:33,160
Alors je l'ai ici. panier puis là, à l'intérieur du

93
00:08:33,380 --> 00:08:40,780
réducteur de panier, je gère mon montant total et le champ montant total, c'est donc ce à quoi nous devons accéder ici, montant total.

94
00:08:40,800 --> 00:08:45,570
Cela donne le montant total du panier et nous pouvons maintenant l'utiliser là-bas et avec cela pour nous

95
00:08:45,730 --> 00:08:49,820
assurer que cela a aussi l'air bien, il est temps pour un certain style.

96
00:08:49,910 --> 00:08:56,450
Donc, sur la vue la plus haute ici, je vais ajouter un style d'écran peut-être parce que cela

97
00:08:56,450 --> 00:08:57,680
enveloppe tout l'écran

98
00:08:57,680 --> 00:09:03,820
à la fin, puis ici sur cette vue, je vais ajouter un style de résumé parce qu'il

99
00:09:03,920 --> 00:09:07,130
contient tous les éléments de résumé, puis ici

100
00:09:09,710 --> 00:09:20,790
sur ce texte, je vais ajouter un style de texte récapitulatif puis ici, je vais ajouter un style de montant, afin que nous puissions styliser ce texte de montant différemment.

101
00:09:22,270 --> 00:09:23,930
Donc, pour les

102
00:09:23,950 --> 00:09:34,840
styles que je veux définir, descendons à la feuille de style et ajoutons écran, résumé, texte récapitulatif et puis, comment l'ai-je nommé?

103
00:09:35,300 --> 00:09:41,820
montant et bien sûr, c'est comme toujours totalement à vous de décider comment vous voulez maintenant styliser cela.

104
00:09:41,820 --> 00:09:47,400
Maintenant, je vais commencer avec l'écran, à la fin je veux prendre la taille complète de l'écran si nous avons besoin

105
00:09:47,400 --> 00:09:54,420
de la liste plate plus tard, mais je vais commencer simplement et nous dirons simplement que je veux avoir une marge en tout directions en fait ici

106
00:09:54,420 --> 00:10:03,390
de 20, donc autour de tout, de sorte qu'il y ait un espace autour de tout. Ensuite, ici, résumé qui est notre boîte avec tous les articles

107
00:10:03,390 --> 00:10:09,210
là-dedans avec la commande maintenant et notre texte devrait utiliser une direction flexible de

108
00:10:09,210 --> 00:10:12,820
ligne pour positionner les articles sur une ligne.

109
00:10:12,870 --> 00:10:19,950
Je suis allé aligner les éléments au centre pour m'assurer qu'ils sont centrés verticalement et sur leur

110
00:10:20,040 --> 00:10:28,670
axe principal, je veux utiliser justifier l'espace de contenu entre afin que les éléments aient l'espace libre entre eux et les éléments

111
00:10:28,670 --> 00:10:35,040
sont ce texte ici et ce bouton. En plus de cela, nous pouvons ajouter un peu de

112
00:10:35,040 --> 00:10:36,360
marge ici, peut-être

113
00:10:36,360 --> 00:10:42,540
aussi de 20, ce qui est surtout important également pour avoir un certain espacement entre le résumé et notre liste

114
00:10:42,540 --> 00:10:49,990
plate, donc j'utiliserai en fait la marge en bas ici pour n'avoir qu'une marge au en bas et je veux ajouter un rembourrage de

115
00:10:49,990 --> 00:10:55,030
10 ici parce que le résumé doit être en quelque sorte dans une boîte surélevée et

116
00:10:55,030 --> 00:11:05,050
pour cette boîte ici, je vais aller à mon composant d'article de produit et je vais copier mon ombre créée ici et la bordure rayon peut-être que j'ai ici et la couleur

117
00:11:05,770 --> 00:11:12,030
d'arrière-plan, de sorte que j'ai le même aspect ici dans le panier et c'est bien sûr à vous de décider

118
00:11:12,040 --> 00:11:16,020
si vous le souhaitez ou non, mais je vais le copier là-dedans.

119
00:11:17,420 --> 00:11:27,410
Pour le texte récapitulatif, je veux maintenant utiliser une famille de polices open sans bold pour vraiment mettre en évidence ce total et une taille

120
00:11:27,980 --> 00:11:33,290
de police de 18 et pour la quantité de texte là-dedans, je définirai

121
00:11:33,290 --> 00:11:36,880
la couleur en couleurs. couleur d'accent.

122
00:11:36,890 --> 00:11:44,160
Maintenant, pour cela, bien sûr, vous devez importer des couleurs à partir du dossier des constantes, puis j'utilise l'accent et

123
00:11:44,150 --> 00:11:50,710
non le principal pour que cela se démarque vraiment. Pour voir si cela ressemble à ce que nous voulons, nous

124
00:11:50,710 --> 00:11:55,660
devons nous assurer que le fait d'appuyer sur ce bouton d'en-tête dans notre écran de présentation du produit

125
00:11:55,660 --> 00:11:59,520
nous amène réellement à l'écran du panier et pour cela, deux choses sont requises.

126
00:11:59,800 --> 00:12:04,510
D'une part, nous devons naviguer ici, mais avant de pouvoir le faire,

127
00:12:04,510 --> 00:12:11,890
nous devons enregistrer l'écran du panier dans notre navigateur. Donc, je vais le faire d'abord, j'importerai mon écran de panier ici à

128
00:12:11,890 --> 00:12:17,980
partir du dossier screens sans surprise, du dossier de la boutique et là de l'écran du panier et maintenant c'est le troisième écran

129
00:12:17,980 --> 00:12:26,350
que j'ajoute ici à ce navigateur de pile, le panier pointe vers l'écran du panier . Avec cette configuration ajoutée ici, nous pouvons revenir à l'écran de présentation

130
00:12:26,350 --> 00:12:33,220
du produit et là, nous avons maintenant besoin de ce formulaire fonctionnel pour les options de navigation, car les données de

131
00:12:33,220 --> 00:12:37,670
navigation nous permettent ensuite de puiser dans l'accessoire de navigation et d'appeler la

132
00:12:37,990 --> 00:12:41,240
navigation, nous devons donc envelopper dans un autre objet que

133
00:12:41,300 --> 00:12:50,610
nous renvoyons et ici nous pouvons appeler navData. la navigation. naviguer et là, je vais au panier et c'est

134
00:12:50,700 --> 00:12:54,950
bien sûr l'identifiant que je viens de choisir dans le navigateur de

135
00:12:55,050 --> 00:12:58,530
la boutique ici, celui-ci. Avec cela, voyons, si je

136
00:12:58,580 --> 00:13:01,050
clique ici, nous y voilà, c'est mon total,

137
00:13:01,050 --> 00:13:01,740
je

138
00:13:01,740 --> 00:13:03,030
pense en fait que

139
00:13:03,030 --> 00:13:06,610
la couleur d'accent n'est pas si bonne là-bas, donc je vais

140
00:13:06,780 --> 00:13:13,170
en fait revenir à l'écran du panier et le styliser pour utiliser le la couleur primaire aussi, mais l'essentiel est

141
00:13:15,490 --> 00:13:22,060
que nous puissions y aller et si j'essaie maintenant d'ajouter des articles au panier, j'ai ajouté la chemise deux fois

142
00:13:22,060 --> 00:13:29,400
et le tapis une fois, ce montant total me semble bien. Essayons également ceci sur Android bien sûr pour nous assurer que

143
00:13:29,400 --> 00:13:35,700
cela fonctionne aussi bien et fonctionne généralement, j'ajoute une chemise rouge de plus et donc ici nous voyons également

144
00:13:35,700 --> 00:13:41,730
un problème avec la façon dont cela est affiché. Pour résoudre ce problème, sur l'écran du panier, assurez-vous que sur

145
00:13:41,760 --> 00:13:48,600
le prix, nous sortons toujours deux décimales sur le montant à fixe également. Au fait, au cas où vous vous demandez d'où

146
00:13:48,600 --> 00:13:51,350
cela vient, ce long numéro, ce

147
00:13:51,540 --> 00:13:57,150
n'est pas un bug ou rien de vraiment pour React Native, c'est un comportement Javascript

148
00:13:57,150 --> 00:14:05,080
normal lorsque vous travaillez avec des nombres à virgule flottante et bien sûr pour corriger ne doit pas être appelé sur le

149
00:14:05,110 --> 00:14:11,440
style ici mais sur le montant total du panier. Donc, c'était un comportement normal, pas un

150
00:14:11,440 --> 00:14:18,530
bug, c'est ainsi que Javascript stocke en interne les nombres à virgule flottante que vous pourriez dire,

151
00:14:18,530 --> 00:14:29,830
mais maintenant nous nous assurons que cela est sorti correctement avec deux décimales. Ce qui manque, c'est le bouton et ici, je veux maintenant utiliser la couleur, les couleurs

152
00:14:30,760 --> 00:14:37,190
d'accent pour avoir mon bouton de couleur d'accent. Donc, si je vais maintenant dans mon panier ici sur iOS, voici à quoi

153
00:14:38,920 --> 00:14:41,500
ressemble le bouton là-bas, voici à quoi il ressemble sur Android.

154
00:14:41,590 --> 00:14:46,690
Nous pouvons toujours appuyer sur ceci, bien sûr, je veux le désactiver, mais s'il n'y a rien dans le

155
00:14:46,990 --> 00:14:55,090
panier et pour cela, nous devons maintenant obtenir nos articles dans le panier également. Ainsi, les articles du chariot peuvent également être récupérés avec le sélecteur d'utilisation,

156
00:14:55,090 --> 00:15:01,320
également à partir de la tranche du panier, mais là, ce sont les accessoires de la réduction du chariot qui nous intéressent.

157
00:15:01,320 --> 00:15:09,150
Donc, si je regarde le réducteur de chariot, vous voyez que nous avons la propriété des articles.

158
00:15:09,310 --> 00:15:11,260
C'est un objet que je récupère

159
00:15:11,270 --> 00:15:18,280
maintenant, donc les articles du panier sont un objet, pas un tableau, en fait un tableau serait mieux pour moi ici et donc j'utiliserai le

160
00:15:18,370 --> 00:15:25,750
long formulaire pour l'obtenir et je retournerai un tableau ici et non un objet. Ainsi, nous pouvons obtenir nos articles de panier transformés

161
00:15:25,750 --> 00:15:36,260
ici, par exemple en créant un nouveau tableau ici à l'intérieur de cette fonction de sélection, puis nous pouvons ajouter une boucle for / in pour

162
00:15:36,260 --> 00:15:43,910
parcourir toutes les clés en état. Chariot. articles, donc pour parcourir toutes

163
00:15:43,910 --> 00:15:47,120
les paires clé-valeur dans cet objet articles

164
00:15:47,120 --> 00:15:51,200
du panier que nous avons là-dedans et je veux ajouter

165
00:15:52,950 --> 00:16:01,030
chacun d'eux en tant qu'article aux articles du panier transformés. Donc là, je vais pousser un objet Javascript qui a un ID de produit, disons

166
00:16:01,060 --> 00:16:06,850
qui est juste ma clé parce que dans l'objet articles du panier d'ID, l'ID de produit est stocké sous forme de clé

167
00:16:06,850 --> 00:16:07,930
si vous vous

168
00:16:07,930 --> 00:16:14,320
en souvenez, alors maintenant j'ajoute cela à la propriété d'ID de produit dans cet objet, j'ajoute au tableau des articles du panier transformé et

169
00:16:15,300 --> 00:16:27,240
en plus de cela, j'aurai le titre de mon produit qui est bien sûr l'état. Chariot. éléments pour la clé

170
00:16:27,240 --> 00:16:30,550
donnée. productTitle.

171
00:16:30,650 --> 00:16:37,900
Si vous regardez le modèle de votre panier, vous verrez que là, le titre du produit et le prix du produit sont les noms de

172
00:16:37,900 --> 00:16:41,510
propriété qui détiennent le titre du produit et le prix du produit, alors

173
00:16:41,560 --> 00:16:43,570
c'est comme ça que nous accédons aux

174
00:16:43,570 --> 00:16:49,790
deux, donc je ferai de même ici pour le prix du produit et par la suite, j'ai aussi besoin de la

175
00:16:49,790 --> 00:16:58,770
quantité qui est en état. Chariot. éléments pour la clé donnée. quantité et bien sûr aussi la somme qui est état. Chariot. articles. clé. somme, encore une fois essentiellement ce que nous avions ici dans l'article du panier.

176
00:16:58,770 --> 00:17:05,640
Donc, ce que je fais, c'est de dire

177
00:17:05,640 --> 00:17:10,260
que je crée un nouvel article de panier, pas avec mon modèle, car c'est un article

178
00:17:10,260 --> 00:17:17,690
de panier avec une propriété d'ID de produit supplémentaire, de sorte que je l'ai ici et maintenant c'est ce tableau d'éléments de panier transformé que je

179
00:17:17,690 --> 00:17:24,300
renvoie après cela pour la boucle, de sorte que ce sélecteur retourne à la fin un tableau et non un objet, donc les

180
00:17:24,330 --> 00:17:25,850
éléments du panier sont

181
00:17:26,040 --> 00:17:32,760
maintenant un tableau qui nous permet de l'utiliser plus facilement dans la liste plate et cela nous permet également de vérifier ici sur

182
00:17:32,760 --> 00:17:38,730
le bouton commander maintenant si nous voulons le désactiver en vérifiant simplement la longueur de ce tableau que nous avons

183
00:17:39,210 --> 00:17:41,000
maintenant dans les articles du panier.

184
00:17:41,010 --> 00:17:42,720
Donc, ici sur le bouton, nous

185
00:17:43,170 --> 00:17:49,260
pouvons définir l'hélice de désactivation qu'il prend en charge heureusement, c'est un composant intégré qui a simplement un accessoire désactivé et là je peux

186
00:17:49,260 --> 00:17:56,790
vérifier si la longueur des articles du panier est égale à zéro, si c'est le cas, alors je sais qu'il est vide et alors je veux désactiver le bouton. Si désactivé reçoit vrai ou faux, par défaut c'est faux mais je vais le mettre à vrai si la longueur

187
00:17:56,790 --> 00:18:01,650
des articles du panier est 0. Et maintenant, vous voyez si je vais

188
00:18:01,730 --> 00:18:08,020
à l'écran du panier, cela est désactivé, si j'ajoute un

189
00:18:08,020 --> 00:18:16,800
produit et que j'y vais, il est activé et bien sûr, vous pouvez également utiliser une couleur différente pour le bouton de commande maintenant si vous le souhaitez.

190
00:18:16,890 --> 00:18:20,540
Maintenant, avec cela, nous sommes un peu plus près

191
00:18:20,550 --> 00:18:26,580
des chariots finis et bien sûr, le prochain objectif est de sortir les articles du panier.