1
00:00:02,190 --> 00:00:07,590
Um das Aktionselement zur Kopfzeile hinzuzufügen, mache ich etwas, was ich auch im Navigationsbereich getan habe.

2
00:00:07,800 --> 00:00:09,480
Im Komponentenordner möchte ich

3
00:00:09,660 --> 00:00:11,470
meine eigene Kopfzeilenschaltfläche hinzufügen und jetzt

4
00:00:11,550 --> 00:00:17,160
füge ich dazu einen neuen Unterordner hinzu Dort werde ich UI nennen und meine Idee hier ist einfach.

5
00:00:17,580 --> 00:00:23,340
Ich habe den Shop-Ordner, der alle Komponenten enthält, die ich in meinem Shop

6
00:00:23,340 --> 00:00:30,090
verwende und die einige Shop-bezogene Informationen ausgeben. Im UI-Ordner möchte ich einige allgemeine

7
00:00:30,090 --> 00:00:35,580
UI-Bausteine haben, die ich natürlich auch in dieser Shop-Anwendung verwende, die sich

8
00:00:35,610 --> 00:00:42,240
jedoch nicht wirklich auf die Ausgabe von Shop- oder produktbezogenen Daten konzentrieren, sondern lediglich dazu

9
00:00:42,270 --> 00:00:51,680
dienen, ein Standard-Styling oder -Layout bereitzustellen In diesem UI-Ordner, in dem ich meine eigene Header-Schaltfläche hinzufügen werde, indem ich dort hineingehe

10
00:00:53,540 --> 00:01:02,330
und React from React importiere und dann die Header-Schaltfläche aus den React-Navigations-Header-Schaltflächen importiere. Dieses Paket habe ich am Anfang des

11
00:01:02,330 --> 00:01:10,370
Moduls installiert, falls Sie dies nicht getan haben Stellen Sie sicher, dass Sie dieses Paket npm installieren, und

12
00:01:11,090 --> 00:01:15,760
importieren Sie dann auch Ionicons von @ expo / vector-icons.

13
00:01:15,850 --> 00:01:23,640
Um sicherzugehen, dass Sie das installiert haben, führen Sie npm install --save @ expo / vector-icons aus, damit dieses

14
00:01:23,640 --> 00:01:26,220
Paket in Ihrem Projekt verfügbar ist.

15
00:01:26,220 --> 00:01:28,070
Dies sind die Importe, die ich hier

16
00:01:28,110 --> 00:01:35,990
brauche. Jetzt möchte ich auch meine Farben aus dem Konstantenordner und dort die Farben importieren. js-Datei und jetzt hier füge ich meine

17
00:01:35,990 --> 00:01:43,880
benutzerdefinierte Header-Button-Komponente hinzu, die am Ende eine normale React-Komponente ist, die Requisiten empfängt und etwas jsx

18
00:01:43,880 --> 00:01:51,390
zurückgeben muss, und ich werde natürlich am Ende und jetzt meine benutzerdefinierte Header-Button hier exportieren

19
00:01:51,390 --> 00:01:58,020
Das hier zurückgegebene jsx ist die Header-Schaltfläche, die ich aus den React-Navigations-Header-Schaltflächen importiere,

20
00:01:58,020 --> 00:02:05,090
aber ich muss sie auf eine bestimmte Weise konfigurieren. Verwenden Sie hier die

21
00:02:05,190 --> 00:02:10,280
Header-Schaltfläche aus den React-Navigations-Header-Schaltflächen. Zum einen sollte dies alle Requisiten erhalten,

22
00:02:10,280 --> 00:02:15,310
die wir hier bekommen, also leiten wir diese einfach weiter, aber zusätzlich setze ich meine Icons-Komponente

23
00:02:15,320 --> 00:02:18,460
hier auf Ionicons, so dass wir immer Ionicons zum

24
00:02:18,470 --> 00:02:24,670
Rendern verwenden und natürlich eines davon verwenden können die verschiedenen Vektorsymbolsätze, die auch von @ expo / vector-icons bereitgestellt werden.

25
00:02:24,860 --> 00:02:30,800
Ich werde die Symbolgröße auf 23 einstellen, was sich als sehr gut erwiesen hat, aber natürlich können Sie auch

26
00:02:30,800 --> 00:02:33,140
hier mit verschiedenen Werten experimentieren. Wenn Sie

27
00:02:33,140 --> 00:02:40,370
ein anderes Symbolset verwenden, probieren Sie möglicherweise eine andere Symbolgröße aus. Und für die Farbe kommt es darauf an, denn

28
00:02:40,490 --> 00:02:41,990
auf Android haben

29
00:02:41,990 --> 00:02:47,150
wir hier einen roten Hintergrund, auf iOS haben wir keinen, also müssen wir

30
00:02:47,150 --> 00:02:50,680
eine andere Farbe festlegen, basierend auf der Plattform, auf

31
00:02:50,780 --> 00:02:59,760
der wir laufen, also werde ich Importieren Sie die Plattform tatsächlich von React Native hier und dann können wir die Plattform hier überprüfen.

32
00:02:59,870 --> 00:03:01,870
Wenn die Betriebssystemversion Android

33
00:03:01,880 --> 00:03:04,970
ist, weiß ich, dass ich diesen festen Feldhintergrund

34
00:03:05,000 --> 00:03:10,820
habe, daher sollte das Symbol weiß sein. Unter iOS hingegen ist der Hintergrund nicht ausgefüllt,

35
00:03:11,120 --> 00:03:19,090
sondern transparent. Daher setze ich unter iOS meine Symbolfarbe auf Farben. primär.

36
00:03:19,150 --> 00:03:27,490
Jetzt können wir das verwenden, um hier auf dem Produktübersichtsbildschirm ein Symbol hinzuzufügen. Dort in meinen Navigationsoptionen

37
00:03:27,490 --> 00:03:35,800
möchte ich meinen rechten Kopfbereich hinzufügen, also ein Symbol rechts von meiner Kopfzeile, und dafür müssen wir

38
00:03:35,800 --> 00:03:42,610
hier importieren Für einige Dinge müssen wir Header-Schaltflächen und Elemente aus dem von uns

39
00:03:42,610 --> 00:03:44,660
installierten React-Navigations-Header-Schaltflächenpaket importieren.

40
00:03:44,800 --> 00:03:53,780
Ich muss natürlich auch meine eigene Header-Schaltfläche aus den Header-Schaltflächen der Benutzeroberfläche der Komponenten importieren. Diese Komponente, an

41
00:03:53,780 --> 00:04:03,720
der wir gerade gearbeitet haben, und jetzt dort unten sind die Header-Schaltflächen als Wrapper, um möglicherweise mehrere Elemente darin zu

42
00:04:04,140 --> 00:04:10,950
haben, aber ich werde nur eines hinzufügen item, ein selbstschließendes Element, müssen auf

43
00:04:10,950 --> 00:04:17,430
Kopfzeilenschaltflächen, bevor wir mit dem Element fortfahren, die Kopfzeilenschaltflächenkomponente gleich der Kopfzeilenschaltfläche setzen,

44
00:04:17,430 --> 00:04:23,820
also hier unsere eigene Kopfzeilenschaltfläche. Und der Artikel kann jetzt konfiguriert werden. Er sollte einen Titel erhalten, der

45
00:04:23,820 --> 00:04:24,290
ein

46
00:04:24,340 --> 00:04:28,840
Warenkorb sein kann. Er sollte einen Symbolnamen erhalten. Ich möchte tatsächlich ein anderes Symbol verwenden, das auf der

47
00:04:28,980 --> 00:04:34,590
Plattform basiert, auf der wir ausgeführt werden. Daher von React Native, I. Wenn Sie eine Plattform importieren, die optional ist, können Sie für

48
00:04:34,590 --> 00:04:39,270
beide Plattformen ein und dasselbe Symbol verwenden, aber ich denke, es sieht auch gut aus, unterschiedliche Symbole zu haben.

49
00:04:39,270 --> 00:04:47,820
Und dann überprüfe ich hier das Betriebssystem der Plattform und wenn das Android ist, dann möchte ich das md cart-Symbol verwenden, das das Ionicon-Cart-Symbol

50
00:04:47,820 --> 00:04:54,360
für das Materialdesign ist. Andernfalls verwende ich das iOS-Cart-Symbol und wieder finden Sie alle verfügbaren Symbole in dieser Symbolliste

51
00:04:54,360 --> 00:04:57,140
Ich habe Ihnen früher im Kurs gezeigt,

52
00:04:57,240 --> 00:05:03,540
die Liste der Expo- / Vektorsymbole und nicht zuletzt, wenn das Element gedrückt wird, möchten wir wahrscheinlich etwas

53
00:05:03,540 --> 00:05:09,000
tun, und im Moment mache ich nichts anderes als wir Ich werde das bald ändern.

54
00:05:11,260 --> 00:05:12,850
Wenn wir dies jetzt speichern,

55
00:05:12,880 --> 00:05:13,500
sollten

56
00:05:13,500 --> 00:05:15,220
wir dieses Symbol hier sehen,

57
00:05:15,280 --> 00:05:21,250
hier ist es, hier ist unser Warenkorb, auch auf Android, und jetzt müssen wir nur noch sicherstellen, dass wir

58
00:05:21,340 --> 00:05:27,250
zu unserem Warenkorbbildschirm weitergeleitet werden, wenn wir darauf tippen. Dazu müssen wir dem Warenkorbbildschirm natürlich eine Logik oder eine Ausgabe hinzufügen.

59
00:05:27,880 --> 00:05:31,610
Innerhalb des Warenkorbbildschirms haben wir natürlich eine

60
00:05:31,720 --> 00:05:34,070
normale React-Komponente, also importieren

61
00:05:34,090 --> 00:05:43,420
wir React von React, wir importieren auch etwas von React Native und dass etwas eine Ansichtskomponente ist, um unseren

62
00:05:43,540 --> 00:05:48,120
Bildschirm zu umbrechen, werden wir wahrscheinlich Text ausgeben auch.

63
00:05:48,380 --> 00:05:54,780
Dort werden einige Warenkorbelemente aufgelistet, die wir mit einer flachen Liste erstellen können,

64
00:05:54,800 --> 00:06:01,580
um die Optimierung zu integrieren. Wahrscheinlich möchten wir einige Dinge mit einem Stylesheet formatieren,

65
00:06:01,670 --> 00:06:11,060
und ich werde auch die integrierte Schaltflächenkomponente importieren. Jetzt ist mein Warenkorbbildschirm hier wie immer eine React-Komponente und ich werde

66
00:06:11,060 --> 00:06:16,910
dieses Styles-Objekt hier mit Stylesheet einrichten. erstellen, damit wir auch diese Komponente formatieren

67
00:06:17,000 --> 00:06:21,030
können, und am Ende exportieren wir unseren Warenkorbbildschirm hier standardmäßig.

68
00:06:21,070 --> 00:06:24,930
Jetzt können Sie diesen Warenkorbbildschirm natürlich so erstellen, wie Sie möchten. Ich werde ihn so erstellen,

69
00:06:24,940 --> 00:06:32,640
dass wir eine Ansicht haben, und in dieser Ansicht möchte ich zwei Hauptabschnitte haben. Der oberste Abschnitt ähnelt der Zusammenfassung, in der ich

70
00:06:32,640 --> 00:06:37,660
den Gesamtbetrag sehe und in der ich die Schaltfläche Jetzt bestellen habe.

71
00:06:37,980 --> 00:06:43,050
Dies wird in einer Reihe sein, also werde ich hier eine verschachtelte Ansicht haben, in der ich

72
00:06:43,590 --> 00:06:46,810
Elemente nebeneinander positionieren kann, wo ich einen Text mag,

73
00:06:46,810 --> 00:06:55,240
in dem ich total und dann hier Dollarzeichen und dann vielleicht meinen Gesamtpreis sage. Wir können dies auch verschachteln. Sie können verschachtelte Textkomponenten

74
00:06:55,250 --> 00:07:03,620
haben, wenn Sie sich ohne Probleme daran erinnern, diesem Beispiel eine separate Farbe zu geben. Deshalb habe ich

75
00:07:03,620 --> 00:07:08,670
vorerst den Hardcode 19. 99 drin, aber später wird dies dynamisch abgeleitet.

76
00:07:08,840 --> 00:07:10,330
Das ist

77
00:07:10,430 --> 00:07:18,610
eine Sache, und außerdem möchte ich in derselben Zeile hier einen Button mit einem Auftragstitel haben, über den

78
00:07:18,700 --> 00:07:26,120
ich ihn drücken kann, um eine Bestellung aufzugeben, meinen Warenkorb zu leeren und diesen zu meinen

79
00:07:26,120 --> 00:07:28,750
Bestellungen hinzuzufügen, die wir noch verwalten

80
00:07:28,760 --> 00:07:38,200
müssen und geben Sie es am Ende auf dem Bestellbildschirm aus. Jetzt unter diesem Zusammenfassungsabschnitt möchte ich eine flache Liste mit meinen separaten Warenkorbartikeln haben, damit wir wirklich sehen können,

81
00:07:38,200 --> 00:07:39,960
was sich im Warenkorb befindet, welche

82
00:07:39,970 --> 00:07:43,360
Produkte sich dort befinden, wie viel von jedem Produkt sich dort befindet, also ist

83
00:07:43,360 --> 00:07:47,860
das eine andere Sache, die ich wird dort ausgegeben. Im Moment füge ich hier nur eine

84
00:07:47,860 --> 00:07:52,090
Ansicht mit einem Text von Warenkorbelementen als Platzhalter hinzu, aber auch dies wird in Zukunft eine

85
00:07:52,090 --> 00:07:57,660
flache Liste sein, aber beginnen wir hier mit der Summe. Um diese Summe zu erhalten, können wir

86
00:07:57,660 --> 00:08:04,780
auf Redux zugreifen, da wir dort unseren Warenkorb verwalten. Daher können wir den Selektor von React Redux verwenden, um zu erfahren,

87
00:08:04,780 --> 00:08:10,810
wie Sie Daten aus unserem Shop abrufen können. Hier habe ich möglicherweise die Gesamtmenge meines Warenkorbs, die ich

88
00:08:11,010 --> 00:08:21,360
möglicherweise erhalte mit Hilfe von Use Selector aus meinem Bundesstaat. Wagen, Scheibe. Wagen hier, weil in

89
00:08:21,390 --> 00:08:27,030
der App. Als Datei in kombinierten Reduzierstücken habe ich meinem Wagenreduzierer hier einen Wagenschlüssel zugewiesen.

90
00:08:29,060 --> 00:08:33,160
Also hier habe ich. Wagen und dann dort,

91
00:08:33,380 --> 00:08:40,780
innerhalb des Wagenreduzierers, verwalte ich meinen Gesamtbetrag und das Feld Gesamtbetrag, sodass wir hier darauf zugreifen müssen, Gesamtbetrag.

92
00:08:40,800 --> 00:08:45,570
Dies ergibt die Gesamtmenge des Wagens und wir können diese jetzt dort unten verwenden.

93
00:08:45,730 --> 00:08:49,820
Damit dies auch gut aussieht, ist es Zeit für ein Styling.

94
00:08:49,910 --> 00:08:56,450
In der obersten Ansicht hier füge ich einen Bildschirmstil hinzu, möglicherweise weil dies am Ende

95
00:08:56,450 --> 00:08:57,680
den gesamten

96
00:08:57,680 --> 00:09:03,820
Bildschirm umschließt. In dieser Ansicht füge ich dann einen Zusammenfassungsstil hinzu, da dieser alle

97
00:09:03,920 --> 00:09:07,130
Zusammenfassungselemente enthält, und hier In diesem Text

98
00:09:09,710 --> 00:09:20,790
füge ich einen Stil für den Zusammenfassungstext hinzu und hier füge ich einen Stil für den Betrag hinzu, damit wir diesen Betragstext anders gestalten können.

99
00:09:22,270 --> 00:09:23,930
Für Stile, die

100
00:09:23,950 --> 00:09:34,840
ich festlegen möchte, gehen wir zum Stylesheet und fügen Bildschirm, Zusammenfassung, Zusammenfassungstext hinzu. Und wie habe ich es dann benannt?

101
00:09:35,300 --> 00:09:41,820
Menge und natürlich liegt es wie immer ganz bei Ihnen, wie Sie dies jetzt stylen möchten.

102
00:09:41,820 --> 00:09:47,400
Jetzt beginne ich mit dem Bildschirm. Am Ende möchte ich die volle Größe des Bildschirms einnehmen, wenn wir später

103
00:09:47,400 --> 00:09:54,420
mit der flachen Liste arbeiten müssen, aber ich werde einfach anfangen und wir werden nur sagen, dass ich insgesamt einen Rand haben möchte Richtungen eigentlich

104
00:09:54,420 --> 00:10:03,390
hier von 20, also um alles herum, so dass um alles herum etwas Platz ist. Dann hier eine Zusammenfassung, die unser Feld mit allen Elementen

105
00:10:03,390 --> 00:10:09,210
in der Reihenfolge jetzt ist, und unser Text sollte eine flexible Zeilenrichtung verwenden,

106
00:10:09,210 --> 00:10:12,820
um Elemente in einer Zeile zu positionieren.

107
00:10:12,870 --> 00:10:19,950
Ich habe Elemente in der Mitte ausgerichtet, um sicherzustellen, dass sie vertikal und auf ihrer Hauptachse

108
00:10:20,040 --> 00:10:28,670
zentriert sind. Ich möchte den Inhaltsbereich zwischen den Begriffen verwenden, damit die Elemente den freien Speicherplatz zwischen ihnen haben und Elemente

109
00:10:28,670 --> 00:10:35,040
dieser Text hier und diese Schaltfläche sind. Außerdem können wir hier ein wenig Rand hinzufügen,

110
00:10:35,040 --> 00:10:36,360
vielleicht auch 20,

111
00:10:36,360 --> 00:10:42,540
was meistens wichtig ist, um auch einen gewissen Abstand zwischen der Zusammenfassung und unserer flachen Liste zu

112
00:10:42,540 --> 00:10:49,990
haben. Deshalb werde ich hier den unteren Rand verwenden, um nur einen gewissen Rand zu haben unten und ich möchte hier

113
00:10:49,990 --> 00:10:55,030
einen Abstand von 10 hinzufügen, da sich die Zusammenfassung in einer erhöhten Box befinden

114
00:10:55,030 --> 00:11:05,050
sollte. Für diese Box hier gehe ich zu meiner Produktartikelkomponente und kopiere meinen hier eingerichteten Schatten und den Rand Radius habe ich vielleicht hier und die Hintergrundfarbe, so

115
00:11:05,770 --> 00:11:12,030
dass ich hier im Warenkorb das gleiche Aussehen habe und es liegt natürlich an dir, ob du

116
00:11:12,040 --> 00:11:16,020
das willst oder nicht, aber ich werde das dort kopieren.

117
00:11:17,420 --> 00:11:27,410
Für den Zusammenfassungstext möchte ich jetzt eine Schriftfamilie mit offener, fettgedruckter Schrift verwenden, um diese Summe und eine Schriftgröße von 18 wirklich

118
00:11:27,980 --> 00:11:33,290
hervorzuheben, und für die Menge an Text werde ich die Farbe

119
00:11:33,290 --> 00:11:36,880
auf Farben setzen. Akzentfarbe.

120
00:11:36,890 --> 00:11:44,160
Dafür ist es natürlich wichtig, dass Sie Farben aus dem Konstantenordner importieren. Dann verwende ich Akzent

121
00:11:44,150 --> 00:11:50,710
und nicht Primär, um dies wirklich hervorzuheben. Um zu sehen, ob das so aussieht, wie

122
00:11:50,710 --> 00:11:55,660
wir es möchten, müssen wir sicherstellen, dass wir durch Tippen auf diese Kopfzeile in

123
00:11:55,660 --> 00:11:59,520
unserem Produktübersichtsbildschirm tatsächlich zum Warenkorbbildschirm gelangen. Dazu sind zwei Dinge erforderlich.

124
00:11:59,800 --> 00:12:04,510
Zum einen müssen wir hier navigieren, aber bevor wir das tun können,

125
00:12:04,510 --> 00:12:11,890
müssen wir den Warenkorbbildschirm in unserem Navigator registrieren. Also mache ich das zuerst, ich importiere meinen Warenkorb-Bildschirm hier aus

126
00:12:11,890 --> 00:12:17,980
dem Bildschirmordner, nicht überraschend, aus dem Shop-Ordner und dort aus dem Warenkorb-Bildschirm, und jetzt ist dies der dritte Bildschirm,

127
00:12:17,980 --> 00:12:26,350
den ich hier zu diesem Stapel-Navigator hinzufüge, Warenkorb zeigt auf den Warenkorb-Bildschirm . Mit diesem hier hinzugefügten Setup können wir zum Produktübersichtsbildschirm zurückkehren. Dort

128
00:12:26,350 --> 00:12:33,220
benötigen wir nun dieses Funktionsformular für die Navigationsoptionen, da die Navigationsdaten es uns dann ermöglichen, auf die

129
00:12:33,220 --> 00:12:37,670
Navigationsstütze zu tippen und die Navigation aufzurufen. Daher müssen wir dies

130
00:12:37,990 --> 00:12:41,240
umbrechen in einem anderen Objekt, das wir zurückgeben

131
00:12:41,300 --> 00:12:50,610
und dann hier können wir navData aufrufen. Navigation. navigiere und dort gehe ich zum Einkaufswagen und

132
00:12:50,700 --> 00:12:54,950
dies ist natürlich die Kennung, die ich gerade im Shop-Navigator hier

133
00:12:55,050 --> 00:12:58,530
ausgewählt habe, diese. Mal sehen, wenn ich hier

134
00:12:58,580 --> 00:13:01,050
klicke, da sind wir, das ist meine

135
00:13:01,050 --> 00:13:01,740
Summe.

136
00:13:01,740 --> 00:13:03,030
Ich denke tatsächlich,

137
00:13:03,030 --> 00:13:06,610
dass die Akzentfarbe dort nicht so gut ist, also gehe

138
00:13:06,780 --> 00:13:13,170
ich zurück zum Warenkorbbildschirm und gestalte dies, um das zu verwenden Primärfarbe auch, aber Hauptsache, wir können dorthin

139
00:13:15,490 --> 00:13:22,060
gehen und wenn ich jetzt versuche, Artikel in den Warenkorb zu legen, habe ich das Hemd zweimal und den

140
00:13:22,060 --> 00:13:29,400
Teppich einmal hinzugefügt, diese Gesamtmenge sieht für mich gut aus. Versuchen wir dies natürlich auch auf Android, um sicherzustellen, dass es auch

141
00:13:29,400 --> 00:13:35,700
dort funktioniert und im Allgemeinen funktioniert. Ich füge ein weiteres rotes Shirt hinzu und daher sehen wir hier auch ein Problem

142
00:13:35,700 --> 00:13:41,730
mit der Art und Weise, wie dies angezeigt wird. Um dies zu beheben, stellen Sie auf dem Warenkorbbildschirm sicher, dass

143
00:13:41,760 --> 00:13:48,600
beim Preis immer nur zwei Dezimalstellen für den Betrag mit "fest" ausgegeben werden. Übrigens, falls Sie sich fragen, woher das

144
00:13:48,600 --> 00:13:51,350
kommt, diese lange Zahl, das

145
00:13:51,540 --> 00:13:57,150
ist kein Fehler oder nichts, um Native wirklich zu reagieren. Dies ist

146
00:13:57,150 --> 00:14:05,080
normales Javascript-Verhalten, wenn Sie mit Gleitkommazahlen arbeiten und natürlich beheben sollte hier nicht auf den Stil bezogen

147
00:14:05,110 --> 00:14:11,440
werden, sondern auf den Gesamtbetrag des Wagens. Dies war also ein normales Verhalten,

148
00:14:11,440 --> 00:14:18,530
kein Fehler. Auf diese Weise speichert Javascript intern Gleitkommazahlen, die Sie sagen könnten, aber jetzt

149
00:14:18,530 --> 00:14:29,830
stellen wir sicher, dass dies korrekt mit zwei Dezimalstellen ausgegeben wird. Fehlende Sache ist der Knopf und hier möchte ich jetzt tatsächlich Farbe, Farben Akzent verwenden,

150
00:14:30,760 --> 00:14:37,190
um meinen Akzent farbigen Knopf zu haben. Wenn ich jetzt hier auf iOS in meinen Warenkorb gehe, sieht die Schaltfläche

151
00:14:38,920 --> 00:14:41,500
dort so aus, so sieht sie jetzt auf Android aus.

152
00:14:41,590 --> 00:14:46,690
Wir können dies jederzeit drücken, natürlich möchte ich es deaktivieren, wenn sich nichts im

153
00:14:46,990 --> 00:14:55,090
Warenkorb befindet, und dafür müssen wir jetzt auch unsere Warenkorbartikel besorgen. So können Wagenartikel auch mit dem Verwendungswähler abgerufen werden, ebenfalls

154
00:14:55,090 --> 00:15:01,320
aus der Wagenscheibe, aber dort ist es die Artikelstütze aus dem Wagenreduzierer, an der wir interessiert sind.

155
00:15:01,320 --> 00:15:09,150
Wenn ich mir also den Wagenreduzierer ansehe, sehen Sie, dass wir die Artikel-Eigenschaft haben.

156
00:15:09,310 --> 00:15:11,260
Dies ist ein Objekt, das ich

157
00:15:11,270 --> 00:15:18,280
gerade abrufe. Warenkorbartikel sind also ein Objekt, kein Array. Eigentlich wäre ein Array hier besser für mich. Daher verwende ich die lange Form, um

158
00:15:18,370 --> 00:15:25,750
dies zu erhalten, und gebe ein Array zurück hier und kein Objekt. So können wir unsere transformierten Warenkorbelemente hier abrufen,

159
00:15:25,750 --> 00:15:36,260
indem wir beispielsweise hier innerhalb dieser Auswahlfunktion ein neues Array erstellen und dann eine for / in-Schleife hinzufügen, um alle Schlüssel

160
00:15:36,260 --> 00:15:43,910
im Status zu durchlaufen. Wagen. Artikel, um alle Schlüssel-Wert-Paare

161
00:15:43,910 --> 00:15:47,120
in diesem Warenkorb-Objekt zu durchlaufen, das

162
00:15:47,120 --> 00:15:51,200
wir dort haben, und ich möchte jedes von

163
00:15:52,950 --> 00:16:01,030
ihnen als Artikel zu den transformierten Warenkorb-Artikeln hinzufügen. Dort werde ich also ein Javascript-Objekt mit einer Produkt-ID pushen. Nehmen wir

164
00:16:01,060 --> 00:16:06,850
an, dies ist nur mein Schlüssel, da im Objekt "ID-Warenkorb" die Produkt-ID als Schlüssel gespeichert wird,

165
00:16:06,850 --> 00:16:07,930
wenn Sie

166
00:16:07,930 --> 00:16:14,320
sich erinnern. Jetzt füge ich diese der Produkt-ID-Eigenschaft hinzu In diesem Objekt füge ich dem transformierten Warenkorb-Artikel-Array hinzu

167
00:16:15,300 --> 00:16:27,240
und außerdem habe ich meinen Produkttitel, der natürlich den Status hat. Wagen. Elemente für den angegebenen

168
00:16:27,240 --> 00:16:30,550
Schlüssel. Produktname.

169
00:16:30,650 --> 00:16:37,900
Wenn Sie sich Ihr Warenkorb-Artikelmodell ansehen, werden Sie feststellen, dass dort Produkttitel und Produktpreis die Eigenschaftsnamen sind, die

170
00:16:37,900 --> 00:16:41,510
den Produkttitel und den Produktpreis enthalten. Auf diese Weise

171
00:16:41,560 --> 00:16:43,570
greifen wir auf beide zu,

172
00:16:43,570 --> 00:16:49,790
sodass ich dasselbe tun werde hier für den Produktpreis und danach brauche ich auch die Menge,

173
00:16:49,790 --> 00:16:58,770
die Zustand ist. Wagen. Elemente für den angegebenen Schlüssel. Menge und natürlich auch die Summe, die Zustand ist. Wagen. Artikel. Schlüssel. Summe, wieder im Grunde genau das, was wir hier im Warenkorb hatten.

174
00:16:58,770 --> 00:17:05,640
Ich erstelle also sozusagen einen neuen Warenkorbartikel,

175
00:17:05,640 --> 00:17:10,260
jedoch nicht mit meinem Modell, da es sich um einen Warenkorbartikel mit einer

176
00:17:10,260 --> 00:17:17,690
zusätzlichen Produkt-ID-Eigenschaft handelt, sodass ich diesen hier und jetzt in diesem transformierten Warenkorbartikel-Array habe was ich danach für die for-Schleife zurückgebe,

177
00:17:17,690 --> 00:17:24,300
so dass dieser Selektor am Ende ein Array und kein Objekt zurückgibt, so dass Warenkorbartikel jetzt ein Array sind,

178
00:17:24,330 --> 00:17:25,850
das es uns

179
00:17:26,040 --> 00:17:32,760
erleichtert, es in der flachen Liste zu verwenden, und es uns auch ermöglicht, es zu überprüfen Hier auf der

180
00:17:32,760 --> 00:17:38,730
Schaltfläche Jetzt bestellen, ob wir es deaktivieren möchten, indem wir einfach die Länge dieses Arrays überprüfen, das

181
00:17:39,210 --> 00:17:41,000
wir jetzt in Warenkorbartikeln haben.

182
00:17:41,010 --> 00:17:42,720
Hier auf der Schaltfläche können

183
00:17:43,170 --> 00:17:49,260
wir die Deaktivierungsstütze einstellen, die sie dankenswerterweise unterstützt. Dies ist eine integrierte Komponente, die einfach eine deaktivierte Stütze hat. Dort kann

184
00:17:49,260 --> 00:17:56,790
ich überprüfen, ob die Länge der Warenkorbartikel gleich Null ist. Wenn ja, dann ich Ich weiß, dass es leer ist und dann möchte ich die Schaltfläche deaktivieren. Deaktiviert erhält also true oder false. Standardmäßig ist es false, aber ich setze es auf true, wenn die

185
00:17:56,790 --> 00:18:01,650
Länge der Warenkorbartikel 0 beträgt. Und jetzt sehen Sie, wenn ich

186
00:18:01,730 --> 00:18:08,020
zum Warenkorb-Bildschirm gehe, ist dies deaktiviert. Wenn ich jedoch

187
00:18:08,020 --> 00:18:16,800
ein Produkt hinzufüge und dorthin gehe, ist es aktiviert und Sie können natürlich auch eine andere Farbe für die Schaltfläche "Jetzt bestellen" verwenden, wenn Sie möchten.

188
00:18:16,890 --> 00:18:20,540
Damit sind wir den fertigen Wagen einen

189
00:18:20,550 --> 00:18:26,580
Schritt näher gekommen und das nächste Ziel ist natürlich die Ausgabe der Wagenartikel.