Skip to content

Commit 20a4422

Browse files
EdsCodesEdsCodes
committed
correccion de errores de ruta en archivos JSON
1 parent a167d8c commit 20a4422

File tree

1 file changed

+96
-101
lines changed

1 file changed

+96
-101
lines changed

‎js/index.js‎

Lines changed: 96 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,119 @@
11
document.addEventListener('DOMContentLoaded', async function () {
22

3-
try {
4-
async function consumirApiProductos() {
5-
try {
6-
const respuesta = await fetch('../js/productos.json');
7-
const datos = await respuesta.json();
8-
return datos;
9-
} catch (error) {
10-
return [];
11-
}
3+
async function consumirApiProductos() {
4+
try {
5+
const respuesta = await fetch('../js/productos.json');
6+
const datos = await respuesta.json();
7+
return datos;
8+
} catch (error) {
9+
return [];
1210
}
11+
}
1312

14-
async function consumirApiProductosCarrete() {
15-
try {
16-
const respuesta = await fetch('../js/productosCarrete.json');
17-
const datos = await respuesta.json();
18-
return datos;
19-
} catch (error) {
20-
return [];
21-
}
13+
async function consumirApiProductosCarrete() {
14+
try {
15+
const respuesta = await fetch('../js/productosCarrete.json');
16+
const datos = await respuesta.json();
17+
return datos;
18+
} catch (error) {
19+
return [];
2220
}
21+
}
2322

24-
const [productos, productosCarrete] = await Promise.all([consumirApiProductos(), consumirApiProductosCarrete()]);
23+
const [productos, productosCarrete] = await Promise.all([consumirApiProductos(), consumirApiProductosCarrete()]);
2524

26-
function generarHTMLProducto(producto) {
27-
const precioConAumento = Math.round(producto.precio * 1.10);
28-
return `
29-
<div id=${producto.id} class="img${producto.id}__pagPpal">
30-
<img src="${producto.imagenUrl1}" class="rounded float-start" alt="${producto.textoProducto}">
31-
<div class="seccionVtaImgsPpal">
32-
<div class="card-img-overlay">
33-
<div class="seccionPrecios__imgsPagPPal">
34-
<h5 class="precioTachado">$${precioConAumento}</h5>
35-
<h5 class="textPrice">$${producto.precio}</h5>
36-
</div>
37-
<p class="card-text">${producto.textoProducto} (-10% OFF)</p>
38-
<p class="card-text"><small>${producto.color} ${producto.talla}</small></p>
39-
</div>
40-
<div class="botonesAccionCompra">
41-
<a href="./pages/detalleProducto.html" class="btn btn-dark" value="Ver detalle" onclick="encontrarIdProd(${producto.id});">Ver detalle</a>
42-
<button class="btn btn-dark" onclick="encontrarIdProd(${producto.id}); agregarProdCarrito();">Añadir al carrito</button>
25+
function generarHTMLProducto(producto) {
26+
const precioConAumento = Math.round(producto.precio * 1.10);
27+
return `
28+
<div id=${producto.id} class="img${producto.id}__pagPpal">
29+
<img src="${producto.imagenUrl1}" class="rounded float-start" alt="${producto.textoProducto}">
30+
<div class="seccionVtaImgsPpal">
31+
<div class="card-img-overlay">
32+
<div class="seccionPrecios__imgsPagPPal">
33+
<h5 class="precioTachado">$${precioConAumento}</h5>
34+
<h5 class="textPrice">$${producto.precio}</h5>
4335
</div>
36+
<p class="card-text">${producto.textoProducto} (-10% OFF)</p>
37+
<p class="card-text"><small>${producto.color} ${producto.talla}</small></p>
38+
</div>
39+
<div class="botonesAccionCompra">
40+
<a href="./pages/detalleProducto.html" class="btn btn-dark" value="Ver detalle" onclick="encontrarIdProd(${producto.id});">Ver detalle</a>
41+
<button class="btn btn-dark" onclick="encontrarIdProd(${producto.id}); agregarProdCarrito();">Añadir al carrito</button>
4442
</div>
4543
</div>
46-
`;
47-
};
44+
</div>
45+
`;
46+
};
4847

49-
function generarHTMLProductosCarrete(producto) {
50-
const precioConAumento = Math.round(producto.precio * 1.10);
48+
function generarHTMLProductosCarrete(producto) {
49+
const precioConAumento = Math.round(producto.precio * 1.10);
5150

52-
return `
53-
<div class="card" style="width: 18rem;">
54-
<img src="${producto.imagenUrl1}" class="card-img-top" alt="${producto.textoProducto}">
55-
<div class="card-body">
56-
<h5 class="card-title">${producto.textoProducto}</h5>
57-
<h6>${producto.descuento}</h6>
58-
<p class="card-text">${producto.talla}</p>
59-
<p class="card-text">${producto.color}</p>
60-
<div class="seccionPrecios">
61-
<p class="textoTachado">$${precioConAumento}</p>
62-
<p class="card-textPrice">$${producto.precio}</p>
63-
</div>
64-
<a href="./pages/detalleProducto.html" class="btn btn-dark" onclick="encontrarIdProd(${producto.id});"> Ver detalle</a>
65-
<button class="btn btn-dark" onclick="encontrarIdProd(${producto.id}); agregarProdCarrito();">Añadir al carrito</button>
51+
return `
52+
<div class="card" style="width: 18rem;">
53+
<img src="${producto.imagenUrl1}" class="card-img-top" alt="${producto.textoProducto}">
54+
<div class="card-body">
55+
<h5 class="card-title">${producto.textoProducto}</h5>
56+
<h6>${producto.descuento}</h6>
57+
<p class="card-text">${producto.talla}</p>
58+
<p class="card-text">${producto.color}</p>
59+
<div class="seccionPrecios">
60+
<p class="textoTachado">$${precioConAumento}</p>
61+
<p class="card-textPrice">$${producto.precio}</p>
6662
</div>
63+
<a href="./pages/detalleProducto.html" class="btn btn-dark" onclick="encontrarIdProd(${producto.id});"> Ver detalle</a>
64+
<button class="btn btn-dark" onclick="encontrarIdProd(${producto.id}); agregarProdCarrito();">Añadir al carrito</button>
6765
</div>
68-
`;
69-
};
66+
</div>
67+
`;
68+
};
7069

71-
function renderizarProductos(productos, elemento) {
72-
const htmlProductos = productos.map(producto => generarHTMLProducto(producto)).join('');
73-
elemento.innerHTML = htmlProductos;
74-
};
75-
76-
function renderizarProdsCarrete (productos, elemento) {
77-
const htmlProductos = productos.map(producto => generarHTMLProductosCarrete(producto)).join('');
78-
elemento.innerHTML = htmlProductos;
79-
};
80-
81-
renderizarProductos(productos, document.getElementById('listaProductosPagPpal'));
82-
renderizarProdsCarrete(productosCarrete, document.getElementById('carrete_recomendados'));
70+
function renderizarProductos(productos, elemento) {
71+
const htmlProductos = productos.map(producto => generarHTMLProducto(producto)).join('');
72+
elemento? elemento.innerHTML = htmlProductos: null;
73+
};
8374

84-
const prodsPagPpal = productos.concat(productosCarrete);
75+
function renderizarProdsCarrete (productos, elemento) {
76+
const htmlProductos = productos.map(producto => generarHTMLProductosCarrete(producto)).join('');
77+
elemento? elemento.innerHTML = htmlProductos: null;
78+
};
8579

86-
let prodsFiltrados = [];
87-
88-
function filtrarPorGenero(genero) {
89-
return prodsPagPpal.filter(producto => producto.genero === genero);
90-
}
91-
92-
function guardarProductosFiltradosLS(prodsFiltrados) {
93-
localStorage.setItem("productosFiltrados", JSON.stringify(prodsFiltrados));
94-
}
80+
renderizarProductos(productos, document.getElementById('listaProductosPagPpal'));
81+
renderizarProdsCarrete(productosCarrete, document.getElementById('carrete_recomendados'));
9582

96-
function actualizarProdsFiltYSaveLS(genero) {
97-
prodsFiltrados = filtrarPorGenero(genero);
98-
guardarProductosFiltradosLS(prodsFiltrados);
99-
}
83+
const prodsPagPpal = productos.concat(productosCarrete);
84+
85+
let prodsFiltrados = [];
86+
87+
function filtrarPorGenero(genero) {
88+
return prodsPagPpal.filter(producto => producto.genero === genero);
89+
}
90+
91+
function guardarProductosFiltradosLS(prodsFiltrados) {
92+
localStorage.setItem("productosFiltrados", JSON.stringify(prodsFiltrados));
93+
}
10094

101-
localStorage.setItem('prodsPagPpal', JSON.stringify(prodsPagPpal));
95+
function actualizarProdsFiltYSaveLS(genero) {
96+
prodsFiltrados = filtrarPorGenero(genero);
97+
guardarProductosFiltradosLS(prodsFiltrados);
98+
}
10299

103-
function abrirPagDetalle () {
104-
window.open('../pages/detalleFiltrados.html')
105-
}
100+
localStorage.setItem('prodsPagPpal', JSON.stringify(prodsPagPpal));
106101

107-
function accionesProd() {
108-
const genero = this.dataset.genre;
109-
actualizarProdsFiltYSaveLS(genero);
110-
console.log(prodsFiltrados);
111-
setTimeout(abrirPagDetalle, 1000);
112-
}
113-
114-
const botonFiltroMujer = document.getElementById('botonFiltroMujer');
115-
const botonFiltroHombre = document.getElementById('botonFiltroHombre');
116-
117-
botonFiltroMujer.addEventListener("click", accionesProd);
118-
botonFiltroHombre.addEventListener("click", accionesProd);
102+
function abrirPagDetalle () {
103+
window.open('../pages/detalleFiltrados.html')
104+
}
119105

120-
121-
} catch (error) {
122-
console.error("Error al cargar la página:", error);
106+
function accionesProd() {
107+
const genero = this.dataset.genre;
108+
actualizarProdsFiltYSaveLS(genero);
109+
console.log(prodsFiltrados);
110+
setTimeout(abrirPagDetalle, 1000);
123111
}
124-
});
112+
113+
const botonFiltroMujer = document.getElementById('botonFiltroMujer');
114+
const botonFiltroHombre = document.getElementById('botonFiltroHombre');
115+
116+
botonFiltroMujer.addEventListener("click", accionesProd);
117+
botonFiltroHombre.addEventListener("click", accionesProd);
118+
119+
});

0 commit comments

Comments
 (0)