1 00:00:02,190 --> 00:00:07,590 Para agregar el elemento de acción al encabezado, haré algo que hice también en la sección de navegación, en 2 00:00:07,800 --> 00:00:09,480 la carpeta de componentes, quiero 3 00:00:09,660 --> 00:00:11,470 agregar mi propio botón de encabezado 4 00:00:11,550 --> 00:00:17,160 y ahora para esto, agregaré una nueva subcarpeta en allí que nombraré UI y mi idea aquí es simple. 5 00:00:17,580 --> 00:00:23,340 Tengo la carpeta de la tienda que contiene todos los componentes que uso en mi 6 00:00:23,340 --> 00:00:30,090 tienda, que generan información relacionada con la tienda. En la carpeta UI, quiero tener algunos 7 00:00:30,090 --> 00:00:35,580 bloques de construcción de UI generales que, por supuesto, también uso en esta aplicación 8 00:00:35,610 --> 00:00:42,240 de la tienda, pero que no se centran realmente en generar datos relacionados con la tienda o 9 00:00:42,270 --> 00:00:51,680 el producto, pero que simplemente están allí para proporcionar un estilo o diseño predeterminado y es en esta carpeta de la interfaz de usuario donde 10 00:00:53,540 --> 00:01:02,330 agregaré mi propio botón de encabezado yendo allí e importando React from React y luego importando el botón de encabezado de React navigation 11 00:01:02,330 --> 00:01:10,370 header buttons, este paquete lo instalé al comienzo del módulo, si no lo ha hecho , asegúrese de que npm instale 12 00:01:11,090 --> 00:01:15,760 este paquete y luego también importe Ionicons desde @ expo / vector-icons. 13 00:01:15,850 --> 00:01:23,640 Ahora, para estar súper seguro de que lo tiene instalado, ejecute npm install --save @ expo / vector-icons, para que este 14 00:01:23,640 --> 00:01:26,220 paquete esté disponible en su proyecto. 15 00:01:26,220 --> 00:01:28,070 Estas son las importaciones que necesito aquí, 16 00:01:28,110 --> 00:01:35,990 ahora también quiero importar mis colores de la carpeta de constantes y allí, los colores. js y ahora aquí, agregaré mi componente de 17 00:01:35,990 --> 00:01:43,880 botón de encabezado personalizado, que es un componente React normal al final que recibe accesorios y necesita devolver 18 00:01:43,880 --> 00:01:51,390 algunos jsx y, por supuesto, exportaré mi botón de encabezado personalizado aquí al final y ahora el 19 00:01:51,390 --> 00:01:58,020 jsx que esto devolvió aquí es el botón de encabezado que estoy importando desde React. 20 00:01:58,020 --> 00:02:05,090 Los botones de encabezado de navegación, pero tengo que configurarlo de cierta manera, use el botón 21 00:02:05,190 --> 00:02:10,280 de encabezado aquí desde React. Por un lado, esto debería recibir todos los 22 00:02:10,280 --> 00:02:15,310 accesorios que obtenemos aquí, por lo que solo los reenviaremos, pero además, estableceré mi componente de iconos 23 00:02:15,320 --> 00:02:18,460 aquí en Ionicons, para que siempre usemos Ionicons para renderizar 24 00:02:18,470 --> 00:02:24,670 eso y, por supuesto, podría usar uno de los diferentes conjuntos de iconos vectoriales proporcionados por @ expo / vector-icons también. 25 00:02:24,860 --> 00:02:30,800 Estableceré el tamaño del ícono en 23, lo que me pareció que funciona muy bien, pero por supuesto, también puede experimentar con 26 00:02:30,800 --> 00:02:33,140 diferentes valores aquí, también tal vez si está 27 00:02:33,140 --> 00:02:40,370 utilizando un conjunto de íconos diferente, pruebe con un tamaño de ícono diferente. Y para el color, bueno, ahí depende porque en 28 00:02:40,490 --> 00:02:41,990 Android, tenemos un 29 00:02:41,990 --> 00:02:47,150 fondo rojo aquí, para iOS no, así que necesitamos establecer un color diferente en 30 00:02:47,150 --> 00:02:50,680 función de la plataforma en la que nos estamos 31 00:02:50,780 --> 00:02:59,760 ejecutando, así que importa la plataforma desde React Native aquí y luego podemos verificar la plataforma aquí y si la versión del sistema 32 00:02:59,870 --> 00:03:01,870 operativo es Android, entonces sé 33 00:03:01,880 --> 00:03:04,970 que tengo este fondo de campo sólido, por 34 00:03:05,000 --> 00:03:10,820 lo tanto, el icono debe ser blanco. Por otro lado, en iOS, el fondo no está lleno, 35 00:03:11,120 --> 00:03:19,090 es transparente y, por lo tanto, en iOS, estableceré el color de mi icono en Colores. primario. 36 00:03:19,150 --> 00:03:26,980 Ahora podemos usar eso para agregar un ícono aquí en la pantalla de vista general de productos, allí en mis opciones 37 00:03:26,980 --> 00:03:27,490 de 38 00:03:27,490 --> 00:03:35,800 navegación aquí, quiero agregar mi sección de encabezado a la derecha, por lo que un icono a la derecha de mi encabezado y 39 00:03:35,800 --> 00:03:42,610 para eso aquí, necesitamos importar Un par de cosas, necesitamos importar botones de encabezado y elementos del paquete React 40 00:03:42,610 --> 00:03:44,660 navigation header buttons que instalamos. 41 00:03:44,800 --> 00:03:53,780 Por supuesto, también necesito importar mi propio botón de encabezado desde los botones de encabezado de la interfaz de usuario de los componentes, por 42 00:03:53,780 --> 00:04:03,720 lo que este componente en el que trabajamos y ahora abajo, el encabezado derecho es botones de encabezado como un contenedor para posiblemente tener varios elementos allí, 43 00:04:04,140 --> 00:04:10,950 pero solo agregaré uno elemento, un elemento de cierre automático, en los botones de encabezado antes de continuar con 44 00:04:10,950 --> 00:04:17,430 el elemento, tenemos que establecer el componente del botón de encabezado igual al botón de encabezado, así 45 00:04:17,430 --> 00:04:23,820 que para nuestro propio botón de encabezado aquí. Y el artículo ahora se puede configurar, debe recibir un título que 46 00:04:23,820 --> 00:04:24,290 puede 47 00:04:24,340 --> 00:04:28,840 ser carrito, debe recibir un nombre de icono y realmente quiero usar un icono diferente según 48 00:04:28,980 --> 00:04:34,590 la plataforma en la que nos estamos ejecutando, por lo tanto, de React Native, I importará la plataforma, eso es opcional, 49 00:04:34,590 --> 00:04:39,270 podría usar el mismo ícono para ambas plataformas, pero creo que también se ve bien tener diferentes íconos. 50 00:04:39,270 --> 00:04:47,820 Y luego aquí, comprobaré el sistema operativo de la plataforma y si eso es Android, entonces quiero usar el ícono del carrito md que es el ícono del carrito Ionicon 51 00:04:47,820 --> 00:04:54,360 para el diseño de materiales y de lo contrario usaré el ícono del carrito iOS y de nuevo puedes encontrar todo disponible íconos 52 00:04:54,360 --> 00:04:57,140 en esta lista de íconos que le mostré anteriormente 53 00:04:57,240 --> 00:05:03,540 en el curso, la expo / lista de íconos de íconos vectoriales y por último, pero no menos importante, cuando se 54 00:05:03,540 --> 00:05:09,000 presiona el elemento, probablemente queremos hacer algo y por ahora, no hago nada más que Cambiaré esto pronto. 55 00:05:11,260 --> 00:05:12,850 Si ahora guardamos esto, deberíamos 56 00:05:12,880 --> 00:05:13,500 ver 57 00:05:13,500 --> 00:05:15,220 este ícono aquí, aquí está, 58 00:05:15,280 --> 00:05:21,250 aquí está nuestro carrito, también en Android y ahora solo tenemos que asegurarnos de que cuando toquemos esto, 59 00:05:21,340 --> 00:05:27,250 se nos lleve a la pantalla de nuestro carrito. Para eso, por supuesto, tenemos que agregar algo de lógica o algún resultado a la pantalla del carrito. 60 00:05:27,880 --> 00:05:31,610 Entonces, dentro de la pantalla del carrito, por 61 00:05:31,720 --> 00:05:34,070 supuesto, tenemos un componente React 62 00:05:34,090 --> 00:05:43,420 normal, por lo que importamos React from React, también importamos algo de React Native y ese algo es un componente de vista 63 00:05:43,540 --> 00:05:48,120 para envolver nuestra pantalla tal vez, probablemente produzcamos texto también. 64 00:05:48,380 --> 00:05:54,780 Tendremos un par de artículos de carrito enumerados allí, lo que podemos hacer con 65 00:05:54,800 --> 00:06:01,580 una lista plana para tener la optimización incorporada, probablemente desee diseñar algunas cosas con una hoja 66 00:06:01,670 --> 00:06:11,060 de estilo y también importaré el componente del botón incorporado. Ahora, la pantalla de mi carrito aquí, como siempre, es un componente React y 67 00:06:11,060 --> 00:06:16,910 configuraré este objeto de estilos aquí con Stylesheet. crear para que podamos diseñar este componente también 68 00:06:17,000 --> 00:06:21,030 y al final, exportamos nuestra pantalla de carrito aquí de forma predeterminada. 69 00:06:21,070 --> 00:06:24,930 Ahora, por supuesto, puede construir esta pantalla de carrito de la forma que desee, la construiré de 70 00:06:24,940 --> 00:06:32,640 tal manera que tengamos una vista y, en esa vista, quiero tener dos secciones principales. La sección superior es como el resumen donde 71 00:06:32,640 --> 00:06:37,660 veo la cantidad total y donde tengo el botón de ordenar ahora. 72 00:06:37,980 --> 00:06:43,050 Esto estará en una fila, por lo que tendré una vista anidada aquí donde puedo colocar elementos uno 73 00:06:43,590 --> 00:06:46,810 al lado del otro donde tengo un texto donde digo 74 00:06:46,810 --> 00:06:55,240 total y luego aquí el signo de dólar y luego mi precio total tal vez. También podemos anidar esto, puede tener componentes de 75 00:06:55,250 --> 00:07:03,620 texto anidados si recuerda sin problemas darle a este un color separado, por ejemplo, así que 76 00:07:03,620 --> 00:07:08,670 por ahora codifico 19. 99 allí, pero luego esto se derivará dinámicamente. 77 00:07:08,840 --> 00:07:10,330 Así que 78 00:07:10,430 --> 00:07:18,610 eso es una cosa y, además, en la misma fila aquí, quiero tener un botón con un título 79 00:07:18,700 --> 00:07:26,120 de pedido ahora donde puedo presionarlo para hacer un pedido, limpiar mi carrito y agregar esto 80 00:07:26,120 --> 00:07:28,750 a mis pedidos que todavía tenemos 81 00:07:28,760 --> 00:07:38,200 que administrar y mostrarlo en la pantalla de pedido al final. Ahora, debajo de esta sección de resumen, quiero tener una lista plana con mis artículos de carrito separados, para 82 00:07:38,200 --> 00:07:39,960 que realmente podamos ver qué hay 83 00:07:39,970 --> 00:07:43,360 en el carrito, qué productos hay allí, qué cantidad de cada producto hay, 84 00:07:43,360 --> 00:07:47,860 así que eso es otra cosa que saldrá allí. Por el momento aquí, solo agregaré una vista 85 00:07:47,860 --> 00:07:52,090 con un texto de los artículos del carrito como marcador de posición, pero nuevamente, esta será una 86 00:07:52,090 --> 00:07:57,660 lista plana en el futuro, pero comencemos con el total aquí. Para obtener ese total, podemos aprovechar Redux 87 00:07:57,660 --> 00:08:04,780 porque allí estamos administrando nuestro carrito, por lo que podemos usar el selector de uso de React Redux como aprendió para 88 00:08:04,780 --> 00:08:10,810 obtener datos de nuestra tienda y aquí, tengo la cantidad total de mi carrito que tal vez obtengo 89 00:08:11,010 --> 00:08:21,360 con la ayuda del selector de uso de mi estado. carro, rebanada. carrito aquí porque en 90 00:08:21,390 --> 00:08:27,030 la aplicación. archivo js en reductores combinados, asigné una clave de carro aquí a mi reductor de carro. 91 00:08:29,060 --> 00:08:33,160 Entonces aquí tengo. carrito y luego allí, dentro del 92 00:08:33,380 --> 00:08:40,780 reductor de carrito, administro mi cantidad total y el campo de cantidad total, así que eso es lo que necesitamos para acceder aquí, cantidad total. 93 00:08:40,800 --> 00:08:45,570 Esto le da al carrito la cantidad total y ahora podemos usarlo allí y con eso para 94 00:08:45,730 --> 00:08:49,820 asegurar que esto también se vea bien, es hora de un poco de estilo. 95 00:08:49,910 --> 00:08:56,450 Entonces, en la vista superior aquí, agregaré un estilo de pantalla tal vez porque esto envuelve toda 96 00:08:56,450 --> 00:08:57,680 la pantalla 97 00:08:57,680 --> 00:09:03,820 al final, luego aquí en esa vista, agregaré un estilo de resumen porque contiene todos 98 00:09:03,920 --> 00:09:07,130 los elementos de resumen, luego aquí en este 99 00:09:09,710 --> 00:09:20,790 texto, agregaré un estilo de texto de resumen y luego aquí, agregaré un estilo de cantidad, para que podamos darle un estilo diferente a la cantidad de texto. 100 00:09:22,270 --> 00:09:23,930 Entonces, para los 101 00:09:23,950 --> 00:09:34,840 estilos que quiero establecer, vayamos a la hoja de estilos y agreguemos pantalla, resumen, texto de resumen y luego, ¿cómo lo llamé? 102 00:09:35,300 --> 00:09:41,820 cantidad y, por supuesto, como siempre, depende totalmente de usted cómo quiere diseñar esto ahora. 103 00:09:41,820 --> 00:09:47,400 Ahora comenzaré con la pantalla, al final quiero tomar el tamaño completo de la pantalla si es necesario con 104 00:09:47,400 --> 00:09:54,420 la lista plana más adelante, pero comenzaré de manera simple y solo diremos que quiero tener un margen en todos direcciones en realidad aquí de 105 00:09:54,420 --> 00:10:03,390 20, así que alrededor de todo, para que haya algo de espacio alrededor de todo. Luego, aquí, resumen cuál es nuestro cuadro con todos los elementos 106 00:10:03,390 --> 00:10:09,210 allí con el pedido ahora y nuestro texto debe usar una dirección flexible de 107 00:10:09,210 --> 00:10:12,820 fila para colocar los elementos en una fila. 108 00:10:12,870 --> 00:10:19,950 Fui a alinear elementos en el centro para asegurarme de que estén centrados verticalmente y en su 109 00:10:20,040 --> 00:10:28,670 eje principal, quiero usar el espacio de contenido justificado para que los elementos tengan espacio libre entre ellos y los elementos 110 00:10:28,670 --> 00:10:35,040 son este texto aquí y este botón. Además de eso, podemos agregar un poco de margen 111 00:10:35,040 --> 00:10:36,360 aquí, tal vez 112 00:10:36,360 --> 00:10:42,540 también de 20, que es principalmente importante también para tener un poco de espacio entre el resumen y 113 00:10:42,540 --> 00:10:49,990 nuestra lista plana, por lo tanto, en realidad usaré el margen inferior aquí solo para tener un margen abajo y quiero agregar 114 00:10:49,990 --> 00:10:55,030 un relleno de 10 aquí porque el resumen debe estar en un cuadro elevado y 115 00:10:55,030 --> 00:11:05,050 para este cuadro aquí, iré al componente del elemento de mi producto y copiaré mi configuración de sombra aquí y el borde radio que tal vez tengo aquí y el 116 00:11:05,770 --> 00:11:12,030 color de fondo, de modo que tenga el mismo aspecto aquí en el carrito y, por supuesto, depende 117 00:11:12,040 --> 00:11:16,020 de usted si lo desea o no, pero lo copiaré allí. 118 00:11:17,420 --> 00:11:27,410 Para el texto de resumen, ahora quiero usar una familia de fuentes de caracteres abiertos sin negrita para resaltar realmente este total y un 119 00:11:27,980 --> 00:11:33,290 tamaño de fuente de 18 y para la cantidad de texto allí, estableceré 120 00:11:33,290 --> 00:11:36,880 el color en colores. acentuar el color. 121 00:11:36,890 --> 00:11:44,160 Ahora, para eso importante, por supuesto, debe importar colores desde la carpeta de constantes y luego uso acento 122 00:11:44,150 --> 00:11:50,710 y no primario para que realmente se destaque. Para ver si se ve como queremos que se vea, debemos 123 00:11:50,710 --> 00:11:55,660 asegurarnos de que tocar este botón de encabezado en nuestra pantalla de resumen del producto realmente nos 124 00:11:55,660 --> 00:11:59,520 lleve a la pantalla del carrito y para eso, se requieren dos cosas. 125 00:11:59,800 --> 00:12:04,510 Por un lado, tenemos que navegar aquí, pero antes de poder hacerlo, 126 00:12:04,510 --> 00:12:11,890 debemos registrar la pantalla del carrito en nuestro navegador. Así que haré eso primero, importaré la pantalla de mi carrito aquí desde la 127 00:12:11,890 --> 00:12:17,980 carpeta de pantallas, como era de esperar, desde la carpeta de la tienda y allí desde la pantalla del carrito y ahora esa es la tercera 128 00:12:17,980 --> 00:12:26,350 pantalla que agrego aquí a este navegador de pila, puntos de carrito en la pantalla del carrito . Con esa configuración agregada aquí, podemos volver a la pantalla de información 129 00:12:26,350 --> 00:12:33,220 general del producto y allí, ahora necesitamos ese formulario funcional para las opciones de navegación porque los datos de navegación 130 00:12:33,220 --> 00:12:37,670 nos permiten acceder al accesorio de navegación y llamar a navegar, por lo 131 00:12:37,990 --> 00:12:41,240 tanto, necesitamos ajustar esto en otro objeto que devolvemos 132 00:12:41,300 --> 00:12:50,610 y luego aquí podemos llamar a navData. navegación. navego y allí, voy al carrito y, por supuesto, 133 00:12:50,700 --> 00:12:54,950 este es el identificador que acabo de elegir en el navegador de 134 00:12:55,050 --> 00:12:58,530 la tienda aquí, este. Con eso, veamos, si hago 135 00:12:58,580 --> 00:13:01,050 clic aquí, ahí estamos, este es mi 136 00:13:01,050 --> 00:13:01,740 total, 137 00:13:01,740 --> 00:13:03,030 en realidad creo que 138 00:13:03,030 --> 00:13:06,610 el color de acento no es tan bueno allí, así que 139 00:13:06,780 --> 00:13:13,170 en realidad volveré a la pantalla del carrito y diseñaré esto para usar el color primario también, pero lo 140 00:13:15,490 --> 00:13:22,060 principal es que podemos ir allí y si ahora trato de agregar artículos al carrito, agregué la camisa dos veces 141 00:13:22,060 --> 00:13:29,400 y la alfombra una vez, esa cantidad total me parece bien. Probemos también esto en Android, por supuesto, para asegurarnos de que 142 00:13:29,400 --> 00:13:35,700 funcione allí y, en general, funcione, agrego una camisa roja más y, por lo tanto, aquí también vemos un 143 00:13:35,700 --> 00:13:41,730 problema con la forma en que se muestra. Para solucionar esto, en la pantalla del carrito, asegúrese de 144 00:13:41,760 --> 00:13:48,600 que en el precio, siempre generemos dos decimales en la cantidad fijada. Ahora, por cierto, en caso de que se pregunte 145 00:13:48,600 --> 00:13:51,350 de dónde viene esto, este número 146 00:13:51,540 --> 00:13:57,150 largo, esto no es un error o nada realmente para React Native, este es un comportamiento 147 00:13:57,150 --> 00:14:05,080 normal de Javascript cuando está trabajando con números de punto flotante y, por supuesto, para corregir No se debe invocar en el 148 00:14:05,110 --> 00:14:11,440 estilo aquí, sino en la cantidad total del carrito. Así que este fue un comportamiento 149 00:14:11,440 --> 00:14:18,530 normal, no un error, así es como Javascript internamente almacena números de coma flotante, pero 150 00:14:18,530 --> 00:14:29,830 ahora nos aseguramos de que esto se muestre correctamente con dos decimales. Lo que falta es el botón y aquí ahora realmente quiero usar el color, el acento de 151 00:14:30,760 --> 00:14:37,190 colores para tener mi botón de color de acento. Entonces, si ahora voy a mi carrito aquí en iOS, así es como se 152 00:14:38,920 --> 00:14:41,500 ve el botón allí, así es como se ve en Android. 153 00:14:41,590 --> 00:14:46,690 Siempre podemos presionar esto, por supuesto, quiero desactivarlo, aunque si no hay nada en el carrito 154 00:14:46,990 --> 00:14:55,090 y para eso, ahora también necesitamos obtener nuestros artículos del carrito. Por lo tanto, los artículos del carrito también se pueden obtener con el selector 155 00:14:55,090 --> 00:15:01,320 de uso, también desde la sección del carrito, pero allí, lo que nos interesa es el accesorio de artículos del reductor del carrito. 156 00:15:01,320 --> 00:15:09,150 Entonces, si eche un vistazo al reductor de carrito, allí verá que tenemos los artículos de propiedad. 157 00:15:09,310 --> 00:15:11,260 Este es un objeto que estoy recuperando 158 00:15:11,270 --> 00:15:18,280 ahora, por lo que los artículos del carrito son un objeto, no una matriz, en realidad una matriz sería mejor para mí aquí y, por lo tanto, usaré 159 00:15:18,370 --> 00:15:25,750 la forma larga para obtener esto y devolveré una matriz aquí y no un objeto Entonces, podemos obtener nuestros artículos de carrito transformados aquí, 160 00:15:25,750 --> 00:15:36,260 por ejemplo, creando una nueva matriz aquí dentro de esta función de selector y luego podemos agregar un bucle for / in para pasar por 161 00:15:36,260 --> 00:15:43,910 todas las teclas en estado. carro. artículos, para recorrer todos los 162 00:15:43,910 --> 00:15:47,120 pares clave-valor en este objeto de artículos de 163 00:15:47,120 --> 00:15:51,200 carrito que tenemos allí y quiero agregar cada uno de 164 00:15:52,950 --> 00:16:01,030 ellos como un artículo a los artículos de carrito transformados. Entonces, empujaré un objeto Javascript que tenga una ID de producto, digamos cuál es solo 165 00:16:01,060 --> 00:16:06,850 mi clave, porque en el objeto de artículos del carrito de ID, la ID del producto se almacena como una clave, si 166 00:16:06,850 --> 00:16:07,930 lo recuerda, así 167 00:16:07,930 --> 00:16:14,320 que ahora agrego esto a la propiedad de ID del producto en este objeto lo agrego a la matriz de artículos del carrito transformado y 168 00:16:15,300 --> 00:16:27,240 además de eso, tendré el título de mi producto, que por supuesto es el estado. carro. artículos para la clave 169 00:16:27,240 --> 00:16:30,550 dada. Titulo del producto. 170 00:16:30,650 --> 00:16:37,900 Si echas un vistazo al modelo de tu carrito, verás que allí, el título del producto y el precio del producto son los 171 00:16:37,900 --> 00:16:41,510 nombres de propiedad que contienen el título del producto y el 172 00:16:41,560 --> 00:16:43,570 precio del producto, así que así 173 00:16:43,570 --> 00:16:49,790 es como accedemos a ambos, así que haré lo mismo aquí por el precio del producto y luego, también necesito 174 00:16:49,790 --> 00:16:58,770 la cantidad que es estado. carro. artículos para la clave dada. cantidad y, por supuesto, también la suma que es el estado. carro. artículos. llave. suma, de nuevo básicamente lo que teníamos aquí en el artículo del carrito. 175 00:16:58,770 --> 00:17:05,640 Entonces, lo que estoy haciendo es decir 176 00:17:05,640 --> 00:17:10,260 que estoy creando un nuevo artículo de carrito, no con mi modelo, porque es un 177 00:17:10,260 --> 00:17:17,690 artículo de carrito con una propiedad de ID de producto adicional, así que tengo esto aquí y ahora es esta matriz transformada de artículos 178 00:17:17,690 --> 00:17:24,300 de carrito que devuelvo después de esto para el bucle, de modo que este selector al final devuelve una matriz y 179 00:17:24,330 --> 00:17:25,850 no un objeto, por 180 00:17:26,040 --> 00:17:32,760 lo que los artículos del carrito ahora son una matriz que nos facilita usarlo en la lista plana y también nos permite 181 00:17:32,760 --> 00:17:38,730 verificar aquí en el botón ordenar ahora si queremos desactivarlo simplemente comprobando la longitud de esta matriz que ahora 182 00:17:39,210 --> 00:17:41,000 tenemos en los artículos del carrito. 183 00:17:41,010 --> 00:17:42,720 Entonces, aquí en el botón, podemos 184 00:17:43,170 --> 00:17:49,260 configurar el accesorio de desactivación que admite, afortunadamente, este es un componente incorporado que simplemente tiene un accesorio desactivado y allí puedo verificar 185 00:17:49,260 --> 00:17:56,790 si la longitud de los artículos del carrito es igual a cero, si es así, entonces yo Sé que está vacío y, de hecho, quiero desactivar el botón. Entonces, deshabilitado recibe verdadero o falso, por defecto es falso, pero lo estableceré en verdadero si la longitud de 186 00:17:56,790 --> 00:18:01,650 los artículos del carrito es 0. Y ahora ves si voy a 187 00:18:01,730 --> 00:18:08,020 la pantalla del carrito, esto está deshabilitado, si agrego 188 00:18:08,020 --> 00:18:16,800 un producto y voy allí, está habilitado y, por supuesto, también puedes usar un color diferente para el botón de ordenar ahora si lo deseas. 189 00:18:16,890 --> 00:18:20,540 Ahora con eso, estamos un paso más cerca de 190 00:18:20,550 --> 00:18:26,580 los carros terminados y, por supuesto, el próximo objetivo es dar salida a los artículos del carro.