Cómo hacer un carrito de compras con Javascript desde cero | Práctica 

Muchas gracias por tus aportes amigo. Tus enseñansas son de mucha ayuda para la comunidad. Una peticion seria si pudieras realizar a partir de este carrito en la lista tenga un boton "registrar compra" y cuando le de click me guarde en una base de datos como Mysql . Gracias y saludos.

hola, de vuelta, no me funciona, lo que me pasa es que me aparece todo el tiempo el mensaje de "el carrito esta vacío" y yo le agregue un etiqueta a para comprar y que te mande a otro lugar. Como podría hacer para que se oculte el mensaje cuando hay cosas en el carrito, y para que se oculte el "comprar" cuando no hay nada?? gracias, saludos

Hola eso se tiene que hacer con Local Storage yo lo intenté pero no logro que los datos me salgan dentro del carrito solo logro tenerlo dentro de la consola del Local Sotrage

Hola! Este es mi código: total = total + parseInt(product.quantity * product.price.slice(1)); totalOfProducts = totalOfProducts + product.quantity;

seria ideal, o que mande la compra por WSP

Hola! agregando la proiedad toFixed se pueden mostrar los decimales

Saludos, si hay forma y de hecho ya le ayude a alguien con el mismo requisito. Puedes escribirme a telegram para darte más indicaciones

cayate

@@marcelocardozo326 😂

Lo tendré en mente para futuros vídeos. Gracias por el apoyo

Hola, gracias por el comentario. Ese problema pasa porque el código esta hecho para que tome un solo contenedor que va a tener todos los productos. En este caso, lo que se puede hacer es añadir secciones dentro del contenedor para cada categoría. Sin embargo, habría que modificar el css solamente, puedes probar y si aún tienes problemas contáctame a mi telegram

@@programacionparaelmundo Tengo otra duda jajaja, que pena preguntar... Pero me preguntaba si me podrías recomendar o ayudar a poder hacer que todo lo que agregue al carrito de compras, pueda registrarlo en una base de datos mediante php, y eh tratado pero no hay valores ni nada que me pueda ayudar al momento de intentar meter datos.

Un saludo, eso da para otro vídeo que haré proximamente.

a mi tampoco, solo me sale $${total}

No hay problema. Puedo revisar más de cerca el caso en t.me/roberto_anq Creo que eso es una cuestión del punto. Tendría que hacer pruebas

@@programacionparaelmundo Hola muchas gracias no tengo internet desde antier estoy usando datos mañana me comunicaré contigo Muchas gracias.

Lo primero sería añadir un button o un elemento html que va a activar el evento del click. ( Puede ser un parrafo, un span o a mi gusto un button) Luego puedes darle un id o una clase si prefieres para registrarlo en el javascript con el querySelector. Despues le haces un addEventListener de click a la constante que usaste el querySelector. Y adentro de la función solo debes resetear la variable que contiene todos los productos, en el caso del vídeo es allProducts, y la reseteas así -> allProducts = [ ] Y al finalizar solo puedes llamar la función showHTML que ya viste en el vídeo. Quedando el código así: ===================================================== const btnClearAll = document.querySelector('.btn-clear-all') btnClearAll.addEventListener('click', () => { allProducts = []; showHTML() }) =====================================================

@@programacionparaelmundo jajaja muchas gracias ya lo había hecho pero tuve que hacerlo con visibility= hidden y daba muchos errores.

@benjamin2841 Puede ser un error en el Html. Recuerda que para añadir más productos se puede copiar todo el div que tiene la clase item. Y luego solo reemplazar la información. Lo probé y solo haciendo se mantiene todo en orden. Ojo. El div con la clase item debe estar dentro del contenedor padre, es decir, el div con la clase container-items. Si aún te da problemas ahí está mi telegram. Saludos

Hola, tengo la solución por si la quieres, solo tienes que ir al archivo styles.css, una vez ahí ubica la linea 141 o aparecerá como un comentario llamado "Main" y dentro de ".container-items" ve a "grid- template-colums" aparecerá un repeat, ahí modifica el 4 y agrega mas o menos, dependiendo cuanto necesites en una hilera, en mi caso yo me puse 6 y para cambiar el tamaño de la imagen solo tienes que ir a ".item img" y en "height" pon el tamaño de deseas.

Si claro, puedes escribirme a Telegram para que me pases tu código y pueda revisarlo. Normalmente este tipo de error es que no encuentra en el html el elemento. Puede ser que este mal escrito una clase o el div o cualquier detalle mínimo.

Quitale los corchetes curvos, esos solo son cuando vas a escribir mas de una linea de codigo. Tu console.log es una linea, la funcion no debe llevar esos corchetes "{}" te arrojara algo asi como un typeError.

Saludos, Si puedes escribirme a telegram y pasarme tu código podría ayudarte mucho mejor

@@programacionparaelmundo ya lo he solucionado, gracias por responder!!

@@victoraragon98 Buenas Victor, estoy igual. A parte del "valortotal" final, qué más has modificado? No me deja hacer bien la suma.

@@victoraragon98 me podrias decir como lo solucionaste ?

Cualquier problema que tengas puedes contactarme a Telegram

const valorTotal = document.querySelector(".totalidad") || { innerText: '$0' }; const countProducts = document.querySelector("#contador-productors") || { innerText: '0' }; total += parseInt(product.quantity) * parseFloat(product.price.slice(1)); totalOfProducts += product.quantity; }); valorTotal.innerText = `$${total.toFixed(2)}`; countProducts.innerText = totalOfProducts;

En vez de totalidad utiliza la clase que tengas en html que en el caso del video es .total-pagar

Siempre puedes revisar el código fuente en Github para buscar errores. Si aún así no encuentras una solución puedes escribirme a Telegram y pasarme tu código para revisarlo. Saludos

@@programacionparaelmundo Gracias por responder amigo, de echo ya lo revise pero no encuentro el error ):

No funciona porque el código que está en la descripción es la base para partir desde ahí lo del vídeo Acabo de añadir el código fuente completo. Recuerda que eso es una ayuda para comparar el código si te atascas. No es para directamente descargar sin conocer cómo funciona. Te aconsejo ver el vídeo y entender la lógica primero

Saludos. En la descripción deje una forma de comunicarme vía telegram

Disculpa, no he entendido muy bien. Si gustas podrías contactarme a Telegram para explicarme más a detalle

Tengo la misma pregunta, si yo agrego los datos de las cards dinamicamente desde javascript, como despues puedo agarrar esos datos y hacer el resto del carrito? si tienen una respuesta me ayudaria muchoo

Hola, Revisa que no tengas los parentesis después del toogle. Eso podría solucionarlo ya que no es una función. Sin embargo, si sigues teniendo problemas puedes escribirme a Telegram

A veces nos olvidamos de poner alguna variable o utilizamos otro nombre. Lo mejor es verificar, en este caso puede usar el link del repositorio que está en la descripción o también escribiendome a Telegram puedo revisar el código y llegar a una solución. Un saludo

Disculpa, no he entendido la pregunta

@@programacionparaelmundo osea cuando uno hace una página web para un cliente Como yo puedo hacerle entrega de ese proyecto oh de esa página web. Osea como yo puedo entregárselo Oh cuales son los paso que hay que hacer. Para hacer entrega de una página web a un cliente

Bueno desconozco las buenas prácticas para eso, pero puedo recomendar pasarle el comprimido rar o también desplegarlo directamente en algún hosting

Hola, Tipo factura ? o cómo

@@programacionparaelmundo No , por ejemplo si una persona pide unos audífonos con unas zapatillas y que en el carrito aparezca un botón para poder hacer un pedido y que a tu correo te llegue lo que la persona pidió.

Ah entiendo, eso ya sería utilizando un backend

@@programacionparaelmundo Bro si pudieras hacer un video así lo agradecería, recién estoy empezando en esto.

@@programacionparaelmundo tambien me gustaria que lo hicieses

Eso no se puede porque al ir a otra página se borran los datos

Bueno en realidad podría ser posible utilizando el localStorage. Dejo la idea para ser desarrollada

Podría hacer un tutorial de añadir a favoritos con javascript próximamente

@@programacionparaelmundosi porfa me serviría de mucho nuevo sub y gracias 🫶🏻

Utilizo algunas. Entre los más destacados serían LiveServer, Prettier, Tokyo Night (Este es el tema que tengo) y para los iconos Material Icon Theme

@@programacionparaelmundo lo que pasa es que ví que cundo pusiste "showhtml" se te pusieron todos los ";" que hacían falta, además de ese que utilizaste para renombrar los 4 botones, sé que es multiple cursor, pero ¿cómo se utiliza?

Para hacer eso de los punto y coma utilizó una extensión para formatear el código llamado prettier. Y para renombrar palabras en visual Studio Code suele haber muchas formas. Por lo general uso Ctrl + D o Shift+ Crtl + L

Si te refieres al editor de código. Visual Studio Code

Si aún presentas un problema con el código puedes escribirme a Telegram para revisarlo. También puedes comparar tu código con el subido en GitHub para tratar de encontrar el error. Saludos 👋

Saludos. En el comentario fijado se encuentra el link de todo el código (github)

@@programacionparaelmundo Aaa jajaja que pena Muchas gracias

Listo, el próximo video será ese. Un saludo

@@programacionparaelmundo excelente bro , justo fue así , eres un grande 💜