1
00:00:02,190 --> 00:00:07,590
Per aggiungere l'elemento azione all'intestazione, farò qualcosa che ho fatto anche nella sezione di navigazione, nella cartella

2
00:00:07,800 --> 00:00:09,480
componenti, voglio aggiungere il

3
00:00:09,660 --> 00:00:11,470
mio pulsante di intestazione e ora

4
00:00:11,550 --> 00:00:17,160
per questo, aggiungerò una nuova sottocartella in lì che chiamerò UI e la mia idea qui è semplice.

5
00:00:17,580 --> 00:00:23,340
Ho la cartella del negozio che contiene tutti i componenti che uso nel mio

6
00:00:23,340 --> 00:00:30,090
negozio, che fornisce alcune informazioni relative al negozio. Nella cartella dell'interfaccia utente, voglio avere alcuni

7
00:00:30,090 --> 00:00:35,580
blocchi predefiniti dell'interfaccia utente che ovviamente utilizzo anche in questa applicazione del negozio ma

8
00:00:35,610 --> 00:00:42,240
che non sono realmente focalizzati sulla produzione di dati relativi al negozio o al prodotto ma che

9
00:00:42,270 --> 00:00:51,680
sono semplicemente lì per fornire uno stile o un layout predefinito ed è in questa cartella dell'interfaccia utente in cui aggiungerò il mio pulsante

10
00:00:53,540 --> 00:01:02,330
di intestazione andando lì e importando React da React e quindi importando il pulsante di intestazione dai pulsanti di intestazione di navigazione

11
00:01:02,330 --> 00:01:10,370
di React, questo pacchetto che ho installato all'inizio del modulo, se non l'hai ancora fatto , assicurati di installare questo

12
00:01:11,090 --> 00:01:15,760
pacchetto npm e quindi importare anche Ionicons da @ expo / vector-icons.

13
00:01:15,850 --> 00:01:23,640
Ora per essere super sicuri di averlo installato, esegui npm install --save @ expo / vector-icons, in modo che questo

14
00:01:23,640 --> 00:01:26,220
pacchetto sia disponibile nel tuo progetto.

15
00:01:26,220 --> 00:01:28,070
Queste sono le importazioni di cui ho

16
00:01:28,110 --> 00:01:35,990
bisogno qui, ora voglio anche importare i miei colori dalla cartella delle costanti e lì, i colori. file js e ora qui, aggiungerò il mio componente pulsante

17
00:01:35,990 --> 00:01:43,880
di intestazione personalizzato che è un normale componente React alla fine che riceve oggetti di scena e deve restituire un po

18
00:01:43,880 --> 00:01:51,390
'di jsx e ovviamente esporterò il mio pulsante di intestazione personalizzato qui alla fine e ora il jsx che questo

19
00:01:51,390 --> 00:01:51,830
ha

20
00:01:52,560 --> 00:01:58,020
restituito qui è il pulsante di intestazione che sto importando dai pulsanti di intestazione

21
00:01:58,020 --> 00:02:05,090
di navigazione di React ma devo configurarlo in un certo modo, utilizzare il pulsante di intestazione qui dai pulsanti

22
00:02:05,190 --> 00:02:10,280
di intestazione di navigazione di React. Per uno, questo dovrebbe ricevere tutti gli oggetti

23
00:02:10,280 --> 00:02:15,310
di scena che otteniamo qui, quindi li inoltriamo ma, in più, imposterò il mio componente icone

24
00:02:15,320 --> 00:02:18,460
qui su Ionicon, in modo da usare sempre Ionicon per

25
00:02:18,470 --> 00:02:24,670
renderlo e, naturalmente, potresti usare uno di anche i diversi set di icone vettoriali forniti da @ expo / vector-icons.

26
00:02:24,860 --> 00:02:30,800
Imposterò la dimensione dell'icona su 23 che ho trovato per funzionare davvero bene, ma ovviamente puoi anche sperimentare

27
00:02:30,800 --> 00:02:33,140
valori diversi qui, anche se forse stai

28
00:02:33,140 --> 00:02:40,370
usando un set di icone diverso, prova una dimensione dell'icona diversa. E per il colore, bene, dipende dal fatto che

29
00:02:40,490 --> 00:02:41,990
su Android, abbiamo

30
00:02:41,990 --> 00:02:47,150
uno sfondo rosso qui, per iOS che non abbiamo, quindi dobbiamo impostare un

31
00:02:47,150 --> 00:02:50,680
colore diverso in base alla piattaforma su cui siamo

32
00:02:50,780 --> 00:02:59,760
in esecuzione, quindi in realtà importare la piattaforma da React Native qui e quindi possiamo controllare la piattaforma qui e se la versione

33
00:02:59,870 --> 00:03:01,870
del sistema operativo è

34
00:03:01,880 --> 00:03:04,970
Android, allora so di avere questo solido campo

35
00:03:05,000 --> 00:03:10,820
di fondo, quindi l'icona dovrebbe essere bianca. D'altra parte su iOS, lo sfondo non è pieno,

36
00:03:11,120 --> 00:03:19,090
è trasparente e quindi su iOS imposterò il colore della mia icona su Colori. primario.

37
00:03:19,150 --> 00:03:26,980
Ora possiamo usarlo per aggiungere un'icona qui nella schermata di panoramica dei prodotti, lì nelle mie opzioni di navigazione qui,

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

39
00:03:27,490 --> 00:03:35,800
aggiungere la mia sezione di intestazione a destra, quindi un'icona a destra della mia intestazione e per questo qui, dobbiamo importare un

40
00:03:35,800 --> 00:03:42,610
paio di cose, dobbiamo importare i pulsanti e gli elementi dell'intestazione dal pacchetto di pulsanti dell'intestazione di

41
00:03:42,610 --> 00:03:44,660
navigazione React che abbiamo installato.

42
00:03:44,800 --> 00:03:53,780
Ovviamente ho anche bisogno di importare il mio pulsante di intestazione dai pulsanti di intestazione dell'interfaccia utente dei componenti, quindi questo componente

43
00:03:53,780 --> 00:04:03,720
in cui abbiamo appena lavorato e ora laggiù, l'intestazione a destra sono i pulsanti di intestazione come wrapper per possibilmente avere più elementi lì dentro

44
00:04:04,140 --> 00:04:10,950
ma ne aggiungerò solo uno elemento, un elemento a chiusura automatica, sui pulsanti di intestazione prima di

45
00:04:10,950 --> 00:04:17,430
continuare con l'oggetto, dobbiamo impostare il componente del pulsante di intestazione uguale al pulsante di intestazione,

46
00:04:17,430 --> 00:04:23,820
quindi al nostro pulsante di intestazione qui. E l'oggetto ora può essere configurato, dovrebbe ricevere un titolo che

47
00:04:23,820 --> 00:04:24,290
può

48
00:04:24,340 --> 00:04:28,840
essere carrello, dovrebbe ricevere un nome icona e in realtà voglio usare un'icona diversa in

49
00:04:28,980 --> 00:04:34,590
base alla piattaforma su cui stiamo girando, quindi quindi da React Native, I importerò la piattaforma, che è facoltativa, potresti

50
00:04:34,590 --> 00:04:39,270
usare la stessa icona per entrambe le piattaforme ma penso che sia bello avere icone diverse.

51
00:04:39,270 --> 00:04:47,820
E poi qui, controllerò il sistema operativo della piattaforma e se è Android, allora voglio usare l'icona del carrello md che è l'icona del carrello Ionicon per

52
00:04:47,820 --> 00:04:54,360
la progettazione dei materiali e altrimenti userò l'icona del carrello iOS e di nuovo puoi trovare tutti disponibili icone in

53
00:04:54,360 --> 00:04:57,140
questo elenco di icone che ti ho mostrato

54
00:04:57,240 --> 00:05:03,540
prima nel corso, l'elenco delle icone di expo / icone vettoriali e ultimo ma non meno importante quando l'oggetto viene

55
00:05:03,540 --> 00:05:09,000
premuto, probabilmente vorremmo fare qualcosa e per ora, non faccio altro che noi lo cambierò presto.

56
00:05:11,260 --> 00:05:12,850
Se ora salviamo questo,

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

58
00:05:13,500 --> 00:05:15,220
vedere questa icona qui, eccola

59
00:05:15,280 --> 00:05:21,250
qui, ecco il nostro carrello, anche su Android e ora dobbiamo solo assicurarci che quando tocchiamo

60
00:05:21,340 --> 00:05:27,250
questo, siamo portati alla schermata del nostro carrello. Per quello, ovviamente, dobbiamo aggiungere un po 'di logica o un po' di output allo schermo del carrello.

61
00:05:27,880 --> 00:05:31,610
Quindi all'interno dello schermo del carrello, ovviamente abbiamo

62
00:05:31,720 --> 00:05:34,070
un normale componente React, quindi

63
00:05:34,090 --> 00:05:43,420
importiamo React da React, importiamo anche qualcosa da React Native e che qualcosa è un componente di visualizzazione per avvolgere il

64
00:05:43,540 --> 00:05:48,120
nostro schermo forse, probabilmente avremo un po 'di testo anche.

65
00:05:48,380 --> 00:05:54,780
Avremo un paio di articoli del carrello elencati qui che possiamo fare con

66
00:05:54,800 --> 00:06:01,580
un elenco piatto per avere l'ottimizzazione integrata, probabilmente vorremmo modellare alcune cose con un foglio

67
00:06:01,670 --> 00:06:11,060
di stile e importerò anche il componente pulsante incorporato. Ora il mio carrello qui come sempre è un componente React e imposterò questo oggetto

68
00:06:11,060 --> 00:06:16,910
di stili qui con il foglio di stile. creare in modo che possiamo modellare anche questo

69
00:06:17,000 --> 00:06:21,030
componente e, alla fine, esportiamo la schermata del carrello qui come impostazione predefinita.

70
00:06:21,070 --> 00:06:24,930
Ora puoi ovviamente costruire questo carrello nel modo che preferisci, lo costruirò in modo tale

71
00:06:24,940 --> 00:06:32,640
da avere una vista e in quella vista, voglio avere due sezioni principali. La sezione più in alto è come il riepilogo

72
00:06:32,640 --> 00:06:37,660
in cui vedo l'importo totale e in cui ho il pulsante ordine ora.

73
00:06:37,980 --> 00:06:43,050
Questo sarà in una riga, quindi avrò una vista nidificata qui dove posso posizionare gli elementi uno accanto

74
00:06:43,590 --> 00:06:46,810
all'altro dove ho come un testo in cui dico il

75
00:06:46,810 --> 00:06:55,240
totale e quindi qui il simbolo del dollaro e forse il mio prezzo totale. Possiamo anche nidificare questo, puoi avere componenti di

76
00:06:55,250 --> 00:07:03,620
testo nidificati se ricordi senza problemi per dare ad esempio un colore separato, quindi per

77
00:07:03,620 --> 00:07:08,670
ora ho hardcode 19. 99, ma in seguito questo verrà derivato in modo dinamico.

78
00:07:08,840 --> 00:07:10,330
Quindi questa

79
00:07:10,430 --> 00:07:18,610
è una cosa e, inoltre, nella stessa riga qui, voglio avere un pulsante con un titolo di

80
00:07:18,700 --> 00:07:26,120
ordine ora dove posso premerlo per effettuare un ordine, cancellare il mio carrello e aggiungerlo

81
00:07:26,120 --> 00:07:28,750
ai miei ordini che non

82
00:07:28,760 --> 00:07:38,200
abbiamo ancora gestito e l'output nella schermata dell'ordine alla fine. Ora sotto questa sezione di riepilogo, voglio avere un elenco semplice con i miei articoli del carrello separati, in

83
00:07:38,200 --> 00:07:39,960
modo che possiamo davvero vedere cosa

84
00:07:39,970 --> 00:07:43,360
c'è nel carrello, quali prodotti sono lì, quanto di ogni prodotto è lì,

85
00:07:43,360 --> 00:07:47,860
quindi questa è un'altra cosa che verrà emesso lì. Per il momento qui, aggiungerò solo una

86
00:07:47,860 --> 00:07:52,090
vista con un testo di articoli del carrello come segnaposto ma, di nuovo, questa sarà una

87
00:07:52,090 --> 00:07:57,660
lista piatta in futuro, ma iniziamo con il totale qui. Per ottenere quel totale, possiamo attingere a

88
00:07:57,660 --> 00:08:04,780
Redux perché lì stiamo gestendo il nostro carrello, quindi possiamo usare il selettore di React Redux mentre hai imparato a

89
00:08:04,780 --> 00:08:10,810
ottenere i dati dal nostro negozio e qui, ho il totale del mio carrello forse che

90
00:08:11,010 --> 00:08:21,360
ottengo con l'aiuto del selettore d'uso dal mio stato. carrello, fetta. carrello qui perché

91
00:08:21,390 --> 00:08:27,030
nell'app. file js in riduttori combinati, ho assegnato una chiave del carrello qui al mio riduttore del carrello.

92
00:08:29,060 --> 00:08:33,160
Quindi qui ho. carrello e poi lì, all'interno del

93
00:08:33,380 --> 00:08:40,780
riduttore del carrello, gestisco il mio importo totale e il campo importo totale, quindi questo è ciò di cui abbiamo bisogno per accedere qui, importo totale.

94
00:08:40,800 --> 00:08:45,570
Questo dà il totale al carrello e ora possiamo usarlo laggiù e con quello per assicurarci

95
00:08:45,730 --> 00:08:49,820
che anche questo appaia bene, è tempo di un po 'di stile.

96
00:08:49,910 --> 00:08:56,450
Quindi nella vista più in alto qui, aggiungerò uno stile di schermo forse perché questo avvolge

97
00:08:56,450 --> 00:08:57,680
l'intero schermo

98
00:08:57,680 --> 00:09:03,820
alla fine, quindi qui in quella vista, aggiungerò uno stile di riepilogo perché contiene tutti

99
00:09:03,920 --> 00:09:07,130
gli elementi di riepilogo, quindi qui su questo

100
00:09:09,710 --> 00:09:20,790
testo, aggiungerò uno stile di testo di riepilogo e quindi qui, aggiungerò uno stile di importo, in modo da poter dare uno stile diverso a questo importo.

101
00:09:22,270 --> 00:09:23,930
Quindi, per gli

102
00:09:23,950 --> 00:09:34,840
stili che voglio impostare, passiamo al foglio di stile e aggiungiamo schermata, riepilogo, testo di riepilogo e quindi, come l'ho chiamato?

103
00:09:35,300 --> 00:09:41,820
quantità e, naturalmente, dipende sempre da te come ora vuoi modellare questo.

104
00:09:41,820 --> 00:09:47,400
Ora inizierò con lo schermo, alla fine voglio prendere l'intera dimensione dello schermo se ne avremo bisogno con

105
00:09:47,400 --> 00:09:54,420
l'elenco piatto in seguito, ma inizierò semplice e diremo solo che voglio avere un margine in tutto indicazioni in realtà qui di 20,

106
00:09:54,420 --> 00:10:03,390
quindi intorno a tutto, in modo che ci sia spazio intorno a tutto. Quindi qui, riepilogo che è la nostra scatola con tutti gli articoli

107
00:10:03,390 --> 00:10:09,210
lì dentro con l'ordine ora e il nostro testo dovrebbe usare una direzione flessibile della

108
00:10:09,210 --> 00:10:12,820
riga per posizionare gli articoli in una riga.

109
00:10:12,870 --> 00:10:19,950
Sono andato ad allineare gli oggetti al centro per assicurarmi che siano centrati verticalmente e sul loro asse

110
00:10:20,040 --> 00:10:28,670
principale, voglio usare giustificare lo spazio tra i contenuti in modo che gli oggetti abbiano lo spazio libero tra loro e gli

111
00:10:28,670 --> 00:10:35,040
elementi siano questo testo qui e questo pulsante. Oltre a ciò, possiamo aggiungere un po 'di margine

112
00:10:35,040 --> 00:10:36,360
qui, forse anche

113
00:10:36,360 --> 00:10:42,540
di 20, il che è molto importante anche per avere un po' di spazio tra il sommario

114
00:10:42,540 --> 00:10:49,990
e la nostra lista piatta, quindi in realtà userò il margine inferiore qui per avere solo un margine sul in basso

115
00:10:49,990 --> 00:10:55,030
e voglio aggiungere un'imbottitura di 10 qui perché il riepilogo dovrebbe essere un po

116
00:10:55,030 --> 00:11:05,050
'in una scatola sopraelevata e per questa scatola qui, andrò al mio componente dell'articolo del prodotto e copierò la mia ombra impostata qui e il bordo raggio forse

117
00:11:05,770 --> 00:11:12,030
ho qui e il colore di sfondo, quindi ho lo stesso aspetto qui nel carrello e questo dipende

118
00:11:12,040 --> 00:11:16,020
da te se lo vuoi o no, ma lo copierò lì.

119
00:11:17,420 --> 00:11:27,410
Per il testo di riepilogo, ora voglio usare una famiglia di caratteri di open sans in grassetto per evidenziare davvero questo totale e una dimensione

120
00:11:27,980 --> 00:11:33,290
del carattere di 18 e per la quantità di testo lì dentro, imposterò

121
00:11:33,290 --> 00:11:36,880
il colore sui colori. colore di accento.

122
00:11:36,890 --> 00:11:44,160
Ora, ovviamente, per quello importante, è necessario importare i colori dalla cartella delle costanti e quindi uso

123
00:11:44,150 --> 00:11:50,710
l'accento e non primario per distinguerlo davvero. Per vedere se questo sembra nel modo in cui vogliamo che

124
00:11:50,710 --> 00:11:55,660
appaia, dobbiamo assicurarci che toccando questo pulsante di intestazione nella nostra schermata di panoramica del prodotto ci

125
00:11:55,660 --> 00:11:59,520
porti effettivamente alla schermata del carrello e, per questo, sono necessari due elementi.

126
00:11:59,800 --> 00:12:04,510
Per prima cosa, dobbiamo navigare qui, ma prima di poterlo fare, dobbiamo

127
00:12:04,510 --> 00:12:11,890
registrare la schermata del carrello nel nostro navigatore. Quindi lo farò per primo, importerò il mio carrello qui dalla cartella

128
00:12:11,890 --> 00:12:17,980
schermi non sorprende, dalla cartella del negozio e lì dalla schermata del carrello e ora questa è la terza schermata che

129
00:12:17,980 --> 00:12:26,350
aggiungo qui a questo navigatore dello stack, punti del carrello nella schermata del carrello . Con questa configurazione aggiunta qui, possiamo tornare alla schermata di panoramica del

130
00:12:26,350 --> 00:12:33,220
prodotto e lì, ora abbiamo bisogno di quel modulo funzionale per le opzioni di navigazione perché i dati di navigazione

131
00:12:33,220 --> 00:12:37,670
ci permettono quindi di toccare il puntello di navigazione e chiamare la navigazione,

132
00:12:37,990 --> 00:12:41,240
quindi dobbiamo avvolgere questo in un altro oggetto che

133
00:12:41,300 --> 00:12:50,610
restituiamo e quindi qui possiamo chiamare navData. navigazione. navigo e lì, vado al carrello e questo

134
00:12:50,700 --> 00:12:54,950
ovviamente è l'identificatore che ho appena scelto nel navigatore del

135
00:12:55,050 --> 00:12:58,530
negozio qui, questo. Detto questo, vediamo che, se

136
00:12:58,580 --> 00:13:01,050
faccio clic qui, eccoci qui, questo è

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

138
00:13:01,740 --> 00:13:03,030
mio totale, in realtà

139
00:13:03,030 --> 00:13:06,610
penso che il colore dell'accento non sia eccezionale lì, quindi in

140
00:13:06,780 --> 00:13:13,170
realtà tornerò allo schermo del carrello e lo modellerò per usare il anche il colore primario, ma la cosa

141
00:13:15,490 --> 00:13:22,060
principale è che possiamo andare lì e se ora provo ad aggiungere articoli al carrello, ho aggiunto la camicia due

142
00:13:22,060 --> 00:13:29,400
volte e il tappeto una volta, quell'importo totale mi sembra buono. Proviamo anche questo su Android ovviamente per assicurarci che

143
00:13:29,400 --> 00:13:35,700
funzioni anche lì e generalmente funzioni, aggiungo un'altra maglietta rossa e quindi qui vediamo anche un problema

144
00:13:35,700 --> 00:13:41,730
con il modo in cui viene visualizzato. Per risolvere questo problema, sullo schermo del carrello, assicurati che

145
00:13:41,760 --> 00:13:48,600
sul prezzo, produciamo sempre solo due cifre decimali sull'importo con su fisso. A proposito, nel caso ti stia chiedendo da

146
00:13:48,600 --> 00:13:51,350
dove venisse, questo numero lungo,

147
00:13:51,540 --> 00:13:57,150
questo non è un bug o niente di React Native, questo è normale

148
00:13:57,150 --> 00:14:05,080
comportamento Javascript quando lavori con numeri in virgola mobile e ovviamente per risolvere non dovrebbe essere chiamato sullo

149
00:14:05,110 --> 00:14:11,440
stile qui ma sull'importo totale del carrello. Quindi si trattava di un comportamento normale,

150
00:14:11,440 --> 00:14:18,530
non di un bug, è così che Javascript poteva dire internamente di memorizzare numeri in virgola mobile che

151
00:14:18,530 --> 00:14:29,830
potevi dire, ma ora ci assicuriamo che questo venga emesso correttamente con due cifre decimali. La cosa che manca è il pulsante e qui ora voglio davvero usare il colore, l'accento di

152
00:14:30,760 --> 00:14:37,190
colori per avere il mio pulsante di accento colorato. Quindi, se ora vado al mio carrello qui su iOS, ecco come

153
00:14:38,920 --> 00:14:41,500
appare il pulsante lì, ecco come appare su Android.

154
00:14:41,590 --> 00:14:46,690
Possiamo sempre premere questo, ovviamente voglio disabilitarlo anche se se non c'è nulla nel carrello e per

155
00:14:46,990 --> 00:14:55,090
questo, ora abbiamo bisogno di ottenere anche i nostri articoli del carrello. Quindi gli articoli del carrello possono anche essere recuperati con il selettore

156
00:14:55,090 --> 00:15:01,320
d'uso, anche dalla sezione carrello ma lì, sono gli oggetti di scena dal riduttore del carrello a cui siamo interessati.

157
00:15:01,320 --> 00:15:09,150
Quindi, se do un'occhiata al riduttore del carrello, ecco che abbiamo la proprietà degli articoli.

158
00:15:09,310 --> 00:15:11,260
Questo è un oggetto che sto

159
00:15:11,270 --> 00:15:18,280
recuperando ora, quindi carrello articoli è un oggetto, non un array, in realtà un array sarebbe meglio per me qui e quindi userò la forma

160
00:15:18,370 --> 00:15:25,750
lunga per ottenere questo e restituirò un array qui e non un oggetto. Quindi possiamo ottenere qui i nostri articoli del carrello

161
00:15:25,750 --> 00:15:36,260
trasformati, ad esempio creando un nuovo array qui all'interno di questa funzione di selezione e quindi possiamo aggiungere un ciclo for / in per passare attraverso

162
00:15:36,260 --> 00:15:43,910
tutte le chiavi nello stato. carrello. articoli, quindi per scorrere

163
00:15:43,910 --> 00:15:47,120
in sequenza tutte le coppie chiave-valore in

164
00:15:47,120 --> 00:15:51,200
questo oggetto articoli carrello che abbiamo lì dentro e

165
00:15:52,950 --> 00:16:01,030
voglio aggiungerli come articolo agli articoli carrello trasformati. Quindi lì spingerò un oggetto Javascript che ha un ID prodotto, diciamo

166
00:16:01,060 --> 00:16:06,850
che è solo la mia chiave perché nell'oggetto ID carrello articoli, l'ID prodotto viene memorizzato come chiave se

167
00:16:06,850 --> 00:16:07,930
ricordi, quindi

168
00:16:07,930 --> 00:16:14,320
ora aggiungo questo alla proprietà ID prodotto in questo oggetto aggiungo alla matrice degli articoli del carrello trasformati e oltre

169
00:16:15,300 --> 00:16:27,240
a ciò, avrò il titolo del mio prodotto che è ovviamente stato. carrello. elementi per la chiave

170
00:16:27,240 --> 00:16:30,550
fornita. ProductTitle.

171
00:16:30,650 --> 00:16:37,900
Se dai un'occhiata al tuo modello di articolo del carrello, vedrai che lì, titolo del prodotto e prezzo del prodotto sono i

172
00:16:37,900 --> 00:16:41,510
nomi delle proprietà che detengono il titolo del prodotto e il

173
00:16:41,560 --> 00:16:43,570
prezzo del prodotto, quindi è così

174
00:16:43,570 --> 00:16:49,790
che accediamo ad entrambi, quindi farò lo stesso qui per il prezzo del prodotto e, successivamente, ho anche bisogno

175
00:16:49,790 --> 00:16:58,770
della quantità che è dichiarata. carrello. elementi per la chiave fornita. quantità e ovviamente anche la somma che è stato. carrello. elementi. chiave. somma, di nuovo fondamentalmente proprio quello che avevamo qui nel carrello.

176
00:16:58,770 --> 00:17:05,640
Quindi quello che sto facendo è per

177
00:17:05,640 --> 00:17:10,260
dire che sto creando un nuovo articolo carrello, non con il mio modello, perché

178
00:17:10,260 --> 00:17:17,690
è un articolo carrello con una proprietà ID prodotto aggiuntiva in modo da avere questo qui e ora è questo array di articoli

179
00:17:17,690 --> 00:17:24,300
carrello trasformato che restituisco dopo questo per il ciclo, in modo che questo selettore alla fine restituisca un array e

180
00:17:24,330 --> 00:17:25,850
non un oggetto,

181
00:17:26,040 --> 00:17:32,760
quindi gli articoli del carrello sono ora un array che ci rende più facile usarlo nell'elenco piatto e ci consente anche

182
00:17:32,760 --> 00:17:38,730
di controllare qui sul pulsante ordina ora se vogliamo disabilitarlo semplicemente controllando la lunghezza di questo array che

183
00:17:39,210 --> 00:17:41,000
ora abbiamo nel carrello articoli.

184
00:17:41,010 --> 00:17:42,720
Quindi qui sul pulsante, possiamo impostare

185
00:17:43,170 --> 00:17:49,260
l'elica di disabilitazione che supporta per fortuna, questo è un componente integrato che ha semplicemente un elica disabilitata e lì posso controllare

186
00:17:49,260 --> 00:17:56,790
se la lunghezza degli articoli del carrello è uguale a zero, se lo è, allora io so che è vuoto e quindi in effetti voglio disabilitare il pulsante. Quindi disabilitato riceve vero o falso, per impostazione predefinita è falso ma lo imposterò su vero se la lunghezza

187
00:17:56,790 --> 00:18:01,650
degli articoli del carrello è 0. E ora vedi se vado allo

188
00:18:01,730 --> 00:18:08,020
schermo del carrello, questo è disabilitato, se aggiungo

189
00:18:08,020 --> 00:18:16,800
un prodotto e ci vado, è abilitato e ovviamente potresti anche usare un colore diverso per il pulsante ordina ora se lo desideri.

190
00:18:16,890 --> 00:18:20,540
Ora, con ciò, siamo un passo avanti verso

191
00:18:20,550 --> 00:18:26,580
i carrelli finiti e, naturalmente, l'obiettivo successivo è quello di produrre gli articoli del carrello.