1
00:00:02,210 --> 00:00:04,450
Aktif ke item keranjang.

2
00:00:04,730 --> 00:00:08,030
Sekarang lagi, saya akan membuat komponen terpisah untuk setiap item keranjang yang ingin

3
00:00:08,030 --> 00:00:09,240
saya hasilkan di sini.

4
00:00:09,260 --> 00:00:15,200
Saya bisa melakukannya di sini tapi sekali lagi, itu akan menjadi komponen yang lebih panjang dan saya tidak ingin mengasapi file ini

5
00:00:15,200 --> 00:00:19,500
dengannya dan saya benar-benar juga akan menggunakannya di tempat lain nanti yang mungkin terdengar aneh

6
00:00:19,610 --> 00:00:23,930
mengingat bahwa kita hanya memiliki satu layar keranjang tetapi Anda akan melihat di mana lagi

7
00:00:23,930 --> 00:00:25,750
kita bisa menggunakan item keranjang nanti.

8
00:00:25,760 --> 00:00:30,890
Jadi untuk itu, mari kita kembali ke folder komponen dan mungkin ada di folder toko

9
00:00:30,920 --> 00:00:33,680
dan tambahkan CartItem. File js di sebelah item produk.

10
00:00:33,710 --> 00:00:37,480
Sekarang tentu saja kita memiliki komponen Bereaksi normal di sana, jadi Anda tahu

11
00:00:37,490 --> 00:00:38,850
permainannya, bagaimana mereka dibuat.

12
00:00:39,080 --> 00:00:44,630
Kami mengimpor Bereaksi dari Bereaksi dan kemudian di sini karena ini adalah komponen yang harus mengeluarkan sesuatu,

13
00:00:44,630 --> 00:00:50,170
kami akan mengimpor banyak komponen dari Bereaksi Asli, inti primitif yang dengannya kami membangun UI.

14
00:00:50,300 --> 00:00:57,990
Saya akan memerlukan tampilan, saya akan membutuhkan teks, saya akan memerlukan stylesheet di sini untuk memastikan dan kemudian saya akan menambahkan konstanta saya di sini, item keranjang

15
00:00:57,990 --> 00:01:06,210
yang menerima alat peraga dan kemudian pada akhirnya di sini mengembalikan beberapa kode JSX. Saya akan menambahkan objek gaya saya

16
00:01:06,210 --> 00:01:09,340
di sini dengan membuat

17
00:01:09,480 --> 00:01:16,050
stylesheet dan saya akan mengekspor ini sebagai item keranjang default.

18
00:01:16,170 --> 00:01:21,540
Sekarang kode jsx yang harus dikembalikan ke sini tentu saja terserah Anda, tetapi saya akan

19
00:01:21,540 --> 00:01:28,070
memiliki pandangan di sini dan dalam pandangan itu, saya ingin menampilkan jumlah dan judul saja, juga jumlah total untuk

20
00:01:28,290 --> 00:01:34,080
item keranjang ini jika-kalau kami menambahkan lebih dari satu, maka ini bukan hanya harga satu item

21
00:01:34,080 --> 00:01:39,780
tetapi tentu saja harga kali kuantitas dan saya sebenarnya juga ingin memiliki tombol yang memungkinkan saya

22
00:01:39,780 --> 00:01:41,730
untuk menghapus item ini dari

23
00:01:41,730 --> 00:01:43,460
keranjang, ikon tempat sampah.

24
00:01:44,070 --> 00:01:53,180
Jadi pada akhirnya, saya akan memiliki baris di sini dengan teks dan teks ini akan memiliki kuantitas dan judul, jadi di

25
00:01:53,420 --> 00:02:02,850
sana saya akan memiliki kuantitas dan judul dan sebenarnya ini harus ditata berbeda, jadi saya akan membungkus kuantitas di sini menjadi simpul

26
00:02:02,850 --> 00:02:09,540
teks yang terpisah dan melakukan hal yang sama untuk judul, sehingga saya memiliki dua simpul

27
00:02:10,650 --> 00:02:21,600
teks yang terpisah di sini pada akhirnya dan kemudian setelah blok teks ini di sini, harus ada pandangan untuk mengelompokkan dua elemen lainnya bersama-sama, bagian

28
00:02:21,600 --> 00:02:28,060
lain dari teks yang merupakan jumlah total untuk item ini di sini, jadi

29
00:02:28,110 --> 00:02:35,280
jumlah dan di samping itu, tombol atau sebenarnya bukan tombol tetapi sebenarnya ikon yang dapat ditekan.

30
00:02:35,280 --> 00:02:40,740
Jadi saya akan membangun benda yang dapat disentuh sendiri dengan opacity yang dapat disentuh

31
00:02:40,740 --> 00:02:46,650
dan tentu saja, Anda dapat melakukan diferensiasi platform lagi untuk efek riak tetapi saya akan menggunakan

32
00:02:47,370 --> 00:02:54,090
opacity pada kedua platform di sini dan saya akan mengimpor ionik dari @ expo / vector-icons yang telah

33
00:02:54,090 --> 00:02:55,110
kita tambahkan

34
00:02:55,110 --> 00:03:00,480
sebelumnya karena saya ingin memiliki hanya ikon di sini yang dapat kita tekan, jadi

35
00:03:00,470 --> 00:03:07,040
di sini saya ingin memiliki opacity terjamah dan membungkusnya di sekitar ikon yang dapat kita tambahkan dengan Ionicons

36
00:03:07,100 --> 00:03:13,340
seperti yang Anda tambahkan sebelumnya dalam kursus ini, dengan ini sebagai sebuah komponen di sini dan kemudian

37
00:03:13,340 --> 00:03:19,190
cukup menggunakan nama yang seharusnya benar-benar berbeda oleh platform karena namanya adalah ikon pengenal dan

38
00:03:19,190 --> 00:03:29,670
di sana, kita dapat memeriksa platform OS dan jika itu adalah Android, maka ikon yang harus digunakan akan memiliki nama md trash dan jika tidak, itu akan menjadi tempat

39
00:03:29,670 --> 00:03:37,410
sampah iOS yang membuat ikon tempat sampah yang bagus dan kami juga dapat memberikan ikon ini ukuran katakanlah 23 yang lagi-lagi

40
00:03:37,410 --> 00:03:43,890
akan terlihat cukup bagus dan berwarna dan di sini, saya akan benar-benar menggunakan merah karena menghapus ini item

41
00:03:43,890 --> 00:03:52,490
jadi itu harus seperti warna-warni ng warna yang akan saya katakan. Opacity terjamah ketika ditekan harus melakukan sesuatu dan itu harus meneruskan acara

42
00:03:52,490 --> 00:03:54,520
pers ke komponen yang menggunakan

43
00:03:54,520 --> 00:04:00,460
komponen item keranjang, jadi saya berharap untuk mendapatkan prop pada penghapusan, nama ini seperti biasa terserah Anda

44
00:04:00,460 --> 00:04:11,170
yang memegang fungsi yang ada di end dieksekusi lalu dan kita juga dapat menambahkan gaya di sini, gaya yang sangat sederhana di mana saya menunjuk pada tombol delete misalnya dan

45
00:04:11,170 --> 00:04:14,360
itu adalah deklarasi gaya yang dapat kita tambahkan sesudahnya.

46
00:04:14,380 --> 00:04:17,120
Berbicara tentang gaya, tentu saja ada lebih

47
00:04:17,260 --> 00:04:22,420
banyak gaya untuk ditambahkan, misalnya pada tampilan paling atas di sini, saya akan

48
00:04:22,420 --> 00:04:25,390
memberikan ini gaya barang keranjang, teks ini

49
00:04:27,910 --> 00:04:29,410
di sini kemudian

50
00:04:29,410 --> 00:04:37,060
akan menerima gaya data barang mungkin. Teks dengan kuantitas ini dapat menerima gaya yang dapat kami beri nama gaya. kuantitas, lagi semua pengidentifikasi

51
00:04:37,060 --> 00:04:40,720
gaya ini seperti biasa sepenuhnya terserah Anda.

52
00:04:41,020 --> 00:04:43,600
Di sini pada judul, saya memiliki gaya

53
00:04:44,970 --> 00:04:53,970
judul dan kemudian di sini pada tampilan ini, saya akan menambahkan gaya data barang lagi, jadi saya akan menggunakan kembali gaya ini karena saya ingin

54
00:04:53,970 --> 00:05:05,760
memiliki set yang sama di sini dan jumlah ini di sini akan juga mendapatkan gaya jumlah. Jadi sekelompok gaya untuk ditambahkan, mari kita pergi ke stylesheet

55
00:05:05,760 --> 00:05:09,230
dan di sana, tambahkan item keranjang

56
00:05:09,450 --> 00:05:13,640
yang merupakan gaya root kami, lalu data

57
00:05:13,970 --> 00:05:16,620
barang dan kuantitas, jadi

58
00:05:16,850 --> 00:05:18,500
jumlah data

59
00:05:20,780 --> 00:05:21,890
barang,

60
00:05:23,500 --> 00:05:33,140
lalu judul di sini dan jumlah dan terakhir dan terakhir tetapi tidak paling tidak, tombol hapus.

61
00:05:33,140 --> 00:05:38,490
Jadi itu juga sesuatu yang harus kita tambahkan di sini. Sekarang pada tombol hapus, itu sederhana, saya

62
00:05:38,500 --> 00:05:39,100
hanya

63
00:05:39,100 --> 00:05:46,930
akan menambahkan margin di sebelah kiri 20 untuk memiliki beberapa jarak antara ikon dan teks yang duduk di sebelahnya dan dengan

64
00:05:46,930 --> 00:05:52,070
itu, mari kita pergi ke item keranjang.

65
00:05:52,110 --> 00:05:57,010
Di sana, saya ingin memiliki padding 10, warna latar belakang putih, saya tidak akan menggunakan kartu saya lihat

66
00:05:57,010 --> 00:06:01,930
di sini, saya tidak akan menambahkan bayangan di sini, Anda bisa melakukan itu tetapi saya lebih suka tampilan yang

67
00:06:01,930 --> 00:06:02,420
berbeda.

68
00:06:02,560 --> 00:06:06,700
Penting adalah baris arah lentur sehingga semua item dalam tampilan itu, jadi teks dan

69
00:06:06,700 --> 00:06:13,330
tampilan ini duduk bersebelahan dalam satu dan baris yang sama. Justifikasi konten harus berupa ruang di antara sehingga

70
00:06:13,330 --> 00:06:21,720
semua ruang kosong di antara dua blok konten ini dan saya juga akan menambahkan margin dalam arah horizontal 20

71
00:06:22,380 --> 00:06:24,660
sehingga ada beberapa jarak

72
00:06:24,880 --> 00:06:29,250
ke kiri dan ke kanan di sekitar item keranjang saya.

73
00:06:29,880 --> 00:06:36,000
Sekarang data item, itulah gaya yang kami ulangi di sekitar kuantitas dan judul dan jumlah

74
00:06:36,630 --> 00:06:46,360
dan tombol hapus, data item harus memiliki arah baris yang fleksibel untuk memastikan item di sana diposisikan dalam satu baris dan saya akan mengatur menyelaraskan

75
00:06:46,360 --> 00:06:55,370
item di sini untuk pusat ke pusat semua konten secara vertikal. Sekarang untuk kuantitas di sini, saya ingin menetapkan keluarga font

76
00:06:55,370 --> 00:07:05,440
open-sans, omong-omong, kita sebenarnya dapat juga menggunakan tampilan di sini alih-alih teks di sekitar dua node teks ini karena saya tidak menetapkan gaya

77
00:07:05,440 --> 00:07:10,220
teks tertentu di sini , jadi mari kita lihat saja tetapi

78
00:07:10,360 --> 00:07:15,430
dengan itu, kembali ke kuantitas. Kita dapat memberikan ini

79
00:07:15,430 --> 00:07:22,240
keluarga font open-sans, warna mungkin ini warna abu-abu gelap yang kita gunakan sebelumnya

80
00:07:22,240 --> 00:07:27,820
untuk harga, sekarang untuk kuantitas dan ukuran font 16 mungkin dan

81
00:07:27,820 --> 00:07:35,740
kemudian di sini untuk judul, saya akan menetapkan font family open sans bold untuk bold, beri

82
00:07:35,740 --> 00:07:43,760
ukuran font 16 juga dan pada jumlah di sini, saya akan melakukan hal yang sama persis.

83
00:07:46,090 --> 00:07:52,960
Oleh karena itu tentu saja kita juga dapat menggabungkan ini menjadi satu dan gaya yang sama, mungkin nama teks utama ini

84
00:07:52,960 --> 00:07:53,820
atau semacamnya,

85
00:07:53,830 --> 00:08:00,010
singkirkan jumlahnya karena kita memiliki definisi gaya yang sama persis dan sekarang menggunakan teks utama di sini alih-alih

86
00:08:00,010 --> 00:08:02,350
judul dan di sini sebagai gantinya jumlah.

87
00:08:05,070 --> 00:08:05,710
Baik.

88
00:08:05,730 --> 00:08:06,840
Ini adalah item

89
00:08:06,840 --> 00:08:08,900
keranjang, sekarang mari kita gunakan di

90
00:08:08,970 --> 00:08:11,040
layar keranjang dengan bantuan daftar datar

91
00:08:11,280 --> 00:08:16,080
di sana karena saat ini kami tidak mengeluarkan barang apa pun di layar keranjang.

92
00:08:16,380 --> 00:08:19,740
Jadi pandangan ini di sini dapat diganti dengan daftar

93
00:08:19,740 --> 00:08:27,080
datar sekarang dan data yang kita duduk harus ada array item keranjang dan itu hanya apa yang kita miliki di

94
00:08:27,080 --> 00:08:29,030
sini dalam konstanta item keranjang,

95
00:08:29,150 --> 00:08:31,700
jadi mari kita gunakan ini di sini.

96
00:08:31,700 --> 00:08:32,240
Sekarang

97
00:08:32,240 --> 00:08:37,550
di sini, saya juga akan menambahkan ekstraktor kunci dan di sini Anda pasti perlu menambahkannya agar Bereaksi Asli

98
00:08:37,550 --> 00:08:43,100
tahu di mana kunci Anda dapat ditemukan karena setiap item di sini pada akhirnya adalah dari format ini dan

99
00:08:43,190 --> 00:08:48,650
ini tidak memiliki kunci maupun Properti ID tetapi kami tahu bahwa ID produk dapat digunakan sebagai kunci karena ini

100
00:08:48,650 --> 00:08:49,910
akan unik untuk setiap item.

101
00:08:49,910 --> 00:08:54,920
Jadi di sini, saya menunjuk item. productId pada akhirnya dan sekarang untuk

102
00:08:54,920 --> 00:09:00,030
membuat item, saya ingin menggunakan item keranjang ini yang baru saja kita tambahkan.

103
00:09:00,140 --> 00:09:10,400
Jadi di sini, kita perlu mengimpor item keranjang dari folder komponen, folder toko dan di sana, item keranjang dan kemudian menggunakan komponen item keranjang

104
00:09:11,060 --> 00:09:17,850
ini di sana dalam fungsi render kami di mana kami mendapatkan data barang kami pada akhirnya

105
00:09:17,850 --> 00:09:26,040
dan di mana kami kemudian mengembalikan item keranjang seperti ini dan sekarang pada item keranjang, kita perlu memasukkan beberapa

106
00:09:26,040 --> 00:09:28,240
data, kan? Dalam item kereta,

107
00:09:28,250 --> 00:09:34,350
saat ini saya memiliki dummy placeholder, tentu saja di sini saya berharap untuk mendapatkan kuantitas saya katakanlah pada prop bernama

108
00:09:34,350 --> 00:09:42,080
kuantitas, saya berharap untuk mendapatkan judul saya pada mungkin prop nama judul dan jumlah pada prop nama jumlah dan di sana, saya akan menelepon untuk

109
00:09:42,090 --> 00:09:47,640
memperbaiki ke 2 memastikan bahwa kami selalu memiliki dua tempat desimal di sana dan kami juga memiliki

110
00:09:47,660 --> 00:09:49,910
prop di hapus yang kami harapkan benar.

111
00:09:49,920 --> 00:09:53,830
Jadi kami mendapatkan kuantitas, judul, jumlah, dan pada penghapusan, jadi kembali ke layar keranjang,

112
00:09:53,830 --> 00:10:01,780
itulah yang harus kami tambahkan, kuantitasnya tentu saja itemData. barang. kuantitas karena satu item di

113
00:10:01,780 --> 00:10:06,740
sini tentu saja item seperti itu dan oleh karena

114
00:10:06,940 --> 00:10:15,180
itu kita akan memiliki kuantitas tetap dan selain kuantitas, kita harus lulus dalam judul, jumlah

115
00:10:15,330 --> 00:10:16,930
dan penghapusan.

116
00:10:17,010 --> 00:10:22,860
Jadi judul tentu saja itemData. barang. produk. judul, itulah nama yang saya

117
00:10:22,890 --> 00:10:30,810
pilih di sana, untuk jumlah yang bisa kami sampaikan pada itemData barang. jika kita melihat bagaimana kita

118
00:10:30,810 --> 00:10:38,550
mendefinisikan data kita, itu akan menjadi jumlah, itu jumlah untuk satu item tidak peduli berapa banyak kuantitas yang kita

119
00:10:38,790 --> 00:10:42,840
miliki di sana atau menghormati jumlah yang kita miliki sebenarnya.

120
00:10:43,110 --> 00:10:49,770
Dan kemudian bertahan tetapi tidak sedikit untuk di hapus, kita harus menunjuk pada suatu fungsi dan pada saat ini, kita tidak memiliki logika untuk ini, jadi saya

121
00:10:49,770 --> 00:10:50,600
hanya akan menunjuk

122
00:10:50,640 --> 00:10:57,370
pada fungsi kosong dan ini sekarang menjadi item keranjang yang ingin saya render Itu. Mari

123
00:10:57,400 --> 00:11:07,540
kita coba ini. Mari kita tambahkan dua kaos merah dan karpet biru, pergi ke troli dan

124
00:11:07,540 --> 00:11:14,940
sekarang saya mendapat string teks harus dirender dalam komponen teks dan itu menunjuk ke item troli, baris 14, jadi mari

125
00:11:14,950 --> 00:11:17,290
kita lihat itu, ya ini dia

126
00:11:17,380 --> 00:11:23,590
di sini yang IDE saya secara otomatis ditambahkan, spasi putih ini saya ingin miliki di sini

127
00:11:23,650 --> 00:11:26,270
setelah kuantitas saya. Saya memang ingin memilikinya di sini,

128
00:11:26,440 --> 00:11:32,810
jadi saya hanya akan menambahkan satu spasi putih di sini sebelum saya menutup teks saya. Sekarang dengan itu, mari kita coba ini lagi,

129
00:11:32,830 --> 00:11:35,530
dua baju merah, satu karpet biru.

130
00:11:35,580 --> 00:11:36,920
Lihat jumlahnya di sini,

131
00:11:36,950 --> 00:11:38,470
lihat judul di sini, lihat

132
00:11:38,560 --> 00:11:41,990
jumlah dan ini tentu saja juga menambahkan hingga jumlah total ini.

133
00:11:43,580 --> 00:11:45,730
Sekarang saatnya untuk membuat tombol hapus ini berfungsi.