Programa un carrito de compras con Javascript

Поділитися
Вставка
  • Опубліковано 7 гру 2024

КОМЕНТАРІ • 119

  • @puntojson
    @puntojson  6 місяців тому +8

    Importante!
    Cometí un error que consiste en leer localstorage antes de crear información ahí. En mi video no pasa porque este ejemplo yo lo había hecho de antemano por lo cual tenía algo guardado en la memoria.
    Para solucionar este problema hay que dejar la constante "memoria" en un estado usable aunque no haya nada. ¿Cuál es el estado usable? Un array vacío.
    Para hacerlo cambiamos la línea " const memoria = localStorage.getItem("bicicletas");" por " const memoria = localStorage.getItem("bicicletas") || [];"
    Saludos a todos!

  • @GroupmarkEstudio
    @GroupmarkEstudio 9 місяців тому +3

    Tremendo video! El unico que explica cada paso, me refrescas la memoria a full. Tremendo profesor! Saludos desde Salta, Argentina.

    • @puntojson
      @puntojson  6 місяців тому

      Gracias hermano! Mi idea es ser bien puntilloso con todo, que no quede nada del proceso afuera. Me alegra que pienses lo mismo!

  • @cristinarios2720
    @cristinarios2720 Рік тому +3

    Estoy adenrándome en este mundo de JS y la verdad que me ayudaste a entender mejor lo del Local Storage. Gracias por esto, te voy a re seguir!😉

    • @puntojson
      @puntojson  Рік тому +1

      Gracias Cristina! :) Nos vemos en próximos videos!

    • @losimpsonitos1
      @losimpsonitos1 Рік тому

      ​@@puntojson Hola buenas me serviría para presentar un proyector de frotend
      .Masomenos este sería un simulador que ayude al usuario .
      Tipo app?

    • @losimpsonitos1
      @losimpsonitos1 Рік тому

      ​@@puntojsonHola profe da clases js
      O realizar trabajos practicos

    • @puntojson
      @puntojson  Рік тому

      Buenas! No estoy seguro bien de lo que preguntás! Pero este proyecto si le cambiás los nombres y contenidos a las variables lo podés reutilizar para lo que quieras.

    • @puntojson
      @puntojson  Рік тому

      Respecto de clases particulares actualmente no estoy dando, porque estoy completo con las clases que doy en la universidad y con otros proyectos :/
      Sin embargo pienso seguir subiendo videos pronto.

  • @Eibots219
    @Eibots219 Рік тому +3

    Gracias por tomarte el esfuerzo de explicarnos todas estas cosas

    • @puntojson
      @puntojson  Рік тому

      De nada! Espero haberte ayudado!

  • @SolaPazEnergy
    @SolaPazEnergy 2 місяці тому

    Muy bueno amigo este vídeo. Cordiales saludos.

  • @codubi0131
    @codubi0131 3 місяці тому +1

    BUEN VIDEO BRO !

    • @puntojson
      @puntojson  3 місяці тому

      Gracias bro! Saludos

  • @ramoniniguez8970
    @ramoniniguez8970 Рік тому +1

    Muy didáctico, gracias totales maestro por tu aporte que me ayuda a aprender cada día más.

    • @puntojson
      @puntojson  Рік тому

      Gracias! Trato de ser didáctico mostrando todos los pasos y todas las líneas que escribo para ayudar a gente en todos los niveles!
      Suerte en tu camino de aprendizaje!

  • @puntojson
    @puntojson  Рік тому +4

    Para todos los que les interese agregar productos dinámicos en vez de usar el array predefinido de productos, puede seguir mi video de backend de productos ua-cam.com/video/UEjf7k32mTg/v-deo.html que se complementa perfecto con este video!

  • @solangelac3415
    @solangelac3415 11 місяців тому +1

    Gracias Calo! explicas re bien :) me re sirve para repasar mis conceptos de js

  • @cristhianvoorhees609
    @cristhianvoorhees609 5 місяців тому

    Gracias le doy a Dios por mandarme a ver tus videos, la verdad me ayudaron mucho y una lastima que solo sea 4.11k de suscriptores la verdad pero buenísimo el contenido en especial el java script gracias la verdad

    • @puntojson
      @puntojson  5 місяців тому

      Gracias Cristhian por semejante mensaje! Voy a tratar de meter más cosas de javascript. :)

  • @luisguillermo5349
    @luisguillermo5349 Рік тому

    Excelente video, saludos desde Lima- Perú.

    • @puntojson
      @puntojson  Рік тому

      Gracias Luis! Saludos desde Argentina

  • @sabripereira
    @sabripereira Рік тому

    Jajaja muy gracioso el thumbnail! Excelente video, me parece una buena idea para empezar a incorporarlo en mis proyectos y abarcar otros rubros como las tiendas online. Gracias!😁

    • @puntojson
      @puntojson  Рік тому +1

      Me costó bastante hacerla jajaja gracias!

  • @Wampisagenciadigital
    @Wampisagenciadigital Рік тому +2

    Gracias por compartir tus conocimientos son de gran ayuda . Quisiera que hicieras las instrucciones para asociar mercado de pago al carrito e pasarela de pago - Saludos

    • @puntojson
      @puntojson  Рік тому

      Es una gran idea! Pero antes de ese video tengo que hacer otros de backend preparando al público para ese tema! El truco de la pasarela de pago es que tenés que tener un back sí o sí..

  • @ivopavloff4795
    @ivopavloff4795 6 місяців тому

    excelente video! buenisima la predisposicion para explicar! te felicita! seguire mirando y probando con cada video! gracias!!!

    • @puntojson
      @puntojson  6 місяців тому

      Gracias Ivo! Una gran alegría tu mensaje!

  • @edicxongm983
    @edicxongm983 Рік тому +1

    Gracias amigo muy amable de tu parte. Bendiciones

    • @puntojson
      @puntojson  Рік тому

      Bendiciones para vos también ❤️

  • @silvanavaninaortizpinilla1538

    que esfuerzoooo profes asi hace falta mil graciasssssss

    • @puntojson
      @puntojson  Рік тому

      Gracias por el mensaje! Alumnas qué vean videos y estudien también estarían bien 😁😁

  • @williamyaelvallejoruano6807
    @williamyaelvallejoruano6807 Місяць тому

    si los productos los estuviese leyendo desde una DB con php, como puedo entonces hacer para agregarlo al localstorage? yo intenté meter un script de js hasta abajo del while con PHP pero no me funcionó

    • @puntojson
      @puntojson  18 днів тому

      Si PHP está corriendo en un servidor (una pc que no es la del cliente) entonces no hay localstorage, que es una propiedad exclusiva del navegador. Si querés acceder al localstorage del cliente asegurate de enviar código javascript al cliente que contenga los setItem y getItem.

  • @ignaciomatiasdiaz9710
    @ignaciomatiasdiaz9710 Рік тому

    Muy buen video. Cortito y al pie!

    • @puntojson
      @puntojson  Рік тому

      Me han dicho de todo, pero cortito nunca! Jajaj
      Me alegro de que te sirva!

  • @Kaliche
    @Kaliche Рік тому

    genial este curso me ayudo mucho gracias por el contenido mi mayor apoyo para el canal

  • @fenroh
    @fenroh 11 днів тому

    Muy bueno el video, te hago una consulta. Yo tengo un proyecto en el que el carrito lo traigo desde una base de datos. Si aplico el codigo que vos pones, sirve? Por q tu json lo traes desde el archivo bicicletas.js. yo tengo lo mismo, pero aparte de eso va a mongo. Vi el video y me parecio muy bueno pero tengo miedo de empezar a adaptar a mi código y que no funcione. Gracias!

  • @djmauriciochavarri
    @djmauriciochavarri 6 місяців тому

    Gracias por el video amigo. Muy bien explicado. Abrazo grande!

    • @puntojson
      @puntojson  6 місяців тому

      Gracias! Abrazo!

  • @lRiiuzaky
    @lRiiuzaky Рік тому +2

    Hola quisiera un video donde hagas un front y back, pero que nos hables de como aplicas los patrones de diseño en estos gracias, saludos, excelentes videos!

    • @puntojson
      @puntojson  Рік тому +3

      No estaría mal! Pero va a tener que esperar porque estoy a full grabando el curso de Angular! En donde no estoy usando el patrón MVC que es el que se suele explicar al principio.

  • @damianoffidani4744
    @damianoffidani4744 7 місяців тому

    Excelente video, muy profesional. Te felicito.

  • @franmarmo2548
    @franmarmo2548 10 місяців тому

    Perfecto, muchas gracias! Ahora a practicar

  • @kuribohize
    @kuribohize Рік тому

    sos un grande gracias por tu esfuerzo y dedicación!

    • @puntojson
      @puntojson  Рік тому

      De nada 😊
      Hago lo que puedo!

  • @cristiancaon2135
    @cristiancaon2135 2 місяці тому

    Genio

  • @carloscamacho9637
    @carloscamacho9637 5 місяців тому

    Muchas gracias, lo intentaré. Saludos.

  • @nychu4
    @nychu4 4 місяці тому

    Buenas esta genial el video😊 , podrias hacer la parte del backend para este projecto?

    • @puntojson
      @puntojson  4 місяці тому

      Buenas! Es el video que le sigue a este, te dejo el link acá ua-cam.com/video/UEjf7k32mTg/v-deo.html
      Saludos!

  • @agustinmartinez4120
    @agustinmartinez4120 11 місяців тому

    Muchísimas gracias por la ayudaa, muy buen video ⭐⭐⭐⭐⭐

    • @puntojson
      @puntojson  11 місяців тому

      De nada Agustín! Suerte en tu camino de desarrollador!

  • @fernandobenegas8176
    @fernandobenegas8176 8 місяців тому

    .json gracias la verdad fue ginial una quemada de cabeza, igual fui a la par tuya pero yo le di mi estilo e hize de otra manera, lo que realmente me cuesta mucho es saber donde va cada funcion y como pensar una funcion como haces para darte cuenta de eso? el tiempo y la practica te lo dan? eso es lo que realmente me cuesta pero soy nuevo en esto, gracias Maestro, seguire firma como soldado a este canal

    • @puntojson
      @puntojson  6 місяців тому

      Buenas Fernando! Lo que tenés problemas de asimilar es lo que se llama el patrón de diseño de la aplicación. Si bien hay reglas para aprenderlas (podés buscar en internet) se aprende haciendo y haciendo mucho. Con el tiempo le vas a agarrar la mano no te preocupes!
      Gracias por el comentario!

  • @NADINENRIQUECOVOQUINTERO-ye9ux

    Eres genial el mejor de los mejores

    • @puntojson
      @puntojson  Рік тому

      Graciasss por estar y por tu mensaje :)

  • @aguilarhaquethectoradolfo2022
    @aguilarhaquethectoradolfo2022 Рік тому +1

    amigo una pregunta, si en la pagina web se requiere agregar la opcion de comprar como se puede hacer eso es decir que el cliente pueda ver los productos y comprarlos o como funciona eso

    • @puntojson
      @puntojson  Рік тому +1

      Buenas! El proceso para un carrito de compras entero con pasarela de pago es bastante más complejo de lo que ves acá.
      En principio vas a necesitar sí o sí tener un backend, porque manejar compras desde frontend es exponerte a grandes riesgos de seguridad.
      En detalle la arquitectura te queda así:
      1) Desde el front cargás los productos disponibles consultando al backend cuáles son los productos que hay que mostrar.
      2) Desde el front se muestran los productos y se hace todo lo de este video.
      3) Desde el front se piden datos de tarjeta y son enviados al back para que el back apruebe o rechace la compra, a la vez el back tiene que preguntar esto mismo al administrador de la tarjeta de crédito.
      4) El back registra en la base de datos la compra exitosa y envía la confirmación al front.
      5) El front muestra el mensaje de éxito.
      Si sentís que todo lo que escribí es chino, entonces todavía tenés camino que hacer antes de ver esto. Si entendiste más o menos ya estás listo para bucar tutoriales o curso de creación de "e-commerce" que es donde se ve todo eso.
      Yo tengo idea de hacer uno, pero dentro de bastante, ya que ahora estoy subiendo un curso de Angular y tengo otro curso en mente que quiero hacer.
      Cualquier consulta no dudes en preguntar!
      Calo

  • @jugadaslol5503
    @jugadaslol5503 5 місяців тому

    Muy bueno video brother! Todo excelente explicado, te hago una consulta si quiero hacer hover sobre el icono del carrito y que se despliega tal cual lo tienes en el cart.html cual seria la logica de javascript para ello? Lo intentado ya varios dias y aun no puedo hacer que se muestre, desde ya gracias!

    • @puntojson
      @puntojson  5 місяців тому +1

      Buenas! Gracias por tu mensaje!
      Si querés tener todo junto entonces tenés que unificar las 2 páginas en una sola.
      Todo lo que está en cart lo traés al home y todo el html del cart lo ponés en una que ocultás o mostrás según el hover.
      En este caso le pondría un evento mouseover al cart para sacarle la clase que esconde el cart.
      Después pondría un evento mouseout al cart para que cuando saques el mouse del cart desaparezca.
      No sé si eso aclara un poco las cosas! Ya para hacer algo un poco más complejo que esto por mi parte lo haría usando algún framework de frontend (en mi canal enseño Angular pero puede ser cualquier otro).
      Saludos!

  • @Joel-pz9bn
    @Joel-pz9bn 9 місяців тому

    nuevo suscriptor 😌

    • @puntojson
      @puntojson  6 місяців тому

      Gracias! 😊
      Nos vemos en próximos videos!

  • @NaweMC
    @NaweMC 6 місяців тому +1

    alguien sabe como hacer para que las imagenes en los carritos me carguen?

    • @puntojson
      @puntojson  6 місяців тому

      Buenas! Sin más información de que está pasando se complica ayudar. ¿Tenés algún mensaje de error?

  • @johanna_slargvesc
    @johanna_slargvesc Рік тому

    Hola! el carrito se puede poner en un pdf en adobe acrobat pro?

    • @puntojson
      @puntojson  11 місяців тому

      Buenas! No termino de entender tu pregunta :/
      Si querés crear un PDF con lo que tenés en pantalla podés abrir la ventana de "imprimir" y poner guardar como pdf!

  • @GuadalupeFestinese
    @GuadalupeFestinese 8 місяців тому

    Genio !

  • @gonzaloarin7321
    @gonzaloarin7321 Рік тому

    buenas Noches como estas? Te hago una consulta, Segui tu tutorial para hacer un proyecto pero a la hora de sumar productos desde el carrito me suma de a dos unidades. sabes como puedo solucionarlo?

    • @puntojson
      @puntojson  Рік тому

      Mmmm me suena a que tenés código duplicado! Buscá lo siguiente:
      * 2 eventListeners que escuchan el mismo evento.
      * En tu código de respuesta al evento de click dos veces la referencia a la función que suma un elemento al carrito.
      Sé que parece un error dificil de hacer, pero me ha pasado literalmente esta semana con alumnos de la facultad, había literalmente código duplicado pero a la hora de buscar el error a nuestro cerebro le cuesta mucho darse cuenta que hay código dos veces, es como que apaga la detección de eso..!

  • @antoogoggia2022
    @antoogoggia2022 5 місяців тому

    en el caso de otro boton como puedo hacer para que me funcione el boton de agregar al carrito?

    • @puntojson
      @puntojson  5 місяців тому

      Buenas! No termino de entender tu pregunta.
      Querés que otro botón tenga la funcionalidad de agregar al carrito? En ese caso tenes que ponerle un evento de click a ese otro botón y hacerlo qué ejecute la misma función de tu otro boton.
      Si la función que ejecuta tu botón original es una función de flecha,ñ anónima, vas a tener que ponerle un nombre así la podes ejecutar desde los dos botones distintos.
      Si entendí mal explicame de nuevo y vemos!

  • @antoogoggia2022
    @antoogoggia2022 5 місяців тому

    tenia 20 productos ya subidos en mi index y ahora por alguna razón no me los pone en la pagina para agregar al carrito... esto como puedo solucionarlo?

    • @puntojson
      @puntojson  5 місяців тому

      Mmm podrían ser muchísimas cosas!
      Primero revisá que no haya un error en la consola, si lo hay tenés que arrancar por ahí a revisar.
      Si no hay nada fijate de no haber cambiado el ID del contenedor donde creas los productos.
      También podrías revisar que tu fuente de datos (tus productos) estén y estén bien vinculados.
      Sin saber exacto lo que estás haciendo es muy complicado arreglarlo.

  • @santiagomontironi7661
    @santiagomontironi7661 Рік тому

    holaa, estaria bueno que hagas un video explicando como hacer un formulario de registro aplicando JavaScript

    • @puntojson
      @puntojson  Рік тому

      Anotado! Más allá de la funcionalidad del registro, que es más un ejercicio de back end, acá tenés como hacer formularios y como validarlos. ua-cam.com/video/KSlki8Z2tPo/v-deo.html

  • @soportecetec2341
    @soportecetec2341 10 місяців тому

    Sos un capo

    • @puntojson
      @puntojson  10 місяців тому

      Gracias 😊😊

  • @FacuPrograma
    @FacuPrograma 5 місяців тому

    Hola bro una consulta , en el carrito a mi me figura NaN

    • @puntojson
      @puntojson  5 місяців тому

      Buenas! NaN es not a number lo que significa que estás haciendo una operación matemática o un parseInt/parseFloat a algo que no es un número.
      Tratá de buscar en tu código en donde podría estar sucediendo eso y avisame!

  • @juampicortez4515
    @juampicortez4515 6 місяців тому

    Acabo de terminar de ver el video creo que falto o me lo perdí, que al tocar reiniciar carrito, la función tenga agregada la función actualizarNumeroCarrito, tal vez me equivoco si alguno sabe bien que me corrija. Muchas gracias por el tutorial rey

    • @puntojson
      @puntojson  6 місяців тому

      Gracias por tu mensaje!
      Mmmm creo que esta funcionalidad está en el código.
      Mirá el cartService acá github.com/cacalo/Carrito-de-compras/blob/main/js/cartService.js y fijate que en cáda método hay una llamada a actualizarNumeroCarrito(), inclusive en la función "reinicarCarrito()"

  • @luisferxo-j9z
    @luisferxo-j9z Рік тому

    Buenas yo descargue un teme con carrito para blogger, lo malo es al ver carrito no me sale nada :/, sabes cual es la solución ?

    • @puntojson
      @puntojson  Рік тому

      Sin más información es imposible saber! De todas maneras nunca desarrollé para blogger. De ese estilo solo WordPress.

  • @walterdiaz6963
    @walterdiaz6963 7 місяців тому

    Hola, Alguien me podria ayudar con el codigo. No me funciona
    Por favor, si aguien puede

    • @puntojson
      @puntojson  6 місяців тому

      Buenas! Te puedo ayudar pero necesito información! Por empezar querría saber si tenés un error en consola, o qué estabas haciendo cuando empezaste a tener el error. Saludos!

  • @aprendeloya
    @aprendeloya Рік тому

    Has un proyecto silimar en el cual tenga una pagina de registro para el administrador y que los productos que agrege el administrador se reflejen en la pagina del usuario que desea comprar esos articulos con javaScript y mysql.

    • @puntojson
      @puntojson  Рік тому +1

      Lo estuve pensando! Tendría que ser un curso en vez de un video, o un video mega largo explicando todo..!

    • @aprendeloya
      @aprendeloya Рік тому

      @@puntojson Estaría súper

  • @eddy75311
    @eddy75311 6 місяців тому

    En mi caso, el número del carrito solo se actualiza con el primer producto y se suman 6 + 6, los demas productos no suman nada. Ayuda!

    • @puntojson
      @puntojson  6 місяців тому

      Buenas! Es muy difícil con esa descripción saber de una qué es lo que falla, pueden ser muchas cosas!
      Te recomiendo que pongas un console.log bien detallado en la función que actualiza el carrito para ver si lo que falla es un error de lógica o de matemática, el console.log debería decir algo como "la cantidad carrito actual es X y le voy a agregar Y cantidad, el resultado debería ser Z" (cambia las letras por variables o cálculos).
      Si no te sale ningún console.log es porque nunca estás llamando a la función cuando agregás algo al carrito, si aparece algo y lo que dice es correcto, entonces probablemente tenés un error de despistado más adelante, si lo que aparece en el log está equivocado el error está en otro lado!
      Avisame que tal.

    • @eddy75311
      @eddy75311 6 місяців тому

      @@puntojson Está bien, voy a revisar a ver dónde habré pasado algo por alto. Gracias

  • @juanmiguelzuluagasuarez414
    @juanmiguelzuluagasuarez414 Рік тому

    muy bueno el video, pero sería genial si se pudiera hacer dinámico. Es decir, sin definir el arreglo de bicicletas sino más bien que te manden las cosas

    • @puntojson
      @puntojson  Рік тому

      Sí, estaría bastante mejor! Pero para eso necesitaríamos un backend, y el video se hubiese extendido un montón! En mi video "backend de productos" ua-cam.com/video/UEjf7k32mTg/v-deo.html hago la parte que falta!

  • @Kuroo37
    @Kuroo37 8 місяців тому

    bro en el 20:38 te enredaste demaciado para algo tan simple

  • @miguela.coau.393
    @miguela.coau.393 6 місяців тому

    Buen día, Estoy inicando en el area; esta función
    function agregarAlCarrito(producto){
    const memoria = localStorage.getItem("bicicletas");
    console.log(memoria);
    } La información de la consola es: undefined

    • @puntojson
      @puntojson  6 місяців тому

      Buenas!
      Tres cosas:
      1) localstorage va todo en minúsculas, fijate de no estar errandole (aunque si tuvieses este error estaría todo marcado en el editor)
      2) Para que puedes gacer un localstorage.getItem("bicicletas") antes tendrías que haber hecho un localstorage.setItem("bicicletas",JSON.stringify(objetoBicicletas)), fijate de haber guardado algo en "bicicletas" antes de leerlo. Si no sabés como verlo es desde la pestaña "application" o "aplicación" dentro de las herramientas del navegador para desarrolladores, en la sección de localstorage.
      3) Acá me confundí yo, al leer el localstorage si no tenés nada de bicicletas todavía, deberías dejar la const memoria en un estado usable, por ejemplo en array vacío []. Para eso podés cambiar tu línea a const memoria = localStorage.getItem("bicicletas") || [];
      Con esto deberías estar!
      Saludos!

    • @miguela.coau.393
      @miguela.coau.393 5 місяців тому

      @@puntojson Buen día Carlos, en verdad yo estaba cometiendo muchos errores de tipeo, retone el ejercicio desde su inicio y lo culmine satisfatoriamente.... Tu comunicación tiene mucha pedagogía.

    • @puntojson
      @puntojson  5 місяців тому

      @@miguela.coau.393 Joya! Que bien que lo hayas podido completar! Saludos y gracias por el comentario!

  • @jorgemontenegro9046
    @jorgemontenegro9046 7 місяців тому

    Hola, he repetido el video varias veces y no hacer que me salgan las imagnes !!

    • @NaweMC
      @NaweMC 6 місяців тому

      pudiste resolverlo?

    • @puntojson
      @puntojson  6 місяців тому

      Buenas!
      Si podés brindarme más información quizás te pueda ayudar! Seguramente es un error de tipeo en las url de las imágenes.
      Podés si querés mirar la pestaña network/red de tu navegador y fijarte qué imágenes se están intentando cargar, para comparar las url y ver si están bien escritas.
      Saludos!

  • @Kuroo37
    @Kuroo37 8 місяців тому +1

    a alguen mas no le funciona el carrito?

    • @puntojson
      @puntojson  6 місяців тому

      Si me das más información quizá te pueda ayudar!

  • @alexisfranco6002
    @alexisfranco6002 8 місяців тому +1

    Uncaught SyntaxError: "undefined" is not valid JSON
    at JSON.parse ()
    at agregarAlCarrito (cartService.js:2:26)
    at HTMLButtonElement. (index.js:14:89) AYUDA ME SALTA ESTE ERROR Y NO ENTIENDO A QUE SE DEBE

    • @lucialoza9955
      @lucialoza9955 8 місяців тому

      Tengo el mismo error! Y no encuentro a qué se debe!!

    • @lucialoza9955
      @lucialoza9955 7 місяців тому

      Encontré el error en cartService.js, en la línea 7, la parte de JSON.stringify no es entre [] sino entre (). Entonces quedaría así: localStorage.setItem('bicicletas', JSON.stringify(nuevoProducto)). Suerte!

    • @NaweMC
      @NaweMC 7 місяців тому

      lo pudiste resolver???

    • @alexisfranco6002
      @alexisfranco6002 7 місяців тому

      @@NaweMC no vos?

    • @NaweMC
      @NaweMC 7 місяців тому

      @@alexisfranco6002 let memoria = JSON.parse(localStorage.getItem("bicicletas")) || [ ] Le cambie el const de memoria a let y agregue al final un "|| []" diciendo que tambien puede ser un array