public mejoras cart

axel-emk · Oct 30, 2024 · 24037d1 · 24037d1
1 parent b31984c
commit 24037d1
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 119 deletions.
diff --git a/docs/css/cart.css b/docs/css/cart.css
@@ -1,8 +1,8 @@
 /* Estilos generales */
 .carrito-page {
   display: flex;
-  justify-content: center; /* Centra las columnas horizontalmente */
-  align-items: flex-start; /* Alinea las columnas en la parte superior */
+  justify-content: center;
+  align-items: flex-start;
   padding: 20px;
   margin-top: 150px;
   margin-bottom: 50px;
@@ -11,14 +11,14 @@
 
 .carrito-izquierda, .carrito-derecha {
   width: 100%;
-  max-width: 700px; /* Establecer un máximo para columnas */
+  max-width: 700px;
   background-color: var(--tercia);
   padding: 20px;
   border-radius: 10px;
   display: flex;
   flex-direction: column;
   gap: 15px;
-  margin: 0 10px; /* Añadir margen a los lados para separarlas un poco */
+  margin: 0 10px;
 }
 
 .producto-carrito img {
@@ -49,17 +49,14 @@
   flex-wrap: wrap;
 }
 
-.carrito-item-cantidad label {
-  margin-right: 10px;
-}
-
-.cantidad{
+.cantidad {
   width: 40px;
 }
 
-.title-carrito{
-  font-size: 20px !important;
+.title-carrito {
+  font-size: 20px;
 }
+
 .eliminar-item {
   background-color: var(--gold);
   color: white;
@@ -79,7 +76,7 @@
   display: flex;
   flex-direction: column;
   gap: 15px;
-  align-items: center; /* Centrar los elementos verticalmente */
+  align-items: center;
 }
 
 .producto-carrito {
@@ -117,23 +114,7 @@
       max-width: 150px;
   }
 
-  .producto-carrito .info {
-      max-width: 100%;
-      text-align: center;
-  }
-
   .carrito-item-cantidad {
       justify-content: center;
   }
-
-
-
-  .resumen-detalle p {
-      flex-direction: column;
-      align-items: flex-start;
-  }
-
-  .acciones-producto {
-      justify-content: center;
-  }
 }
diff --git a/docs/css/general.css b/docs/css/general.css
@@ -122,8 +122,8 @@ a:hover {
 
 .notification {
   background-color: var(--gold);
-  color: white;
-  padding: 10px 20px;
+  color: var(--luz);
+  padding: 20px 20px;
   margin-top: 10px;
   border-radius: 5px;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);

diff --git a/docs/html/carrito.html b/docs/html/carrito.html
@@ -94,40 +94,33 @@
 <div id="notification-container"></div>
 
 
-    <!-- Contenido principal del carrito -->
-    <main class="carrito-page">
-        <!-- Bloque izquierdo: Detalles del carrito -->
-        <div class="carrito-izquierda">
-            <h2 id="carrito-header">Tu Carro (0 productos)</h2>
-            <div id="carrito-items"></div>
+<main class="carrito-page">
+    <!-- Bloque izquierdo: Detalles del carrito -->
+    <div class="carrito-izquierda">
+        <h2 id="carrito-header">Tu Carro (0 productos)</h2>
+        <div id="carrito-items"></div>
+    </div>
+
+    <!-- Bloque derecho: Resumen de compra -->
+    <div class="carrito-derecha">
+        <h2>Resumen de compra</h2>
+        <div class="resumen-detalle">
+            <p>Costo de tus productos: <span id="subtotal">$0</span></p>
+            <p>Total con envió a domicilio: <span id="total-con-envio">$0</span></p>
+            <p>Total con tarjeta: <span id="total-tarjeta">$0</span></p>
         </div>
-
-        <!-- Bloque derecho: Resumen de compra -->
-        <div class="carrito-derecha">
-            <h2>Resumen de compra</h2>
-            <div class="resumen-detalle">
-                <p>Costo de tus productos: <span id="subtotal">$0</span></p>
-                <p>Total con envió a domicilio: <span id="total-con-envio">$0</span></p>
-                <p>Total con tarjeta: <span id="total-tarjeta">$0</span></p>
-
-
-
-
-
-            </div>
-            <div class="seguridad">
-                <p>Pagar es 100% seguro</p>
-                <p>El costo de despacho se calculará en el siguiente paso</p>
-            </div>
-            <div class="medios-pago">
-                <h3>Medios de pago disponibles:</h3>
-                <img src="../img/redcompra-global.svg" alt="Medios de pago">
-                <img src="../img/redcompra-onepay.svg" alt="Medios de pago">
-
-            </div>
+        <div class="seguridad">
+            <p>Pagar es 100% seguro</p>
+            <p>El costo de despacho se calculará en el siguiente paso</p>
         </div>
-    </main>
-
+        <div class="medios-pago">
+            <h3>Medios de pago disponibles:</h3>
+            <img src="../img/redcompra-global.svg" alt="Medios de pago">
+            <img src="../img/redcompra-onepay.svg" alt="Medios de pago">
+        </div>
+    </div>
+</main>
+
 
           <!-- Newsleter -->
     <!-- Formulario para suscripción al newsletter -->

diff --git a/docs/js/carrito.js b/docs/js/carrito.js
@@ -3,7 +3,7 @@ function agregarAlCarrito(producto) {
     let carrito = JSON.parse(localStorage.getItem('carrito')) || [];
     carrito.push(producto);
     localStorage.setItem('carrito', JSON.stringify(carrito));
-    alert('Producto agregado al carrito');
+    showNotification('Producto agregado al carrito');
 }
 
 // Función para calcular y mostrar el total del carrito
@@ -14,69 +14,49 @@ function calcularTotales(carrito) {
     const costoEnvio = 9990;  // Costo fijo del envío
 
     carrito.forEach(producto => {
-        const cantidad = parseInt(producto.cantidad, 10) || 1;  // Definir cantidad en 1 si es inválido
-        const precio = parseFloat(producto.precioFinal.replace('$', '').replace(',', '')) || 0;  // Convertir precio a número
+        const cantidad = parseInt(producto.cantidad, 10) || 1;
+        const precio = parseFloat(producto.precioFinal.replace('$', '').replace(',', '')) || 0;
 
-        subtotal += precio * cantidad;  // Calcular el subtotal
+        subtotal += precio * cantidad;
     });
 
-    totalConEnvio = subtotal + costoEnvio;  // Sumar el costo de envío fijo
-    totalTarjeta = totalConEnvio * 0.95;  // Aplicar el 5% de descuento (es decir, restar el 5%)
+    totalConEnvio = subtotal + costoEnvio;
+    totalTarjeta = totalConEnvio * 0.95;
 
     // Actualizar los valores en el resumen de compra
-    if (document.getElementById('subtotal')) {
-        document.getElementById('subtotal').textContent = `$${subtotal.toLocaleString()}`;
-    }
-    if (document.getElementById('total-con-envio')) {
-        document.getElementById('total-con-envio').textContent = `$${totalConEnvio.toLocaleString()}`;
-    }
-    if (document.getElementById('total-tarjeta')) {
-        document.getElementById('total-tarjeta').textContent = `$${totalTarjeta.toLocaleString()}`;
-    }
+    document.getElementById('subtotal').textContent = `$${subtotal.toLocaleString()}`;
+    document.getElementById('total-con-envio').textContent = `$${totalConEnvio.toLocaleString()}`;
+    document.getElementById('total-tarjeta').textContent = `$${totalTarjeta.toLocaleString()}`;
 }
 
-
-
-
 // Función para renderizar los productos en carrito.html
 function renderCarrito() {
     const carrito = JSON.parse(localStorage.getItem('carrito')) || [];
     const carritoContainer = document.getElementById('carrito-items');
     const carritoHeader = document.getElementById('carrito-header');
 
-    if (!carritoContainer || !carritoHeader) {
-        console.error('Elementos del carrito no encontrados en el DOM.');
-        return;
-    }
-
-    carritoContainer.innerHTML = '';  // Limpiar el contenido anterior
-
-    // Actualizar la cantidad de productos en el carrito
+    carritoContainer.innerHTML = '';
     carritoHeader.textContent = `Tu Carro (${carrito.length} producto${carrito.length !== 1 ? 's' : ''})`;
 
     carrito.forEach((producto, index) => {
         const item = document.createElement('div');
         item.classList.add('producto-carrito');
-
         item.innerHTML = `
-        <img src="${producto.imagen[1]}" alt="${producto.titulo}" class="imagen-carrito">
+            <img src="${producto.imagen[1]}" alt="${producto.titulo}" class="imagen-carrito">
             <h2 class="title-carrito">${producto.titulo}</h2>
-            
             <div class="carrito-item-cantidad">
               <label for="cantidad">Cantidad:</label>
               <input type="number" class="cantidad" name="cantidad" value="${producto.cantidad || 1}" min="1" data-index="${index}">
             </div>
-      
-            <p>Precio Final: ${producto.precioFinal.toLocaleString()}</p>
-            
+            <p>Precio Final: $${Number(producto.precioFinal).toLocaleString('es-CL')}</p>
+
             <div class="acciones-producto">
               <button class="eliminar-item" data-id="${producto.id}">Eliminar</button>
             </div>
         `;
         carritoContainer.appendChild(item);
     });
 
-    // Asignar eventos a los inputs de cantidad y botones de eliminar
     document.querySelectorAll('.cantidad').forEach(input => {
         input.addEventListener('change', (e) => {
             const index = e.target.dataset.index;
@@ -90,7 +70,6 @@ function renderCarrito() {
         });
     });
 
-    // Calcular totales después de renderizar
     calcularTotales(carrito);
 }
 
@@ -100,20 +79,16 @@ function actualizarCantidad(index, nuevaCantidad) {
     if (carrito[index]) {
         carrito[index].cantidad = parseInt(nuevaCantidad, 10);
         localStorage.setItem('carrito', JSON.stringify(carrito));
-        renderCarrito();  // Volver a renderizar el carrito con los cambios
-    } else {
-        console.error("Producto no encontrado en el carrito.");
+        renderCarrito();
     }
 }
 
 // Función para eliminar productos del carrito
 function eliminarProducto(id) {
     let carrito = JSON.parse(localStorage.getItem('carrito')) || [];
-    carrito = carrito.filter(producto => producto.id !== id);  // Filtrar el producto eliminado
-    localStorage.setItem('carrito', JSON.stringify(carrito));  // Guardar el carrito actualizado
-    renderCarrito();  // Volver a renderizar el carrito
+    carrito = carrito.filter(producto => producto.id !== id);
+    localStorage.setItem('carrito', JSON.stringify(carrito));
+    renderCarrito();
 }
 
-// Cargar el carrito cuando el DOM esté listo
 document.addEventListener("DOMContentLoaded", renderCarrito);
-
diff --git a/docs/js/favoritos.js b/docs/js/favoritos.js
@@ -60,13 +60,6 @@ document.addEventListener('DOMContentLoaded', function () {
         mostrarFavoritos();  // Volver a renderizar los favoritos
     }
 
-    // Función para agregar un producto al carrito
-    function agregarAlCarrito(producto) {
-        let carrito = JSON.parse(localStorage.getItem('carrito')) || [];
-        carrito.push(producto);
-        localStorage.setItem('carrito', JSON.stringify(carrito));
-        alert('Producto agregado al carrito');
-    }
 
     mostrarFavoritos();
 });
diff --git a/docs/js/productos.js b/docs/js/productos.js
@@ -23,14 +23,7 @@ function actualizarContadorCarrito() {
 }
 
 
-// Función para agregar producto al carrito
-function agregarAlCarrito(producto) {
-    let carrito = JSON.parse(localStorage.getItem('carrito')) || [];
-    carrito.push(producto);
-    localStorage.setItem('carrito', JSON.stringify(carrito));
-    actualizarContadorCarrito();
-    alert("Producto agregado al carrito");
-}
+
 
 // Función para renderizar el producto en el HTML
 function renderProducto(producto) {