1
00:00:02,190 --> 00:00:07,590
Aby dodać element akcji do nagłówka, zrobię coś, co zrobiłem również w sekcji nawigacji, w folderze

2
00:00:07,800 --> 00:00:09,480
komponentów, chcę dodać własny

3
00:00:09,660 --> 00:00:11,470
przycisk nagłówka, a teraz w

4
00:00:11,550 --> 00:00:17,160
tym celu dodam nowy podfolder w tam, który wymienię UI, a mój pomysł tutaj jest prosty.

5
00:00:17,580 --> 00:00:23,340
Mam folder sklepu, który zawiera wszystkie komponenty, których używam w moim sklepie,

6
00:00:23,340 --> 00:00:30,090
które generują niektóre informacje związane ze sklepem. W folderze interfejsu użytkownika chcę mieć pewne

7
00:00:30,090 --> 00:00:35,580
ogólne elementy składowe interfejsu użytkownika, których oczywiście używam również w tej aplikacji sklepu,

8
00:00:35,610 --> 00:00:42,240
ale które nie są tak naprawdę skoncentrowane na tworzeniu danych związanych ze sklepem lub produktem,

9
00:00:42,270 --> 00:00:51,680
ale które są po prostu tam, aby zapewnić domyślną stylizację lub układ, a to w tym folderze interfejsu użytkownika, w którym dodam

10
00:00:53,540 --> 00:01:02,330
własny przycisk nagłówka, wchodząc tam i importując React z React, a następnie importując przycisk nagłówka z React nawigacyjnych przycisków nagłówka,

11
00:01:02,330 --> 00:01:10,370
pakiet ten zainstalowałem na początku modułu, jeśli jeszcze tego nie zrobiłeś , upewnij się, że npm zainstalowałeś ten

12
00:01:11,090 --> 00:01:15,760
pakiet, a następnie zaimportowałeś jony z @ expo / vector-icons.

13
00:01:15,850 --> 00:01:23,640
Teraz, aby mieć pewność, że masz już zainstalowany, uruchom npm install --save @ expo / vector-icons, aby ten pakiet

14
00:01:23,640 --> 00:01:26,220
był dostępny w twoim projekcie.

15
00:01:26,220 --> 00:01:28,070
Oto import, którego potrzebuję tutaj,

16
00:01:28,110 --> 00:01:35,990
teraz chcę również zaimportować moje kolory z folderu constans i tam kolory. plik js, a teraz tutaj, dodam mój

17
00:01:35,990 --> 00:01:43,880
niestandardowy komponent przycisku nagłówka, który jest normalnym komponentem React na końcu, który otrzymuje rekwizyty i

18
00:01:43,880 --> 00:01:51,390
musi zwrócić trochę jsx, i oczywiście wyeksportuję tutaj mój niestandardowy przycisk nagłówka i teraz

19
00:01:51,390 --> 00:01:58,020
Zwrócony tutaj plik jsx to przycisk nagłówka Importuję z przycisków React nawigacyjnych przycisków

20
00:01:58,020 --> 00:02:05,090
nagłówka, ale muszę go skonfigurować w określony sposób, użyj tutaj przycisku nagłówka z

21
00:02:05,190 --> 00:02:10,280
React nawigacyjnych przycisków nagłówkowych. Po pierwsze, powinno to otrzymać wszystkie

22
00:02:10,280 --> 00:02:15,310
rekwizyty, które tu dostaniemy, więc po prostu je przekażemy, ale dodatkowo ustawię tutaj element ikon

23
00:02:15,320 --> 00:02:18,460
na Ionicons, dzięki czemu zawsze będziemy używać Ionicons do

24
00:02:18,470 --> 00:02:24,670
renderowania tego i oczywiście możesz użyć jednego z różne zestawy ikon wektorowych dostarczone przez @ expo / vector-icons.

25
00:02:24,860 --> 00:02:30,800
Ustawię rozmiar ikony na 23, co okazało się bardzo skuteczne, ale oczywiście możesz tutaj również

26
00:02:30,800 --> 00:02:33,140
eksperymentować z różnymi wartościami, może

27
00:02:33,140 --> 00:02:40,370
także, jeśli używasz innego zestawu ikon, wypróbuj inny rozmiar ikony. A jeśli chodzi o kolor, to zależy od

28
00:02:40,490 --> 00:02:41,990
tego, ponieważ

29
00:02:41,990 --> 00:02:47,150
na Androidzie mamy czerwone tło, na iOS nie, więc musimy ustawić

30
00:02:47,150 --> 00:02:50,680
inny kolor w zależności od platformy, na której

31
00:02:50,780 --> 00:02:59,760
działamy, więc faktycznie importuję platformę z React Native tutaj, a następnie możemy sprawdzić platformę tutaj, a jeśli wersja systemu

32
00:02:59,870 --> 00:03:01,870
operacyjnego to Android, to

33
00:03:01,880 --> 00:03:04,970
wiem, że mam to stałe pole

34
00:03:05,000 --> 00:03:10,820
tła, dlatego ikona powinna być biała. Z drugiej strony w iOS tło nie jest

35
00:03:11,120 --> 00:03:19,090
wypełnione, jest przezroczyste, dlatego w iOS ustawię kolor mojej ikony na Kolory. podstawowy.

36
00:03:19,150 --> 00:03:27,490
Teraz możemy użyć tego, aby dodać ikonę tutaj na ekranie przeglądu produktów, tam w moich opcjach nawigacji,

37
00:03:27,490 --> 00:03:35,800
chcę dodać moją prawą sekcję nagłówka, więc ikonę po prawej stronie mojego nagłówka i do tego

38
00:03:35,800 --> 00:03:42,610
tutaj, musimy zaimportować kilka rzeczy, musimy zaimportować przyciski nagłówka i element z zainstalowanego pakietu

39
00:03:42,610 --> 00:03:44,660
przycisków nagłówka React.

40
00:03:44,800 --> 00:03:53,780
Oczywiście muszę też zaimportować własny przycisk nagłówka z przycisków nagłówka interfejsu użytkownika składników, więc ten składnik, w

41
00:03:53,780 --> 00:04:03,720
którym właśnie pracowaliśmy, a teraz na dole, nagłówek po prawej to przyciski nagłówka jako opakowanie, które może zawierać wiele

42
00:04:04,140 --> 00:04:10,950
elementów, ale dodam tylko jeden element, samozamykający się element, na przyciskach nagłówka, zanim

43
00:04:10,950 --> 00:04:17,430
przejdziemy do elementu, musimy ustawić składnik przycisku nagłówka równy przyciskowi nagłówka, więc

44
00:04:17,430 --> 00:04:23,820
tutaj mamy własny przycisk nagłówka. I przedmiot można teraz skonfigurować, powinien otrzymać tytuł, którym może

45
00:04:23,820 --> 00:04:24,290
być

46
00:04:24,340 --> 00:04:28,840
koszyk, powinien otrzymać nazwę ikony, a ja naprawdę chcę użyć innej ikony w zależności od

47
00:04:28,980 --> 00:04:34,590
platformy, na której działamy, dlatego w React Native ja zaimportuje platformę, co jest opcjonalne, możesz użyć jednej i

48
00:04:34,590 --> 00:04:39,270
tej samej ikony dla obu platform, ale myślę, że dobrze jest też mieć różne ikony.

49
00:04:39,270 --> 00:04:47,820
A potem tutaj sprawdzę system operacyjny platformy, a jeśli jest to Android, chcę użyć ikony koszyka md, która jest ikoną koszyka Ionicon do

50
00:04:47,820 --> 00:04:54,360
projektowania materiałów, w przeciwnym razie użyję ikony koszyka iOS i znowu znajdziesz wszystkie dostępne ikony z tej listy

51
00:04:54,360 --> 00:04:57,140
ikon Pokazałem wam wcześniej w trakcie kursu,

52
00:04:57,240 --> 00:05:03,540
listę ikon expo / ikon wektorowych i na koniec, ale nie tylko, gdy przedmiot zostanie wciśnięty, prawdopodobnie

53
00:05:03,540 --> 00:05:09,000
chcemy coś zrobić, a na razie nie robię nic oprócz nas Zmienię to wkrótce.

54
00:05:11,260 --> 00:05:12,850
Jeśli teraz to zapiszemy,

55
00:05:12,880 --> 00:05:13,500
powinniśmy

56
00:05:13,500 --> 00:05:15,220
zobaczyć tę ikonę tutaj,

57
00:05:15,280 --> 00:05:21,250
oto jest nasz koszyk, również na Androida, a teraz musimy tylko upewnić się, że po

58
00:05:21,340 --> 00:05:27,250
dotknięciu tego przejdziemy do ekranu naszego koszyka. W tym celu oczywiście musimy dodać logikę lub dane wyjściowe do ekranu koszyka.

59
00:05:27,880 --> 00:05:31,610
Więc wewnątrz ekranu koszyka mamy oczywiście normalny

60
00:05:31,720 --> 00:05:34,070
komponent React, więc

61
00:05:34,090 --> 00:05:43,420
importujemy React z React, importujemy również coś z React Native i że coś jest komponentem widoku, który

62
00:05:43,540 --> 00:05:48,120
może zawinąć nasz ekran, prawdopodobnie wyślemy jakiś tekst także.

63
00:05:48,380 --> 00:05:54,780
Będziemy tam wyświetlać kilka elementów koszyka, co możemy zrobić z płaską

64
00:05:54,800 --> 00:06:01,580
listą, aby mieć wbudowaną optymalizację, prawdopodobnie chcemy stylizować niektóre rzeczy za pomocą

65
00:06:01,670 --> 00:06:11,060
arkusza stylów, a także zaimportuję wbudowany komponent przycisku. Teraz mój ekran koszyka jest jak zawsze elementem React i ustawię ten

66
00:06:11,060 --> 00:06:16,910
obiekt stylów tutaj za pomocą arkusza stylów. Utwórz, abyśmy mogli stylizować ten komponent,

67
00:06:17,000 --> 00:06:21,030
a na koniec eksportujemy tutaj nasz ekran koszyka jako domyślny.

68
00:06:21,070 --> 00:06:24,930
Teraz możesz oczywiście zbudować ekran tego wózka w dowolny sposób, zbuduję go tak,

69
00:06:24,940 --> 00:06:32,640
abyśmy mieli widok i w tym widoku chcę mieć dwie główne sekcje. Najwyższa sekcja jest jak podsumowanie, gdzie

70
00:06:32,640 --> 00:06:37,660
widzę całkowitą kwotę i gdzie mam teraz przycisk zamówienia.

71
00:06:37,980 --> 00:06:43,050
To będzie w jednym rzędzie, więc będę mieć tutaj widok zagnieżdżony, w którym mogę umieszczać

72
00:06:43,590 --> 00:06:46,810
przedmioty obok siebie, w których mam tekst, w którym

73
00:06:46,810 --> 00:06:55,240
mówię suma, a potem tutaj znak dolara, a może moja całkowita cena. Możemy to również zagnieździć, możesz mieć zagnieżdżone komponenty

74
00:06:55,250 --> 00:07:03,620
tekstowe, jeśli pamiętasz bez problemów, aby nadać temu osobny kolor, na przykład, więc na razie

75
00:07:03,620 --> 00:07:08,670
mam kod stały 19. 99 tam, ale później będzie to wyprowadzane dynamicznie.

76
00:07:08,840 --> 00:07:10,330
Więc to

77
00:07:10,430 --> 00:07:18,610
jedna rzecz, a ponadto w tym samym wierszu tutaj chcę mieć przycisk z tytułem zamówienia, w

78
00:07:18,700 --> 00:07:26,120
którym mogę go nacisnąć, aby złożyć zamówienie, wyczyścić mój koszyk i dodać go do

79
00:07:26,120 --> 00:07:28,750
moich zamówień, którymi musimy

80
00:07:28,760 --> 00:07:38,200
jeszcze zarządzać i wyślij go na końcu ekranu zamówienia. Teraz poniżej tej sekcji podsumowującej chcę mieć płaską listę z moimi osobnymi produktami w koszyku,

81
00:07:38,200 --> 00:07:39,960
abyśmy mogli naprawdę zobaczyć,

82
00:07:39,970 --> 00:07:43,360
co jest w koszyku, jakie produkty tam są, ile jest każdego

83
00:07:43,360 --> 00:07:47,860
produktu, więc to kolejna rzecz wyjdzie tam. W tym momencie dodam tylko

84
00:07:47,860 --> 00:07:52,090
widok z tekstem koszyków jako symbol zastępczy, ale znowu będzie to płaska

85
00:07:52,090 --> 00:07:57,660
lista w przyszłości, ale zacznijmy od sumy tutaj. Aby uzyskać tę sumę, możemy skorzystać

86
00:07:57,660 --> 00:08:04,780
z Redux, ponieważ tam zarządzamy naszym koszykiem, więc możemy użyć selektora z React Redux, gdy nauczyłeś się

87
00:08:04,780 --> 00:08:10,810
pobierać dane z naszego sklepu i tutaj, mam całkowitą kwotę mojego koszyka, którą mogę

88
00:08:11,010 --> 00:08:21,360
otrzymać za pomocą selektora użycia z mojego stanu. wózek, plasterek. koszyk tutaj, ponieważ

89
00:08:21,390 --> 00:08:27,030
w aplikacji. Plik js w połączonych reduktorach, przypisałem tutaj klucz koszyka do mojego reduktora koszyka.

90
00:08:29,060 --> 00:08:33,160
Więc mam. koszyk, a następnie tam, wewnątrz

91
00:08:33,380 --> 00:08:40,780
reduktora koszyka, zarządzam moją kwotą całkowitą i polem całkowitej kwoty, więc do tego musimy uzyskać dostęp tutaj, całkowita kwota.

92
00:08:40,800 --> 00:08:45,570
Daje to całkowitą kwotę w koszyku i możemy teraz użyć tego na dole, a dzięki

93
00:08:45,730 --> 00:08:49,820
temu, aby upewnić się, że to również dobrze wygląda, czas na stylizację.

94
00:08:49,910 --> 00:08:56,450
Więc na najwyższym widoku tutaj dodam styl ekranu, może dlatego, że ostatecznie otacza

95
00:08:56,450 --> 00:08:57,680
on

96
00:08:57,680 --> 00:09:03,820
cały ekran, a następnie tutaj na tym widoku dodam styl podsumowania, ponieważ

97
00:09:03,920 --> 00:09:07,130
zawiera wszystkie elementy podsumowania, a następnie

98
00:09:09,710 --> 00:09:20,790
tutaj do tego tekstu dodam styl tekstu podsumowującego, a następnie dodam styl kwoty, abyśmy mogli stylizować ten tekst w różny sposób.

99
00:09:22,270 --> 00:09:23,930
W przypadku

100
00:09:23,950 --> 00:09:34,840
stylów, które chcę ustawić, przejdźmy do arkusza stylów i dodajmy ekran, podsumowanie, podsumowanie tekstu, a następnie, jak to nazwałam?

101
00:09:35,300 --> 00:09:41,820
ilość i, oczywiście, jak zawsze całkowicie zależy od ciebie, jak chcesz to teraz stylizować.

102
00:09:41,820 --> 00:09:47,400
Teraz zacznę od ekranu, w końcu chcę wziąć pełny rozmiar ekranu, jeśli potrzebujemy później

103
00:09:47,400 --> 00:09:54,420
z płaską listą, ale zacznę od prostej i powiem tylko, że chcę mieć margines we wszystkim kierunki faktycznie

104
00:09:54,420 --> 00:10:03,390
tutaj z 20, więc wokół wszystkiego, więc wokół jest trochę miejsca. Następnie tutaj podsumowanie, które jest naszym pudełkiem ze wszystkimi

105
00:10:03,390 --> 00:10:09,210
pozycjami tam z zamówieniem teraz, a nasz tekst powinien używać elastycznego kierunku

106
00:10:09,210 --> 00:10:12,820
wiersza, aby pozycjonować elementy w jednym rzędzie.

107
00:10:12,870 --> 00:10:19,950
Poszedłem, aby wyrównać elementy na środku, aby upewnić się, że są wyśrodkowane w pionie i

108
00:10:20,040 --> 00:10:28,670
na głównej osi. Chcę użyć justowania przestrzeni między nimi, aby elementy miały wolne miejsce między nimi, a elementy to

109
00:10:28,670 --> 00:10:35,040
ten tekst tutaj i ten przycisk. Poza tym możemy dodać tutaj trochę marginesu,

110
00:10:35,040 --> 00:10:36,360
być może

111
00:10:36,360 --> 00:10:42,540
również 20, co jest szczególnie ważne, aby mieć trochę odstępu między podsumowaniem a naszą płaską

112
00:10:42,540 --> 00:10:49,990
listą, dlatego faktycznie użyję dolnego marginesu, aby mieć tylko margines na dole i chcę dodać tutaj dopełnienie o

113
00:10:49,990 --> 00:10:55,030
wartości 10, ponieważ podsumowanie powinno być w pewnym sensie w podwyższonym polu,

114
00:10:55,030 --> 00:11:05,050
a dla tego pola tutaj przejdę do elementu produktu i skopiuję mój zestaw cieni tutaj i ramkę promień może mam tutaj i kolor tła,

115
00:11:05,770 --> 00:11:12,030
dzięki czemu mam taki sam wygląd tutaj w koszyku i to oczywiście zależy od ciebie,

116
00:11:12,040 --> 00:11:16,020
czy tego chcesz, czy nie, ale skopiuję to tam.

117
00:11:17,420 --> 00:11:27,410
W przypadku tekstu podsumowującego chcę teraz użyć rodziny czcionek otwartych bez pogrubienia, aby naprawdę podświetlić tę sumę i rozmiar

118
00:11:27,980 --> 00:11:33,290
czcionki 18, a dla ilości tekstu w nim ustawię

119
00:11:33,290 --> 00:11:36,880
kolor na kolory. kolor akcentu.

120
00:11:36,890 --> 00:11:44,160
Teraz, dla tego ważnego, oczywiście, musisz zaimportować kolory z folderu stałych, a następnie używam akcentu, a

121
00:11:44,150 --> 00:11:50,710
nie podstawowego, aby naprawdę się wyróżnić. Aby zobaczyć, czy to wygląda tak, jak chcemy,

122
00:11:50,710 --> 00:11:55,660
musimy upewnić się, że naciśnięcie tego przycisku nagłówka na ekranie przeglądu produktu faktycznie prowadzi

123
00:11:55,660 --> 00:11:59,520
nas do ekranu koszyka i do tego potrzebne są dwie rzeczy.

124
00:11:59,800 --> 00:12:04,510
Po pierwsze, musimy nawigować tutaj, ale zanim to zrobimy,

125
00:12:04,510 --> 00:12:11,890
musimy zarejestrować ekran koszyka w naszym nawigatorze. Zrobię to najpierw, nic dziwnego, że zaimportuję tutaj mój ekran

126
00:12:11,890 --> 00:12:17,980
koszyka z folderu ekranów, z folderu sklepu i tam z ekranu koszyka, a teraz jest to trzeci ekran,

127
00:12:17,980 --> 00:12:26,350
który dodaję tutaj do tego nawigatora stosu, punktów koszyka na ekranie koszyka . Po dodaniu tej konfiguracji tutaj możemy wrócić do ekranu przeglądu

128
00:12:26,350 --> 00:12:33,220
produktu i tam potrzebujemy teraz tej funkcjonalnej formy dla opcji nawigacji, ponieważ dane nawigacyjne pozwalają nam

129
00:12:33,220 --> 00:12:37,670
na skorzystanie z propozycji nawigacji i wywołanie nawigacji, dlatego musimy

130
00:12:37,990 --> 00:12:41,240
to zawinąć w innym obiekcie, który zwracamy,

131
00:12:41,300 --> 00:12:50,610
a następnie tutaj możemy wywołać navData. nawigacja. nawiguj i tam, idę do koszyka,

132
00:12:50,700 --> 00:12:54,950
a to jest oczywiście identyfikator, który właśnie wybrałem w

133
00:12:55,050 --> 00:12:58,530
nawigatorze sklepu, tutaj. Z tym, zobaczmy, jeśli

134
00:12:58,580 --> 00:13:01,050
kliknę tutaj, oto jesteśmy, to moja

135
00:13:01,050 --> 00:13:01,740
suma,

136
00:13:01,740 --> 00:13:03,030
właściwie myślę,

137
00:13:03,030 --> 00:13:06,610
że kolor akcentu nie jest tam tak świetny,

138
00:13:06,780 --> 00:13:13,170
więc wrócę do ekranu koszyka i stylizuję to, aby użyć podstawowy kolor również, ale najważniejsze,

139
00:13:15,490 --> 00:13:22,060
że możemy tam pójść i jeśli teraz spróbuję dodać przedmioty do koszyka, dodałem koszulę dwa razy

140
00:13:22,060 --> 00:13:29,400
i dywan raz, ta całkowita ilość wygląda mi dobrze. Spróbujmy również tego na Androidzie, aby upewnić się,

141
00:13:29,400 --> 00:13:35,700
że tam również działa i ogólnie działa, dodam jeszcze jedną czerwoną koszulę, dlatego widzimy

142
00:13:35,700 --> 00:13:41,730
tutaj problem ze sposobem wyświetlania. Aby to naprawić, na ekranie koszyka upewnij się, że w cenie

143
00:13:41,760 --> 00:13:48,600
zawsze wypisujemy po prostu dwa miejsca po przecinku w kwocie z do stałej. Nawiasem mówiąc, jeśli zastanawiasz się, skąd to

144
00:13:48,600 --> 00:13:51,350
się wzięło, ta długa liczba,

145
00:13:51,540 --> 00:13:57,150
to nie jest błąd ani nic tak naprawdę React Native, jest

146
00:13:57,150 --> 00:14:05,080
to normalne zachowanie JavaScript, gdy pracujesz z liczbami zmiennoprzecinkowymi i oczywiście do naprawy nie należy tutaj

147
00:14:05,110 --> 00:14:11,440
wywoływać stylu, ale całkowitą kwotę koszyka. Więc to było normalne zachowanie, a

148
00:14:11,440 --> 00:14:18,530
nie błąd. W ten sposób JavaScript wewnętrznie przechowuje liczby zmiennoprzecinkowe, które można powiedzieć, ale teraz upewniamy

149
00:14:18,530 --> 00:14:29,830
się, że są one poprawnie generowane z dokładnością do dwóch miejsc po przecinku. Brakuje mi przycisku i tutaj chcę teraz użyć koloru, akcentu kolorystycznego,

150
00:14:30,760 --> 00:14:37,190
aby mieć przycisk koloru akcentu. Więc jeśli teraz przejdę do mojego koszyka tutaj na iOS, tak właśnie

151
00:14:38,920 --> 00:14:41,500
wygląda ten przycisk, tak teraz wygląda na Androidzie.

152
00:14:41,590 --> 00:14:46,690
Zawsze możemy to nacisnąć, oczywiście chcę to wyłączyć, jeśli jednak nic nie ma w

153
00:14:46,990 --> 00:14:55,090
koszyku i do tego musimy teraz również zdobyć przedmioty z koszyka. Tak więc przedmioty koszykowe można również pobrać za pomocą

154
00:14:55,090 --> 00:15:01,320
selektora użycia, również z wycinka wózka, ale tam interesują nas rekwizyty z reduktora wózka.

155
00:15:01,320 --> 00:15:09,150
Więc jeśli spojrzę na reduktor wózka, zobaczysz, że mamy właściwość przedmiotów.

156
00:15:09,310 --> 00:15:11,260
To jest obiekt, który teraz

157
00:15:11,270 --> 00:15:18,280
pobieram, więc przedmioty koszykowe to obiekt, a nie tablica, w rzeczywistości tablica byłaby dla mnie lepsza i dlatego użyję długiej

158
00:15:18,370 --> 00:15:25,750
formy do uzyskania tego i zwrócę tablicę tutaj, a nie przedmiot. Możemy więc pobrać tutaj nasze przekształcone elementy

159
00:15:25,750 --> 00:15:36,260
koszyka, na przykład tworząc nową tablicę wewnątrz tej funkcji selektora, a następnie możemy dodać pętlę for / in, aby przejść przez

160
00:15:36,260 --> 00:15:43,910
wszystkie klucze w stanie. wózek. przedmiotów, aby przejść przez

161
00:15:43,910 --> 00:15:47,120
wszystkie pary klucz-wartość w tym obiekcie przedmiotów

162
00:15:47,120 --> 00:15:51,200
w koszyku, który tam mamy, i chcę dodać każdą

163
00:15:52,950 --> 00:16:01,030
z nich jako przedmiot do przekształconych przedmiotów w koszyku. Więc popchnę obiekt JavaScript, który ma identyfikator produktu, powiedzmy, który jest

164
00:16:01,060 --> 00:16:06,850
tylko moim kluczem, ponieważ w obiekcie przedmiotów koszyka identyfikatora identyfikator produktu jest przechowywany jako klucz,

165
00:16:06,850 --> 00:16:07,930
jeśli pamiętasz,

166
00:16:07,930 --> 00:16:14,320
więc teraz dodam go do właściwości identyfikatora produktu w tym obiekcie dodaję do tablicy transformowanych koszyków, a

167
00:16:15,300 --> 00:16:27,240
poza tym będę miał tytuł mojego produktu, który oczywiście jest. wózek. elementy dla danego

168
00:16:27,240 --> 00:16:30,550
klucza. productTitle.

169
00:16:30,650 --> 00:16:37,900
Jeśli spojrzysz na model koszyka, zobaczysz, że tam tytuł produktu i cena produktu to nazwy własności, które

170
00:16:37,900 --> 00:16:41,510
zawierają tytuł produktu i cenę produktu, więc w

171
00:16:41,560 --> 00:16:43,570
ten sposób uzyskujemy dostęp do

172
00:16:43,570 --> 00:16:49,790
obu, więc zrobię to samo tutaj dla ceny produktu, a następnie potrzebuję również ilości,

173
00:16:49,790 --> 00:16:58,770
która jest stanem. wózek. elementy dla danego klucza. ilość i oczywiście także suma, która jest stanem. wózek. przedmiotów. klawisz. Podsumowując, znowu w zasadzie to, co mieliśmy tutaj w koszyku.

174
00:16:58,770 --> 00:17:05,640
Mówię więc, że tworzę nowy

175
00:17:05,640 --> 00:17:10,260
element koszyka, ale nie z moim modelem, ponieważ jest to element

176
00:17:10,260 --> 00:17:17,690
koszyka z dodatkową właściwością ID produktu, więc mam go tutaj, a teraz jest to tablica przekształconych elementów koszyka które

177
00:17:17,690 --> 00:17:24,300
zwracam po tym dla pętli, aby ten selektor na końcu zwracał tablicę, a nie obiekt, więc

178
00:17:24,330 --> 00:17:25,850
elementy koszyka są

179
00:17:26,040 --> 00:17:32,760
teraz tablicą, która ułatwia nam korzystanie z niej na płaskiej liście, a także pozwala nam sprawdzić tutaj,

180
00:17:32,760 --> 00:17:38,730
w przycisku Zamów teraz, czy chcemy go wyłączyć, po prostu sprawdzając długość tej tablicy, którą

181
00:17:39,210 --> 00:17:41,000
mamy teraz w koszyku.

182
00:17:41,010 --> 00:17:42,720
Więc tutaj, na przycisku, możemy

183
00:17:43,170 --> 00:17:49,260
ustawić wyłączoną podpórkę, którą obsługuje na szczęście, jest to wbudowany komponent, który po prostu ma wyłączoną podpórkę i

184
00:17:49,260 --> 00:17:56,790
tam mogę sprawdzić, czy długość elementów koszyka jest równa zero, jeśli tak, to ja wiem, że jest pusty i wtedy naprawdę chcę wyłączyć przycisk. Tak więc wyłączone otrzymuje wartość prawda lub fałsz, domyślnie jest to fałsz, ale ustawię wartość true, jeśli

185
00:17:56,790 --> 00:18:01,650
długość elementów koszyka wynosi 0. A teraz widzisz, jeśli przejdę

186
00:18:01,730 --> 00:18:08,020
do ekranu koszyka, to jest wyłączone, jeśli

187
00:18:08,020 --> 00:18:16,800
jednak dodam produkt i tam przejdę, to jest włączone i oczywiście możesz również użyć innego koloru przycisku zamówienia teraz, jeśli chcesz.

188
00:18:16,890 --> 00:18:20,540
Teraz jesteśmy o krok bliżej do

189
00:18:20,550 --> 00:18:26,580
gotowych wózków i oczywiście następnym celem jest wyprowadzenie przedmiotów z koszyka.