1
00:00:02,190 --> 00:00:07,590
Untuk menambahkan item tindakan ke header, saya akan melakukan sesuatu yang saya lakukan di bagian navigasi juga, di folder

2
00:00:07,800 --> 00:00:09,480
komponen, saya ingin menambahkan tombol

3
00:00:09,660 --> 00:00:11,470
header saya sendiri dan sekarang untuk

4
00:00:11,550 --> 00:00:17,160
ini, saya akan menambahkan subfolder baru di di sana saya akan beri nama UI dan ide saya di sini sederhana.

5
00:00:17,580 --> 00:00:23,340
Saya memiliki folder toko yang menampung semua komponen yang saya gunakan di toko

6
00:00:23,340 --> 00:00:30,090
saya, yang menampilkan beberapa informasi terkait toko. Dalam folder UI, saya ingin memiliki beberapa

7
00:00:30,090 --> 00:00:35,580
blok bangunan UI umum yang tentu saja saya juga gunakan dalam aplikasi toko

8
00:00:35,610 --> 00:00:42,240
ini tetapi yang tidak benar-benar fokus pada keluaran data toko atau produk terkait tetapi yang hanya

9
00:00:42,270 --> 00:00:51,680
ada di sana untuk memberikan beberapa gaya atau tata letak default dan itu di folder UI ini di mana saya akan menambahkan

10
00:00:53,540 --> 00:01:02,330
tombol tajuk saya sendiri dengan masuk ke sana dan mengimpor Bereaksi dari Bereaksi dan kemudian mengimpor tombol tajuk dari tombol navigasi

11
00:01:02,330 --> 00:01:10,370
Navigasi, paket ini saya instal di awal modul, jika Anda belum melakukan ini , pastikan Anda dapat menginstal paket

12
00:01:11,090 --> 00:01:15,760
ini dan kemudian mengimpor ion dari @ expo / ikon-ikon.

13
00:01:15,850 --> 00:01:23,640
Sekarang untuk menjadi super yakin bahwa Anda telah menginstalnya, jalankan npm install --save @ expo / vector-icons, sehingga paket

14
00:01:23,640 --> 00:01:26,220
ini tersedia di proyek Anda.

15
00:01:26,220 --> 00:01:28,070
Ini adalah impor yang saya butuhkan di

16
00:01:28,110 --> 00:01:35,990
sini, sekarang saya juga ingin mengimpor warna saya dari folder konstanta dan di sana, warnanya. File js dan sekarang di sini, saya akan

17
00:01:35,990 --> 00:01:43,880
menambahkan komponen tombol tajuk kustom saya yang merupakan komponen Bereaksi normal pada akhirnya yang menerima alat peraga dan

18
00:01:43,880 --> 00:01:51,390
perlu mengembalikan beberapa jsx dan saya tentu saja akan mengekspor tombol tajuk kustom saya di sini di

19
00:01:51,390 --> 00:01:58,020
akhir dan sekarang jsx yang dikembalikan ini di sini adalah tombol tajuk yang saya impor

20
00:01:58,020 --> 00:02:05,090
dari tombol navigasi Navigasi Tolak tapi saya harus mengkonfigurasinya dengan cara tertentu, gunakan tombol tajuk di

21
00:02:05,190 --> 00:02:10,280
sini dari tombol navigasi Navigasi. Untuk satu, ini harus menerima semua alat peraga

22
00:02:10,280 --> 00:02:15,310
yang kami dapatkan di sini, jadi kami hanya meneruskan itu tetapi di samping itu, saya akan mengatur komponen

23
00:02:15,320 --> 00:02:18,460
ikon saya di sini untuk Ionicons, sehingga kami selalu menggunakan Ionicons untuk

24
00:02:18,470 --> 00:02:24,670
merender itu dan tentu saja Anda dapat menggunakan salah satu dari set ikon vektor yang berbeda disediakan oleh @ expo / vektor-ikon juga.

25
00:02:24,860 --> 00:02:30,800
Saya akan mengatur ukuran ikon menjadi 23 yang saya temukan bekerja dengan sangat baik, tetapi tentu saja Anda dapat bereksperimen

26
00:02:30,800 --> 00:02:33,140
dengan nilai yang berbeda di sini, juga

27
00:02:33,140 --> 00:02:40,370
mungkin jika Anda menggunakan set ikon yang berbeda, cobalah ukuran ikon yang berbeda. Dan untuk warnanya, itu tergantung karena pada Android, kami

28
00:02:40,490 --> 00:02:41,990
memiliki latar belakang

29
00:02:41,990 --> 00:02:47,150
merah di sini, untuk iOS belum, jadi kami perlu mengatur warna berbeda

30
00:02:47,150 --> 00:02:50,680
berdasarkan platform yang kami jalankan, jadi saya akan

31
00:02:50,780 --> 00:02:59,760
sebenarnya mengimpor platform dari React Native di sini dan kemudian kita dapat memeriksa platform di sini dan jika versi OS adalah

32
00:02:59,870 --> 00:03:01,870
Android, maka saya tahu

33
00:03:01,880 --> 00:03:04,970
saya memiliki latar belakang bidang padat ini,

34
00:03:05,000 --> 00:03:10,820
oleh karena itu ikonnya harus berwarna putih. Di iOS di sisi lain, latar belakangnya tidak terisi,

35
00:03:11,120 --> 00:03:19,090
transparan dan karenanya di iOS, saya akan mengatur warna ikon saya menjadi Colors. utama.

36
00:03:19,150 --> 00:03:26,980
Sekarang kita dapat menggunakannya untuk menambahkan ikon di sini di layar ikhtisar produk, di sana di opsi navigasi saya

37
00:03:26,980 --> 00:03:27,490
di

38
00:03:27,490 --> 00:03:35,800
sini, saya ingin menambahkan bagian kanan tajuk saya, jadi ikon di sebelah kanan tajuk saya dan untuk itu di sini,

39
00:03:35,800 --> 00:03:42,610
kita perlu mengimpor beberapa hal, kita perlu mengimpor tombol dan item header dari paket Header navigasi

40
00:03:42,610 --> 00:03:44,660
tombol Bereaksi yang kita instal.

41
00:03:44,800 --> 00:03:53,780
Saya tentu saja juga perlu mengimpor tombol header saya sendiri dari komponen tombol header UI, jadi komponen ini kami hanya

42
00:03:53,780 --> 00:04:03,720
bekerja di dan sekarang di sana, header kanan adalah tombol header sebagai pembungkus untuk mungkin memiliki beberapa item di sana tetapi saya

43
00:04:04,140 --> 00:04:10,950
hanya akan menambahkan satu item, elemen penutup diri, pada tombol header sebelum kita melanjutkan dengan

44
00:04:10,950 --> 00:04:17,430
item, kita harus mengatur komponen tombol header sama dengan tombol header, jadi untuk

45
00:04:17,430 --> 00:04:23,820
tombol header kita sendiri di sini. Dan item tersebut sekarang dapat dikonfigurasikan, ia harus menerima judul yang

46
00:04:23,820 --> 00:04:24,290
dapat

47
00:04:24,340 --> 00:04:28,840
menjadi troli, ia harus menerima nama ikon dan saya benar-benar ingin menggunakan ikon yang berbeda berdasarkan

48
00:04:28,980 --> 00:04:34,590
platform yang kami jalankan, jadi dari React Native, saya akan mengimpor platform, itu opsional, Anda bisa menggunakan satu dan ikon

49
00:04:34,590 --> 00:04:39,270
yang sama untuk kedua platform tapi saya pikir itu juga terlihat bagus untuk memiliki ikon yang berbeda.

50
00:04:39,270 --> 00:04:47,820
Dan kemudian di sini, saya akan memeriksa platform OS dan jika itu Android, maka saya ingin menggunakan ikon keranjang md yang merupakan ikon keranjang Ionicon

51
00:04:47,820 --> 00:04:54,360
untuk desain material dan jika tidak saya akan menggunakan ikon keranjang iOS dan lagi Anda dapat menemukan semua tersedia

52
00:04:54,360 --> 00:04:57,140
ikon dalam daftar ikon ini yang saya

53
00:04:57,240 --> 00:05:03,540
tunjukkan sebelumnya dalam kursus, daftar ikon ikon / ikon pameran dan yang terakhir ketika item ditekan, kita mungkin

54
00:05:03,540 --> 00:05:09,000
ingin melakukan sesuatu dan untuk saat ini, saya tidak melakukan apa-apa selain kita akan segera mengubahnya.

55
00:05:11,260 --> 00:05:12,850
Jika sekarang kita menyimpan

56
00:05:12,880 --> 00:05:13,500
ini,

57
00:05:13,500 --> 00:05:15,220
kita harus melihat ikon ini

58
00:05:15,280 --> 00:05:21,250
di sini, ini dia, ini keranjang kami, juga di Android dan sekarang kita hanya harus memastikan bahwa ketika

59
00:05:21,340 --> 00:05:27,250
kita mengetuk ini, kita dibawa ke layar keranjang kita. Untuk itu tentu saja, kita harus menambahkan beberapa logika atau keluaran ke layar keranjang.

60
00:05:27,880 --> 00:05:31,610
Jadi di dalam layar keranjang, kami tentu saja

61
00:05:31,720 --> 00:05:34,070
memiliki komponen Bereaksi normal, jadi

62
00:05:34,090 --> 00:05:43,420
kami mengimpor Bereaksi dari Bereaksi, kami juga mengimpor sesuatu dari Bereaksi Asli dan bahwa sesuatu adalah komponen tampilan untuk membungkus layar

63
00:05:43,540 --> 00:05:48,120
kami mungkin, kami mungkin akan menampilkan beberapa teks demikian juga.

64
00:05:48,380 --> 00:05:54,780
Kami akan memiliki beberapa item keranjang yang terdaftar di sana yang dapat kami

65
00:05:54,800 --> 00:06:01,580
lakukan dengan daftar datar untuk memiliki optimasi bawaan, mungkin ingin menata beberapa hal dengan

66
00:06:01,670 --> 00:06:11,060
stylesheet dan saya juga akan mengimpor komponen tombol bawaan. Sekarang layar kereta saya di sini seperti biasa adalah komponen Bereaksi dan saya akan

67
00:06:11,060 --> 00:06:16,910
mengatur objek gaya ini di sini dengan Stylesheet. buat sehingga kami dapat menata komponen ini juga

68
00:06:17,000 --> 00:06:21,030
dan pada akhirnya, kami mengekspor layar keranjang kami di sini sebagai default.

69
00:06:21,070 --> 00:06:24,930
Sekarang Anda tentu saja dapat membangun layar kereta ini dengan cara apa pun yang Anda inginkan, saya akan

70
00:06:24,940 --> 00:06:32,640
membuatnya sedemikian rupa sehingga kami memiliki pandangan dan dalam pandangan itu, saya ingin memiliki dua bagian utama. Bagian paling atas adalah seperti ringkasan tempat saya

71
00:06:32,640 --> 00:06:37,660
melihat jumlah total dan di mana saya memiliki tombol pesanan sekarang.

72
00:06:37,980 --> 00:06:43,050
Ini akan berada dalam satu baris, jadi saya akan memiliki tampilan bersarang di sini di mana saya dapat memposisikan item

73
00:06:43,590 --> 00:06:46,810
di samping satu sama lain di mana saya memiliki seperti teks di

74
00:06:46,810 --> 00:06:55,240
mana saya mengatakan total dan kemudian di sini tanda dolar dan kemudian harga total saya mungkin. Kami juga dapat membuat sarang ini, Anda dapat

75
00:06:55,250 --> 00:07:03,620
memiliki komponen teks bersarang jika Anda ingat tanpa masalah untuk memberikan warna yang terpisah misalnya, jadi untuk

76
00:07:03,620 --> 00:07:08,670
sekarang saya hardcode 19. 99 di sana tetapi nanti ini akan diturunkan secara dinamis.

77
00:07:08,840 --> 00:07:10,330
Jadi itu

78
00:07:10,430 --> 00:07:18,610
satu hal dan sebagai tambahan di baris yang sama di sini, saya ingin memiliki tombol dengan judul

79
00:07:18,700 --> 00:07:26,120
pesanan sekarang di mana saya dapat menekannya untuk melakukan pemesanan, membersihkan keranjang saya dan menambahkan

80
00:07:26,120 --> 00:07:28,750
ini ke pesanan saya yang

81
00:07:28,760 --> 00:07:38,200
belum kami kelola dan output pada layar urutan pada akhirnya. Sekarang di bawah bagian ringkasan ini, saya ingin memiliki daftar datar dengan item keranjang terpisah saya, sehingga kita dapat

82
00:07:38,200 --> 00:07:39,960
benar-benar melihat apa yang ada di

83
00:07:39,970 --> 00:07:43,360
keranjang, produk mana yang ada di sana, berapa banyak setiap produk di sana, jadi

84
00:07:43,360 --> 00:07:47,860
itu hal lain yang saya akan menampilkan di sana. Untuk saat ini di sini, saya hanya akan

85
00:07:47,860 --> 00:07:52,090
menambahkan tampilan dengan teks item keranjang sebagai pengganti tetapi sekali lagi, ini akan menjadi daftar datar

86
00:07:52,090 --> 00:07:57,660
di masa depan tetapi mari kita mulai dengan totalnya di sini. Untuk mendapatkan total itu, kita dapat memanfaatkan

87
00:07:57,660 --> 00:08:04,780
Redux karena di sana kita mengelola keranjang kita, sehingga kita dapat menggunakan pemilih penggunaan dari React Redux ketika Anda belajar

88
00:08:04,780 --> 00:08:10,810
untuk mendapatkan data dari toko kami dan di sini, saya memiliki jumlah total keranjang saya mungkin yang

89
00:08:11,010 --> 00:08:21,360
saya dapatkan dengan bantuan pemilih penggunaan dari negara saya. gerobak, iris. kereta di sini karena

90
00:08:21,390 --> 00:08:27,030
di app. File js dalam pengurang gabungan, saya menetapkan kunci keranjang di sini untuk peredam keranjang saya.

91
00:08:29,060 --> 00:08:33,160
Jadi di sini saya punya. gerobak dan kemudian di sana,

92
00:08:33,380 --> 00:08:40,780
di dalam peredam gerobak, saya mengelola jumlah total dan bidang jumlah total sehingga itulah yang perlu kita akses di sini, jumlah total.

93
00:08:40,800 --> 00:08:45,570
Ini memberikan jumlah total keranjang dan sekarang kita dapat menggunakannya di sana dan dengan

94
00:08:45,730 --> 00:08:49,820
itu untuk memastikan bahwa ini juga terlihat bagus, saatnya untuk beberapa gaya.

95
00:08:49,910 --> 00:08:56,450
Jadi pada tampilan paling atas di sini, saya akan menambahkan gaya layar mungkin karena ini membungkus

96
00:08:56,450 --> 00:08:57,680
seluruh layar

97
00:08:57,680 --> 00:09:03,820
pada akhirnya, maka di sini pada tampilan itu, saya akan menambahkan gaya ringkasan karena

98
00:09:03,920 --> 00:09:07,130
itu menampung semua item ringkasan, lalu di sini

99
00:09:09,710 --> 00:09:20,790
pada teks ini, saya akan menambahkan gaya teks ringkasan dan kemudian di sini, saya akan menambahkan gaya jumlah, sehingga kita bisa gaya teks jumlah ini berbeda.

100
00:09:22,270 --> 00:09:23,930
Jadi untuk style

101
00:09:23,950 --> 00:09:34,840
yang ingin saya atur, mari kita pergi ke stylesheet dan menambahkan layar, ringkasan, teks ringkasan dan kemudian, apa yang saya beri nama?

102
00:09:35,300 --> 00:09:41,820
jumlah dan tentu saja itu sepenuhnya terserah Anda bagaimana Anda sekarang ingin gaya ini.

103
00:09:41,820 --> 00:09:47,400
Sekarang saya akan mulai dengan layar, pada akhirnya saya ingin mengambil ukuran layar penuh jika kita perlu dengan

104
00:09:47,400 --> 00:09:54,420
daftar datar nanti tapi saya akan mulai dengan sederhana dan kami hanya akan mengatakan bahwa saya ingin memiliki margin dalam semua arah sebenarnya di

105
00:09:54,420 --> 00:10:03,390
sini dari 20, jadi di sekitar segalanya, sehingga ada beberapa ruang di sekitar segalanya. Kemudian di sini, ringkasan yang merupakan kotak kami dengan semua

106
00:10:03,390 --> 00:10:09,210
item di sana dengan pesanan sekarang dan teks kami harus menggunakan arah baris

107
00:10:09,210 --> 00:10:12,820
yang fleksibel untuk memposisikan item dalam satu baris.

108
00:10:12,870 --> 00:10:19,950
Saya pergi untuk menyelaraskan item di tengah untuk memastikan mereka terpusat secara vertikal dan pada poros

109
00:10:20,040 --> 00:10:28,670
utama mereka, saya ingin menggunakan justifikasi ruang konten di antara sehingga item memiliki ruang kosong di antara mereka dan item adalah

110
00:10:28,670 --> 00:10:35,040
teks ini di sini dan tombol ini. Selain itu, kita dapat menambahkan sedikit margin di sini,

111
00:10:35,040 --> 00:10:36,360
mungkin juga dari

112
00:10:36,360 --> 00:10:42,540
20 yang sebagian besar penting juga untuk memiliki jarak antara ringkasan dan daftar datar kami, oleh karena itu

113
00:10:42,540 --> 00:10:49,990
saya akan benar-benar menggunakan margin bawah di sini untuk hanya memiliki beberapa margin ke bawah dan saya ingin menambahkan padding 10

114
00:10:49,990 --> 00:10:55,030
di sini karena rangkumannya harus berupa dalam kotak yang ditinggikan dan untuk kotak ini

115
00:10:55,030 --> 00:11:05,050
di sini, saya akan pergi ke komponen item produk saya dan saya akan menyalin bayangan saya mengatur di sini dan perbatasan radius mungkin saya miliki di sini dan warna

116
00:11:05,770 --> 00:11:12,030
latar belakang, sehingga saya memiliki tampilan yang sama di sini di kereta dan itu tentu saja terserah Anda

117
00:11:12,040 --> 00:11:16,020
apakah Anda menginginkannya atau tidak, tetapi saya akan menyalinnya di sana.

118
00:11:17,420 --> 00:11:27,410
Untuk teks ringkasan, sekarang saya ingin menggunakan keluarga font open sans bold untuk benar-benar menyorot total ini dan ukuran font

119
00:11:27,980 --> 00:11:33,290
18 dan untuk jumlah teks di sana, saya akan mengatur

120
00:11:33,290 --> 00:11:36,880
warna ke warna. Aksen warna.

121
00:11:36,890 --> 00:11:44,160
Sekarang untuk yang penting tentu saja, Anda perlu mengimpor warna dari folder konstanta dan kemudian saya menggunakan aksen

122
00:11:44,150 --> 00:11:50,710
dan bukan yang utama agar benar-benar menonjol. Untuk melihat apakah itu tampak seperti yang kita inginkan,

123
00:11:50,710 --> 00:11:55,660
kita perlu memastikan bahwa mengetuk tombol tajuk ini di layar gambaran umum produk kita benar-benar

124
00:11:55,660 --> 00:11:59,520
membawa kita ke layar kereta dan untuk itu, diperlukan dua hal.

125
00:11:59,800 --> 00:12:04,510
Pertama, kita perlu menavigasi di sini tetapi sebelum kita bisa melakukannya,

126
00:12:04,510 --> 00:12:11,890
kita perlu mendaftarkan layar kereta di navigator kita. Jadi saya akan melakukan itu dulu, saya akan mengimpor layar kereta saya

127
00:12:11,890 --> 00:12:17,980
di sini dari folder layar tidak mengejutkan, dari folder toko dan di sana dari layar kereta dan sekarang itu layar ketiga

128
00:12:17,980 --> 00:12:26,350
saya tambahkan di sini ke navigator tumpukan ini, titik kereta di layar kereta . Dengan pengaturan yang ditambahkan di sini, kita dapat kembali ke layar

129
00:12:26,350 --> 00:12:33,220
ikhtisar produk dan di sana, kita sekarang memerlukan formulir fungsional untuk opsi navigasi karena data nav kemudian memungkinkan

130
00:12:33,220 --> 00:12:37,670
kita untuk memasuki prop navigasi dan navigasi panggilan, maka kita perlu membungkus

131
00:12:37,990 --> 00:12:41,240
ini di objek lain yang kita kembali dan

132
00:12:41,300 --> 00:12:50,610
kemudian di sini kita dapat memanggil navData. navigasi. navigasi dan di sana, saya pergi ke troli dan

133
00:12:50,700 --> 00:12:54,950
ini tentu saja adalah pengidentifikasi yang baru saja saya pilih di toko navigator

134
00:12:55,050 --> 00:12:58,530
di sini, yang ini. Dengan itu, mari kita lihat,

135
00:12:58,580 --> 00:13:01,050
jika saya klik di sini, ini dia,

136
00:13:01,050 --> 00:13:01,740
ini

137
00:13:01,740 --> 00:13:03,030
adalah total saya,

138
00:13:03,030 --> 00:13:06,610
saya benar-benar berpikir warna aksen tidak terlalu bagus di sana,

139
00:13:06,780 --> 00:13:13,170
jadi saya akan benar-benar kembali ke layar kereta dan gaya ini untuk menggunakan warna primer juga tetapi yang

140
00:13:15,490 --> 00:13:22,060
utama adalah kita bisa pergi ke sana dan jika sekarang saya mencoba menambahkan item ke troli, saya menambahkan baju

141
00:13:22,060 --> 00:13:29,400
dua kali dan karpet sekali, jumlah total terlihat bagus untuk saya. Mari kita coba juga ini di Android tentu saja untuk memastikan

142
00:13:29,400 --> 00:13:35,700
itu bekerja di sana juga dan umumnya berfungsi, saya menambahkan satu lagi kaos merah dan karena itu di sini

143
00:13:35,700 --> 00:13:41,730
kita juga melihat masalah dengan cara ini ditampilkan. Untuk memperbaikinya, pada layar keranjang, pastikan bahwa pada harga, kami

144
00:13:41,760 --> 00:13:48,600
selalu hanya menampilkan dua tempat desimal pada jumlah yang harus diperbaiki juga. Ngomong-ngomong jika Anda bertanya-tanya dari mana asalnya, angka

145
00:13:48,600 --> 00:13:51,350
yang panjang ini, ini bukan

146
00:13:51,540 --> 00:13:57,150
bug atau tidak ada yang benar-benar untuk Bereaksi Asli, ini adalah perilaku Javascript

147
00:13:57,150 --> 00:14:05,080
normal ketika Anda bekerja dengan angka floating point dan tentu saja untuk memperbaiki tidak boleh dipanggil pada gaya

148
00:14:05,110 --> 00:14:11,440
di sini tetapi pada jumlah total keranjang. Jadi ini adalah perilaku normal, bukan

149
00:14:11,440 --> 00:14:18,530
bug, ini adalah bagaimana Javascript secara internal menyimpan angka floating point yang bisa Anda katakan, tetapi

150
00:14:18,530 --> 00:14:29,830
sekarang kami memastikan bahwa ini adalah output yang benar dengan dua tempat desimal. Yang hilang adalah tombol dan di sini saya sekarang benar-benar ingin menggunakan warna, warna

151
00:14:30,760 --> 00:14:37,190
aksen untuk memiliki tombol berwarna aksen saya. Jadi jika saya sekarang pergi ke troli saya di sini di iOS, ini adalah

152
00:14:38,920 --> 00:14:41,500
bagaimana tombolnya terlihat di sana, ini sekarang terlihat seperti di Android.

153
00:14:41,590 --> 00:14:46,690
Kami selalu dapat menekan ini, tentu saja saya ingin menonaktifkannya jika tidak ada dalam keranjang

154
00:14:46,990 --> 00:14:55,090
dan untuk itu, kami sekarang perlu mendapatkan barang-barang keranjang kami juga. Jadi item keranjang juga bisa diambil dengan pemilih penggunaan, juga

155
00:14:55,090 --> 00:15:01,320
dari irisan keranjang tapi di sana, itu adalah barang-barang yang menopang dari keranjang peredam yang kami tertarik.

156
00:15:01,320 --> 00:15:09,150
Jadi jika saya melihat peredam gerobak, di sana Anda melihat kami memiliki properti item.

157
00:15:09,310 --> 00:15:11,260
Ini adalah objek yang sedang saya

158
00:15:11,270 --> 00:15:18,280
ambil sekarang, jadi item keranjang adalah objek, bukan array, sebenarnya array akan lebih baik untuk saya di sini dan karena itu saya akan menggunakan formulir

159
00:15:18,370 --> 00:15:25,750
panjang untuk mendapatkan ini dan saya akan mengembalikan array di sini dan bukan objek. Jadi kita bisa mendapatkan item keranjang yang diubah

160
00:15:25,750 --> 00:15:36,260
di sini, misalnya dengan membuat array baru di sini di dalam fungsi pemilih ini dan kemudian kita bisa menambahkan loop for / in untuk

161
00:15:36,260 --> 00:15:43,910
melewati semua kunci dalam keadaan. gerobak. item, jadi untuk mengulang

162
00:15:43,910 --> 00:15:47,120
semua pasangan nilai kunci dalam objek item

163
00:15:47,120 --> 00:15:51,200
keranjang yang kita miliki di sana dan saya ingin

164
00:15:52,950 --> 00:16:01,030
menambahkan masing-masing sebagai item ke item keranjang yang diubah. Jadi di sana saya akan mendorong objek Javascript yang memiliki ID produk

165
00:16:01,060 --> 00:16:06,850
katakanlah yang hanya kunci saya karena dalam objek item keranjang ID, ID produk disimpan sebagai kunci jika

166
00:16:06,850 --> 00:16:07,930
Anda ingat,

167
00:16:07,930 --> 00:16:14,320
jadi sekarang saya menambahkan ini ke properti ID produk dalam objek ini saya menambah array item keranjang berubah dan

168
00:16:15,300 --> 00:16:27,240
selain itu, saya akan memiliki judul produk saya yang tentu saja keadaan. gerobak. item untuk kunci yang

169
00:16:27,240 --> 00:16:30,550
diberikan. productTitle.

170
00:16:30,650 --> 00:16:37,900
Jika Anda melihat model item keranjang Anda, Anda akan melihat di sana, judul produk dan harga produk adalah nama

171
00:16:37,900 --> 00:16:41,510
properti yang menyimpan judul produk dan harga produk, jadi

172
00:16:41,560 --> 00:16:43,570
itulah cara kami mengakses keduanya,

173
00:16:43,570 --> 00:16:49,790
jadi saya akan melakukan hal yang sama di sini untuk harga produk dan sesudahnya, saya juga

174
00:16:49,790 --> 00:16:58,770
perlu kuantitas yang menyatakan. gerobak. item untuk kunci yang diberikan. kuantitas dan tentu saja juga jumlah yang merupakan negara. gerobak. barang. kunci. jumlah, lagi pada dasarnya hanya apa yang kita miliki di sini di item keranjang

175
00:16:58,770 --> 00:17:05,640
Jadi yang saya lakukan adalah mengatakan

176
00:17:05,640 --> 00:17:10,260
saya sedang membuat item keranjang baru, bukan dengan model saya karena ini adalah

177
00:17:10,260 --> 00:17:17,690
item keranjang dengan properti ID produk tambahan sehingga saya memilikinya di sini dan sekarang array item keranjang yang diubah ini yang

178
00:17:17,690 --> 00:17:24,300
saya kembalikan setelah ini untuk loop, sehingga pemilih ini pada akhirnya mengembalikan array dan bukan objek, jadi item

179
00:17:24,330 --> 00:17:25,850
keranjang sekarang adalah

180
00:17:26,040 --> 00:17:32,760
array yang membuatnya lebih mudah bagi kita untuk menggunakannya dalam daftar datar dan juga memungkinkan kita untuk memeriksa di

181
00:17:32,760 --> 00:17:38,730
sini di tombol pesanan sekarang apakah kita ingin menonaktifkannya dengan hanya memeriksa panjang array yang sekarang

182
00:17:39,210 --> 00:17:41,000
kita miliki dalam item keranjang.

183
00:17:41,010 --> 00:17:42,720
Jadi di sini di tombol,

184
00:17:43,170 --> 00:17:49,260
kita dapat mengatur penonaktifan penonaktifan yang didukungnya untungnya, ini adalah komponen bawaan yang hanya memiliki penonaktifan penonaktifan dan di

185
00:17:49,260 --> 00:17:56,790
sana saya dapat memeriksa apakah panjang item keranjang sama dengan nol, jika ya, maka saya tahu itu kosong dan kemudian memang saya ingin menonaktifkan tombol. Jadi dinonaktifkan menerima benar atau salah, secara default itu salah tetapi saya akan mengaturnya menjadi benar jika

186
00:17:56,790 --> 00:18:01,650
panjang item keranjang adalah 0. Dan sekarang Anda melihat apakah saya

187
00:18:01,730 --> 00:18:08,020
membuka layar keranjang, ini dinonaktifkan, jika saya menambahkan

188
00:18:08,020 --> 00:18:16,800
produk dan saya pergi ke sana, itu diaktifkan dan tentu saja Anda juga dapat menggunakan warna berbeda untuk tombol pesanan sekarang jika Anda mau.

189
00:18:16,890 --> 00:18:20,540
Sekarang dengan itu, kita selangkah lebih dekat ke

190
00:18:20,550 --> 00:18:26,580
gerobak yang sudah jadi dan tentu saja tujuan berikutnya adalah untuk menghasilkan barang-barang gerobak.