Skip to content

Commit 2fdce1d

Browse files
juangralargjuangralarg
committed
20240707_001
1 parent 49e0bbc commit 2fdce1d

File tree

3 files changed

+119
-143
lines changed

3 files changed

+119
-143
lines changed

‎Entregas/PruebasEntrega/js/cart.js‎

Lines changed: 5 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ const numeroCarrito = document.getElementById("numero-carrito");
33

44

55
document.addEventListener('DOMContentLoaded', () => {
6-
6+
77
ListarProductosStock();
8-
listarProductosCarrito();
8+
//listarProductosCarrito();
99
});
1010

1111
/**
@@ -36,10 +36,11 @@ function ListarProductosStock(){
3636
*/
3737

3838
function agregarAlCarrito(producto) {
39+
event.preventDefault();
3940
nroItemsCarrito();
4041
let carrito = obtenerCarritoDeLocalStorage();
4142
carrito.push(producto);
42-
guardarCarritoEnLocalStorage(carrito);
43+
localStorage.setItem('carrito', JSON.stringify(carrito)); //Guardar carrito en localStorage
4344
actualizarNumeroCarrito(carrito.length);
4445
}
4546

@@ -48,16 +49,14 @@ function ListarProductosStock(){
4849
return carrito
4950
}
5051

51-
function guardarCarritoEnLocalStorage(carrito) {
52-
localStorage.setItem('carrito', JSON.stringify(carrito));
53-
}
5452

5553
function cargarCarritoDesdeLocalStorage() {
5654
let carrito = obtenerCarritoDeLocalStorage();
5755
actualizarNumeroCarrito(carrito.length);
5856
}
5957

6058
function actualizarNumeroCarrito(cantidad) {
59+
event.preventDefault()
6160
numeroCarrito.textContent = cantidad;
6261
}
6362

@@ -71,46 +70,3 @@ function nroItemsCarrito(){
7170

7271
}
7372

74-
function listarProductosCarrito(){
75-
76-
// Obtener el carrito desde localStorage
77-
let carrito = JSON.parse(localStorage.getItem('carrito')) || [];
78-
79-
// Agrupar los productos por id
80-
let productosAgrupados = carrito.reduce((acc, producto) => {
81-
if (!acc[producto.id]) {
82-
acc[producto.id] = { ...producto, cantidad: 0 };
83-
}
84-
acc[producto.id].cantidad += 1;
85-
return acc;
86-
}, {});
87-
88-
// Convertir el objeto en un array
89-
productosAgrupados = Object.values(productosAgrupados);
90-
91-
// Obtener el contenedor del carrito
92-
const carritoContainer = document.getElementById('carrito-items');
93-
94-
// Mostrar los productos agrupados en el contenedor
95-
productosAgrupados.forEach(producto => {
96-
97-
const total = producto.precio*producto.cantidad;
98-
const productoElemento = document.createElement('tr');
99-
100-
productoElemento.innerHTML = `
101-
102-
<TD> ${producto.nombre} </TD>
103-
<TD> ${producto.precio}$ </TD>
104-
<TD> ${producto.cantidad} </TD>
105-
<TD> ${total} </TD>
106-
107-
<td class="cantidadBTN">
108-
<button onclick="bajaCantidad()"> BAJAR </button>
109-
<button onclick="subirCantidad()"> SUBIR </button>
110-
</td>
111-
112-
`;
113-
carritoContainer.appendChild(productoElemento);
114-
});
115-
116-
}

‎Entregas/PruebasEntrega/js/cartList.js‎

Lines changed: 104 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -3,120 +3,141 @@ listarProductosCarrito();
33

44
function listarProductosCarrito(){
55

6-
// Obtener el carrito desde localStorage
7-
let carrito = obtenerCarritoDeLocalStorage()
6+
let carrito = obtenerCarritoDeLocalStorage() // Obtener el carrito desde localStorage. En cart.js
7+
8+
let productosAgrupados = carrito.reduce((agrupar, producto) => {// Agrupar los productos por id
9+
if (!agrupar[producto.id]) {
10+
agrupar[producto.id] = { ...producto, cantidad: 0 };
11+
}
12+
agrupar[producto.id].cantidad += 1;
13+
return agrupar;
14+
}, {});
815

9-
// Agrupar los productos por id
10-
let productosAgrupados = carrito.reduce((acc, producto) => {
11-
if (!acc[producto.id]) {
12-
acc[producto.id] = { ...producto, cantidad: 0 };
13-
}
14-
acc[producto.id].cantidad += 1;
15-
return acc;
16-
}, {});
16+
productosAgrupados = Object.values(productosAgrupados);// Convertir el objeto en un array
1717

18-
// Convertir el objeto en un array
19-
productosAgrupados = Object.values(productosAgrupados);
18+
const carritoContainer = document.getElementById('carrito-items');// Obtener el contenedor del carrito
2019

21-
// Obtener el contenedor del carrito
22-
const carritoContainer = document.getElementById('carrito-items');
2320

24-
// Mostrar los productos agrupados en el contenedor
25-
productosAgrupados.forEach(producto => {
21+
productosAgrupados.forEach(producto => {// Mostrar los productos agrupados en el contenedor
2622

2723
const total = producto.precio*producto.cantidad;
2824
const productoElemento = document.createElement('tr');
2925

30-
productoElemento.innerHTML = `
31-
<tbody>
32-
<tr>
33-
<TD> ${producto.nombre} </TD>
34-
<TD> ${producto.precio} $ </TD>
35-
<TD> ${producto.cantidad} </TD>
36-
<TD> ${total} $ </TD>
37-
<td> <button onclick="cambiarCantidad(${producto.id},-1)"> - </button>
38-
<button onclick="cambiarCantidad(${producto.id},1)"> + </button>
39-
</td>
40-
</tr>
41-
</tbody>
26+
productoElemento.innerHTML = `
27+
<tbody>
28+
<tr>
29+
<TD> ${producto.nombre} </TD>
30+
<TD> ${producto.precio} $ </TD>
31+
<TD> ${producto.cantidad} </TD>
32+
<TD> ${total} $ </TD>
33+
<td> <button onclick="borrarItem(${producto.id},-1)"> Quitar </button>
34+
</tr>
35+
</tbody>
36+
`;
37+
38+
carritoContainer.appendChild(productoElemento);
39+
});
40+
/* console.log(productosAgrupados); */
41+
if(productosAgrupados.length<=0){
42+
43+
const productoElemento = document.createElement('tr');
44+
productoElemento.innerHTML = `
45+
<tbody>
46+
<Tr>
47+
<td colspan="5">CARRITO VACIO</td>
48+
</Tr>
49+
</tbody>
50+
`;
51+
carritoContainer.appendChild(productoElemento);
52+
}
4253

43-
44-
`;
45-
carritoContainer.appendChild(productoElemento);
46-
});
47-
totalCarrito()
54+
totalCarrito()
4855
}
4956

57+
function obtenerCarritoDeLocalStorage() {
58+
let carrito = JSON.parse(localStorage.getItem('carrito')) || [];
59+
return carrito
60+
}
61+
5062
/**
5163
* INSTRUCCIONES AL TERMINAR LA COMPRA
5264
*/
5365
function comprarCarrito(){
5466
let carrito = obtenerCarritoDeLocalStorage()
5567
let total = 0;
5668
let IVA=22;
57-
carrito.forEach(item => {
58-
total += item.precio;
59-
});
60-
let aPagar=total+(total*(IVA)/100);
61-
console.log(aPagar);
69+
70+
carrito.forEach(item => {
71+
total += item.precio;});
72+
73+
let aPagar=total+(total*(IVA)/100);
74+
console.log(aPagar);//Verificacion valores
6275
}
6376

6477

6578
function totalCarrito(){
6679
let IVA=22;
6780
let carrito = obtenerCarritoDeLocalStorage()
68-
69-
// Obtener el contenedor del carrito
70-
const carritoTtoal = document.getElementById('carrito-values');
81+
const carritoTtoal = document.getElementById('carrito-values');// Obtener el contenedor del carrito
7182

72-
// Calcular el total de los precios
73-
let total = 0;
74-
carrito.forEach(item => {
75-
total += item.precio;
76-
});
77-
78-
// Crear la tabla HTML dinámicamente
79-
const tabla = document.createElement('tr');
80-
let aPagar=total+(total*(IVA)/100);
81-
tabla.innerHTML = `
82-
<tbody>
83-
<Tr>
84-
<Td> ${total} </Td>
85-
<Td> ${IVA}% </Td>
86-
<Td> </Th>
87-
<Td> ${aPagar} </Td>
88-
</Tr>
89-
</tbody>
90-
`;
91-
carritoTtoal.innerHTML = '';
92-
carritoTtoal.appendChild(tabla);
83+
// Calcular total
84+
let total = 0;
85+
carrito.forEach(item => {
86+
total += item.precio; });
87+
if (carrito !=0 ){
88+
const tabla = document.createElement('tr');
89+
let aPagarSinRedondear=(total+(total*(IVA)/100));
90+
let aPagar= aPagarSinRedondear.toFixed(2);//DEVUELVE EN FORMATO STRING
91+
tabla.innerHTML = `
92+
<tbody>
93+
<Tr>
94+
<Td> ${total} </Td>
95+
<Td> ${IVA}% </Td>
96+
<Td> </Td>
97+
<Td> ${aPagar} </Td>
98+
</Tr>
99+
</tbody>
100+
`;
101+
/* carritoTtoal.innerHTML = '';//VERIFICACION DE VALORES */
102+
carritoTtoal.appendChild(tabla);
103+
} else {
104+
const tabla = document.createElement('tr');
105+
tabla.innerHTML = `
106+
<tbody>
107+
<Tr>
108+
<td colspan="4">SIN ITEMS PARA SUMAR</td>
109+
</Tr>
110+
</tbody>
111+
`;
93112

94-
}//FIN DEL SCRIPT
113+
carritoTtoal.appendChild(tabla);
114+
}
115+
}
116+
95117

118+
function borrarItem(id){
119+
let carrito = localStorage.getItem('carrito');
120+
if (carrito){
121+
carrito=JSON.parse(carrito);
96122

123+
const indice= carrito.findIndex(producto=>producto.id=== id);
97124

98-
// Función para cambiar la cantidad de un producto en el carrito
99-
function cambiarCantidad(productId, cambio) {
100-
// Obtener el carrito desde localStorage
101-
let carrito = obtenerCarritoDeLocalStorage()
125+
if (indice !== -1){
126+
carrito.splice(indice,1);
102127

103-
// Encontrar el producto en el carrito y cambiar su cantidad
104-
let productoIndex = carrito.findIndex(producto => producto.id === productId);
128+
localStorage.setItem('carrito',JSON.stringify(carrito))
105129

106-
if (productoIndex !== -1) {
107-
if (cambio > 0 || (cambio < 0 && carrito[productoIndex].cantidad > 1)) {
108-
carrito[productoIndex].cantidad = (carrito[productoIndex].cantidad || 1) + cambio;
109-
}
130+
console.log(`Elemento eliminado con ID: ${id}`);
131+
location.reload()
132+
} else {
133+
console.log(`No s eencontro el id: ${id}`);
134+
location.reload()
135+
};
110136

111-
// Si la cantidad es 0 o menor, eliminar el producto del carrito
112-
if (carrito[productoIndex].cantidad <= 0) {
113-
carrito.splice(productoIndex, 1);
137+
}else {
138+
console.log(`No exite elemento`);
139+
location.reload()
114140
}
141+
}//FIN DEL SCRIPT
115142

116-
// Guardar el carrito actualizado en localStorage
117-
localStorage.setItem('carrito', JSON.stringify(carrito));
118-
119-
// Actualizar la vista del carrito
120-
listarProductosCarrito();
121-
}
122-
}
143+

‎Entregas/PruebasEntrega/src/views/ComprasCarrito.html‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@
44
<meta name="viewport" content="width=device-width, initial-scale=1.0">
55
<link rel="stylesheet" href="../../css/estilosCarrito.css">
66
<script defer src="../../js/cartList.js"></script>
7-
<script defer src="../../js/cart.js"></script>
8-
<title>CARRITO DE COMPRAS</title>
7+
<title>CARRITO DE COMPRAS JUAN ANDRES GRAÑA</title>
98
<body>
109
<header>
1110
<div id="header">
@@ -26,15 +25,15 @@ <h1>COMPRAS REALIZADAS</h1>
2625
<div class="tablediv">
2726
<TABLE class="producto-tabla">
2827
<Thead>
29-
<Tr>
30-
<TH> PRODUCTO </TH>
31-
<TH> PRECIO </Th>
32-
<Th> CANTIDAD </Th>
33-
<Th> TOTAL </Th>
34-
<Th> ACCIONES </Th>
35-
</Tr>
36-
</Thead>
37-
<tbody id="carrito-items"></tbody>
28+
<Tr>
29+
<TH> PRODUCTO </TH>
30+
<TH> PRECIO </Th>
31+
<Th> CANTIDAD </Th>
32+
<Th> TOTAL </Th>
33+
<Th> ACCIONES </Th>
34+
</Tr>
35+
</Thead>
36+
<tbody id="carrito-items"></tbody>
3837
</TABLE><BR>
3938

4039

0 commit comments

Comments
 (0)