Skip to content

Commit 9c39333

Browse files
juangralargjuangralarg
committed
20240711_001
1 parent 3853f82 commit 9c39333

File tree

7 files changed

+241
-161
lines changed

7 files changed

+241
-161
lines changed

‎Entregas/PruebasEntrega/css/csshake.min.css‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Entregas/PruebasEntrega/css/estilosCarrito.css‎

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
--color-link: red;
44
--color-text: rgb(26, 23, 56);
55
--color-acento-claro: rgb(18, 18, 236);
6-
--color-body: rgb(0,130,172);
7-
--color-header: whitesmoke;
6+
--color-body: #0082ac;
7+
--color-header: rgb(245, 245, 245);
88
--color-btn-cancel: rgb(197, 82, 36);
99
}
1010

@@ -37,6 +37,48 @@ a{
3737
border-radius: 6px;
3838
cursor: pointer;
3939
}
40+
41+
/* MOVIMIENTO IMAGEN CARRITO */
42+
@keyframes shake {
43+
/* 0%, 5% {
44+
transform: translateX(0);
45+
} */
46+
10%, 20% {
47+
transform: translateX(-3px);
48+
}
49+
/* 10%, 40% {
50+
transform: translateX(1px);
51+
} */
52+
}
53+
54+
/* .shake {
55+
animation: shake 3s infinite;
56+
animation-delay: 3s;
57+
} */
58+
59+
@keyframes shakeRepeat {
60+
/* 0%, 100% {
61+
transform: translateX(0);
62+
} */
63+
/* 20%, 60% {
64+
transform: translateX(-1px);
65+
} */
66+
40%, 80% {
67+
transform: translateX(3px);
68+
animation-delay: 2s;
69+
}
70+
}
71+
72+
.shake {
73+
animation: shakeRepeat 0.5s steps(3, end) infinite;
74+
animation-delay: 0s;
75+
}
76+
77+
78+
79+
80+
81+
4082
.button-buy {
4183
display: flex;
4284
justify-content: center; /* Centra horizontalmente */

‎Entregas/PruebasEntrega/js/cart.js‎

Lines changed: 35 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,12 @@ const numeroCarrito = document.getElementById("numero-carrito");
44

55
document.addEventListener('DOMContentLoaded', () => {
66

7-
ListarProductosStock();
8-
cargarCarritoDesdeLocalStorage();
7+
if (contenedorProductos) {
8+
ListarProductosStock();
9+
cargarCarritoDesdeLocalStorage();
10+
} /* else {
11+
console.log("Elemento con ID 'item-producto' no encontrado en el DOM.");
12+
} */
913
});
1014

1115
/**
@@ -20,11 +24,11 @@ function ListarProductosStock(){
2024
const nuevoProducto = document.createElement('div');
2125
nuevoProducto.classList.add('tarjeta-producto');
2226
nuevoProducto.innerHTML= `
23-
<img src="../../img/producto${producto.id}.png" alt="${producto.nombre}">
24-
<h3> ${producto.nombre} </h3>
25-
<P> ${producto.precio} </P>
26-
<button>Comprar</button>
27-
`;
27+
<img src="../../img/producto${producto.id}.png" alt="${producto.nombre}">
28+
<h3> ${producto.nombre} </h3>
29+
<P> ${producto.precio} </P>
30+
<button>Comprar</button>
31+
`;
2832
contenedorProductos.appendChild(nuevoProducto);
2933
nuevoProducto.getElementsByTagName("button")[0].addEventListener("click", ()=>agregarAlCarrito(producto))
3034
});
@@ -42,6 +46,7 @@ function ListarProductosStock(){
4246
carrito.push(producto);
4347
localStorage.setItem('carrito', JSON.stringify(carrito)); //Guardar carrito en localStorage
4448
actualizarNumeroCarrito(carrito.length);
49+
popupToastifyAddCart()
4550
}
4651

4752
function obtenerCarritoDeLocalStorage() {
@@ -56,8 +61,9 @@ function ListarProductosStock(){
5661
}
5762

5863
function actualizarNumeroCarrito(cantidad) {
59-
event.preventDefault()
60-
numeroCarrito.textContent = cantidad;
64+
if (numeroCarrito) { // Verifica si numeroCarrito no es null
65+
numeroCarrito.textContent = cantidad;
66+
} else{}
6167
}
6268

6369

@@ -66,8 +72,25 @@ function ListarProductosStock(){
6672
* NUMERO DE ITEMS EN EL CARRITO
6773
*/
6874
function nroItemsCarrito(){
69-
let carrito= obtenerCarritoDeLocalStorage();
70-
numeroCarrito.innerHTML=`${carrito.length}`;
71-
75+
if (numeroCarrito) { // Verifica si numeroCarrito no es null
76+
numeroCarrito.innerHTML = `${carrito.length}`;
77+
}
7278
}
7379

80+
function popupToastifyAddCart() {
81+
82+
Toastify({
83+
text: `Producto agregado`,
84+
className: "info",
85+
duration: 2000,
86+
oldestFirst: true,
87+
escapeMarkup: true,
88+
offset: {
89+
x: 0, // horizontal axis - can be a number or a string indicating unity. eg: '2em'
90+
y: 60 // vertical axis - can be a number or a string indicating unity. eg: '2em'
91+
},
92+
style: {
93+
background: "linear-gradient(to right,#0082ac, #013A66,#0082ac)",
94+
95+
}
96+
}).showToast(); }

‎Entregas/PruebasEntrega/js/cartList.js‎

Lines changed: 52 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -76,11 +76,15 @@ function comprarCarrito(){
7676

7777
let aPagar=total+(total*(IVA)/100);
7878

79-
80-
console.log(aPagar);//Verificacion valores
79+
popupSwalPago(aPagar);
80+
/* return aPagar; */
8181
}
8282

8383

84+
85+
86+
87+
8488
function totalCarrito(){
8589

8690
let IVA=22;
@@ -92,35 +96,36 @@ function totalCarrito(){
9296
carrito.forEach(item => {
9397
total += item.precio; });
9498

95-
if (carrito !=0 ){
96-
const tabla = document.createElement('tr');
97-
let itemsCarrito = carrito.length;
98-
let aPagarSinRedondear=(total+(total*(IVA)/100));
99-
let aPagar= aPagarSinRedondear.toFixed(2);//DEVUELVE EN FORMATO STRING
100-
tabla.innerHTML = `
99+
if (carrito !=0 ){
100+
const tabla = document.createElement('tr');
101+
let itemsCarrito = carrito.length;
102+
let aPagarSinRedondear=(total+(total*(IVA)/100));
103+
let aPagar= aPagarSinRedondear.toFixed(2);//DEVUELVE EN FORMATO STRING
104+
tabla.innerHTML = `
105+
<tbody>
106+
<Tr>
107+
<Td> ${itemsCarrito} </Td>
108+
<Td> ${total}</Td>
109+
<Td> ${IVA}% </Td>
110+
<Td> ${aPagar} </Td>
111+
</Tr>
112+
</tbody>
113+
`;
114+
/* carritoTtoal.innerHTML = '';//VERIFICACION DE VALORES */
115+
carritoTtoal.appendChild(tabla);
116+
} else {
117+
const tabla = document.createElement('tr');
118+
tabla.innerHTML = `
101119
<tbody>
102120
<Tr>
103-
<Td> ${itemsCarrito} </Td>
104-
<Td> ${total}</Td>
105-
<Td> ${IVA}% </Td>
106-
<Td> ${aPagar} </Td>
121+
<td colspan="4">SIN ITEMS PARA SUMAR</td>
107122
</Tr>
108123
</tbody>
109124
`;
110-
/* carritoTtoal.innerHTML = '';//VERIFICACION DE VALORES */
111-
carritoTtoal.appendChild(tabla);
112-
} else {
113-
const tabla = document.createElement('tr');
114-
tabla.innerHTML = `
115-
<tbody>
116-
<Tr>
117-
<td colspan="4">SIN ITEMS PARA SUMAR</td>
118-
</Tr>
119-
</tbody>
120-
`;
121125

122-
carritoTtoal.appendChild(tabla);
123-
}
126+
carritoTtoal.appendChild(tabla);
127+
}
128+
124129
}
125130

126131

@@ -136,23 +141,22 @@ function borrarItem(id){
136141
carrito.splice(indice,1);
137142

138143
localStorage.setItem('carrito',JSON.stringify(carrito))
139-
140-
//console.log(`Elemento eliminado con ID: ${id}`);
141144
location.reload();
142-
} else {
143-
//console.log(`No s eencontro el id: ${id}`);
144-
location.reload();
145-
};
146-
145+
146+
} else {
147+
//console.log(`No s eencontro el id: ${id}`);
148+
location.reload();
149+
};
150+
147151
}else {
148152
//console.log(`No exite elemento`);
149153
location.reload();
150154
}
151155
}
152156

153-
/*
154-
* ALERTAS USANDO SWAL
155-
*/
157+
/* **********************************
158+
* ALERTAS USANDO SWEET ALERT
159+
*************************************/
156160

157161
function alertaLogout() {
158162
const swalWithBootstrapButtons = Swal.mixin({
@@ -182,7 +186,6 @@ function borrarItem(id){
182186
window.location.href = '../../index.html';
183187
}
184188
} else if (
185-
/* Read more about handling dismissals below */
186189
result.dismiss === Swal.DismissReason.cancel
187190
) {
188191
swalWithBootstrapButtons.fire({
@@ -193,5 +196,18 @@ function borrarItem(id){
193196
}
194197
});
195198
}
199+
/*
200+
* POPUP PAGO TOTAL
201+
*/
202+
function popupSwalPago(valor){
203+
Swal.fire({
204+
title: `Abonarà ${valor} $`,
205+
width: 600,
206+
padding: "3em",
207+
color: "#716add",
208+
background: "#fff url(/images/trees.png)"
209+
});
210+
}
211+
196212
//FIN DEL SCRIPT
197213

0 commit comments

Comments
 (0)