1
00:00:02,210 --> 00:00:04,450
En los artículos del carrito.

2
00:00:04,730 --> 00:00:08,030
Ahora, de nuevo, crearé un componente separado para cada artículo del carrito

3
00:00:08,030 --> 00:00:09,240
que deseo enviar aquí.

4
00:00:09,260 --> 00:00:15,200
Podría hacerlo aquí, pero de nuevo, será un componente un poco más largo y no quiero inflar este archivo con él

5
00:00:15,200 --> 00:00:19,500
y en realidad también lo usaré en otro lugar más tarde, lo que puede sonar

6
00:00:19,610 --> 00:00:23,930
extraño dado que solo tenemos una pantalla de carrito, pero verá dónde más podemos usar

7
00:00:23,930 --> 00:00:25,750
un artículo de carrito más adelante.

8
00:00:25,760 --> 00:00:30,890
Entonces, para eso, volvamos a la carpeta de componentes y allí, quizás en la carpeta de la tienda,

9
00:00:30,920 --> 00:00:33,680
y agreguemos un CartItem. archivo js al lado del artículo del producto.

10
00:00:33,710 --> 00:00:37,480
Ahora, por supuesto, tenemos un componente React normal allí, para que conozcas el

11
00:00:37,490 --> 00:00:38,850
juego, cómo se crean.

12
00:00:39,080 --> 00:00:44,630
Importamos React de React y luego aquí, dado que este es el componente que debería generar algo, importaremos un

13
00:00:44,630 --> 00:00:50,170
montón de componentes de React Native, las primitivas centrales con las que construimos la interfaz de usuario.

14
00:00:50,300 --> 00:00:57,990
Necesitaré una vista, necesitaré un texto, necesitaré una hoja de estilo aquí con seguridad y luego agregaré mi constante aquí, el artículo del carrito

15
00:00:57,990 --> 00:01:06,210
que recibe accesorios y luego al final aquí devuelvo un código jsx. Agregaré mi objeto de estilos aquí

16
00:01:06,210 --> 00:01:09,340
con crear hoja de

17
00:01:09,480 --> 00:01:16,050
estilo y lo exportaré como un artículo de carrito predeterminado.

18
00:01:16,170 --> 00:01:21,540
Ahora, el código jsx que debe devolverse aquí, por supuesto, siempre depende de usted, pero tendré una

19
00:01:21,540 --> 00:01:28,070
vista aquí y en esa vista, quiero generar la cantidad y el título, por supuesto, también la cantidad total para este artículo

20
00:01:28,290 --> 00:01:34,080
del carrito en caso de que agregamos más de uno, entonces este no es solo el precio de un

21
00:01:34,080 --> 00:01:39,780
solo artículo, sino, por supuesto, el precio por la cantidad y en realidad también quiero tener un botón que

22
00:01:39,780 --> 00:01:41,730
me permita eliminar este artículo del

23
00:01:41,730 --> 00:01:43,460
carrito, un ícono de basura.

24
00:01:44,070 --> 00:01:53,180
Así que al final, tendré una fila aquí con un texto y este texto tendrá la cantidad y el título, así que allí

25
00:01:53,420 --> 00:02:02,850
tendré la cantidad y el título y en realidad esto debería tener un estilo diferente, así que envolveré el cantidad aquí en un nodo

26
00:02:02,850 --> 00:02:09,540
de texto separado y hacer lo mismo para el título, de modo que tenga dos nodos

27
00:02:10,650 --> 00:02:21,600
de texto separados aquí al final y luego después de este bloque de texto aquí, debería haber una vista para agrupar otros dos elementos juntos, otra pieza de

28
00:02:21,600 --> 00:02:28,060
texto que es la cantidad total de este elemento aquí, por lo que la cantidad

29
00:02:28,110 --> 00:02:35,280
y al lado de eso, un botón o en realidad no es un botón, sino un ícono pressable.

30
00:02:35,280 --> 00:02:40,740
Así que construiré mi propia cosa táctil con opacidad táctil y, por supuesto, podría

31
00:02:40,740 --> 00:02:46,650
volver a hacer esa diferenciación de plataforma para el efecto dominó, pero iré con opacidad en

32
00:02:47,370 --> 00:02:54,090
ambas plataformas aquí e importaré Ionicons desde @ expo / vector-icons que ya agregamos anteriormente porque quiero tener solo

33
00:02:54,090 --> 00:02:55,110
un ícono

34
00:02:55,110 --> 00:03:00,480
aquí que podamos presionar, así que aquí quiero tener una opacidad táctil y envolverlo

35
00:03:00,470 --> 00:03:07,040
alrededor de un ícono que podamos agregar con Ionicons como agregó anteriormente en este curso, con esto como

36
00:03:07,100 --> 00:03:13,340
un componente aquí y luego simplemente use un nombre que en realidad debería diferir según la plataforma

37
00:03:13,340 --> 00:03:19,190
porque el nombre es el identificador de icono y allí, podemos verificar el sistema operativo de

38
00:03:19,190 --> 00:03:29,670
la plataforma y si ese es Android, entonces el icono que debe usarse tendrá un nombre de md trash y de lo contrario, será la papelera de iOS lo

39
00:03:29,670 --> 00:03:37,410
que representa un buen ícono de papelera y también podemos darle a este ícono un tamaño de digamos 23, que nuevamente

40
00:03:37,410 --> 00:03:43,890
debería verse bastante bien y un color, y aquí, realmente usaré rojo porque está eliminando esto artículo por

41
00:03:43,890 --> 00:03:52,490
lo que debería tener como un warni ng color yo diría. La opacidad táctil cuando se presiona debe hacer algo y debe reenviar el evento

42
00:03:52,490 --> 00:03:54,520
de prensa al componente que usa

43
00:03:54,520 --> 00:04:00,460
el componente del artículo del carrito, por lo que espero obtener un accesorio de eliminación, este nombre como siempre depende

44
00:04:00,460 --> 00:04:11,170
de usted y tiene una función que está en el luego se ejecuta y también podemos agregar un estilo aquí, un estilo muy simple donde apunto al botón Eliminar, por ejemplo, y esa es una

45
00:04:11,170 --> 00:04:14,360
declaración de estilo que podemos agregar a partir de entonces.

46
00:04:14,380 --> 00:04:17,120
Hablando de estilos, por supuesto, hay más estilos

47
00:04:17,260 --> 00:04:22,420
para agregar, por ejemplo, en la vista superior aquí, le daré a este un

48
00:04:22,420 --> 00:04:25,390
estilo de artículo de carrito, este texto aquí

49
00:04:27,910 --> 00:04:29,410
luego recibirá un

50
00:04:29,410 --> 00:04:37,060
estilo de datos de artículo tal vez. Este texto con la cantidad puede recibir un estilo que podemos nombrar estilos. cantidad, de nuevo todos estos

51
00:04:37,060 --> 00:04:40,720
identificadores de estilo como siempre son totalmente suyos.

52
00:04:41,020 --> 00:04:43,600
Aquí en el título, tengo un

53
00:04:44,970 --> 00:04:53,970
estilo de título y luego aquí en esta vista, agregaré un estilo de datos de elemento nuevamente, así que reutilizaré este estilo porque quiero

54
00:04:53,970 --> 00:05:05,760
tener el mismo configurado aquí y esta cantidad aquí será También obtener un estilo de cantidad. Entonces, hay un montón de estilos para agregar, vamos a la hoja

55
00:05:05,760 --> 00:05:09,230
de estilo y allí, agreguemos el artículo

56
00:05:09,450 --> 00:05:13,640
del carrito que es nuestro estilo raíz, luego los

57
00:05:13,970 --> 00:05:16,620
datos y la cantidad del

58
00:05:16,850 --> 00:05:18,500
artículo, así la

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

60
00:05:23,500 --> 00:05:33,140
de datos del artículo, luego el título aquí y la cantidad y por último, pero no menos, el botón Eliminar.

61
00:05:33,140 --> 00:05:38,490
Entonces eso también es algo que tenemos que agregar aquí. Ahora, en el botón Eliminar, eso es simple,

62
00:05:38,500 --> 00:05:39,100
solo agregaré

63
00:05:39,100 --> 00:05:46,930
un margen a la izquierda de 20 para tener un espacio entre el icono y el texto que se encuentra al lado y con

64
00:05:46,930 --> 00:05:47,470
eso,

65
00:05:48,750 --> 00:05:52,070
vamos al artículo del carrito. Ahí, quiero tener un

66
00:05:52,110 --> 00:05:57,010
relleno de 10, un color de fondo blanco, no usaré mi tarjeta mira

67
00:05:57,010 --> 00:06:01,930
aquí, no agregaré una sombra aquí, podrías hacer eso, pero prefiero una apariencia

68
00:06:01,930 --> 00:06:02,420
diferente.

69
00:06:02,560 --> 00:06:06,700
Es importante la fila de dirección flexible para que todos los elementos en esa vista, de modo que este

70
00:06:06,700 --> 00:06:13,330
texto y esta vista estén uno al lado del otro en una misma fila. Justificar el contenido debe ser un espacio intermedio para

71
00:06:13,330 --> 00:06:21,720
que todos los espacios vacíos entre estos dos bloques de contenido y también agregue un margen en dirección horizontal de 20 para que

72
00:06:22,380 --> 00:06:24,660
haya un espacio a la

73
00:06:24,880 --> 00:06:29,250
izquierda y a la derecha alrededor de los artículos de mi carrito.

74
00:06:29,880 --> 00:06:36,000
Ahora, los datos del artículo, ese es el estilo que estamos repitiendo alrededor de la cantidad, el título

75
00:06:36,630 --> 00:06:46,360
y la cantidad, y el botón Eliminar, los datos del artículo deben tener una fila de dirección flexible para asegurarse de que los artículos estén colocados en una fila

76
00:06:46,360 --> 00:06:55,370
y estableceré alinear los artículos aquí centrar para centrar todo el contenido verticalmente. Ahora, para la cantidad aquí, quiero establecer una familia de fuentes

77
00:06:55,370 --> 00:07:05,440
de open-sans, por cierto, también podemos usar una vista aquí en lugar de un texto alrededor de estos dos nodos de texto porque no estoy configurando

78
00:07:05,440 --> 00:07:10,220
ningún estilo de texto específico aquí , así que echemos un vistazo, pero

79
00:07:10,360 --> 00:07:15,430
con eso, volvamos a la cantidad. Podemos dar a esto una

80
00:07:15,430 --> 00:07:22,240
familia de fuentes de sans abierto, un color de tal vez este color grisáceo oscuro que usamos

81
00:07:22,240 --> 00:07:27,820
antes para los precios, ahora para la cantidad y un tamaño de fuente de

82
00:07:27,820 --> 00:07:35,740
16 tal vez y luego aquí para el título, estableceré un familia de fuentes de abierto sin negrita para poner

83
00:07:35,740 --> 00:07:43,760
ese negrita, aunque también le doy un tamaño de fuente de 16 y en la cantidad aquí, haré exactamente lo mismo.

84
00:07:46,090 --> 00:07:52,960
Por lo tanto, por supuesto, también podríamos combinar esto en un mismo estilo, tal vez nombrar este texto principal o algo así, deshacernos

85
00:07:52,960 --> 00:07:53,820
de la

86
00:07:53,830 --> 00:08:00,010
cantidad ya que tenemos exactamente las mismas definiciones de estilo y ahora usar el texto principal aquí en lugar del

87
00:08:00,010 --> 00:08:02,350
título y aquí en su lugar de cantidad.

88
00:08:05,070 --> 00:08:05,710
Bueno.

89
00:08:05,730 --> 00:08:06,840
Este es un

90
00:08:06,840 --> 00:08:08,900
artículo del carrito, ahora usémoslo en la

91
00:08:08,970 --> 00:08:11,040
pantalla del carrito con la ayuda de una

92
00:08:11,280 --> 00:08:16,080
lista plana allí porque en este momento no estamos mostrando ningún artículo allí en la pantalla del carrito.

93
00:08:16,380 --> 00:08:19,740
Entonces, esta vista aquí se puede reemplazar con una lista

94
00:08:19,740 --> 00:08:27,080
plana ahora y los datos que tenemos allí deben ser una variedad de artículos de carrito y eso es exactamente lo que

95
00:08:27,080 --> 00:08:29,030
tenemos aquí en los artículos

96
00:08:29,150 --> 00:08:31,700
de carrito constantes, así que usemos esto aquí.

97
00:08:31,700 --> 00:08:32,240
Ahora

98
00:08:32,240 --> 00:08:37,550
aquí, también agregaré un extractor de claves y aquí definitivamente debe agregarlo para que React Native sepa dónde

99
00:08:37,550 --> 00:08:43,100
se puede encontrar su clave porque cada elemento aquí al final es de este formato y no tiene una

100
00:08:43,190 --> 00:08:48,650
clave ni un Propiedad de ID, pero sabemos que la ID de producto se puede usar como clave porque

101
00:08:48,650 --> 00:08:49,910
será única para cada artículo.

102
00:08:49,910 --> 00:08:54,920
Así que aquí, apunto al artículo. productId al final y ahora para

103
00:08:54,920 --> 00:09:00,030
el artículo de renderizado, quiero usar este artículo del carrito que acabamos de agregar.

104
00:09:00,140 --> 00:09:10,400
Entonces, aquí, necesitamos importar el artículo del carrito de la carpeta de componentes, la carpeta de la tienda y allí, el artículo del carrito y luego usar este

105
00:09:11,060 --> 00:09:17,850
componente del artículo del carrito allí abajo en nuestra función de representación, donde obtenemos los datos de nuestro artículo

106
00:09:17,850 --> 00:09:26,040
al final y donde luego devolvemos nuestro artículo de carrito como este y ahora en el artículo de carrito, necesitamos pasar algunos

107
00:09:26,040 --> 00:09:28,240
datos, ¿verdad? En el artículo

108
00:09:28,250 --> 00:09:34,350
del carrito, en este momento tengo marcadores de posición ficticios, por supuesto, aquí espero obtener mi cantidad, digamos en una cantidad con

109
00:09:34,350 --> 00:09:42,080
nombre de accesorio, espero obtener mi título en tal vez un título con nombre de accesorio y la cantidad en una cantidad con nombre de accesorio y

110
00:09:42,090 --> 00:09:47,640
allí, llamaré a fixed to 2 para asegurarme de que siempre tengamos dos lugares decimales allí y también tengamos

111
00:09:47,660 --> 00:09:49,910
el accesorio on remove que esperamos sea correcto.

112
00:09:49,920 --> 00:09:53,830
Entonces obtuvimos cantidad, título, cantidad y al eliminar, así que de vuelta en la pantalla del carrito, eso

113
00:09:53,830 --> 00:10:01,780
es lo que tenemos que agregar, la cantidad es, por supuesto, itemData. articulo. cantidad porque un solo artículo

114
00:10:01,780 --> 00:10:06,740
aquí es, por supuesto, un artículo así y, por lo tanto,

115
00:10:06,940 --> 00:10:15,180
tendremos un mantenimiento de la cantidad y, además de la cantidad, tenemos que pasar el título, la cantidad

116
00:10:15,330 --> 00:10:16,930
y al eliminar.

117
00:10:17,010 --> 00:10:22,860
Entonces el título es, por supuesto, itemData. articulo. producto. título, ese es el nombre

118
00:10:22,890 --> 00:10:30,810
que elegí allí, por la cantidad que podemos pasar en itemData. articulo. Si echamos un vistazo a cómo

119
00:10:30,810 --> 00:10:38,550
definimos nuestros datos, esa sería la suma, esa es la cantidad para un artículo, sin importar la cantidad que

120
00:10:38,790 --> 00:10:42,840
tengamos allí o respetando la cantidad que tenemos en realidad.

121
00:10:43,110 --> 00:10:49,770
Y luego, por último, pero no menos importante, para eliminar, debemos señalar una función y, por el momento, no tenemos lógica para esto, por lo que

122
00:10:49,770 --> 00:10:50,600
solo señalaré una

123
00:10:50,640 --> 00:10:57,370
función vacía y ahora es un artículo de carrito como quiero representar eso.

124
00:10:57,400 --> 00:11:07,540
Intentemos esto. Agreguemos dos camisas rojas y una alfombra azul, vaya al carrito y ahora tengo

125
00:11:07,540 --> 00:11:14,940
cadenas de texto que deben representarse dentro de un componente de texto y apunta al elemento del carrito, línea 14, así

126
00:11:14,950 --> 00:11:17,290
que echemos un vistazo a eso,

127
00:11:17,380 --> 00:11:23,590
sí, es aquí que mi IDE agregó automáticamente, este espacio en blanco que quiero tener aquí después

128
00:11:23,650 --> 00:11:26,270
de mi cantidad. De hecho, quiero tener eso

129
00:11:26,440 --> 00:11:32,810
aquí, así que solo agregaré un espacio en blanco adicional antes de cerrar mi texto. Ahora con eso, intentemos esto nuevamente, dos

130
00:11:32,830 --> 00:11:35,530
camisas rojas, una alfombra azul.

131
00:11:35,580 --> 00:11:36,920
Vea la cantidad aquí,

132
00:11:36,950 --> 00:11:38,470
vea el título aquí, vea la

133
00:11:38,560 --> 00:11:41,990
suma y, por supuesto, esto también se suma a esta suma total.

134
00:11:43,580 --> 00:11:45,730
Ahora es el momento de hacer que este botón de eliminar funcione.