Como agregar localStorage a un carrito de compras + bonus track | Ecommerce - Javascript

Поделиться
HTML-код
  • Опубликовано: 18 сен 2024
  • En este video de la agregamos el localStorage al carrito de compras que venimos construyendo en videos anteriores y como bonus track, agregamos la posibilidad de sumar y restar cantidades de productos en modal del carrito.
    Video anterior : • Creando un carrito de ...
    ❤️ Me dejarías tu ayuda en forma de donación? ☕
    Mercado Pago: www.mercadopag...
    PayPal: www.paypal.com...
    Contacto y mas información :
    linktr.ee/onth...
    #javascript #ecommerce #localstorage

Комментарии • 112

  • @onthecode
    @onthecode  Год назад +10

    recomiendo ver el siguiente video para optimizar la función de eliminar productos :) ruclips.net/video/EuCdDHDV8lY/видео.html&ab_channel=onthecode

  • @matiasfriedmann
    @matiasfriedmann Год назад +3

    sos un genio boludo, no sabes cuanto estoy aprendiendo con tu explicacion, si o si tenes que seguir haciendo videos de este estilo, mi profesor al lado tuyo es un poroto

  • @nataliepenalva7157
    @nataliepenalva7157 Год назад +5

    Muy bueno el contenido, lo explicas muy sencillo. Estoy haciendo un curso , me sentía bastante perdida y esto me ayudó un montón. Ojalá sigas subiendo videos, muchas gracias!!

    • @onthecode
      @onthecode  Год назад

      Que bueno que estos vídeos te ayudaron! Saludos Natalie :)

  • @jennifercarrasco9354
    @jennifercarrasco9354 Год назад +1

    Sos un genio, explicas de una manera que cualquiera puede entender, un lenguaje para principiante, mil gracias por tomarte el tiempo de ensañarnos.

    • @onthecode
      @onthecode  Год назад

      Hola Jennifer! Muchas gracias por ver mis vídeos y comentarme :) que bueno que te sirven! Saludos!!

  • @juanmartingrimaldi6714
    @juanmartingrimaldi6714 Год назад +3

    Estoy haciendo un curso de Js en una plataforma muy conocida, también suelo mirar cursos de "grandes" youtubers, leo información ya hace varios meses. Pero fuiste el que mejor explicó cada tema desde que comencé a estudiar esto, te agradezco y te aliento a que sigas subiendo información. Un abrazo

    • @onthecode
      @onthecode  Год назад +2

      Juan muchísimas gracias por lo que decís! Me motiva un montón :) si, siempre me busco el rato para preparar contenido. Ya voy a subir lo que estoy creando. Un abrazo!!

  • @monky_loco
    @monky_loco Год назад +2

    Muy bueno loco, la verdad estoy aprendiendo una banda sin dar vueltas. Explicas a la velocidad justa, no como grandes youtubers que te dan ganas de verlo en 2x jajaja, no te vas por las ramas.. la verdad me saco el sombrero. Como consejo, mejorá un toque el audio, te quedó medio bajo el volumen. Suscripto 👍

    • @onthecode
      @onthecode  Год назад

      Jaja gracias loco por toda esa buena onda y tu comentario! Saludos!! 🙌

  • @emilianomartinez384
    @emilianomartinez384 Год назад

    este es el camino... ojala hayan mas videos , tu explicacion sencilla y al punto me sirvio de muchisimo

    • @onthecode
      @onthecode  Год назад +1

      Gracias Emiliano! Saludos!!

  • @centerbolivia1281
    @centerbolivia1281 Год назад

    La mejor exploración detallada. Tenes un don de enseñar. Bendiciones

    • @onthecode
      @onthecode  Год назад

      Muchas gracaiiass!!! 🙌

  • @camilarojasserantoni3241
    @camilarojasserantoni3241 Год назад

    Muchas gracias por tus videos he aprendido muuuuuuucho y explicas excelente ;) te mando un abrazo de oso por la ayuda jejeje

    • @onthecode
      @onthecode  Год назад

      Muchas gracias Camila!! Te mando otro abrazo!

  • @user-qz3bh1uk7q
    @user-qz3bh1uk7q 11 месяцев назад

    me encantan tus videos, sos super claro y practico, al punto q es posible anticiparse a lo que vas a realizar.Excelente profe!

  • @ScarlataCode
    @ScarlataCode Год назад

    Gracias por el aporte necesitaba resolver unos errores que tenia en un proyecto y desde el primer vídeo hasta el ultimo aprendí demasiado y me sirvió para darle solución a los errores en mi proyecto.

    • @onthecode
      @onthecode  Год назад

      Hola Efrain! Genial que todo esto te sirvió para hacer crecer tu proyecto!! Saludos!!

  • @anita8405
    @anita8405 Год назад

    Súper claros tus videos y la explicación, estoy estudiando y con tus videos me queda más clara la teoría ❤

    • @onthecode
      @onthecode  Год назад

      Que bueno Ana, éxitos en tus estudios! Saludos!

  • @danielareta9041
    @danielareta9041 Год назад

    el proyecto es genial me sirvio tanto para reforzar conocimientos queremos mas contenido!!! explicas de maravilla

    • @onthecode
      @onthecode  Год назад

      Gracias Daniela :) si, siempre estoy preparando contenido. Si te interesa algo en particular me podes comentar así lo tengo en cuenta, Saludos!!

    • @danielareta9041
      @danielareta9041 Год назад

      Me gustaría temas como conectar con una api para enviar y recibir información para autenticar formularios o los use de react gracias!!

    • @onthecode
      @onthecode  Год назад

      @@danielareta9041 Anotadisimo!! Saludos :)

  • @walteraliser1568
    @walteraliser1568 Год назад

    Muy buen video, un capo che, te mando un abrazo, me ayudo un monton para poder entender localStorage

    • @onthecode
      @onthecode  Год назад

      Que bueno Walter! Gracias por comentar! Un abrazo!!

  • @eterna-aprendiz
    @eterna-aprendiz 4 месяца назад

    Me suscribo, es algo de lo que necesitaba!

  • @Hiroki_MakeGames
    @Hiroki_MakeGames Год назад

    Que grande , hace unos dias vimos localStorage y como siempre , mucha teoria y me faltaba la practica, gracias a vos ahora se como usar correctamente LocaStorage en mi app.
    PD: Me enseñaste tanto de logica que pude crear un sistema de filtro para los productos y tambien pude hacer un sistema que maneje cantidades por mi mismo. Te agradezco mucho !

  • @agustinpuig7793
    @agustinpuig7793 Год назад

    Me acabaste de dar una ayuda enorme. Cortita y al pie, y me funciono a la primera. Muchísimas gracias!!!!!!

    • @onthecode
      @onthecode  Год назад +1

      Genial Agustín, te salio de una! Saludos!

  • @lucaspateroso1095
    @lucaspateroso1095 Год назад

    sos un genio
    sin palabras!!!

  • @nicolassanchez1686
    @nicolassanchez1686 9 месяцев назад

    Sos un genio!! Estoy aprendiendo todo lo maravilloso de este mundo y tu video me ayudo un montón!! Muchas gracias por tanto!!

    • @onthecode
      @onthecode  9 месяцев назад

      Que genio! Saludos!

  • @fedecaillara2633
    @fedecaillara2633 Год назад

    La verdad que sos un genio, se entiende perfectamente todo. Seguí así que vas a crecer un montón!
    Estaría bueno que muestres como hacer para que se agreguen los productos con el carrito abierto, creo que nos serviría un muchísimo, saludos!

  • @adriankryeziu964
    @adriankryeziu964 Год назад

    Te ganaste un suscriptor, se mes es útil la información y es lo que estaba buscando

    • @onthecode
      @onthecode  Год назад +1

      Que bueno que esta sirviendo Adrian. Bienvenido!

  • @miqueasfarias955
    @miqueasfarias955 Год назад

    Buena loco, ya había visto uno de tus videos y entré a éste porque me intrigó, nunca había escuchado nombrar el 'localStorage' y ahora que vi como funciona lo voy a empezar a implementar, gracias por el video, saludos!

    • @onthecode
      @onthecode  Год назад

      Que bueno que aprendiste algo nuevo con este video!! a darle con todo! Gracias por ver, Saludos!!

  • @damianagustinmarquezlepera5625

    sos bueno enseñando, se nota que te esmeras en no dejar pasar nada para expicar, gracias devuelta

    • @onthecode
      @onthecode  Год назад +2

      Muchas gracias!! Si, intento darlo todo para que no me pase nada! Saludos :)

    • @damianagustinmarquezlepera5625
      @damianagustinmarquezlepera5625 Год назад

      Te pregunto algo capas podés ayudarme, el setitem crea un dato o remplaza el ya existente vdd? Xq veo q en el vídeo sinnhaver más nada q guardarlo se te acumulan los productos sin hacer ninguna funcion extra, ojalá se entienda, saludos

    • @onthecode
      @onthecode  Год назад +1

      @@damianagustinmarquezlepera5625 la clave está en como está armada la variable carrito! Como primer opción su valor es lo que sea que esté en el storage. Al agregar algo nuevo su valor no se modifica y los productos se van sumando.

  • @lucassanchez1364
    @lucassanchez1364 Год назад

    un genio la verdad, entendi a la perfeccion todo, segui asi, un suscriptor nuevo tenes, saludos desde Cordoba

    • @onthecode
      @onthecode  Год назад

      Que genial Lucas! Que linda Cordoba. Saludos!!

  • @martinrey2018
    @martinrey2018 Год назад

    Salen 2 cafecitos para vos, Pablo. Sos un grande.

    • @onthecode
      @onthecode  Год назад

      Muchísimas gracias Martin 😁

  • @cristianrodriguez-ip5mv
    @cristianrodriguez-ip5mv Год назад

    te ganaste un nuevo suscriptor! me encantaron tus videos y explicaciones. Soy nuevo en este mundo de html,css y javascript y la verdad que entendi todo. Muchisimas gracias

    • @onthecode
      @onthecode  Год назад +1

      Muchas gracias por comentarme Cristian, que bien que estos videos te estén sirviendo y bienvenido!! :)

  • @matiasivansili2246
    @matiasivansili2246 6 месяцев назад

    Gracias loco me salvaste la materia, me suscribo

  • @ericcurti9686
    @ericcurti9686 5 дней назад

    Gracias a vos pa

  • @luzul2424
    @luzul2424 Год назад

    Que genio!!! está buenísima la forma que explicas, me ayudo a afirmar conocimientos y ahora entiendo jajaja, no me deja pagarte un cafecito porque no estoy en Argentina, pero colaboro recomendando tu canal 🚀

    • @onthecode
      @onthecode  Год назад +1

      Hola Alicia! que genia muchas gracias!! eso me ayuda un montón! Si estas siguiendo este proyecto no olvides ver el siguiente video que es clave 😬

    • @luzul2424
      @luzul2424 Год назад

      @@onthecode si, ya lo solucione! en realidad de otra forma, la tuya fue más práctica jajaja, ahora estoy trabajando en la pasarela de pago, sería super bienvenido un vídeo para completar funcionalidad.

    • @onthecode
      @onthecode  Год назад

      @@luzul2424 Pero que genia que lo resolviste!! si me lo han pedido varias personas. Estoy creando videos y uno será sobre eso 🤹 jeje

  • @ferodome8201
    @ferodome8201 Год назад

    idoloooooo estos videos son geniales

  • @endock5329
    @endock5329 Год назад

    Muy buen contenido amigo! Gracias por compartir tu conocimiento con nosotros y por explicar de una manera tan agradable para que podamos entender facilmente.. me suscribo y espero más videos, muchas gracias!

    • @onthecode
      @onthecode  Год назад

      Muchas gracias a vos por ver y por tus palabras! :) Saludos

  • @fernandofarcy
    @fernandofarcy Год назад

    Explicas muy bien, abrazo

  • @claudiagarcia3678
    @claudiagarcia3678 Год назад

    hola como estas? espero muy bien, la verdad que estoy haciendo el curso de JS para ser Desarrollador Full Stack y me pareció muy didáctica tu explicación. muchas gracias por tu aporte.

  • @manuelcolas
    @manuelcolas Год назад

    Que simple haces todo, sos un crack. Suscripto. Espero que sigas haciendo contenido de este estilo. Salu2

    • @onthecode
      @onthecode  Год назад

      Si, así todas las personas me pueden seguir :) Gracias, saludos!

  • @tatonexc1988
    @tatonexc1988 Год назад

    Sos crack! mil gracias!

  • @21398403
    @21398403 Год назад

    Saludos!
    Deverdad que explicas todo perfectamente y no he visto nadie que lo haga así, te felicito y quisiera pedirte que si puedes hacer un video que al dar click el usuario pueda pagar con paypal o ATH Mobil y que uno pueda ver las clases de CSS que utilizas, en mi caso que soy de Puerto Rico, te lo agradeceria grandemente.

    • @onthecode
      @onthecode  Год назад +1

      Muchas gracias por tus palabras Juan! voy a tener en cuenta tu pedido, principalmente el de como utilizar paypal para recibir pagos! Saludos!!

  • @centerbolivia1281
    @centerbolivia1281 Год назад

    Muy buena explicación bro
    Saludos y felicitaciones me ayudaste bastante

  • @DavidRCruzJuarez
    @DavidRCruzJuarez Год назад

    Justo lo que necesitaba bro, gracias sos un crack

  • @pattydepalomino9599
    @pattydepalomino9599 Год назад

    muy bueno, si puedes haces con alertas por ejemplo eliminaste este producto

    • @onthecode
      @onthecode  Год назад

      Gracias!! podria ser un video sobre como crear alertas personalizados! saludos.

  • @alejandronaitana4055
    @alejandronaitana4055 11 месяцев назад

    Gracias!

  • @suecia7618
    @suecia7618 7 месяцев назад

    Sos un capo

  • @ignaciomatiasdiaz9710
    @ignaciomatiasdiaz9710 Год назад

    Buen video.

  • @fedefolmer8710
    @fedefolmer8710 Год назад

    genio!!!

  • @Luis_Tapari
    @Luis_Tapari 7 месяцев назад

    Buenisimo tu video! estaria bueno si pudiera ser, que subas los proyectos a alguna plataforma como github, para los que ya tenemos algo creado... podamos ver la diferencia entre nustro codigo y el tuyo! un saludo!

    • @onthecode
      @onthecode  6 месяцев назад

      Hola, te dejo el codigo, saludos!! github.com/pab-mchn/market-shop

  • @franciscorubio9722
    @franciscorubio9722 Год назад

    genioo, muy claro los conceptos

  • @dleyka
    @dleyka Год назад

    Hola, me encanta tu contenido, y me ha sido de mucha ayuda en este proceso de aprendizaje que estoy teniendo, me gustaría también un tutorial de este mismo proyecto, pero añadiendo alertas con sweet Alert y como podríamos agregar fetch, gracias por tu contenido.

    • @onthecode
      @onthecode  Год назад

      Alonda! que bueno que mis videos te estén siendo de ayuda! gracias por ver y comentarme :) voy a tener en cuenta tu pedido! Saludooss!!

  • @user-if6cd8xj9j
    @user-if6cd8xj9j Год назад

    Muchas gracias locon, sos un crack!, hace cuanto programas?

  • @IvanRamirez-sf5xu
    @IvanRamirez-sf5xu Год назад

    Gracias loco me remil ayudaste.

  • @danibavio5729
    @danibavio5729 Год назад

    Amigo realmente haces un contenidazo, te felicito y te agradezco. Estoy cursando js y la verdad que me salvaste la vida para completar el proyecto que venia haciendo y de paso aprender mejor, la verdad que explicas excelente. Tengo una duda que puede ser muy boluda, pero en caso de querer agregar mas objetos, como puedo hacer para que queden debajo de los demas objetos y no se me junten todos? estoy oxidado en css jaja, un abrazo loco!

    • @onthecode
      @onthecode  Год назад

      Muchas gracias Dani!! ahí tenes agarrar el css y tirar unas magias jeje. Fijate el margin en las cards, como ordenaste los productos con flexbox. honestamente al css no le di mucha importancia, me metí mas con el js! Saludos!

  • @federicofernandez5228
    @federicofernandez5228 Год назад

    sos un capo

  • @juampig372
    @juampig372 9 месяцев назад

    hola flaco como andas mira te digo la verdad esto no me sirvio de mucho me sirvioo de muchisimo, actualmente los bootcamps son cada vez mas rapidos y mas complicados de ir al hilo, habia armado algo pero no tan completo como lo que tenes vos aca en el codigo la verdad que lo super valoro y de esta manera se como armar tanto esta pagina que estoy haciendo como todas las que le siguen.
    nose si soy youtuber o que sos pero segui asi que boludos como yo ayudaste bastantes, no siempre la teoria es como la practica lo unico que me saco de quisio es que crearas tantos botones y no los crearas en el inner html pero bueno la vida.. mil gracias hermano de verdad

  • @JuanchiPrograma
    @JuanchiPrograma 4 месяца назад

    Genio, como estas? Se aprende muchísimo, pero necesito ayuda ahora. Estoy siguiendo tus pasos y me arroja que carrito no está definido en la función del contador. Dejo mi git para que puedan ver el repo y estudiar el código a ver si encuentran el problema.

  • @pabloesquilache1492
    @pabloesquilache1492 Год назад

    Que es lo que me puede estar pasando, a ver si se dan cuenta? Yo le agregue los botones para modificar la cantidad, se agregan cuaando se imprime la card con js. lo que me sucede es que por ejemplo, si yo en un producto agrego 2 unidades, cuando quiero modificar la cantidad de otro producto, empieza desde la cantidad en que deje al producto anterior.

  • @LucasJaauregui
    @LucasJaauregui Год назад

    Hola hermano! Sigo viendo tus videos y cada vez parecen mejor. Este tipo de contenido esta buenisimo. Al ver gente codeando creo que se aprende muchisimo! Te hago una consulta.. cuando quiero refrescar la pagina y que me siga apareciendo sobre el carrito el circulo rojo con las cantidades no me pasa. Lo que si veo al refrescar es que el circulo se hace chiquito y de color rojo pero sin números, y al eliminar un producto desde el modal si me empiezan aparecer.. tendrás idea que podría ser?? Me parece rarisimo porque estoy haciendo todo igual que vos

    • @onthecode
      @onthecode  Год назад

      Hola hermano! muchas gracias por lo que me escribiste y por ver los videos! Por lo que me decís pareciera ser que al refrescar la pagina y volver a iniciar el proyecto no se estaría ejecutando la función que muestra el contador del carrito. Esto asumiendo que esta bien aplicado el storage en el contador! te recomiendo que mires el siguiente video! ahí se optimiza la función de eliminar productos y podes descarte el código para compararlo con el tuyo y encontrar el error :)

  • @matisebb
    @matisebb Год назад

    Buenisimo broooo!!

    • @onthecode
      @onthecode  Год назад +1

      Gracias bro!! me acordé de vos cuando grababa lo de la ultima funcionalidad jej! abrazo!

  • @pepitoarias8807
    @pepitoarias8807 Год назад

    hola amigo, disculpa la pregunta pero vivis hace mucho en alemania? fuiste por el trabajo?
    estaria muy bueno que hagas un video de eso

  • @matiasmichelini6283
    @matiasmichelini6283 Год назад

    Me encanta

  • @agustinmontilla9724
    @agustinmontilla9724 Год назад

    Buenas! Te hago una consulta. Me esta pasando que al actualizar la pagina con el carrito con productos, no me aparecen devuelta en el carrito por mas que haga un getItem, pero si me aparece el total a pagar y tambien estan en el localStorage.

  • @victoriabarrientospaz8122
    @victoriabarrientospaz8122 Год назад

    Hola! Yo guarde en el localStorage los productos buscados, y despues los muestro por consola.. Pero lo que quiero es mostrarlos x DOM. Como lo harias?? Gracias muy bueno tu contenido siempre!

    • @onthecode
      @onthecode  Год назад

      Hola Victoria, muchas gracias!, podes usar la funcionalidad del carrito como guía. Ahí recuperamos elementos del storage y los mostramos por el DOM, Saludos!

  • @nicocorzi
    @nicocorzi Месяц назад

    Es muy difícil pasar del local a una BD en internet? Cómo podría trabajar esto inicialmente en un sitio gratuito?

  • @NickSYU
    @NickSYU Год назад

    muy bueno, pero no me funciono el parse, cada vez que actualizo la pagina se me desaparecen los objetos y no entiendo el porque (lo agregue en el array con el "or" ||)

  • @jennifercarrasco9354
    @jennifercarrasco9354 Год назад

    Hola, como estas? Estoy haciendo el carrito y me doy cuenta de que cuando compro varias veces el producto y luego resto todo, es decir que queda en 0, cuando quiero volver a sumar uno no me lo permite.

  • @elmarianzava666
    @elmarianzava666 Год назад

    hola! tenes el codigo en algun repo??!! muy bueno!

    • @onthecode
      @onthecode  Год назад +1

      Gracias bro! mirate el siguiente video ;)

  • @claudio24sn
    @claudio24sn 11 месяцев назад

    Excelente, tenés el código subido a github?

    • @onthecode
      @onthecode  11 месяцев назад +1

      Gracias? Si, el link en el siguiente vídeo

  • @JuanDiaz-xx8dc
    @JuanDiaz-xx8dc Год назад

    lo copie tal cual todo y no me vuelve a aparecer los productos del carrito, que triste lo mio

    • @onthecode
      @onthecode  Год назад

      No pasa nada! Seguro quedo algo mal copiado en el código, lo importante es que lo entiendas. seguí avanzando en los videos y después te podes clonar el código