- Código: JavaScript
- Curso: JavaScript Moderno Guía Definitiva Construye +15 Proyectos
- Módulo: 15
- Proyecto: Carrito de Compras
// Variables
const carrito = document.querySelector('#carrito');
const listaCursos = document.querySelector('#lista-cursos');
const contenedorCarrito = document.querySelector('#lista-carrito tbody');
const vaciarCarritoBtn = document.querySelector('#vaciar-carrito');
let articulosCarrito = [];
// Listeners
cargarEventListeners();
function cargarEventListeners() {
// Dispara cuando se presiona "Agregar Carrito"
listaCursos.addEventListener('click', agregarCurso);
// Cuando se elimina un curso del carrito
carrito.addEventListener('click', eliminarCurso);
// Mandar a traer el arreglo articulosCarrito del local soreage si hubiera datos allí
document.addEventListener( 'DOMContentLoaded', () => {
articulosCarrito = JSON.parse(localStorage.getItem('carrito')) || [];
carritoHTML();
})
// Al Vaciar el carrito
vaciarCarritoBtn.addEventListener('click', vaciarCarrito);
}
// Funciones
// Función que añade el curso al carrito
function agregarCurso(e) {
e.preventDefault(); //Prevenir el bendito default
// Delegation para agregar-carrito
if(e.target.classList.contains('agregar-carrito')) { //Verifica que el elemento al que se hace clic tenga la clase "agregar carrito"
//porque el listener está puesto para todo el card
const cursoConst = e.target.parentElement.parentElement; //Luego sobimos dos elementos hacia arriba para tener el div que tiene toda la info
console.log(e.target);
// Enviamos el curso seleccionado para tomar sus datos
leerDatosCurso(cursoConst); //Llamamos la funcién que lee los datos del curso y le pasamos el div con todo la info
}
}
// Lee los datos del curso
function leerDatosCurso(curso) { //Crea un objeto con los datos del curso
const infoCurso = { //querySelector va a tomar la info solo del div que se está usndo
imagen: curso.querySelector('img').src,
titulo: curso.querySelector('h4').textContent,
precio: curso.querySelector('.precio span').textContent,
id: curso.querySelector('a').getAttribute('data-id'),
cantidad: 1
}
//Lo siguiente es para aumentar la cantidad mas no agregar un curso repetido
if( articulosCarrito.some( cursoSome => cursoSome.id === infoCurso.id ) ) {
const cursos = articulosCarrito.map( cursoMap => {
if( cursoMap.id === infoCurso.id ) {
cursoMap.cantidad++;
return cursoMap;
} else {
return cursoMap;
}
})
articulosCarrito = [...cursos];
} else {
articulosCarrito = [...articulosCarrito, infoCurso];
}
// console.log(articulosCarrito)
// console.log(articulosCarrito)
carritoHTML();
}
// Elimina el curso del carrito en el DOM
function eliminarCurso(e) {
e.preventDefault();
if(e.target.classList.contains('borrar-curso') ) {
// e.target.parentElement.parentElement.remove();
const cursoId = e.target.getAttribute('data-id')
// Eliminar del arreglo del carrito
articulosCarrito = articulosCarrito.filter(cursoFilter => cursoFilter.id !== cursoId);
carritoHTML();
}
}
// Muestra el curso seleccionado en el Carrito
function carritoHTML() {
vaciarCarrito();
articulosCarrito.forEach(curso => {
const row = document.createElement('tr');
row.innerHTML = `
<td>
<img src="${curso.imagen}" width=100>
</td>
<td>${curso.titulo}</td>
<td>${curso.precio}</td>
<td>${curso.cantidad} </td>
<td>
<a href="#" class="borrar-curso" data-id="${curso.id}">X</a>
</td>
`;
contenedorCarrito.appendChild(row);
});
//Para agregar esos datos a local storage a modo de ponerle más periquitos al código llamo a una función para que haga eso
sincronizarStorage();
}
//Manda lo que está en el arreglo principal articulosCarrito al local storage
function sincronizarStorage() {
localStorage.setItem('carrito', JSON.stringify(articulosCarrito));
}
// Elimina los cursos del carrito en el DOM
function vaciarCarrito() {
// forma lenta
// contenedorCarrito.innerHTML = '';
// forma rapida (recomendada)
while(contenedorCarrito.firstChild) {
contenedorCarrito.removeChild(contenedorCarrito.firstChild);
}
}