Tutorial de carrito de compras en JavaScript

1. Introducción: Muy bien, chicos. Bienvenido a estos cursos sobre cómo construir un carrito de compras usando JavaScript vainilla. Entonces tenemos aquí un ejemplo del proyecto que vamos a construir en este curso. Por lo que este es un ejemplo de un sitio web de comercio electrónico. Como podemos ver, tenemos un par de ganancias aquí dentro algunas grandes camisetas y Ray ¿quién? Estas y algunas camisetas negras y sudaderas negras. Cuando encima del ratón sobre uno de ellos, podemos ver que tenemos estos botones que solo podemos hacer click y artes a carrito y tenemos aquí en la parte superior. Nuestra tarjeta que podemos ver en este momento está completamente vacía. Entonces, solo agreguemos un par de productos ahí para ver cómo funciona nuestra aplicación. Entonces voy a añadir dos de estas estupendas camisetas, por ejemplo. Entonces voy a dar click a 12 y podemos ver eso en la parte superior aquí dentro. Llegamos a en nuestra tarjeta por el momento, y luego voy a dar clic a tres de ésta, así que voy a hacer 123 Así que ahora sé que tengo en total cinco productos en mi carrito. Voy a dar click en estos Ahora puedo ver esta es mi página de tarjetas, cual, como por el momento, a grandes camisetas si recuerdan, con los $15 cada uno, conseguimos un total de $30 y luego sumamos tres de estas camisetas negras por $10 lo que da un total así de 30. Por lo que 30 más 30 conseguimos nuestra canasta total de 60 dólares. Pero, ¿qué más podemos hacer aquí? Mira, puedo si quiero aumentar o disminuir las cantidades de estos productos que tenemos en la tarjeta. Entonces, por ejemplo, voy a dar click aquí dedo del pie, tener uno más. Entonces, vamos a ver si voy a añadir uno más. Probablemente sumaré 15 dólares más encima de estos, así que va a ser como 45 aquí dentro debería ser 75. A ver si funciona. Voy a dar click 45 porque sus tres de ellos y yo conseguimos 75 en total. Obviamente, puedo simplemente, como, reducir esto por simple, solo por uno. Si quiero mirar ahora se acaban de conseguir 15 15 junto con estos 30 de estos tres. Tengo 45 y también puedo, Como dije, subir y bajar con estos. Ustedes realmente pueden probar esto después de que haya un botón aquí dentro que se puede deshacer de todos los productos de esta línea de ganancias. Entonces digamos que aquí tengo cuatro camisetas negras de mocoso total. Puedo deshacerme de todos ellos con solo hacer clic en estas X. Y mira, me acaban de ganar camisetas de 15 dólares con mi total y aquí en la parte superior. Ya ves que aún tengo a Onley avisar. Está bien. Y puedo volver entre páginas para esto. Si puedo ir a mi página principal, volver al auto y esto siempre está ahí dentro. Muy bien, chicos. Entonces este es el proyecto que vamos a construir va a ser impresionante para ti porque vas a aprender cómo lidiar con el dedo del pie con un almacenamiento local del de tu navegador. Cómo crear estas aplicaciones cómo utilizar funciones modulares en javascript. Vamos a usar muchas funciones modulares y sí, espero que estuvieras emocionado de empezar la partitura, así que ya veré cuando el otro lado 2. Construir la interposición de la Frontend: Muy bien, chicos, bienvenidos de nuevo a otro video hoy. Vamos a construir el carrito de compras e commerce con javascript vainilla. Por lo que el sitio web está aquí. Como puedes ver, tenemos cuatro productos que si lo superas, puedes ver sobre la anemia que digamos es después de carro. Entonces digamos, por ejemplo, voy a tener y dos negros que estos. Entonces solo voy a hacer doble click 12 y en la parte superior, deberíamos ver aquí un botón de tarjeta que como, como en eso en este momento. Entonces llegamos a los productos. Voy a tener que advertir de estos sudadera gris también. Entonces cuando hago click en él ahora, tengo tres. Entonces si recargo la página, mira, si recargo la página , sigue ahí. El número tres. ¿ Por qué es eso? Porque vamos a usar algo llamado el almacenamiento local. Todos los navegadores modernos. Ellos lo tienen. Y esto es impresionante para frente y obligaciones como esta que vamos a construir. Entonces si voy a dar click ahora en conseguir estas tarjetas, Vale, voy a dar click aquí, y ahora puedo ver que tengo dos de estas sudaderas negras que seleccionamos de antes, podemos ver el precio individual de la misma y el precio total de dos. Entonces si cada uno es de 20 dólares el total va a ser de 40. Y también tenemos una sudadera con capucha gris, que es de 20 dólares. Está bien. Y en conjunto, el precio debe ser de 60 dólares. A lo mejor voy a hacer un poco más. Entonces mis saben si necesitamos, Pero ojalá ustedes vean mejor. Por lo que también podemos hacer click en estas botellas para cambiar la cantidad. Digamos que voy a añadir uno de estos grises. Quién esta. De acuerdo, voy a dar click ahora. El precio total, porque él también es 40. Y ahora si ustedes chicos facturan aún también el carrito, tengo cuatro productos en total y fuera de curso. También se actualiza el precio total. También puedo hacer clic en estos botón de borrar que se deshará de todos estos productos. Entonces, por ejemplo, si hago click en esto, Ok, ahora solo tengo dos negros. ¿ Quién estas en el carrito de aquí? Yo sólo tengo dos, lo cual es perfecto. Y ahora el precio total es de 40 dólares. Y aquí abajo 40 dólares también. ¿ Por qué? ¿ Chicos? Entonces este es el proyecto que vamos a construir. Espero que quieras emocionado por estos. Y lo primero que vamos a hacer es solo, como, como, empezar a construir el HTML y CSS de este proyecto. No voy a pasar demasiado tiempo en estos HTML y CSS. Tengo al entrenador Justin aquí. Lo voy a usar, pero voy a explicar fuera de curso, pero quiero pasar un poco más de tiempo en javascript porque de eso se trata este curso. Pero como siempre, si ustedes tienen alguna pregunta, sólo háganmelo saber. En los comentarios abajo a continuación, respondo a todas sus preguntas. Y además, voy a poner algunos enlaces bien para algunos de estos archivos que todos estos archivos al final, si ustedes sólo quieren usarlos realmente depende de ustedes. Si no quieres, puedes simplemente, como, seguir y debería ser fácil. Entonces, empecemos. Está bien. Entonces lo primero que tenemos que hacer es simplemente crear nuestro archivo html de punto índice. Entonces eso es lo que voy a estar haciendo. HTML y ah, solo voy a apuntar alguna plantilla sencilla aquí. Html cinco. Yo sólo voy a cerrar estos los voy a poner aquí, como, en como, la cancha de compras superior y dentro. Sólo voy a poner ese h uno diciendo estos mares página principal. También voy a crear ahora un nuevo archivo para los estilos dot CSS Ok. Y voy a crear otro archivo, que va a ser para mi carrito dot html. Entonces esto va a ser igual que una página para ir al carrito donde tenemos todos los productos. Entonces solo voy a copiar todo lo que tengo en mi índice punto html cuando un poner estos dentro de mi carrito dot html y eso debería ser todo por ahora. Muy bien, Como mencioné antes, chicos, no voy a pasar demasiado tiempo con HTML y CSS en las partituras porque solo quiero dar un poco más de tiempo solo para javascript porque este es un curso de JavaScript. De todos modos, eso solo voy a pegar algún código aquí que ya tengo del proyecto. Ustedes chicos siempre pueden tener un enlace en la descripción si quieren conseguir los archivos. Um, si estás consiguiendo estos núcleos así que deberías conseguir los archivos si es que tú chicos solo quieres, como seguir y solo pausar el video y simplemente copiarlo. Siéntete libre también s. entonces lo que voy a hacer es, um solo voy a empezar nosotros el Heather. De acuerdo, solo voy a copiar esto, que he estado aquí de lado. Voy a pegarlo. Acabo de estar cerrado. Estos voy a ritmo thes. Entonces por el momento, tengo ah, elementos del cielo. Nosotros el Deve con una superposición de clase. Suficiente con el título H dos y con algún tipo de barra de navegación. Entonces si solo veo, cómo se ven las cosas en el momento en que simplemente se ve así. Está bien. Es una normal es una normal, um, navegación, pero de un sitio web. Como dije, chicos, les voy a dar sólo un poco de tiempo si quieren. Simplemente, como, copiar lo que tengo aquí dentro. Entonces una vez que tengas estos, en realidad podríamos simplemente, como, empezar a peinar nuestro sitio web, Así que solo voy a poner el enlace a mi CSS, y creo que lo llamé estilos. De acuerdo, pequeño punto CSS ahí dentro. Simplemente voy a pegar algunas cosas que suelo poner así que siempre pongo estas o no, mis sitios web dedo del pie solo, como, restablecer todo este tipo de propiedades, entonces Obviamente, nos metimos aquí una familia divertida roboto que no tenemos en este momento. Por lo que necesitamos importarlo de Google. De acuerdo, entonces si vas a los fondos de Google, Vale, voy a hacer clic en los teléfonos de Google, y sólo estoy usando este roboto. De acuerdo, entonces ustedes pinchan aquí en la parte inferior. Deberías ver Déjame sólo mover estos un poco a un lado. Deberías ver igual que un enlace para importar estos. Entonces eso es lo que voy a estar haciendo. Yo sólo voy a copiar copias de esquina y pegado Sólo, um, aquí dentro. También necesito poner fuera de curso un enlace. No estoy seguro si pongo el Lincoln. Sí, puse el enlace en el mal me puse el auto para puntar html en el lugar equivocado. Voy a quitárselas del carrito. No, realidad, en realidad, tengo que dejarlo aquí de todos modos, porque vamos a estar usando estos para el carro s. Así que sólo voy a ponerlo aquí, acuerdo? Estilos dot CS dice Bien. Entonces logramos hacer esto. Déjame volver aquí. Simplemente guarda deja que pongas algunos estilos más. Voy a poner el estilo para mi hever. ¿ De acuerdo? Voy a poner el brezo en año por el momento, como ustedes pueden ver, Mi cielo, sólo tiene, como, como, una imagen de fondo que está muy bien estilizada con una altura de 150 píxeles. Entonces si ustedes recuerdan, tengo en mi Sí, creo que muerdo pegado todas estas cosas. Voy a copiar todos estos porque esto va a ser exactamente lo mismo para mi índice. De acuerdo, fue sólo un error. Chicos. Puedes ir a copiar el mismo código tanto para índice como para el auto a dot html porque va a ser lo mismo. Mira, voy a pinchar aquí. Tarjeta domiciliaria sigue siendo la misma. Um, bien, está bien, hay una cosa en este momento que necesitamos es vamos a copiar cosa superpuesta. Ves estos dif overlay voy a poner en años, algún CSS que lo está haciendo, um, un poco más oscuro. Eso es lo que yo quería. Entonces voy a poner algunos estilos para mi nuff también, así que voy a poner aquí. Entonces por el momento mi novato dentro de aquí con el título y me metió aquí el menú, nav Lings. Entonces voy a poner unos estilajes bien para mis enlaces de navegación. Entonces voy a poner esto aquí. Yo le estoy dando un poco de tiempo. Como dije, si quieres solo, como, como, pausar el video y copiar estos estilos en el momento en que acabamos de llegar a casa. Y carrito, si tiene aviso aquí en la mina Navegación. OK, estoy usando algo llamado iconos de hierro. Vale, Este es algún tipo de iconos frontales que puedes usar que puedes aumentar el tamaño, cambiar la persona que llama y todo, y realmente me gusta usarlos. Soy dueño de iconos, Así que voy a poner aquí en Google iconos de hierro que son completamente gratis. De acuerdo, Alguien pinchando aquí. Y mira, tienes todos estos iconos que puedes usar al hacer click en el uso y quieres guiar aquí que necesitas poner en el cuerpo fuera de la página. Y luego si tu país continúa desplazándose hacia abajo, va a haber otro enlace aquí que dice instalación. Deberías ponerlo justo antes de tu estilo dot CSS. De acuerdo, entonces, um, si todo está bien y solo refrescamos nuestra página, debería estar funcionando. Déjame sólo ver si me falta algo. Creo que esto, uh tal vez sólo soy sobre Sí. De acuerdo, ahora estoy en casa y está ahí. Ok, pongamos un poco más de estilos para la tarjeta. Entonces sólo voy a copiar estos. Voy a poner, um aquí abajo. Mira, ahora está muy bien estilizado mi carrito. Como dije, está aquí todos los estilos, así que sólo estoy sangrada estos un poco mejor, Así que todo está bien organizado. Uh, déjame simplemente copiar todas estas rizadas en mi carrito porque va a ser exactamente el mismo índice y tarjeta en este momento. Deberían ser exactamente iguales. Entonces si vas entre casa y carrito, él va a ser el mismo. De acuerdo, así que conseguimos estos para nuestro brezo. Ahora podemos empezar a construir, por ejemplo, los productos y ahora estos productos es solo para la página html de punto índice. Está bien, déjame ver. Um solo voy a copiar estos, ¿de acuerdo? Tengo un contenedor. Entonces voy a copiar mi contenedor que tengo aquí dentro, y te voy a mostrar. Entonces después del brezo, Verás, solo voy a dar un poco de espacio, ¿de acuerdo? Cuando superó a estos. Y este es mi Deve con una clase de contenedor con un par de estas imágenes que si ustedes no recuerdan, he estado aquí a un costado de carpeta con estas imágenes, ¿de acuerdo? Y estas imágenes que tienen dentro de todas estas cosas que voy a usar, Así que déjame sólo aumentar. Pero voy a poner estos en año. Voy a aumentar esto para que ustedes puedan ver un poco mejor. Entonces conseguiste el arranque del contenedor, y luego conseguiste un trato con una imagen de clase que esta va a ser cada una fuera de las imágenes con la imagen dentro con el título con el con el precio. Y luego nos dieron el botón de pedido al carrito que no vemos. Voy a deshacerme de estos insumos porque creo que al final no estaba ni usándolos. Está bien. Para que puedas deshacerte de estos insumos. Yo sólo estaba tratando de hacer otra cosa. Entonces si refresco la página, mira, deberías ver algo así como el's ahora mismo. Está bien. Creo que acabo de poner como, cuatro productos. Puedes poner tantos como quieras. Volvamos a los estilos que CSS Now déjame ver. Tarjeta A. Sólo voy a poner mi contenedor, así que voy a poner aquí mi contenedor. Simplemente deshazte de esta cosa. Te voy a explicar eso después, Así que si pones este contenedor ahora, deberías ver aquí los proyectos. Entonces solo voy a poner imagen. Esto es para darle estilo a nuestras imágenes. De acuerdo, así que se ven un poco mejor así. Entonces lo voy a hacer a dos tarjetas porque tenemos que cargarle botón dentro. ¿ Qué más entonces? Fuera de curso. Creo que lo olvidé. Um, no, no peleé por poner solo voy a poner estos para cuando esperemos más cuando esperemos las imágenes, podemos ver el botón de la tarjeta ARTO. Ahí está. Está bien. Las organizaciones benéficas 30. Esterritt, facilidad. Está bien. Y si voy a carro, no hay nada. Y si voy a casa, tengo todos estos. Está bien, así que creo que eso es todo para estos chicos de video. Nosotros montamos nuestro proyecto. Nuestro proyecto inicial. Esto no tiene nada relacionado con javascript, pero creo que siempre es bueno para ustedes ver un poco cómo iniciamos el proyecto, cómo agregamos todos estos diferentes elementos. Y por supuesto puedes peinarlo como quieras. Está bien, así que eso es todo para estos chicos de video y también en el siguiente. 3. Agrega números al carrito al carrito del carrito: Bien, chicos, bienvenidos de nuevo. Entonces en estos video que vamos a hacer es dar click en estos son dos botones de tarjeta y vamos a actualizar el botón que tenemos aquí dentro. Eso es una rayada. Por lo que cuantas veces haga clic en el add to cart, vamos a contar cuántos productos estamos agregando a la tarjeta. Entonces lo primero que vamos a hacer es ir a nuestro índice dot html. ¿ De acuerdo? Y justo después del guión que tenemos aquí abajo, voy a crear otro guión. De acuerdo, Nosotros la fuente off main dot Js. De acuerdo, así que voy a agregar estos aquí en el lateral, así que sólo voy a hacer un clic derecho nuevo archivo, y voy a hacer un punto principal Jess. Y sólo voy a poner la consola, el registro de correr. De acuerdo, sólo asegúrate de que esto esté funcionando. Entonces voy a dar click derecho en mi página. Voy a hacer una inspección, ¿de acuerdo? Y voy a mirar aquí dentro en la consola, y puedo ver aquí dentro del lado corriendo. Está bien. Si ustedes pueden ver aquí, es mi bitácora del consulado. Entonces significa que mi archivo de punto principal Js está conectado Así que esto es perfecto. Eso Lo primero que quiero hacer es ir aquí arriba, y voy a hacer un let y voy a hacer cartas. Igual a dos documentos dot Queary selector todo y lo que quiero seleccionar es mi punto al carrito . Está bien, voy a mostrar ahora. ¿ Qué es eso aquí en mi índice dot html? Mira, tenemos estos elementos de anclaje que con una clase de pedido al carrito, si quieres ver es este botón. Está bien, así que quiero dedo del pie conseguirlos todos con JavaScript. Por lo que necesito apuntarles. Por eso estoy usando estos. Y entonces lo que voy a hacer es que sólo voy a hacer un oyente de eventos. Por lo que cada vez que hago clic en uno de ellos, quiero hacer algo. Entonces porque nos dieron montones de ellos cuando agarramos estos va a ser, como en una especie de matriz. Podemos simplemente hacer un bucle de cuatro para Let I igual a 20 Así que vamos a recorrer a través de todos ellos, y voy a hacer yo Él va a ser un último. Entonces las tarjetas de punto de longitud, ¿de acuerdo? Y luego vamos a hacer un I plus. Plus. De acuerdo, entonces esto es solo un bucle simple que va a correr desde cero dedo del pie carro esa longitud. Entonces, ¿cuánto cuesta la tarjeta? Longitud de inicio. Tenemos 1234 Así que voy a ser menos que cortes esa longitud va a estar corriendo de cero en trato 30123 Vale, así que si gano aquí un curso, sostén ese log, voy a dar mi bucle. ¿ De acuerdo? Voy a guardar estos. Y mira, tengo mi bucle corriendo en estos cuatro looks cuatro veces. Entonces, ¿qué quiero hacer aquí? Yo quiero agarrar mis tarjetas. Está bien. Y sólo voy a poner aquí. Yo porque mi ojo va a cambiar en estos bucle va a empezar desde cero Eso va por uno y cosas para que pueda agarrar todas mis tarjetas en base a esto. Um, porque obviamente, si ustedes recuerdan, pueden tener tarjetas. Cero para agarrar este aquí, puedes tener cartas. Una cartas. Quieres agarrar éste ahí. Y así uno. Por eso estoy usando el bucle. Entonces voy a hacer un oyente de eventos de adiciones. Y qué oyente de eventos quiero. Yo quiero dar click. De acuerdo, entonces voy a poner la función. Entonces lo que estoy haciendo aquí es cada vez que hago clic en uno de estos botones, quiero hacer algo. Por el momento. Yo sólo voy a hacer un botón de consola dot lord off, o voy a hacer otros, también. Tarjetas. De acuerdo, voy a entrar aquí. Mira esto de un lado. Mi consola. Voy a dar click en estos fuera al carrito, y dice otros dos autos, voy a volver a dar click y mirar dos veces voy a volver a dar click. 34 Entonces todos estos botones, ahora están funcionando. Entonces, um, ¿ qué quiero hacer aquí? Básicamente, acabo de hacer este tipo de eventos. Escúchala si quiero, pero por el momento, voy a crear una función llamada números de tarjeta. Entonces sé cuántos artículos estoy agregando al carrito, así que voy a hacer una función. Llamé a los números del carrito. Entonces tal vez lo primero que voy a hacer es simplemente agregar algún tipo de valor al almacenamiento local . Es así como vamos a guardar todas estas ganancias que estamos agregando aquí en la página. Y aunque te refresques, van a ser recordados. Entonces cada vez que haga clic aquí, Así que sólo voy a hacer estos números de tarjetas de auto. De acuerdo, voy a poner esto aquí en lugar de este registro de consola. Y lo que voy a hacer es que voy a hacer un punto de almacenamiento local dicho artículo, y luego voy a poner números de carro y luego el siguiente, sólo voy a poner el uno, por ejemplo, y te voy a mostrar en un segundo. Entonces si entro aquí, refresco la página. Voy a dar click ahora primero, antes de dar clic, voy a entrar aquí en la parte superior. Voy a entrar en aplicaciones. Está bien. Por cierto, chicos, estoy usando el navegador Google Chrome. Creo que va a ser algo parecido. Si ustedes están usando Mozilla Water Opara o lo que sea. Ustedes chicos o safari, si quieren seguir exactamente cómo lo estoy haciendo, sólo los usaron. El navegador Google Chrome. Entonces aquí, Espera. Dice aplicación en la parte superior. ¿ Ustedes van al almacén local? Y si ven aquí, no hay llaves ni valores por el momento. De acuerdo, entonces cuando haga almacenamiento local, no ponga el carrito de artículos números uno, esto es Vamos a agregar algo ahí dentro. Entonces te voy a mostrar pinchando aquí en estos. Mira, tengo una tarjeta números uno, ¿de acuerdo? Y si hago clic otra vez sólo va a hacer re hacer lo mismo una y otra vez. Entonces por ejemplo, ahora hice clic una vez y actualizó mis números de carrito. Mis números de tarjeta clave y el valor uno. Si vuelvo a hacer clic, no pasa nada. Entonces tal vez al hacer clic en estos quiero comprobar si inicialmente hay algún tipo de valor clave ahí dentro. Entonces, por ejemplo, si sé que está aquí uno ya quiero que la próxima vez que voy a dar click vaya a aumentar un poco estos. Entonces vamos a obtener estos valores la primera vez que hacemos clic en el botón. Consigamos estos valores. Entonces voy a hacer flett números de producto va a ser va a almacenamiento local pensamiento, y voy a hacer me sale bien artículo. Y el artículo se llama si ustedes recuerdan aquí en las primeras tarjetas, números Vale, entonces, um, sólo voy a dio consola dot log de estos productos en números. De acuerdo, así que mira estos. Voy a dejarme ver mi consola en este momento. Eso no es nada aquí. Yo sólo puedo deshacerme de eso. No te preocupes por estos, um, error que estaba ahí dentro. Yo solo voy a dar clic aquí y mirar, tengo mis números de producto bien desde ahí. Pero si ustedes entran aquí y hacen una estafa, así que punto cerrar sesión teclea los números de producto. De acuerdo, déjame solo sacar estos. Voy a volver a dar click. Y dice que es uno que estamos agarrando de nuestro almacén local. Viene como una cuerda. De acuerdo, entonces tenemos que hacer algo dedo del pie convertir estos números de una cadena a un número. Entonces para eso, solo puedo hacer, um, um, los números de producto va a ser igual a un parse int. Está bien. Fuera de los números de producto de antes. De acuerdo, Ahora, tu último log de nuevo. El tipo fuera de los números de producto. Está bien. Simplemente voy a revisar mi consola, refrescar la página, deshacerme de éstos cuando hago clic en ella, y dice ahora es un número porque usé estas partes en para convertir la cadena en un número. De acuerdo, así que vamos a deshacernos de estos troncos de punto cónsul por ahora. De acuerdo, Entonces una cosa que voy a hacer antes de empezar a seguir con estos es sólo empezar aquí. Variable en la parte superior llamados productos. Esto va a ser igual a una matriz. Y esta matriz va a tener algunos objetos dentro con el nombre apagado, por ejemplo. Camisetas grises. Está bien. Y luego va a tener una charla. De acuerdo, Esta es una forma que vamos a usar para agarrar las imágenes después. ¿ De acuerdo? Ataque de Ray Camiseta. Y luego va a tener un precio 15 y luego va a tener en tarjetas fuera de cero. Entonces esta es una manera que podemos simplemente, como rastrear cuántas veces este artículo que este producto está en el carrito? Eso sólo voy a ir y hacer lo mismo por el resto de los productos. Sólo voy a copiar estos que tienen de lado. Cuando una copia estos, lo voy a poner aquí. Entonces estos son todos los productos que voy a estar usando. Está bien. El gran camiseta, la sudadera con capucha gris, la camiseta negra y la sudadera negra. De acuerdo, como se pueden ver todos ellos al principio, tienen en tarjetas. No hay nada en la tarjeta. Está bien. Um bien, así que aquí, cuando haga clic en una de estas cosas Ah, primero, fuera de curso, quiero correr estos, um, um, números de tarjeta. Yo quiero chequear. En primer lugar, si hay algo aquí en mi en mi almacén local, Vale, entonces para eso, voy a hacer algo de declaración aquí, ¿de acuerdo? Porque si me voy a quitar estos look, si ustedes sólo dan click en estos despejar todo y simplemente refrescar la página si traté de hacer un registro de puntos de consola de estos números de producto la primera vez que se llega a la página y simplemente se da clic en tarjeta de hasta. Si intentas sacarlos del almacén local y tratas de hacer estas partes en porque no existe te va a dar, como, indefinido o no. Sólo vamos a comprobar. Voy a hacer en la consola. Voy a dar clic y va a ser, como, no un número. Ok? Eso vamos a hacer esto. Si la declaración así lo voy a hacer si Ok, si hay algunos números de producto, Ok. Significa que ya hicimos clic ahí desde antes. Hemos sido algo a la tarjeta. Quiero hacer un conjunto de puntos de almacenamiento local. Ah, números. De acuerdo, así que solo voy a cortar esto Voy a poner este en el almacenamiento local del año. Ese artículo conjunto para que los números de mi tarjeta sean lo que fuera de antes. Mira, eso es lo que estamos haciendo aquí. ¿ De acuerdo? Más uno. Está bien. Y si no hay ningún producto bien aquí con cualquiera si ya había productos ahí en nuestro almacenamiento local, si eso no es ninguno, Ok, Ok, Lo que voy a hacer es solo establecer mi almacenamiento local para establecer los números de la tarjeta del artículo para ser uno. De acuerdo, así que esto es lo que vamos a revisar ahora. Déjame solo ir de pie aplicación. Es decir, solo borra estas cosas en tus chicos. No olvides hacer esto, porque entonces no vas a trabajar como se pretendía. Entonces voy a refrescar la página. Voy a dar click aquí. Entonces la primera vez que vamos aquí, Obviamente estamos tratando de meter algo ahí dentro. No obtienes nada. Entonces esto no va a ser un número. Entonces cuando tratamos de hacer esto, si existen números de producto, que no son los números que significa es falso, quiere decir que este código se va a ejecutar. De acuerdo, entonces almacenamiento local, vamos a fijar el ítem de los números de tarjeta. Eso es lo que tenemos aquí arriba. Y va a fijar el valor de uno. La segunda vez que voy a hacer clic en una de estas tarjetas, Vamos a obtener los números de producto del almacén local. Obtendremos el número uno como cadena. Entonces vamos a convertir estos en un número. Ahora, voy a decir si los números de producto existen ahora es uno así que existe y es cierto. Entonces lo que haremos es hacer un almacenamiento local. Ese artículo conjunto nuestros números de carrito van a ser los números de producto, que acabamos de obtener antes con el número uno. Entonces uno más uno va a ser lo que vamos a probarlo. Ahí vas. Y entonces ¿qué pasa si sigues pinchando? Mira, tienes toda la cantidad de productos que estás dando click en él. Ahora hay una cosa más que podemos hacer. Que es cuando hacemos click aquí en o nada estos al almacenamiento local. Yo quiero eso. Si este es el primer elemento, solo puedo usar documentos. Déjame sólo hacer un documentos Docks, Selector de consultas. Está bien. Y quiero seleccionar mi carrito span. De acuerdo, déjame mostrarles chicos. ¿ Cuál es el's o mi barra de navegación que tengo aquí? Mi ¿Dónde está? Aliado, Con una clase de cartas dentro, tenemos un lapso con el número cero. De acuerdo, si ustedes no recuerdan, es esto de aquí. De acuerdo, mira, estos lapsos con el número cero. Eso es lo que estoy agarrando ahí. De acuerdo, así que déjame volver. Y quería acceder al texto. Ah, contenido. Toby es igual a dos eso. Yo quiero ser, Por ejemplo, si él es la primera vez que estamos haciendo sólo va a ser un cercano a uno. ¿ De acuerdo? Si no, lo que haremos es solo establecer, um, um, el contenido de las cubiertas para que sean números de producto, que vamos a agarrar de lo que sea que esté aquí. Está bien. Más uno. De acuerdo, Entonces estamos agarrando todos los productos que ya tenemos en nuestro almacenamiento local, y estamos agregando uno. Entonces básicamente, estamos haciendo lo mismo que aquí, pero estamos actualizando nuestro carrito. ¿ De acuerdo? Es decir, deshazte de todas estas claves de almacenamiento local que hemos refrescado la página. Y ahora mira, voy a dar click en después de tarjetas. ¿ De acuerdo? Entonces conseguimos uno. Voy a volver a dar clic. Yo llegué a y también aquí en la parte superior. Voy a dar click aquí tres y así uno. Si refresco la página mira, ahora se ha ido, acuerdo? Todavía tenemos nuestros valores de almacenamiento local, pero aquí en la parte superior, nuestra tarjeta está vacía, por lo que necesitamos hacer algo al respecto. Entonces lo que voy a hacer es solo crear la función, ¿de acuerdo? Tener función llamada en cargas, tarjetas, números. Está bien. Y esta función solo va a comprobar lo mismo como aquí desde antes, vamos a crear una variable llamada números de producto va a revisar el dedo del pie de almacenamiento local , conseguir una noche, um, off números de carro si existe. Entonces voy a hacer si hay algunos números de producto del almacén local. Está bien. Lo que quiero hacer es solo establecer mi documento ese lapso de tarjeta selector de consulta, contenido de texto. Toby es igual a la cantidad de productos que están en mi almacén local. De acuerdo, ahora, estas funcionando aquí nunca van a funcionar a menos que lo llamemos. Si ustedes recuerdan esta función de números de tarjeta se adjunta dedo del pie a evento click oyente dedo del pie estos botones. Pero esta función que acabamos de crear ahora nunca va a funcionar hasta que la llamemos. Entonces solo voy a llamar a esta función aquí abajo. Entonces cada vez que carguemos la página por primera vez, éstos van a correr, y él va a revisarla. Entonces si refresco la página, Mira, el carrito está todo el tiempo. Tres. Entonces si voy a salir, por ejemplo, como uno a tenemos cinco aquí en la parte superior, como pueden ver, si me refresco o si voy a la página del carrito y luego vuelvo. Mira, está ahí. Muy bien, chicos. Entonces eso es todo para estos v vista y todos demandando al siguiente 4. Agrega productos al almacenamiento local: Muy bien, chicos, chicos, bienvenidos de nuevo. Entonces en el último video, si ustedes recuerdan, estábamos igual que pinchando en estas son dos cartas. Y estaba actualizando nuestro carrito abotonando aquí en la charla con cuántos artículos tenemos en el carrito. Pero por el momento, no sabemos exactamente qué artículos qué productos tenemos en nuestro país. Entonces esto es lo que vamos a aprender en estos videos. Entonces lo primero que quiero hacer es si ustedes chicos recuerdan cuando necesitamos estos cuatro mudanza Teoh en estos oyente de eventos, haga clic a estos Botones Afganos. No sabemos por el momento en qué tipo de producto estamos dando click, sólo sabemos que podemos hacer click, y esto va a agregar algo al auto. Entonces déjame solo mostrarte lo que quiero hacer cuando llamo a números de tarjeta de disfunción. Yo quiero pasar dentro de estas tarjetas miembros quiero pasar. Sí, productos. OK, estos productos de un año. Entonces, ¿dónde está los productos y voy a poner aquí. Yo así como ustedes recuerdan, estamos haciendo estos cuatro look que comienza con la indexación aquí. Cero. Y fue hasta las tres. Por lo que cada uno de estos productos va a tener un índice. Entonces cada vez que hago clic en esto y llamo a esta función, solo podría agarrar estos aquí culo un producto, ¿ vale? Y justo en el principio, te voy a mostrar. ¿ De acuerdo? Yo sólo estoy lleno de maíz Soul. No mires. Y voy a decir que los productos click es solo voy a poner años, uh, espacio de coma y voy a armar producto. De acuerdo, así que voy a dar click derecho aquí en la página, inspeccionar Así puedo abrir las herramientas del desarrollador. Voy a entrar a mi consola y mira lo que voy a hacer si voy a dar click en esta. Mi gran camiseta. De acuerdo, mira, el hermano al que hizo clic en ISS y me va a mostrar aquí. Nombre Grandes Camisetas. Cansado. Camiseta gris precio 15 en tarjeta cero. OK, Y si recuerdas, esto es lo que hay aquí en la parte superior. De acuerdo, así que déjame despejar estos Refresca la página. Imagínese eso. Ahora voy a dar click, o esta la sudadera negra. Voy a dar click en su Sólo estoy refrescar la página. Despeja estos ahora da click en la sudadera negra y mira lo que dice. Nombre Negro. ¿ Quién? El objetivo. Negro. ¿ Quién? El Nos dieron el precio y en tarjetas al igual que estas. Entonces estamos en el paso correcto. Ahora, saca estos a nuestro almacén local. Si ustedes recuerdan en nuestro almacén local, lo único que tenemos en este momento es solo, um solo refrescarse. Voy a dar click en estos. Simplemente no tenemos aquí por el momento. Apenas los números de la tarjeta. De acuerdo, entonces lo que haré es si me desplazo aquí abajo. Entonces les estoy pasando estos a los números de tarjeta y aquí abajo después de que lo haga todo, solo toma este bloque de alguacil con solo necesito más. Voy a llamar a una función llamada sit IVs. Está bien. Y también estoy con un pase estos productos. De acuerdo, Así que estoy pasando el producto aquí, el que estoy pinchando en mis números de auto. Yo lo agarro aquí arriba en estos números de tarjetas, y luego lo estoy pasando aquí a estas otra función que no existe en este momento , pero vamos a crear es ahora. De acuerdo, Así que establece los artículos. Vamos a crear estos elementos de sentido de función. ¿ De acuerdo? Y vamos a agarrar estos productos. Pongámoslo aquí también. Y yo sólo voy a una parcela de Lord y voy a decir incluso firmar la función de elemento de set , y voy a hacer otro consulado. Mira, mi proyecto lo es, y solo voy a darle un destello al frente. Eso está bien. Tan solo asegúrate de que estas funcionando aquí se esté ejecutando. Entonces voy a despejar estos. Voy a pinchar aquí sobre nosotros a Cartland, revisar mi consola y mirar dentro de la función del artículo. Mi hermano usó un gran platillo en que acabo de hacer clic. De acuerdo, refresqué de nuevo cuando hago clic en estas sudadera gris ahora, dentro de la función del elemento set. Mi producto es que quiere el nombre. ¿ Quieres empatar eso? El precio y los ingresos Perfecto. De acuerdo, entonces lo que queremos hacer, primero que nada, voy a hacer, ¿eh? Productos puntos en tarjetas en carrito. Va a ser igual a uno. De acuerdo, Entonces la primera vez que estabas haciendo clic aquí, eres podría hacer punto de producto en carrito, porque si recuerdas Ah, tenemos estos en tarjetas, opciones? Sí, productos médicos en carrito. Y luego voy a hacer un almacén local. No fije artículo creo que ese set item que Sí, Dios estableció ítem y lo que voy a llamar a estos está bajo el problema. Mira creo que eso es lo que tenía de antes. Sí. OK, entonces productos en tarjetas, y luego voy a poner una coma y luego el valor que quiero. De acuerdo, así que ahora mismo sólo voy a poner, uh, Tal vez voy a arrancar una nueva variable en el vehículo. Dejen las tarjetas. Está bien. Esto va a ser igual. Dos personas vieron un objeto, y yo voy a poner aquí es ataque. Voy a poner los productos tipo punto. De acuerdo, solo voy a poner estos nombre y luego dentro de éstos, voy a pisar sólo el producto en sí, ¿de acuerdo? En algún lugar para salvar estos, déjame simplemente empujar estos Primero que nada, aquí arriba. Y ahora voy a dio voy a pasar estos artículos de auto aquí. ¿ De acuerdo? Entonces déjame entrar aquí. Déjame que te quites todas las cosas que hay dentro. Cuando actualices la página, voy a dar clic en uno de estos y mirar lo que pasa. Dice producto en tarjeta y me dieron objeto. Objeto. De acuerdo, Entonces el problema es cuando estamos creando estos objetos que voy a pasar a mi almacén local . En realidad necesitamos hacer algo llamado Jason. No se extraña si yo porque necesitamos pasar estos no como un objeto javascript, sino como objeto adyacente e a nuestro almacenamiento local. Entonces lo que podemos hacer es Jason dot string si yo Ok, y si pongo esto aquí, Jason no string. Si yo y yo vamos a barcar artículos de auto, creo que eso es si no me equivoco. Vamos a deshacernos de esto. Eso es refrescar. Voy a dar click en el 1er 1 y ahora está bien. De acuerdo, sólo voy a empujar estos aquí. Mira, esto es lo que tenemos ahora dentro de nuestro Un sólido local sobre productos a tarjeta. Tengo una gran camiseta con el nombre de gran camiseta para atacar el precio. Y me metí en la cuenta uno. Está bien, perfecto. Entonces conseguimos la primera parte. Pero la cosa es, si quiero un rapido ahora en el 2do 1 por ejemplo, estas tumba Woody. Ahora ves que estos se superan por escrito, Así que empecemos con esa parte. Porque no queremos que Estos se superen escrito todo el tiempo Así que, para eso es, cada vez que hacemos clic en los artículos del set por primera vez, necesitamos comprobar si existe ya algún tipo de artículos de auto aquí ya o no. De acuerdo, así que hagamos esto. Entonces voy a hacer que oigan Let's cards artículos va a ser águilas al almacenamiento local. De acuerdo, déjame solo pasar por estos. Vamos porque ya lo inicialicé aquí en el salón primero. Entonces el almacenamiento local no consigue artículo, ¿de acuerdo? Y el artículo que quiero conseguir es estos productos en clases. Está bien. Para comprobar si existe. Ya, algo en nuestro almacén local así que no consigue empate. Eso son cartas. De acuerdo, entonces esto es lo que van a ser los artículos de mi carrito. De acuerdo, y luego me voy a un auto, así que camina. Y voy a decir que los artículos de mi carrito son, y sólo voy a poner aquí cartas artículos. De acuerdo, así que vamos a revisar estos. Voy a refrescar la página. Voy a entrar a mi consola. Voy a hacer clic en estos grable, el por ejemplo, y mira lo que tenemos que conseguir en la parte superior. Los artículos de mi carrito son, y luego nos pusieron grave mal humor, y nos dieron nombre y si revisas estos. Esto es en un Jason para imágenes y cuatro meses. Exactamente. Porque su viejo lleno de estas citas no está en un objeto javascript normal. Entonces para esa manera, tienen a Quién se tiene artículos igual a dos. Jason. No es difícil, porque queremos pasar de Jason a un objeto JavaScript. Vale, um, así que voy a hacer aquí es, um sólo los artículos. De acuerdo, Ahora voy a volver a dar clic en estos foodie. Y, Lou, lo que conseguí esta vez, Ok. Tengo mi gran película con el nombre con el tiempo del precio y en el carrito uno, esto es lo que hay ahí exactamente en este momento, cual es perfecto, cual es perfecto, para podamos ver qué hay ahí dentro. Bueno, sólo veamos débil comprobación aquí y primero dentro de cada declaración. Si está bien, guardias, artículos de auto, él es la diferencia, entonces. No. Está bien. Significa que ya es algo ahora en un almacén local en nuestras tarjetas. De acuerdo, si estamos tratando de conseguir algo de nuestro almacenamiento local y tuvimos un tomarlo estos con adyacente es como un objeto javascript. Y luego hacemos un cheque Si nuestros artículos son diferentes a no, significa algo que ya existe. Entonces esto es lo que queremos hacer. Queremos hacer tarjetas, artículos, artículos, y luego voy a poner estos soportes para poner mis productos. El tipo va a ser igual a todos. Perdón. Quiero acceder a los métodos de tarjetas. Toby es igual a dos o más Waas igual a uno. Entonces esto es para aumentar uno que ya está ahí dentro, y te voy a mostrar ahora. ¿ De acuerdo? Esto es casi, como cartas artículos en. Entonces, por ejemplo, si voy a elegir el 1er 1 el ataque de producto si ustedes recuerdan, es genial camiseta. De acuerdo, esto es lo que va a pasar. ¿ Dónde está? ¿ Dónde está? Es justo esto Esto es exactamente la misma longitud facilidad. Está bien. Y entonces estamos consiguiendo que estas propiedades se llamen en tarjeta, y lo estamos incrementando en una. De acuerdo, solo soy todo esto, así que, uh, solo estoy claro estos refresco Voy a dar click en el 1er 1 Mira estas grandes d mierdas la primera vez. Mira, tenemos uno en los números totales de tarjeta y lo que tenemos dentro, tenemos un no-objeto con llave de grandes camisetas y dentro de ella, tenemos el nombre. El tiempo el precio. Y nos metimos en el carro uno. Voy a entrar limpio una vez más. Mira. De acuerdo, entonces no pasó nada. Déjame ver. Porque con estas, si las declaraciones y tenemos que poner eso más OK, estas más van a ser si estamos dando click hacia abajo en la primera vez. ¿ De acuerdo? Cuando estás haciendo clic hacia abajo la primera vez, solo quieres configurar tu producto en cortes para que sea uno. Esta es la primera vez que estás haciendo clic. Significa que los artículos de tu auto son no. Ahí adentro no hay nada. De acuerdo, entonces déjame que me ocupe de estos. Refrescar. Voy a temblar aquí dentro. Y nos dieron una gran camiseta con el nombre talk precio en corte. ¿ Qué? Porque esta fue la primera vez que hicimos clic. Voy a ir y voy a dar click en el siguiente. Y si me voy a quedar abierta, me impactaron sobre unas dos de estas camisetas. Y cuando hago clic una vez más, mira, tengo tres en tarjeta y sé que los números totales de tarjeta también son tres en la parte superior OK, pero hay un problema ahora con estos porque si voy a entrar, click, por ejemplo en estas camiseta negra podría decir: Mira, Mira, ¿qué va a pasar? Nada es más que aquí. Mira, voy a refrescar la página al hacer clic aquí. No está pasando nada. ¿ De acuerdo? Porque, mira, estamos teniendo todo el tiempo todavía estos y gran camiseta de antes. Entonces vamos a arreglar esto, Por cierto, solo voy a dar clic aquí en la consola para dejarles mostrar, mirar y tipo de corte error no puede re propiedad de en carro de indefinido. De acuerdo, entonces el problema es cuando estoy tratando de hacer esto, si trato de hacer donde los artículos de carrito y luego producto ataque punto en carrito fuera algo que no se ha agregado antes, como, por ejemplo, estos si se checa aquí en este momento, nos dieron estos grandes temas porque esto fue lo primero en lo que hicimos clic. De acuerdo, ustedes recuerdan cuando hacemos clic en estos la primera vez, estamos actualizando nuestro producto en carros. Toby es igual dedo del pie uno. De acuerdo, Lo que sea que hagas clic, entonces creas estos mismos leche Son artículos. ¿ De acuerdo? Toby es igual a lo que sea su producto Nombre del tiempo. Vale, Así que si haces clic, por ejemplo en la camiseta negra por primera vez cuando se acaba de refrescar fue rápida en la camiseta negra por primera vez. Mira, ¿se ve el producto tarjetas? Tienes esta camiseta negra llave, y luego tienes todo dentro con en auto una la segunda vez que haces click. OK, lo va a comprobar fácilmente. No pueden los artículos saber si recuerdas los artículos del carrito solo está tratando de recuperar lo que tenemos aquí. Si no se sabe estamos haciendo medias articulos y entonces imagina que voy a dar click en estas sudadera gris porque estos gran moody no existen al escuchar estos objetos, como puedes ver nos va a dar ese error. Por lo que vamos a revisar estos. Ahora, voy a hacer un look cómodo solo para mostrarles que hacen un punto de consola Log off the car items brother to attack. De acuerdo, así que por el momento tenemos en nuestro almacén local solo una camiseta negra. Entonces si trato de semana en estas sudadera gris, mira sarnoso s 66 que es estas linea dice que estos indefinidos. De acuerdo, Entonces si esto no está definido, si trato de asumir este Israel, dice indefinido. De acuerdo, entonces no podemos hacer nada porque es un producto amplio diferente al primero en el que hicimos clic. Por lo que haremos cualquiera de declaración. Yo me voy aquí. Si tarjetas, iTunes, puntos, puntos, tipo de productos es la diferencia, entonces en el hallazgo. Está bien. Quiero actualizar los artículos de mi auto para que sean iguales a un objeto nuevo. Está bien. Y lo que voy a hacer es agarrar lo que sea que esté en los artículos de mi auto de antes, usando al operador de descanso de los trabajos. Genial. Entonces no lo hacen nuestros pensamientos, tarjetas, artículos, y entonces lo que voy a poner es sólo mis productos esos tiempos con mi producto ahí dentro. De acuerdo, así que eso debería ser. Y finalmente, luego fuera de curso , solo actualizo el en carros. Toby Bliss uno. De acuerdo, déjame guardar estos. Es refresco. Voy a dar click, por ejemplo. Esta es la primera vez. Por lo que la primera vez que hacemos clic en un producto está bien. Entonces voy a hacer clic en estos grandiosos camiseta. Mira, tengo la gran camiseta con en carro de uno. Voy a dar clic una vez más y tengo ingresos a. Pero ahora, si trato de ir y dar clic en una diferencia Productos, por ejemplo, estos sudadera gris Ok, um no funciona. Veamos qué es lo que está mal en la consola. Sigue diciendo que en el 73 usan algún tipo de siempre eso Vamos a revisar mi sólo claro estos refresco y mirando aquí. Perdón, no quiero que esto sea diferente a sólo bien. Yo quería ser igual a uno definido, como estábamos revisando antes. Si al hacer clic, uno de estos objetivos de estos productos me va a decir que está indefinido. Solo quiero actualizar mis artículos de auto para ser lo que sea en mi almacén local de antes y después en estos nuevos productos. De acuerdo, entonces vamos a refrescarnos. Voy a hacer clic en estas camisetas. Quieres Vamos a chequear. Tenemos cartas de guisado. Voy a dar click a uno más. Por lo que los tres. Ahora voy a dar clic al gran Moody, por ejemplo. Está bien. Um oh, no guardé mi archivo. Perdón por eso, chicos. De acuerdo, vamos a entrar aquí aplicación. Vamos a deshacernos de estos. Refrescar. Voy a dejar 123 Quiero tres de estos. Voy a dar click en el Santo y mira, me dieron el gran Houdini también. Con uno en tarjeta. Entro aquí y doy clic. Yo llegué a en contras y si ves Mira, tengo tres aquí dentro de la gran camiseta a la que llegué de la sudadera con capucha gris. Y no necesito un total de artículos en la parte superior que acabamos de agarrar de antes del video anterior cinco. De acuerdo, ni siquiera puedo tener una más. Digamos que los barcos de té negro que es camiseta negra, nombre, tiempo precio y en carro. Está bien, así que creo que eso es todo para estos reales Y sólo a ver si me estoy perdiendo algo más. No, creo que eso asientos Muy bien, chicos, igual que de costumbre. Si tiene alguna pregunta, sólo házmelo saber en los comentarios que aparecen a continuación. Y eso es todo para ti. Chicos de video. Te veré en el próximo 5. Calcular el costo total en el carrito: Muy bien, chicos, chicos, bienvenidos de nuevo. Entonces en este video, vamos a calcular el costo total de nuestros productos que estamos agregando al carrito. Entonces voy a crear la función. Um, probablemente. Sí, eso puede hacerlo. Justo aquí abajo. Después de todos estos. Simplemente organice este código un poco mejor. Um, solo para que no tengamos, como, muchos espacios diferentes en todas partes. Está bien, creo que está bien. Entonces voy a crear la función aquí llamada Costo Total. Está bien. Y estos funcionan cada vez que voy y hago un vistazo a través de mi propia aplicación a Carter Button va a pasar este funcionamiento aquí. Costo total. Y quiero pasar por dentro los valores de estos productos. De acuerdo, entonces voy a hacer mazos. Simplemente me gusta antes. Por lo que cuando hago click en una de estas, puedo obtener acceso a sus propiedades que tenemos aquí dentro. Entonces van a ser productos. Yo Ok, entonces voy a agarrar estos valores. Agarraremos estos volumen en año. Nosotros el a parámetro off producto. Puedes llamarlo como quieras, porque este es el perímetro que solo lo estás agarrando. Entonces solo voy a dio consola no Señor fuera de los productos Fries es y luego voy a poner la llamada. No va a poner productos. Puntos, papas fritas. De acuerdo, vamos a probar estos. Voy a mi consola. Voy a dar clic, por ejemplo, estas sudadera negra, que cuesta 25 dólares con un clic, y él va a decir los precios del producto 20. De acuerdo, porque no los actualizé aquí correctamente. Entonces me dieron 25. Tengo 10. Entonces 25 10 y luego me dieron 20 y luego me dieron 50. Ok, lo siento por eso, chicos. No tenía los mismos precios, como los del año en la página html. Entonces déjame simplemente ir a borrar viejo almacenamiento local. Refresca la página para que no tengamos nada en guardia ni nada. Voy a dar click en estas sudadera negra. De acuerdo, entonces conseguimos estas sudadera negra en nuestro almacén local. Tenemos un producto en tarjeta, que está bien. Tenemos la tarjeta número uno, y sólo voy a entrar a mi abogado, y dice que es el precio del producto East 25. Perfecto. Porque hicimos clic en estas sudadera con capucha. Voy a dar click en estas gran camiseta ahora. Entonces debería decirme el producto. Precios 50. Está bien. Y ochenta. De acuerdo, entonces estamos agarrando las cosas primero. Lo que quiero hacer es que voy a hacer un almacén local. No establezca el artículo. Está bien. Este Sí, set item. Y al que el artículo que quiero fijarlo se le va a llamar costo total. Y lo que quiero poner dentro es el precio de mi producto. De acuerdo, mi precio de producto. Entonces vamos a entrar en aplicación. Elimina todo el almacenamiento local para que podamos reiniciar. Voy a dar click en estas gran camiseta y mirar, ahora nos dieron el costo total de descuento. 15. Entonces si voy a volver a dar clic en él, Mira, Mira, nos acabamos de llevar en tarjetas, ¿de acuerdo? Yo no hice click. Supongo que sí. Tengo dos tarjetas gemelas de estas gran camiseta. El total total de números de tarjeta sigue siendo también. Pero nuestro costo total no se está actualizando porque cuando hacemos clic la primera vez, estamos estableciendo el primer valor. Pero si hace clic por segunda vez, necesario comprobar si hay algo en el almacenamiento local que ya existe o no. Entonces eso es lo que vamos a hacer. Yo solo estoy prevenir estas leyes consuladas y voy a crear la nueva variable aquí dentro. Voy a llamarlo lleva. Costo de tarjeta. Va a ser igual a dos almacenamiento local pensado consigue artículo. ¿ Y qué artículo quiero obtener? Yo quiero agarrar este que se llama el costo total. De acuerdo, entonces voy a dio karl soule dot bloqueo de mi carrito. Su costo es, y entonces sólo voy a poner estos costos tallados que estamos agarrando del almacén local . De acuerdo, echemos un vistazo a esta consola. Voy a pinchar aquí en estos geniales malhumorados, por ejemplo, y me va a decir que el costo de mi tarjeta es de 15. ¿ De acuerdo? Y si voy a hacer un curso, el candado, sólo voy a hacer qué tipo de costo corriente. Esto es solo para mostrarte ¿qué tipo de datos es? Entonces voy a pinchar aquí en este gran mal humor, y me va a decir que mi carrito cuesta 20 y es una cuerda. Entonces cada vez que recuperamos algo del almacenamiento local, viene como una cadena porque queremos el número. Voy a actualizar el costo de mi auto. Está bien, déjame entrar aquí. Cuando jugué mis cartas cuestan ser igual a dos A analizarlo fuera del costo de la tarjeta. Por lo que estamos convirtiendo de una fuerza en un número. Entonces voy a intentarlo una vez más. Ahora quiero el tipo fuera el tipo de datos de thes variable es uno de tu número, por lo que en realidad podemos usar el ahora toe calcular el costo total de nuestro carrito. De acuerdo, entonces lo siguiente es que voy a comprobar si mi costo total es no o no. Porque, por ejemplo, la primera vez que hago clic en él, solo quiero hacer esto, OK, Pero si mi gato costo no es en absoluto, significa que existe que ya algo en mi almacenamiento local. Yo quiero hacer algo diferente. Entonces mi costo carped es diferencia, ¿ entonces? No, significa que lo existe. Voy a hacer otra cosa. Voy a poner estos en mi almacén local. De acuerdo, vamos a guardar estos. ¿ Qué? Yo quiero poner el interior del año. Deseo establecer mi almacenamiento local, no establecer artículo de estos costo total. Y esto va a ser lo que haya ahí dentro desde antes del costo del carrito más estos precio del producto nuevo al que estamos dando click Ok, Entonces cuyo auto costo más precio. De acuerdo, um, probemos esto. No, despeje el almacenamiento local. Actualizar la página. Entonces si hago clic una vez en mi gran camiseta, tenemos algún tipo de aireación aquí. No conseguimos un número. Veamos qué pasa aquí dentro. Bueno, creo que el problema podría ser porque sólo queremos convertir el costo de nuestro carrito. Cuando se funden los costos de corte es en realidad diferente a no. A lo mejor esto es lo que nos está dando un problema. Entonces, solo despejemos la actualización de almacenamiento local. Voy a dar click en mi gran e turno uno. Mira, tengo 15 dólares. Voy a volver a hacer click ahora. Tengo el total de descuento 30 y me dieron el total de productos aquí para revisar también nuestros productos en tarjetas. Tengo un gran tema. Si hago clic en él, me dieron el nombre ataque un precio y cuántos cortaron a. Ahora voy a hacer exactamente lo mismo para la sudadera con capucha. A lo mejor igual de bien uno dos. Por lo que el precio total es 2020. Así es 40 más 15 15 30 40 en 30 es el costo total 70 el cual es perfecto y llegué a Gray. ¿ Quién? Estos en tarjetas. Tengo dos grandes camisetas en carrito y el total aquí en los cuatro primeros y mis números de tarjeta para así que todos estos ahora está funcionando bien. Muy bien, chicos. Por lo que tenemos nuestros costos totales. Sólo voy a hacer despejar estos una vez más y sólo dar clic. Por ejemplo, Una gran camiseta. Voy a hacer clic en una sudadera gris y, por ejemplo, camiseta negra desgastada. De acuerdo, entonces nos dieron 15 más 2035 más luego 45. ¿ Cuánto es nuestro costo total? 45. ¿ Cuántos artículos debemos tener en la tarjeta? Tres Look. Números de tarjeta. Tres. ¿ Cuánto hay aquí en la parte superior? Tres. De acuerdo, si hago click aquí productos en auto, tengo la gran camiseta. Tengo la sudadera gris y la camiseta negra. De acuerdo, todos ellos aquí. Muy bien, chicos, eso toma para estos video, y los veré en el siguiente. 6. Crear la página de la cesta con todos los productos: derecha, chicos, bienvenidos de nuevo en este video, vamos a empezar a hacer nuestra página de conteo cuando podamos ver todos nuestros productos que tenemos que cortar. Entonces si recuerdan que teníamos aquí son el botón superior, um, um,que nos lleva a la página del carrito en este momento. Aquí no pasa nada. Si hasta miras mira las cartas aquí dentro, no pasa nada. De acuerdo, entonces esto es lo que vamos a hacer en este momento. Agregamos aquí todavía nuestro almacenamiento local con las cosas que agregamos de antes. Si recuerdan, apenas estamos en el último video una gran camiseta, gris con capucha, una camiseta negra, todas estas cosas. Y una vez que vamos a nuestro carrito, no hay nada ahí dentro. De acuerdo, vamos a arreglar esto. Entonces lo primero es, necesitamos dedo del pie obviamente carga nuestro guión, ¿de acuerdo? Porque nuestro guión no se está cargando por el momento. Entonces si pongo estos ahora, estamos cargando al menos nuestro número de tarjetas de productos en el carrito. Por lo que esto ahora se actualiza aquí en la parte superior. El almuerzo está cerrado. Es uno por un segundo. Empecemos a ponernos algún tipo de elementos HTML de estilo. Para que ustedes puedan ver qué va a pasar. Entonces lo primero que quiero hacer es solo crear un ladrón con una clase de productos. Contener eso. De acuerdo, entonces dentro de estos fueron creados ladrón con una clase de producto que tenía, uh Entonces voy a tener en h cinco con garras fuera de los productos título, ¿de acuerdo? Y sólo voy a poner estos productos. Voy a poner otro H cinco a la clase de precio, y creo que eso es todo. Y voy a poner un precio. ¿ De acuerdo? Lo pondremos fuera de h cinco. Olvidó puntar para la clase, Teseo uno va a estar con una clase de cantidad cantidad. ¿ Quieres un poco de té? Y finalmente, voy a poner uno a través de la H cinco con una clase de total bien, y va a decir así va Así que está bien después de que estos se vayan con la clase de hermano candidato . Voy a poner un trato con la clase de sólo productos. Por lo que aquí es donde pondremos todos nuestros productos que están en el almacén local. Simplemente lo voy a dejar vacío porque vamos a poblar estos con javascript. Refresca la página. Ustedes chicos disparan CDs por el momento, justo este hermano lanza el precio total. Entonces tal vez podamos empezar a agregar algo de CSS. De acuerdo, así que voy a poner esto aquí sólo voy a poner la división. Entonces lo sé ahora. Esto es lo que va a detener la página de tarjetas de la mina, y voy a hacer, um, um, primer lugar, ¿ dónde hacer con Container Pro? Eso es, um, ¿dónde está? Mis productos de contenedor. Si recuerdo, esto debería llamarse como podemos llamarlo productos contenedor. Esto está bien. Entonces voy a llamar a estos productos contenedor, ¿de acuerdo? Y lo que quiero hacer con este ISS se pusieron un mes con off marks con off 650 pixels. Voy a poner los contenidos justifiquen para que sean sonidos espaciales, y voy a poner un margen cero también, por lo que se centra en la página. Y por último, vamos a ver, um, los márgenes también son y voy a poner los dieseles Jim 50 equivocados para los 50 píxeles superiores. OK, así como ustedes pueden ver tenemos ahora estos un poco centrados en la página. Viniendo. Va a inspeccionar. Mira, este es mi polainer escolar privado. Entonces todo está un poco más centrado en la página, como ustedes verán en un segundo. Entonces, ¿qué? ¿ Qué más quiero hacer? También quiero poner estos productos contenedor. Creo que si no me equivoco, está en mi contención solo mirando aquí productos que contienen así que vamos a aplicar estos mismos estilings en todas estas cosas. Lo siguiente que quiero hacer es solo poner un poco de estilo para mi producto. Encabezado alguien puso mazos de empate y ahí. Está bien, va a estar con la ola apagada al 100%. Va a estar con Max con apagado 650 píxeles con el foco apagado Flex Flex. De acuerdo, ahora quiero que la gente justifique el contenido. Creo que ni siquiera necesito poner este arranque de bandera. Voy a poner frontera ahí. Bottom off. Cuatro píxeles, derivaciones lentas, luces. Genial. Está bien. Como ustedes pueden ver se ve un poco mejor. Voy a poner a tu hijo margen de margen cero también. Está bien. Cual fue mi producto. Heather, es esto Sí. Entonces esto está bien. Entonces está, como, muy bien centrado en la página. Ahora que quiero estos, quiero dejar mis productos su título con una semana de descuento 45%. Mira, este es mi producto. ¿ De acuerdo? Entonces voy a revisar mi precio para estar con descuento, um, 15%. Supongo que también voy a poner algo de agua fronteriza exactamente igual. Al igual, de antes. Y voy a poner la tesis escamas fuera de las motas, justificar contenido? No, Una línea se alza. Uno de ustedes lo verá en un segundo. ¿ Por qué? Entonces estas cosas por el precio, creo que eso debería estar bien. Sí, porque después, voy a hacer otra cosa ahí dentro Eso tengo estos. Tenemos estos para células grandes. No creo que tenga que poner estos fronterizos ambos. Um, en realidad , um, ya veremos. Ya veremos. Dejemos esto por ahora. Y después de que lo hagamos, nos limitaremos a deshacernos de estos. Yo sólo voy a copiar Esto va a ser exactamente lo mismo. Entonces no quiero poner el video demasiado tiempo sólo por estos, ustedes chicos siempre pueden caer y simplemente copiar estos estilos que tengo. De acuerdo, entonces estamos por mi total y por mis productos. Está bien. Cuando una cantidad de refresco, creo que falta algo para mi, um, um, canasta de canasta. Tengo mi imagen de productos, mis productos. Esto va a ser para después de esto va a ser para mis productos. Creo que eso es todo. Sí. Waas Una vez que volvamos, mi cantidad creo que me falta mi cantidad. Esa fue la cosa después del precio. De acuerdo, creo que estas estas estas esperando mi precio? Sí, creo que esto está bien por ahora. Está bien, cierto. Entonces nos dieron estas partes, y obviamente no tenemos nada más. Yo solo quiero ahora entrar en mi punto principal Js. Entonces tenemos todo este estilo que quiero crear ahora, otra función que va a comprobar si hay algo en mi almacenamiento local para comprobar si hay algún producto en este momento, Eso son tres de ellos aquí. Si recuerdan, eso lo conseguimos. Simplemente empuja esto. Tenemos algún producto en tarjeta. Camiseta gris, una gris. ¿ Quién? El Juan. Tenemos una camiseta negra. Un costo total 45 consiguió el conteo. Números tres. De acuerdo, entonces, um, vamos y empecemos a poner estos con nuestro guión de trabajo, así que voy a crear la función llamada estas cartas de juego, acuerdo. Y quiero que esta función se ejecute siempre que amemos la página. Por lo que siempre que carguemos la página por primera vez, quiero que estas funciones funcionen de inmediato. Por eso lo voy a llamar aquí. Y lo que van a hacer estas funciones es que yo lo voy a hacer. Vamos a los artículos de carburador igual. Por lo que el almacenamiento local se desanima a obtener artículo. ¿ Y cuál es el artículo que quiero conseguir? Si recuerdan, conseguimos estos productos en tarjeta. De acuerdo, Así productos carritos, entonces obviamente encontrar para hacer artículo de tarjeta es igual a puntos Jason. Porque cuando agarras algunos objetos del almacenamiento local, vienen es Jason Con todas estas cadenas alrededor, queremos convertir de Jason en objetos JavaScript. Por eso estoy usando estos, Jason, no pars. Voy a poner esto aquí y ahora. sólo me apetece un look cómodo. Tan solo asegúrate de que esto esté funcionando. Voy a pasar aquí. Esta tarjeta, ¿de acuerdo? ¿ Vas a salvar estos? Voy a chequear. elemento de mi tarjeta de consola no está definido en línea. 98 artículos de carrito. De acuerdo, Eso es lo que quería venir. Yo Teoh. Está bien. El contacto es lo que encuentran cuando, Vale, había algunos casados aquí. Creo que es tipo de artículos. Entonces si ustedes revisan, Miren, cuando nos encanta la página en mi consola está diciendo: Mira, Mira, tengo todas estas cosas viniendo de mi almacén local, que es realmente lo que queremos. Queremos comprobar qué tipo de productos tenemos cuando nuestro almacenamiento local. Correcto. Entonces de verdad, lo primero que voy a hacer es solo hacer un cheque si artículos de tarjeta. De acuerdo, Entonces si solo pongo algo como esto, los artículos de la tarjeta van a comprobar si existe o no, si va a ser no o y encuentran que esto no va a correr, vale, quiero revisar estos si tarjeta artículos. Y también quiero comprobar si estos estos contenedores estos productos contenedor porque en nuestra página principal, porque tenemos compartiendo estos JavaScript final sin una página de inicio y con esta tarjeta. Entonces solo quiero que esto funcione. Si estos productos no contienen un elemento está en la página. Entonces sé que la disfunción sólo va a correr para la página de tesis. Entonces lo que voy a hacer es solo hacer mi contenedor Let's products. Va a ser igual. Dos documentos, perros, consulta, selector off. Quién había recordado estos productos. Uh, contenedor. Está bien. Entonces si el elemento del existe en la página, quiero que estas dos cosas se ejecuten. Voy a poner estas manos. Tan solo asegúrate de que esto esté funcionando a través de la web. Una mirada más cercana, Señor. Y voy a decir que estoy corriendo. Es sólo una prueba. Voy a entrar a mi consola aquí En la parte superior, digo correr. Por lo que significa que estamos en la página del carrito con el producto que no contiene elemento existe. Y también tenemos algo en nuestros artículos de auto en el almacén local. De acuerdo, eso es lo que me conseguimos. Esta condición de declaración if. Entonces ahora, ¿En serio? Lo que quiero hacer es dejarme simplemente separar esta ley del consejo. Voy a hacer mis productos conteniendo bien, Don't Skinner html. Está bien. Yo quiero inicialmente cuando carguemos la página que esté vacía. Si hay algo que ya está bien, y entonces lo que voy a hacer es que voy a mirar a través. Si ustedes recuerdan de esta ley consulada donde estábamos agarrando todas nuestras cosas con estos autos artículos quiero mirar a través de todas estas. Déjame sólo hacer aquí otro reloj consulado para que ustedes puedan ver cerrar el candado de los artículos del carrito. De acuerdo, mira, este es un objeto con llave de camiseta gris, sudadera con capucha gris, camiseta negra y dentro hay un objeto nominal, claro, pero quiero mirar a través de todas estas . Entonces voy a hacer bien objetos puntos valores de mis artículos de carrito. ¿ De acuerdo? Y entonces así quiero revisar los valores de mis artículos de carpa. No quiero revisar estas llaves. Yo solo quiero revisar los valores dentro. Entonces voy a mirar primero a través de estos objetos que a través de éste que a través de éste y demás. Voy a hacer una fregona. Y aquí dentro, sólo voy a llamar a estos un artículo, por ejemplo. Está bien. Y ahora es lo que voy a añadir. Voy a hacer un contenedor de producto. Pensado en html, voy a hacer un plus igual más igual. Entonces sé que la primera vez que va a correr la primera vez. ¿ Qué? No tenemos nada. Entonces la próxima vez va a agregar algo ahí dentro, va a extrañar, porque si tienes múltiples productos que no quieres anular, es por eso que necesitas poner el plus igual. OK, entonces voy a usar algunas garrapatas traseras. De acuerdo, porque no estoy familiarizado con estas tácticas es solo el camino para que podamos inyectar variables Cem dentro con las rayas. Y aquí dentro, déjame ver. Voy a poner a un ladrón, ¿de acuerdo? Con esa clase de productos, Ok. Y aquí dentro, quiero ir. Si ustedes recuerdan estas, ¿ son mis tarjetas? Está bien, me corta. Yo quiero poner una bata de cierre esta de aquí abajo si ustedes van a revisar. No estoy seguro si pides alguna por mi imagen que me van a ver chicos. Voy a empujar aquí. Siempre se pueden copiar estos. A mí me gusta un elemento. Está bien. Voy a pegarlo justo debajo de él. ¿ De acuerdo? Yo me dejo ver el ícono de hierro de alguien y luego después del deseo Nikon, voy a poner una imagen. Así es I. M g Nosotros esta fuerza fuera, está bien. Y esta es la fuente. Lo que voy a poner es, um, no cortes y voy a poner imágenes, perros, perros, un signo de dólar, y ahora voy a agarrar los pensamientos del artículo. Creo que está cansado. No j pagues y no encuentras mal. Creo que eso asientos y luego sólo voy a poner sólo ropa, el's. Yo también pondría bien el Spahn. el momento, la clase del Corán. Sólo voy a poner el nombre del perro bien. Creo que eso es todo. Simplemente cierra estos. Vamos a refrescar la página y vamos al auto. Mira, esto es lo que tenemos en este momento, acuerdo? Subiendo justo con esto. Entonces vamos a estilo camiseta gris. Vamos a algún problema aquí con mi lapso. Entonces, ¿qué fue? A lo mejor esto Vale, esto está bien. Tenemos nuestro tengo nuestro, uh, uh, botón de cierre porque vamos a cerrar thes después de que tengamos el nombre, tenemos la imagen, y eso es todo. Pongamos unos estilizados en esto. Déjame ver. Encuentra algo que falta. Voy a poner mis, uh, uh, estilos justo aquí después de mi contenedor de productos. Está bien. Voy a poner estos, uh, ¿ eres Nikon? Entonces podría ponerme estos estilos, ¿de acuerdo? Basta con aumentar sus productos de tamaño de teléfono que contienen puedo. Creo que todo está bien si no me equivoco. Veo lo que podría estar mal en nuestro contenedor de productos. Yo sólo quiero llorar aquí. Estos productos Mira, esto es lo que fue el problema. De acuerdo, tenemos estos productos que deben ser cuando queremos poner Si ustedes recuerdan en nuestro carrito este es el ladrón donde vamos a poner todos estos. Entonces ahora se ve mejor. Está bien, es así que esto está bien. Vamos al resto de las cosas. Entonces solo voy a entrar aquí en mi mapa de puntos. Déjame sólo ver. ¿ Qué más quiero poner ahí? Yo quiero poner otro regalo. Está bien. Con las garras fuera Precio. Está bien. Entonces sólo voy a causar Steve ahora, lo que quiero poner aquí es sólo que en realidad puedo simplemente poner estos en una línea. Yo quiero poner un año. Sólo el artículo Perros Precio. De acuerdo, entonces me dieron la cosa dedo del pie, saca estas cosas del este producto del carrito. Tengo el nombre, me dieron el precio. Ahora hagamos otra por la cantidad. Entonces lo voy a hacer ahora, Deif Ok. Con Kloss fuera cantidad, clase de cantidad, y luego voy a cerrar al ladrón, ¿de acuerdo? Y lo que quiero poner dentro es que voy a poner en realidad algunos iconos de hierro para aumentar y disminuir. Entonces si solo voy a entrar en estos iconos um Ustedes ven estas cosas? Sólo voy a poner algo así. Sólo voy a copiar algunas cosas que tengo aquí cuando un policía yo y yo podríamos. De acuerdo, estas van adentro. Entonces después, sólo voy a poner lo que voy a poner el lapso y vamos a poner las malas hierbas span. Mi artículo punto en el carrito. Tan asustado parte eso consiguió estos. ¿ Y qué más? Sólo necesito poner otro va a ser éste. El flecha a la derecha. Entonces sólo voy a copiar también. Lo voy a poner año después de la revisión de columna. Mira, esto se ve mucho mejor, ¿de acuerdo? Esto se ve mucho mejor mezclando algo en mis estilos en mi precio. Necesito poner estos también. Está bien. Sí, porque faltaban estos de aquí. Por último, sólo necesitamos poner algo en el total. De acuerdo, así que voy a poner quedo punto Js aquí. Simplemente pon otro ladrón. ¿ De acuerdo? Por lo que llama a la vista. Yo no haría esto con un total de clase fuera. Y ahora adentro, solo voy a poner un signo de dólar estos para poner mis pensamientos de artículo en tarjetas veces mi altura y precio de pensamientos. Entonces por ejemplo, aquí solo tenemos 15. Entonces van a ser 15 veces uno va a ser el total. Entonces si tienes, como, dos o tres productos el número se va a multiplicar por eso, y te va a dar, como, un total. Está bien. Eso Esto está bien. Yo quiero ser igual que un signo de dólar extra como fuerza. Y luego es Coleman 00 para que podamos tenerlo como si thes son dólares. Voy a lo mismo por el precio aquí arriba. Voy a tener otro lado de dólar como este. Entonces conseguimos estos 2010. Eso está bien. Y por último, lo que quiero hacer es justo después de que hagamos estos. Si la declaración, permítanme sólo ver si esto es después. Sí, después de mi bucle, sólo quería hacer de nuevo mi producto container dot html interno Va a igual a plus igual ok, y lo que quiero preguntar. Entonces voy a poner algunas tácticas más. Necesito poner estos. Eso es sólo semi. Colón es sólo una buena práctica para ir a poner un si está bien, y voy a posponer la clase. Um, canasta. Entonces? Por lo que contenedor reportan un NH cuatro que clase fuera de canastas. Entonces es todo lo que dije. De acuerdo, adentro. Yo sólo voy a verter, um, Cestas totales. Vamos a escolarizar estas edades cuatro manos. Voy a poner caliente o h cuatro. De acuerdo, esta vez con una clase fuera de canastas, quiero cerrar estas h cuatro y dentro. Yo solo quiero con letreros de $1 para que podamos ver el signo de dólar en la página. Entonces habría puesto tirantes de señal de puerta para que pueda poner mi carrito. De acuerdo, Si recuerdan del almacén local por ir toe aplicación nuestro costo total, necesito agarrarlo aquí. Entonces voy a hacer lo mismo. Al igual que de antes. Lo que no puede costar cuando una copia estos de antes. Lo voy a poner aquí. Deja que la tarjeta cueste. Y aquí abajo, sólo voy a poner cartas. Además Está bien, así que esto está bien. lo único que nos falta ahora si no me equivoco, es solo agregar un poco de estilo porque le falta. Entonces para el contenedor total de canasta, vamos a bailar estos. De acuerdo, entonces por el título de canasta, voy a poner la semana libre 30% y mis cestas totales. Sólo voy a poner la semana del 10%. ¿ De acuerdo? Así. Y como podemos ver Mira, obviamente, todavía no tenemos estas cosas funcionando. Esto es lo que vamos a hacer a continuación. Pero tenemos todos los productos que estamos agregando y queremos a los totales. Entonces, solo vamos a leer todos estos almacenamientos locales. Como pueden ver, no tenemos nada aquí por el momento. Y así me voy a ir a casa. Voy a añadir, por ejemplo, tal vez como dos negros. ¿ Quién? Estos 12? Voy a salir tal vez tres, um, 33 de estas camisetas negras. 123 Así llegamos a dos sudaderas negras y nos dieron tres camisetas negras con un total de descuento $50 por este 1 $30 para estos cuatro, y conseguimos este total. Muy bien, chicos, eso es todo para estos chicos de video. Ahora, lo único que nos falta ahora es igual que cuando pinchamos aquí. Podemos quitar a todos estos hermanos aunque haya 123 o lo que sea. Y luego solo hago clic en estas flechas para asegurarnos de que podamos aumentar o disminuir las cantidades. Muy bien, chicos, eso es todo para este video. Te veré en el próximo 7. Eliminación de productos de la página del carrito del carrito: Muy bien, chicos, chicos, bienvenidos de nuevo. Por lo que en este video, vamos dedo del pie agregó la funcionalidad para eliminar estos elementos con este botón que tenemos aquí dentro. Si le damos click, pesar de que podría haber como dos o tres de estas sudaderas negras o incluso si vas a quitar esta camiseta negra aquí dentro, podemos quitárselas todas a la vez con solo hacer clic en este botón. Entonces para eso, solo voy a crear aquí abajo después de mi función de tarjeta de visualización. Sólo voy a hacer un poco de espacio, y voy a crear una función llamada Elimina los leads, botones. De acuerdo, algo. Y ahora, verdad, lo que quiero hacer es igual que cuando hago clic en uno de estos botones, solo quiero probar para asegurarme de que haya una consola, ese log o algo para asegurarme de que esto esté funcionando. Entonces, en primer lugar, vamos a apuntar a todos estos botones en la página, Así que sólo voy a crear, um, variable llamada borrar botones también. Sería del mismo nombre. ¿ De acuerdo? Va a ser igual a documentos dot queary selector todo lo que sabes, porque va a haber múltiples de estos elementos en la página. Es decir, sólo empujó estos un poco más para que podamos ver lo suficiente como para que pueda simplemente redimensionarlo. Ah, y estos artículos, Si ustedes entran aquí cuando hacen clic en esto, realidad podemos ir en un producto. Y luego yo en Aiken. Está bien. Para que pueda hacer productos, y luego soy Icahn. Ese es el elemento. De acuerdo, eso debería ser bueno. Ahora, voy a armar un bucle de cuatro aquí. Entonces, cuatro, vamos. Hola igual a 20 Voy a hacer menos que borrar fondos longitud de punto. Entonces como muchos botones es que tenemos, vamos a hacer un cuatro mirado a través de todos ellos, entonces voy a hacer un I plus. De acuerdo, así que ahora en realidad puedo recorrer todos estos botones, ¿de acuerdo? Haciendo los botones de plomo me punto arts oyente de eventos y el oyente de eventos que quiero tener aquí es solo un click. Entonces voy a pasar una función o necesidades. Y ahora mismo, sólo para probarlo, Claro. Yo quiero hacer una consola que locke off clicado. De acuerdo, Así que las páginas se refrescaron. Entremos aquí, déjame abrir mi consola. Yo sólo me deshago de estos. Voy a dar click en estos botones y no pasó nada. Um, bien. Obviamente no pasó nada porque creamos esta función, pero en realidad nunca la llamamos, así que necesitamos llamarla en algún lugar para que estos Teoh puedan correr. Por supuesto. Entonces hagámoslo. Por lo que quiero llamar a esta función, Eliminar botones para aplicar estos oyentes de eventos, haga clic en uno alguna vez con esto. Juega el carrito. De acuerdo, Entonces antes en nuestros videos anteriores, configuramos nuestra función de tarjeta de visualización, que muestran todos estos elementos aquí dentro. Por lo que una vez que todo se muestre en la página justo al final de estas tarjetas de visualización, solo voy a llamar a la función de botones de borrar. De acuerdo, Ahora, nuestra tarjeta es todo lo que se muestra al final, llamamos a la función de botones de borrar y a la función de botones de borrar. Basta con configurar un oyente de eventos ofc fuga que cada vez que hacemos clic en estos botones, así como un registro de punto cónsul de clicado. Entonces eso es exactamente lo que voy a hacer. Voy a dar clic aquí y guarda clicado en la parte superior al hacer clic en estos un look , y viene dos veces como se hizo clic. Por lo que ahora estos botones son ROK son con una función que podemos hacer algo con él. Entonces probablemente lo primero que quiere hacer ahora es siempre que haga clic en estos botones, quiero agarrar estos, um, nombre del producto en sí. De acuerdo, así que si ustedes regresan aquí al HTML, pueden ver estos. Este es nuestro ojo en Aiken, por ejemplo, donde realmente estamos haciendo clic con el botón. Ah. Entonces si ustedes chicos van hasta el padre, en realidad podrían ir dentro del padre, obtener el contenido de las cubiertas, que debería darle a nombre del producto. Entonces probemos estos. Entonces voy a hacer aquí los botones de los leads. Yo perros elemento padre. Entonces estamos aquí en estos Aiken de hierro. Yo quiero subir un nivel al producto, entonces. De acuerdo, voy a hacer un condimento de texto de punto. De acuerdo, Pero obviamente, necesito poner estos dentro de ah, variable. Entonces solo voy a llamar a éste aquí. Vamos nombre del producto, por ejemplo, nombre de los productos. Entonces solo estoy inicializando la variable aquí arriba y ahora voy a poner nombre del producto igual al botón de eliminar. ¿ De acuerdo? El herido. En realidad estoy pinchando. Entonces imagina, por ejemplo, si estoy dando click en este, voy al producto parent element. Voy a conseguir el contenido de texto de la misma. Deberíamos ser sudadera negra. Entonces esto va a aplicar lo mismo para todos los demás productos que podrías tener aquí porque, um, solo va a ser la misma plantilla que ponemos para todos los diferentes productos aquí. Entonces, solo hagamos una consola que mire hacia fuera el nombre de estos productos en este momento. ¿ De acuerdo? Déjame guardar estos. Déjame entrar a la consola. Yo tengo uno. Ah, consulado talando aquí desde antes desde 102 Um, cuál es éste? Déjenme comentar estos outs, porque no creo que los necesitemos por ahora. De acuerdo, déjame refrescar la página. Déjame hacer click aquí y mira lo que consigo. Yo consigo sudadera negra, OK, Pero el problema es que porque estamos agarrando todas estas cosas desde dentro todo el contenido del texto también está trayendo muchos espacios en blanco diferentes que no queremos. Entonces probablemente Lo que necesitamos hacer es cada vez que agarramos este contenido de texto, quiero hacer un sueño de puntos estos puntos Treem básicamente elimina todos los espacios en blanco antes y después y los nombres que tenemos ahí dentro. Entonces probémoslo cuando haga un clic. Y ahora me puse negro. Quién el Si pruebo este y cuando un click y me va a dar block Camiseta Perfecta . Pero yo también quiero ahora, um poner todos estos ataques que todos tenemos en minúsculas porque te voy a mostrar después lo que voy a hacer. Entonces voy a hacer para transformar estos todos en minúsculas. Déjame solo Estamos todos a ver para que solo podamos envolver nuestro código para que no salga de la pantalla. Por lo que obtuve un nombre de producto igual al botón de borrar. cuál estoy pinchando por el momento. Voy al elemento padre, agarrando el contenido del texto, transmitiéndolo para que quite todos los espacios de antes y después. Y ahora voy a hacer otra, que es a minúsculas. Creo que hay que poner así para no no demasiado local. Demasiado menor a minúscula. De acuerdo, vamos trillados. Voy a dar clic en este, y mira, ahora, tengo sudadera negra, por ejemplo, y está todo en minúsculas. Eso no son capitales. Nada. De acuerdo, después de que tengamos estos, también quiero simplemente quitar el espacio aquí en el medio. Entonces quiero que el mundo sea solo uno, porque te voy a mostrar lo que voy a hacer con eso. Entonces para eso, solo puedo entrar aquí y estamos punto de reemplazo. Está bien, voy a hacer un poco de trapo X. No sé si alguna vez han escuchado chicos de estos, así que puedo poner aquí dos de estos cuartos slashes, y voy a poner el G. Vale, por lo que estos significa que va a buscar cualquier partido para algunos Ah, como el espacio, como este espacio a nivel mundial. Y sólo voy a reemplazar estas malas hierbas, una vacía. Así es básicamente quitar ese espacio de antes. Yo solo estoy aumentando aquí para que ustedes puedan verlo mejor. Por lo que debería ser como thes hija reemplazar. Nosotros queremos. Estamos buscando un espacio globalmente en todas partes y simplemente reemplazándolo por el espacio vacío. Básicamente como quitarlo, Como dije. Está bien, déjame refrescar la página. Despeja estos. Voy a dar click aquí y ver lo que tengo ahora. Sudadera negra. Y si hago clic en este, tengo camiseta negra. Entonces, ¿por qué tenía toda la molestia de conseguir estos nombres? Porque si ustedes recuerdan aquí arriba, Ok, cuando creamos nuestros productos variables, tenemos el nombre. Tenemos el ataque. Y ahora con el stock, si ustedes chicos chequean es igual a estos nombre que simplemente elaboramos para que en realidad podamos agarrar estos productos toda la información para hacer algo con él. De acuerdo, entonces empecemos a hacer eso. Entonces voy ahora abajo. Está bien. Ah, a los botones de borrar. Yo sólo voy a empezar la nueva variable llamada números de producto latte, y él va a ser igual a dos puntos de almacenamiento local Obtener artículo. Está bien. Y el artículo que quiero conseguir es si ustedes regresan a la solicitud, quiero agarrar estos números de tarjeta. Entonces quiero saber cuánta cantidad de productos tenemos en nuestro carrito, así que voy a poner aquí números de tarjetas. Está bien. Ah. Y ahora, cada vez que haga clic en uno de estos botones, solo quiero saber, por ejemplo, voy a hacer un registro de punto cónsul, um, de cuántos productos tenemos. Entonces yo voy a hacer aquí? Tenemos. Voy a poner un plus, y luego voy a poner otro plus y luego voy a poner los productos espaciales en un carrito. De acuerdo, entonces voy a refrescar mi aplicación entrando en la consola. Voy a dar click aquí, ¿de acuerdo? Y me dice que tenemos cinco productos en el carrito es solo decirme cuántos productos tenemos y fuera de curso, si vas a la aplicación, tenemos cinco productos en el carrito y lo puedes ver aquí también. Tenemos dos de sudaderas negras y nos dieron tres de las camisetas negras. De acuerdo, entonces, ¿por qué estaba agarrando estos? Te voy a mostrar. Ahora. Déjame solo deshacerme de estos, cónsul punto Log now. Genial. Algún espacio. Quiero configurar un nuevo almacenamiento local en aquí punto Establecer IDM para los números de tarjeta. Entonces voy a hacer números de tarjeta. Toby es igual a qué? A los números de productos. De acuerdo, así que si recuerdan, inicialmente sólo estamos agarrando los valores iniciales del producto que tenemos aquí en nuestro almacén local. Y luego cada vez que haga clic en uno de estos botones de borrar, quiero en primer lugar saber cuál es el nombre del producto, que acabamos de agarrar. Y ahora estoy actualizando los números de tarjetas de almacenamiento locales. Este de aquí que me dice el total de productos en la página, y quiero agarrar estos números totales de producto y luego mi enfermera, el total de productos que tenemos aquí en estas filas. De acuerdo, entonces, ¿cómo podemos hacer eso? Voy a entrar aquí en la parte superior y, bueno, bueno, dejar tarjetas artículos que va a ser igual a dos almacenamiento local pensamiento consigue productos IDM en carro. De acuerdo, entonces si recuerdan productos e en el carrito, um, ¿dónde está? ¿ Dónde está? Yo sólo puedo entrar aquí y revisar los productos en carrito. Tenemos la sudadera negra y tenemos la camiseta negra. Y luego me dice que la sudadera negra, por ejemplo, me da el nombre. Me da la plática, me da el precio y en carrito lo mismo aquí por el precio y en carrito. De acuerdo, Um, no estoy seguro. Por qué estoy en el Tal vez tengo algún error, creo que en año en mi consola. Sí. ¿ Dónde está? En línea. 151 Ah, porque aún no terminé el de. Eso está bien. De acuerdo, Todavía no terminamos estos de todos modos, así que conseguí este carrito artículos. Entonces, como de costumbre, voy a hacer un cónsul. Ese registro de estos artículos de tarjetas. De acuerdo, entonces , um, déjame comentar esto por ahora. Voy a guardar estos, y como ustedes pueden ver, cuando carguemos la página y los botones de borrar se enfríen, podemos ver estos, um, podemos ver estos, um, consejo no log que tenemos aquí desde los artículos del carrito. Obviamente, todo lo que viene del almacenamiento local, como lo cubrí antes viene con todas estas cadenas porque está en formato adyacente. Por lo que necesitamos convertir estos de formatos adyacentes de todas las cadenas en objeto JavaScript real . Entonces eso es lo que vamos a hacer ahora. Necesito hacer tarjetas. Artículos va a ser igual a Jason puntos, pars, y quiero analizar lo que estos artículos del carrito. De acuerdo, entonces ahora cuando haga esto, mira en la página. Mira aquí Ahora es un objeto javascript normal. Está bien. Está bien. Entonces mira estos. Tengo estos nombres aquí. Sudadera negra. Tengo estos nombrando aquí Block T shirt, que es igual que cuando hago clic en uno de estos botones. Mira, sudadera negra camiseta negra para que en realidad pueda agarrar estos objeto del almacén local haciendo estos? Mira, voy a hacer una consola que Locke aquí también fuera. En realidad, necesito hacerlo por dentro. Necesito hacerlo dentro de año de cuando hago clic en el botón. Entonces artículos de carrito y luego adentro, voy a poner el nombre del producto. Entonces estos me van a dar ya sea acceso a estos objetos o acceso a estos objetos. Entonces podría hacer, por ejemplo, digamos, ¿qué queremos agarrar? Queremos agarrar el nombre, la etiqueta, el precio o el en carrito. Sólo voy a poner ah, primer lugar el nombre. Vale, así que voy a poner nombre de punto, y luego voy a poner el plus para dar un poco de espacio y luego otro plus y voy a hacer artículos de CARRO , nombre del producto, y luego voy a poner aquí, por ejemplo, en carrito. ¿ Cuántos hay en tarjeta? De acuerdo, Entonces si hago click aquí, me va a decir el nombre y luego cuántos hay en el carrito? Vamos a probarlo. Mira. Camiseta negra. Tres en tarjetas. De acuerdo, si hago clic, estos una sudadera negra ahora me da el nombre Sudadera negra y dos en tarjeta. Entonces, básicamente, ahora que sabemos agarrar los valores que queremos, podría simplemente configurar. Déjenme deshacerme de estos. Cónsul, esos registros, sólo puedo hacer un punto de almacenamiento local números de tarjeta de elemento, Toby, El total de números que estaba ahí antes, que es cinco menos. De acuerdo, estos productos, Vale, artículos de la tarjeta, nombre del producto en el carrito. Por lo que sólo debería deshacerse de estos del total de la página. Pero esto es sólo una parte del problema, porque vamos a actualizar en Lee los números de carro y los números de tarjeta. De acuerdo, sólo va a actualizar esta parte aquí en la parte superior y los números totales de tarjeta también necesitamos actualizar el costo total. Muy bien, así que vamos a hacer un artículo de conjunto de puntos de almacenamiento local, y quiero configurar el costo total para ser igual a dos costos de nuestra tarjeta que ya existe aquí en el almacenamiento local. Entonces voy a entrar aquí en la parte superior y sólo hacer dejar cartas. Costo equivale a dos puntos de almacenamiento local obtiene artículo. ¿ Y cuál es el nombre? Costo total. Ahora, puedo usar aquí los costos de mi tarjeta. Por lo que este es el total que tenemos en este momento sobre nuestros mineros de almacenamiento locales. El precio de descuento estos dos artículos que tengo aquí. Entonces lo haré. Voy a poner algunos paréntesis en año. Voy a poner tarjetas, artículos, productos, nombre, puntos precio. De acuerdo, entonces llegamos al precio de la misma por una, y luego voy a multiplicar estos por la cantidad que tenemos. ¿ Cómo podemos obtener la cantidad que ya vimos antes? A eso podemos acceder a través de estos en carro. Bien. Por lo que estos ahora deberían cuidar nuestro costo total. Pero finalmente, tenemos que quitar cada vez que haga clic en estos, y quiero quitarlo quiero quitarlo también. Desde nuestro almacenamiento local de estos productos en carrito. Yo quiero conseguir una re lectura de eso ahí dentro. Entonces para eso, solo puedo hacer Si puedo bajar aquí, solo puedo hacer los artículos de la tarjeta de tapas, nombre de los productos. Entonces estos borrarán lo que tengo aquí dentro que ya no necesito. Y por último, solo tengo que actualizar estos productos en carrito en mi almacén local. Al igual que este artículo de conjunto de puntos de almacenamiento local. ¿ Qué artículo? Quiero los productos en tarjetas. Toby es igual a puntos Jason. Extraño Si recuerdo chicos que cada vez que queremos dedo del pie actualicen algún tipo de objetos en el almacenamiento local, necesitan estar en formato adyacente. Soto convertir de nuestro objeto regular al formato Jason. Te acaba de hacer Jason dot string Si yo y luego me acaba de pasar aquí los artículos de la tarjeta. De acuerdo, vamos a cerrar estos Finalmente. Yo solo quiero llamar a que esta placa de nuevo y la función on loads on loads card numbers que ellos se encargarán de nuestra página para simplemente recargar con los productos exactos que tenemos en el almacenamiento local. Entonces vamos a probar estos. Voy a refrescar la página. Yo quiero que ustedes jueguen mucha atención a lo que tenemos aquí dentro, porque después vamos a tratar con otras cosas de todos modos, así que tenemos en el top cinco hermanos en cartulina. Sabemos que nuestro costo total es de 80. De acuerdo, entonces voy a quitar estas dos sudaderas negras. Entonces dos de ellos. Entonces deberíamos tener finalmente tres en total. Cuando les quite estos y porque estoy quitando estos dos negros a quienes les costaron $50 el total debe ser, ¿qué, 30? Porque sólo hay, como, las camisetas negras ahí dentro. Entonces probemos esto y veamos si está trabajando. Voy a dar click en él. Mira, tengo tres hermanos en carro aquí. Se trata de los tres productos. Sólo veo estos tres productos. Tengo el total aquí dentro, y eso es todo. Si refresco la página, si voy a borrar esta, se ha ido todo. ¿ De acuerdo? Entonces, básicamente, incluso puedes ir a la parte de atrás a la página principal fuera más cosas. Ah, y esto va a funcionar. Entonces déjame mostrarte rápidamente. Si voy a mi página principal I en, por ejemplo, una gran camiseta a gris. Quién estos. Entonces conseguí tres en total en el carrito. Si hago click en estos. Entonces tengo tres en la tarjeta. Si me quito Ah, todos estos dos grises ¿quién? Esto que cuestan 40. Debería tener un total de, qué, $15.1 producto. Entonces probémoslo. Por lo que 15$ 1 producto, un producto en la parte superior. Está funcionando como se pretendía. De acuerdo, chicos, sólo queda un video ahora que vamos a ver cómo podemos simplemente hacer clic en los botones de cantidad para cambiar, aumentar las cantidades y disminuirlo como quieran. Está bien, así que pronto haré el siguiente video. 8. Aumentar o bajar la cantidad de productos en la página del producto del carrito: Muy bien, chicos, chicos, bienvenidos de nuevo a la parte final de construir un carrito de compras con javascript de vainilla. Entonces el último video que acabamos de manejar Teoh, si recuerdas, como, arte algo a las cartas, ¿de acuerdo? Y entonces podríamos simplemente, como, quitar las cosas así. Pero ahora, en estos video, sólo vamos a poder hacer clic aquí en estas cantidades y simplemente aumentarlas o disminuirlas. Muy bien, Así que si ustedes recuerdan aquí arriba cuando hicimos nuestras cartas de esta jugada, ponemos estos botones aquí. Estos tramos. De acuerdo, déjame gatear estos. Entonces estos juegos de palabras de aquí, tienen una clase de decretos o aumento, ¿ cuáles son estos botones de aquí? Estos iconos. Entonces lo primero que voy a hacer aquí abajo, así que no quiero hacer estos videos demasiado largos, así que sólo voy a empezar con esto. Voy a crear una función fría. Gestiona, Kwan Teoh T. Vale, esto debería estar bien. Entonces voy a crear esta función. Y lo primero que quiero hacer es que quiero agarrar todos estos botones, todos estos botones, que disminuyan las cantidades y también quiero agarrar todos estos botones que agarrarán el aumento de las cantidades. Entonces empecemos aquí primero. Vamos los botones crees va a ser igual. Dos documentos, puntos, selector de consultas. Todo bien. ¿ Y cuál es la clase que tienen? Si recuerdan, déjenme desplazarse hacia abajo. Aquí arriba es disminución. De acuerdo, así que tenemos Déjame deshacerme de la disminución del espacio. Entonces eso es lo que voy a poner aquí abajo. ¿ Dónde está? Led a disminuir botones iguales a selector de consulta todos. Ah, disminución. Entonces voy a agarrar todos estos botones que disminuirán, y soy de lo mismo para los botones que aumentan. De acuerdo, así que voy a poner botones de aumento incrementos, y va a ser igual a documentar ese selector de consultas todo y creo que es aumento. De acuerdo, déjame ver si eso es lo que puse aquí arriba. Esta clase de estos botones se incrementa, por lo que los felicitamos así. De acuerdo, Ahora, en realidad voy a entrar aquí y sólo miré a través de todos estos botones y Adam, un oyente de eventos. Entonces cuando hacemos clic en ellos, realidad podemos hacer algo Hagamos nuestro look de cuatro igual que de costumbre. Voy a hacer un cuatro. Mira, Deja que sea igual a 20 Necesito ser menos que decretos Esperanzas. Entonces necesito copiar se disminuye botellas de longitud de punto porque ustedes recuerdan que estamos agarrando montones de ellos. Entonces fue como una matriz. En realidad podemos ver. ¿ Cuántos tenemos aquí dentro? Y entonces sólo voy a poner yo plus, Así que vamos a aumentar en uno cada vez que hagamos el bucle. De acuerdo, Ahora, estoy seleccionando estos botones disminuidos, y voy a poner aquí yo para que sólo podamos mirar a través de todos ellos. Entonces la primera vez que va a ser voy a ser cero. Entonces vamos a agarrar estos. Ah, botón de disminución. La próxima vez va a ser ésta y así sucesivamente. Entonces voy a hacer unos pensamientos, artes, hasta el oyente. ¿ A qué oyente de eventos quiero pasar? Aquí solo hay un click. Yo solo quiero dar click en él. Entonces pongámoslo como ahora solo voy a poner la función normal y la perspicacia. Yo sólo lo hago yo sólo quiero hacer ahora mismo. Consola que ley de decretos. Buttle. Sólo asegúrate de que esto esté funcionando, ¿de acuerdo? Ahora, obviamente, esto no va a hacer nada hasta que llamemos a estas funciones llamadas administrar cantidad. Hasta que lo llamemos esto nunca va a agregar estos clics de oyentes de eventos a nada. Por lo que el mejor lugar para llamar a esta función sería probablemente cuando hagamos nuestro carrito de exhibición. Entonces cada vez que mostramos todas estas cosas en la página, quiero patear en estas funciones. Entonces lo haremos. ¿ No son los oyentes de eventos a estos botones de disminución? Entonces déjame solo abrir aquí. El inspector. Voy a abrir la consola. ¿ De acuerdo? Permítanme simplemente refrescar la página. Déjenme abrir un poco más estos. Refresca cuando haga clic aquí, una mirada. Botón Disminuir. Voy a dar clic en este botón de disminución. Entonces esto está funcionando. Yo puedo hacer exactamente lo mismo. Ahora, voy a hacer otro bucle de cuatro, ¿de acuerdo? Esta vez va a ser por los botones aumentados. De acuerdo, así que voy a remplazar estos. Va a ser exactamente lo mismo. Yo simplemente no podría poner aquí. Aumento de botella. Está bien. Botón aumentado. Voy a refrescar la página claramente Es Cónsul. Voy a hacer clic en estos botones aumentados y mira, está funcionando. De acuerdo, entonces ahora que esto se hace, tendremos que empezar realmente a agarrar las cosas del almacenamiento local como lo hicimos de antes y en realidad empezar a manipular los datos. Entonces hagámoslo ahora. En primer lugar, voy a agarrar todos los artículos del carrito que tengo en mi almacén local. Entonces si recuerdas aplicación, ¿dónde está? Mi almacenamiento local. Déjame sólo abrir estos almacenamiento local. Y me metí aquí en la parte superior. Déjame solo poner esto. Tenemos algunos números de tarjeta, artículos totales y todo, así que quiero agarrar artículos de mi carrito. Entonces es como los productos en el carrito, este. Entonces, sólo vamos a agarrarlo. Ahora. Voy a entrar aquí y hacer objetos vamos a tarjetas va a ser igual. Dos punto de almacenamiento local obtiene artículo. Y el artículo que quiero agarrar es estos productos en tarjeta. Entonces lo sé. ¿ Cuáles son los productos que tengo en tarjeta ahora mismo? Permítanme simplemente aumentarlos un poco más para que podamos verlo mejor. De acuerdo, Entonces, ¿qué fue? Productos productos en? Ah, tarjeta. Creo que ese es el nombre. Déjenme un poco más de estos ahora. Incrementar. Sí, Exactamente. Está bien. Productos en carrito. De acuerdo, déjame solo bajar el año. Y obviamente, ahora que acabo de agarrar estos productos en carrito, necesito hacer adyacente, no analizar, no analizar, ¿de acuerdo? Porque vienen como Ah, objeto Jason. Entonces necesito convertirlos en objeto javascript. Entonces voy a hacer cartas. Elementos es igual a, um Jason dot pars. Está bien. Y quiero analizar estos artículos de tarjetas. Creo que lo hicimos antes en un par de videos hace. Um y eso es todo. Porque si ustedes sólo tratan de hacer una consola, ese registro de estas tarjetas, los artículos se ven cerca un pequeño registro de estos artículos del carrito. De acuerdo, Justo antes de que hiciéramos las partes. Mira, eso sigue yendo aquí en la consola. Vamos a refrescarnos. Mira, ¿ves que esto viene todo con estas cuerdas cinco cosas. Esto es como en formato adyacente, por lo que realmente necesitamos analizarlo en objetos javascript regulares. Ya ves, después de que hice esto ahora hago mi consulta de log. Si refresco la página donde refrescamos el Pekín aquí ahora tengo algunos buenos objetos javascript como usted pide. NC. De acuerdo, ahora que tenemos estos, realidad necesito saber Cada vez que hago clic en uno de estos botones, quiero saber la cantidad actual que tenemos aquí dentro. De acuerdo, entonces eso es lo que vamos a hacer ahora Primero, claro. Déjame solo un año antes de que haga clic sólo en estos decretos botón Sólo voy a hacer aquí dentro. Um, en realidad , no, no los necesito. Déjame sólo hacer esto aquí. Voy a hacer donde cantidad actual. Va a ser igual a dos. Y ahora voy a hacer un documento, no selector de queary. Ah, lo siento. No necesito hacer esto. Déjenme deshacerme de esto. Yo sólo puedo hacer éste, ¿de acuerdo? Este es el botón. Por ejemplo, si estoy dando click en este, solo puedo agarrar estos. En realidad, estos botón donde estoy haciendo clic y luego solo dos adultos, elementos padre, elemento padre. Entonces déjame solo mostrarte aquí en la pantalla. Um, ¿ dónde tengo? Entonces estos son los aiken de hierro. De acuerdo, entonces estoy dando click. Digamos, por ejemplo, este que estoy pinchando aquí. Yo quiero agarrar el elemento padre, que es éste thes dif. Entonces eso es lo que estoy haciendo con estos elementos de los padres de punto. Entonces solo puedo hacer un selector Dodds Queary. Está bien. ¿ Y cuál es el selector de consultas que quiero hacer? Yo quiero agarrar estas cacerola. Entonces solo voy a hacer aquí span, y luego solo quiero agarrar el contenido del texto, ¿de acuerdo? Y ahora debería obtener el valor de lo que sea que esté aquí ahora mismo. De acuerdo, recuerden , recuerden, chicos que antes agarramos este valor de lo que estaba en el en el almacén local. Pero ahora cuando hacemos clic aquí, no tenemos acceso al almacenamiento local de inmediato, por lo que necesitamos agarrar cualquiera que sea el valor que tenga aquí. Entonces déjame solo hacer aquí un cónsul, no registro de estos para asegurarme de que esto esté funcionando. Por cierto, empecé estas variables en aquí cantidad actual, pero nunca la inicializo, así que necesito inicializarla aquí en la parte superior. Entonces vamos a la cantidad actual es igual a 20 por ejemplo, cuando empiezas. Entonces vamos a la cantidad actual. Sólo ponlo aquí y ahora sólo voy a hacer una consola. No registre estas cantidades actuales. Por lo que cada vez que haga clic en el botón, lo sabré en la consola. Está bien. Entonces déjame refrescar la página. No estoy claro estos si hago clic aquí, debería ver uno. Dice que el contenido de estacas no es una función. Déjame ver lo que tengo mal aquí dentro. Ah, creo que sé lo que podría ser. Pongo contenido de texto es una función. Esto no es una función es así. Vamos a intentarlo de nuevo. OK, está claro estos Vamos a pinchar aquí y me dieron el uno. Yo le hago click aquí Ahora tengo el uno también. De acuerdo, así que siempre llegué a estos valor de estas cantidades cuando estoy tratando de dar click hacia abajo para que en realidad pueda hacer lo mismo aquí por el aumento de la cantidad. Entonces puedo simplemente, como, como, duplicar este código, básicamente, Así que vamos a hacer eso. Vamos a copiar esto Ahora. Voy a hacer esto aquí esta vez. Obviamente, vamos a hacer los botones aumentados. Iba a ser lo mismo porque ambos, tienen el mismo elemento padre. Y entonces estamos agarrando el mismo span selector de consultas y eso es todo OK, ahora que vamos a estos, lo siguiente sería realmente agarrar el nombre de este producto cada vez que estamos haciendo clic en uno de estos botones. De acuerdo, Así que cada vez que haga clic aquí, quiero atravesar el amanecer. ¿ De acuerdo? Yo quiero subir y tratar de agarrar estos nombres que tenemos aquí. De acuerdo, así que esto es lo que vamos a hacer ahora. Voy a decir productos actuales, ¿de acuerdo? Actual para objetos. Va a ser igual a dos. No olvides inicializar este producto actual productos actuales, Va a ser igual a una cadena vacía en este momento. De acuerdo, Ahora, no te pierdas algo. A lo mejor me acabo de perder algo aquí porque no terminamos. Por lo que el producto actual es igual a dos e crees fondo. Vi nuestro botón actual. Entonces necesito entrar en los elementos padre. De acuerdo, Así que déjame mostrarte cada vez que haga clic en estos botones, por ejemplo, dónde está este botón va a ser éste. Yo quiero agarrar al padre. Eso es lo que acabamos de hacer ahora mismo. Entonces quiero atravesar el elemento anterior a los elementos hermanos anteriores. Entonces hagamos puntos. Elementos anteriores, mirada de hermanos, incluso viene aquí en código de estudio visual. Entonces ahora hice estos una vez que estamos aquí en estos vivir con una clase de precio. Ahora, quiero volver una vez más a estos productos bien a estos productos. Entonces vamos a dar a los elementos de techo anteriores una vez más. Puntos. De acuerdo, entonces ahora me refiero aquí en estos producto dif Ahora quiero ir dentro de estos ladrón de producto y buscar Déjame ver como tengo una imagen. Tengo esta sartén. De acuerdo, tengo Oops. Tengo esto abarcando aquí. Entonces voy a hacer, um, puntos, selector de Queary. Quiero agarrar el elemento span, y quiero agarrar el contenido del texto. De acuerdo, entonces ahora que tengo estos, déjame solo mostrarte haciendo un consulado de log off el producto actual. ¿ De acuerdo? Solo estoy haciendo esto Cuando hago clic en estos botonitos, solo estoy actualizando la página entrando a la consola. Está claro todos estos voy a dar clic aquí. Y agarré la sudadera gris con capucha y agarré la cantidad de antes. Voy a dar click en la camiseta negra. Tengo esta y tengo estas camiseta negra ahora mismo. Lo que también quiero hacer es en realidad porque tengo estos nombre, quiero convertir estos nombre de una manera similar a lo que tenemos aquí en la parte superior, igual que esta pila. OK, entonces, ¿qué puedo hacer con estos? Yo puedo en primer lugar, sólo encubiertos todos estos nombres que nos metimos aquí a minúsculas puedo quitar estos espacio que tengo entre las palabras y luego incluso soñar algunos espacios a los lados si hay alguno, Así tendré ataque llamado exactamente, igual que estos. Porque si tengo los nombres bursátiles después, solo puedo, como, manipular cualquier dato que tenga en mi, um, en mi almacén local. Entonces eso es lo que vamos a hacer. Entonces aquí dentro, igual que lo que estábamos haciendo ahora. Y entonces, ¿dónde estaba? Um, administrar cantidad. Estábamos revisando aquí el producto actual Después de agarrar este contenido de texto. También voy a hacer ah a minúsculas. Entonces nudos demasiado minúscula y creo que es como estos Si no me equivoco, OK, sólo intentémoslo. Déjame ver la consola. Quiero decir pinchando aquí. No, Mira, Ahora, sudadera con capucha gris es toda minúscula, y estas camiseta negra es la misma. De acuerdo, Lo siguiente sería quitar estos espacios aquí dentro, entre las palabras. Entonces hagámoslo ahora. Sólo yendo aquí después de las dos minúsculas, voy a reemplazar, así que no reemplacen , ¿de acuerdo? Y vamos a hacer algún tipo de reggae X. No sé si ustedes han oído hablar de estos, así que Uops. No sé por qué. Esto es como saltar todo el tiempo. Voy a buscar por todas partes un espacio. Ya ves que solo estoy poniendo dos veces estos cuatro slash y voy a poner estos g dos medios se va a ver globalmente en ese texto. Y luego lo segundo es, sólo vamos a reemplazarlo por qué? Simplemente lo voy a reemplazar por una cadena vacía. Entonces significa que eso va a quitar ese espacio. Entonces, como dije, vamos a usar a estos sustitutos hija que está buscando espacio vacío. Entonces lo que sea que pongas entre estos cuatro listones es lo que estás buscando. Y entonces significa globalmente buscar en todas partes. en el en el contenido de texto ahí dentro y luego simplemente reemplácelo con la cadena vacía. De acuerdo, veamos si esto está funcionando. Refrescar. Voy a pinchar aquí. Déjame solo hacer clic aquí. Mira, sudadera gris ahora está completamente hecha y lo mismo aquí en esta. De acuerdo, camiseta negra se ha ido todo, pero a veces hay algún tipo de espacios vacíos antes y después de las palabras que no estamos seguros si suben o no. Entonces sólo para estar seguros, podemos sólo adoptar arroyo que se deshaga de estos espacios antes suficiente que nuestras palabras. Entonces hagámoslo. Así que punto sueño, vale, y eso debería ser todo por ahora. Entonces si recuerdan antes en el inicio de estos video, solo agarramos todos los artículos de nuestro carrito que tenemos, solo estoy actualizando la página para que ustedes los vean. Entonces, mira, este es el artículo actual que tengo en mi almacenamiento local usando estos artículos de carrito. En realidad puedo simplemente bajar aquí después de seleccionar mi producto actual. Puedo hacer artículos de carrito, y ahora puedo seleccionar los productos actuales porque acabamos de agarrar su nombre. Está bien, lo voy a poner aquí. Y ahora solo puedo decir que punto en las cartas va a ser igual a lo que haya ahí desde antes . El mío es uno. De acuerdo, así que déjame mostrarte. Porque si ustedes chicos recuerdan, miren, tienen estas propiedades de en tarjeta. ¿ De acuerdo? Por lo que estoy revisando los artículos de mi carrito. Estoy seleccionando el que tiene los nombres. Entonces, por ejemplo, este es el nombre que acabamos de agarrar. Estoy accediendo al punto en el carrito, y luego solo estoy, um, um, accediendo al valor que estaba ahí dentro y quitando uno. Entonces eso es lo que hago cuando hago click aquí. De acuerdo, así que vamos a probarlo. Voy a refrescarme. Voy a pinchar aquí. Yo solo veo qué pasa. Yo m así que algo no en realidad la guerra correctamente. Déjame ver. Ah, OK, así que esto está bien. Mira, ahora mi en auto t cero porque realmente necesito actualizar thes ahora, así que necesito llamar a la tarjeta de exhibición justo después de que lo haga. Eso s o justo después de estos. Está bien. Necesito llamar a la tarjeta de visualización, así que nuestra página va a ser posterior ender después, así que mira, déjame refrescar. ¿ De acuerdo? Mira, si voy a dar click aquí. De acuerdo, así que conseguí estos. Ahora, déjame ver. ¿ De acuerdo? Algo no está funcionando exactamente como estaba sospechando. Entonces voy a dejarme sólo ver. ¿ Qué tengo mal aquí dentro? Fuera de curso. En realidad nunca actualicé mi almacenamiento local. Sí. Entonces después de actualizar estos, um, estos objeto en cerca de esta copia del almacenamiento local. Yo no copié aquí. Actualicé estos, um, en tarjetas que tenemos ahí dentro, Por cierto, podemos incluso solo, como, corto y estas arriba, solo haciendo como, thes como lo hicimos de antes. Ahora, necesito entrar a mi almacén local. Está bien. Voy a hacer un luchador de conjunto de puntos de almacenamiento local. Está bien. Y lo que comités son los productos en tarjetas. ¿ Y qué quiero pasar? Yo quiero pasar en un Jason. No cuerdas. Si yo Si ustedes recuerdan, necesitamos hacerlo en formato Jason fuera de curso. ¿ Y qué es eso? Cosas que quiero mandar dentro son estos autos artículos que acabo de actualizar. Y después de hacer eso, voy a llamar a las tarjetas de exhibición que creamos antes para que realmente podamos ver en la página? Um, yo actualizaría la tarjeta, así que vamos a refrescar la página ahora. Debería estar funcionando. Bien. Está bien. Si hago click aquí uno. De acuerdo, nosotros dioses, acabo de ver una sudadera gris en el carro. Todavía no son límites exactos. Déjame ver una vez más. Perdón por estos tipos. Déjame sólo ver si esto está funcionando. Supongo que sé lo que podría estar mal en el año. Mira, lo primero sería estos míos es uno. OK, entonces solo necesitamos hacer menos iguales, así que solo actualizamos la disfunción. Y además, estoy poniendo mis productos en carro que la señora aquí dentro un C. mayúscula Ahora, éste debería ser el problema. Entonces voy a refrescar la página. Voy a dar click aquí y mira, ahora, ahora, acabamos de actualizar la cantidad de estos para que sea cero. ¿ De acuerdo? Que es básicamente, como, no está aquí, así que en realidad no queremos esto. Queremos disminuir la cantidad dedo del pie un mínimo de uno, porque si tenemos cero debilitar, solo, como, entra aquí y solo borra el producto, Ok, Así que voy a hacer aquí dentro entonces. Si declaración, voy a decir si Ok, si artículos de carrito producto actual en tarjetas bien, va a ser mayor que uno. De acuerdo, si es mayor que entonces uno ¿qué hay en el carrito de estos? En realidad puedo simplemente ejecutar estas cosas aquí. Porque si no es mayor que uno, si es como uno, por ejemplo, no quiero hacer nada en absoluto. De acuerdo, así que déjame entrar aquí. Voy a dar click y mirar, no pasa nada. ¿ De acuerdo? Vamos a la página principal. Voy a añadir algunas de estas estupendas camisetas. A lo mejor como 312 a 3. Está bien. Ahora. Ah, si entro aquí, sólo voy a hacer clic en este. ¿ Lo hice? ¿ Cuántos que voy a añadir? Uno más. No estoy seguro. ¿ Qué exactamente? Déjame solo creo que era de antes. Déjenme aclararlo todo. Refrescar entrando aquí. 123 De acuerdo, Ahora mira estos. Si voy y aquí en prensa este, es ah, entra en dos. Por lo que 30 voy a dar click a uno más. Entra en 15. Y si vuelvo a intentarlo, no hace nada más. De acuerdo, entonces estas fiestas aquí está todo listo Ahora, Hay un problema. Si ustedes mirando aquí, yo en realidad, cuando disminuí esta cantidad, mis tarjetas aquí arriba, mi número de productos en la tarjeta, siguen siendo tres. Y mi canasta totalmente todavía 45. Por lo que también necesitamos actualizar estos. Entonces voy a llamar a mi función de números de tarjeta que hemos aparecido en alguna parte. ¿ Dónde está? Costos totales en artículos, números de tarjeta. De acuerdo, Entonces voy a llamar a estos números de tarjetas justo después de estos números de tarjetas, y quiero pasar aquí mi producto actual. Está bien. Y entonces lo segundo que quiero pasar es si solo estoy haciendo función de aumento o disminución . De acuerdo, entonces si estoy disminuyendo los elementos en la tarjeta o aumentando, así que sólo voy a decir los Curries. De acuerdo, así que vamos a estos números de tarjeta aparecen números de tarjeta. ¿ Dónde está? Um, un poco más de números de tarjeta en este momento. Sólo estamos tomando un producto. Ahora, tomemos también una acción. De acuerdo, entonces estas acciones van a ser la disminución o aumento. De acuerdo, así que vamos a volver a factorizar estos un poco. Déjame ponerme aquí como de costumbre. Voy a agarrar mis cartas let. Los artículos son iguales a dos locales. Ah, hija de almacenamiento Obtener artículo. Está bien. Productos en Dios's. Y ahora lo que necesito hacer. Necesito repasarlo fuera de curso. Thes estos de Jason objeto en un objeto JavaScript. Entonces igual que lo hice aquí abajo. Necesito hacer artículos de carrito igual a Jason. Los puntos se paran. Está bien. Y quiero analizar estos artículos de la tarjeta. De acuerdo, Ahora, voy a hacer cualquier declaración. Sólo re factor estos un poco. Voy a decir si está bien, si mi acción va a ser igual a dos disminución. Ya sabes, esa es la acción que acabamos de pasar ahí abajo. Lo que quiero hacer es que quiero establecer mi almacenamiento local pensamiento set tarjetas de ítem, tarjetas , números para que sean los números de producto que agarramos antes. De acuerdo, así que este es el total de números de producto que teníamos ahí de antes. Echemos un vistazo aquí. Um, así es este número de tarjeta uno, si te acuerdas. De acuerdo, entonces lo agarramos aquí como estas variables. Entonces sólo voy a decir es thes los números de producto que estaba ahí de antes, y sólo voy a quitar uno también, necesito toe update off course estos textos aquí dentro. Entonces lo que hicimos ahora fue solo actualizar estos números de tarjetas de almacenamiento locales, como los números totales en tarjetas. Pero también necesitamos actualizar este número aquí en nuestras tarjetas en nuestra página, básicamente aquí en la parte superior. Entonces lo que voy a hacer es que sólo voy a entrar en mi y no almacenamiento local, sino documentos, no selector de consultas. ¿ De acuerdo? Y quiero seleccionar mi tarjeta. De acuerdo, si ustedes recuerdan esta de aquí como una clase de tarjeta, y quiero agarrar el lapso dentro y el contenido de texto de la misma para ser lo que deben ser números de producto . Entonces, sean cuales sean estos en nuestros números de tarjeta que agarramos aquí de antes, mío es uno, y eso debería ser por estas disminuciones. De acuerdo, así que déjame refrescar. Probemos de nuevo con estos. Um, obviamente, déjame limpiar todas estas cosas del almacén local. Simplemente está claro todo. Refresca la página. Yendo a casa. Voy a 123 de esto. Ahora voy a dar un click a Ok. Entonces, um, me olvidé del dedo del pie, Seguimos en este tipo de si las declaraciones aquí dentro me dejan simplemente deshacerme de estos y vamos re factor. Entonces esto es lo que hacemos cuando ejecutamos estos números de tarjeta. Esto es lo que hacemos cuando realmente hacemos clic en uno de estos botones. Pero también estamos queremos hacer una más. De acuerdo, si hay algunos números de producto. Está bien. Significa que es como la primera vez que cargamos la página. Si hay algún tipo de cosas aquí, quiero configurar mi almacenamiento local, No establecer elemento para ser. Está bien. Ese carrito números para ser ¿Cuáles son los productos? El número de producto más un número de producto más uno. Está bien. Perdón. No números de hermano. No voy a guardar acción igual a aumentar. De acuerdo, Porque vamos a aumentar estos después, Vale, en Caries. Está bien. Y así vamos a hacer estos más uno, y entonces obviamente actualizamos estos textos, Toby más uno también. Y después, si no estamos haciendo clic en alguno de estos botones y solo estamos cargando la página por primera vez, lo que quiero hacer es solo establecer el elemento de conjuntos de pensamiento de almacenamiento local. ¿ Cuál es el artículo? Los números de tarjeta para ser, um, solo uno. Eso es lo que tenemos en eso al principio. Está bien. Y además acaba de establecer la consulta seleccionada del contenido del texto. Toby es igual a uno. Vale, esperemos, Ahora, todo esto está bien, y no me falta nada, Así que déjame solo deshacerme de este código que tenemos aquí desde antes, Después de que acabamos de poner los productos como teníamos de antes, y creo que eso es todo. Está bien. Yo solo estoy, um claro esta actualización. Ir a la página principal. Voy a tener 123 Vale, um, algo que falta aquí. Números de carro. Está bien. Estos podrían ser a veces cuando sólo estoy claro. Estos otra vez. Refrescar. Está bien. 123 De acuerdo. Cuando entro aquí, tengo tres. Yo todavía hay algo más aquí. Estoy desaparecida. Déjame ver rápidamente. No quiero que esto sea realmente lo que quiero decir. No quiero poner estas acciones de aumento. Yo quiero poner si hay algunos números de producto en realidad. Está bien. Cuando hacemos clic en él como las artes del dedo del pie, cuando estamos aquí en la página y hicimos clic de remolque ARDS dedo del pie tarjeta y ejecutamos esta tarjeta números. Yo quiero ver si hay algunos números de tarjeta aquí. Yo solo quiero aumentar la cantidad ahí dentro. Um, porque ni siquiera necesitamos nada para el aumento, que te voy a mostrar en un segundo. Y así esto está bien. Vamos a refrescar este. Voy a dar click. 12345 Esto está bien. Ahora voy a la página del carrito, y voy a dar click a 123 Y mira, estos valor aquí es todo mercancía. Ahora, sólo necesitamos actualizar estos valores aquí dentro de los 100. Así que bajemos aquí, ¿de acuerdo? En nuestro gestionar cantidad. Entonces cuando voy a mi administrar cantidad, Um, Um, justo después de llamar a estos números de tarjeta, también puedo facturar aquí el costo total. Entonces eso es lo que vamos a hacer ahora. Teléfono hará algo muy parecido. Entonces voy a llamar a mi costo total. Voy a pasar el carrito artículos disminución de producto también. De acuerdo, entonces ahora voy a entrar en mi costo total. Déjame entrar aquí arriba. ¿ Cuál es mi función de costo total? Justo éste de aquí. Yo también tengo que pasar en acción, porque van a ser los decretos o no. Y yo sólo voy a hacer la declaración de Anethe aquí. Entonces si está bien, mi acción, vas a ser igual a dos disminución. De acuerdo, así que déjame poner estos aquí ahora como otra. Si es así, voy a poner aquí. ¿ Ahora qué? Voy a configurar el costo de mi carrito cuando los agarramos del almacén local. Recuerda que esto viene en un zoológico objeto adyacente lleno de estas cuerdas. Por lo que necesito convertir estos en número real mediante el uso de un parse en lo que cuestan las tarjetas. Está bien. Y ahora necesito poner mis als de almacenamiento local, uh, uh, local punto de almacenamiento Said I término. Y el artículo que quiero poner si recuerdan chicos, solo estoy revisando aquí es el costo total. Costo total y va a ser igual a qué? A lo que sea Él está ahí en el costo de la tarjeta. Digamos que nuestros cientos y me voy a quitar qué? Mi producto actual que estoy pasando aquí punto precio porque si ustedes chicos recuerdan cada uno de estos productos que estaban pasando, tienen un precio, un valor clave. Entonces solo puedo hacer aquí los costos de tarjeta, lo que fuera que hubiera de antes. Aquí en la mina superior está el producto que estamos pasando. De acuerdo, Algo que hacer productos El precio de Dios. De acuerdo, así que déjame limpiar todas estas cosas. Vamos a la página principal. Voy a sumar 123 Ok, vamos a las cartas. Vamos a revisar estos. Mira, voy a dar click una vez. Entonces 33 60 estoy leyendo, como, como, una vez. Y mira 2 a 40 11 2020. Y si hago clic más no está funcionando. Perfecto. Ahora, lo único que nos falta es dar click aquí en estos botón de aumento. Entonces bajemos aquí. Va a ser muy, muy similar ahora, así que básicamente puedo copiar todos estos abrigos. De acuerdo, voy a copiar estos. Simplemente péguelo aquí abajo, y lo que voy a hacer es eso Ya tenemos estas corrientes cantidad para que solo podamos deshacernos de éstas ahora. El producto actual se van a aumentar los botones. Yo bien. Esto va a ser lo mismo, ¿de acuerdo? Agarrando el nombre. De acuerdo, entonces. No necesito hacer estas declaraciones if ahora porque cada vez que haces clic para aumentar la cantidad no necesitas como ningún límite. Por lo que va a ser un carrito actual artículos producto actual punto en el carrito. Ahora, esta vez va a ser más igual a uno para aumentar. Ahora, quiero ejecutar estos números de tarjeta de función. Yo solo quiero pasar el dedo del pie esta vez. De acuerdo, Uh, producto actual. De acuerdo, Entonces si voy a entrar aquí en el ¿dónde están sus números de tarjeta? Entonces voy a decir si la acción es igual a disminuir. De acuerdo, um, esto no se va a ejecutar entonces va a comprobar si hay algunos productos ya en la base de datos en el almacenamiento local, que hay. Si ya hay algo ahí dentro, solo voy a correr estos que se incrementará en uno. Entonces no necesito hacer esto. En realidad, la acción es igual a aumentar. Ya sabes, podrías hacer si quieres, pero está bien. Ahora bien, ¿qué más tenemos? Tenemos estos para que los números de tarjeta sean correctos. Tenemos éste para el total, Costas. Bueno, que no necesitamos pasar estas acciones porque déjame solo mostrarte los costos totales también . Por lo que costo total, podemos pasar un producto en acción. No pasé ahora en acción para aumentar. Porque mira estos. Si la acción es igual a disminuir, no estamos haciendo estos por el momento. ¿ De acuerdo? Ahora, también estoy revisando estas tesis de otro video de antes que estoy revisando. Si el costo de mi tarjeta es diferente a no, Sí es diferente a no, porque ya hay productos ahí dentro y podemos ver que nuestro auto costo total nuestros costos de tarjeta o lo que sea ya con algún valor por lo que es diferente a No. Entonces, ¿qué estamos haciendo ahí dentro? Agarrando lo que sea que haya ahí y luego solo a un almacenamiento local que establezca artículo del costo total ahí dentro, más el precio del producto al que solo estamos haciendo clic aquí ahora. Entonces eso debería ser toda mercancía. Y finalmente, ¿qué estoy haciendo? Simplemente haciendo clic aquí, fuera de curso, configurando estos en el almacenamiento local para que se actualicen y después igual que ejecutar la tarjeta de visualización . Entonces todo en nuestra página está actualizado, así que vamos a ejecutar esto, Ok. Voy a entrar aquí. Voy a dar click una vez. Mira, aumentaron 40. Voy a volver a dar clic. 60. Entonces conseguí tres. Déjame entrar en la página principal. Voy al 1 al 2 de estas camisetas negras. Por lo tanto, mira estos. Tengo dos camisetas negras y tres de éstas. De acuerdo, así que consiguió 60 2080 Ok. Y 3 a 5. Es decir, sólo me gustaría cuatro más o 3123 Así que cinco veces 10 es 50 60 más 5100 y 10 y cinco y ocho es ocho productos. Muy bien, chicos, sé que estos realmente fueron bastante grandes y es, como, el último de la serie, pero espero que realmente disfruten de este tipo de proyectos. Siempre es bueno. Entonces para que practiques y aprendas algo nuevo. Um, pero sí, como siempre. Chicos, muchas gracias por mirar. Espero que lo disfruten. Si tienes algún comentario o algo así, solo ponlos abajo Aquí. Contesto a todas sus preguntas, y también voy a poner el enlace. Creo que el enlace debería estar aquí ya con los archivos de estos proyectos. Porque si ustedes chicos y se perdieron algo, siempre se puede volver a verlo. Pero habrá algunos enlaces aquí es sólo opcional. Si desea descargar el archivo. Entonces tienes todo funcionando bien. Y también puedes comparar con tu propio código. Muy bien, chicos, eso es todo para este video. Muchas gracias por ver. Y te veré en el siguiente video.