curso-mongo-db/carritodecompra.html at gh-pages · AlejoZapataIF/curso-mongo-db · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!-- Página del carrito de compras -->
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Tienda virtual</title>
  <link href="styleCarrito.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <header style="margin-top: -21px">
    <h1>
      <div class="titulo-encabezado">
        <img src="logo-pag.png" alt="Logo" style="width: 180px; height: auto;">
      </div>
    </h1>
    <div class="Encabezado">
      <div class="contenido-central">
        <nav>
          <ul>
            <li><a href="index.html">Inicio</a></li>
            <li><a href="#">Registro</a></li>
            <li><a href="#">Log in</a></li>
          </ul>
        </nav>
      </div>
      <div class="icono-carrito"></div>
    </div>
  </header>

  <h2>Carrito de Compras</h2>
  <ul id="carritoLista"></ul>

  <p id="seccion-boton">
    <button id="vaciar-carrito">Vaciar Carrito</button>
  </p>

  <script>
    document.addEventListener("DOMContentLoaded", () => {
      // Obtén el carrito desde localStorage
      const carrito = JSON.parse(localStorage.getItem("carrito")) || [];

      // Obtén el elemento de la lista del carrito
      const carritoLista = document.getElementById("carritoLista");

      function mostrarCarrito() {
        carritoLista.innerHTML = "";
        if (carrito && carrito.length > 0) {
          carrito.forEach((product) => {
            const listItem = document.createElement("li");

            // Crear elementos para la imagen y el nombre del producto
            const productImage = document.createElement("img");
            productImage.src = product.imagen;
            productImage.alt = product.titulo;
            productImage.style.width = "100px";  // Ajusta el tamaño según sea necesario

            const productName = document.createElement("span");
            productName.textContent = product.titulo;

            const productPrice = document.createElement("span");
            productPrice.textContent = product.precio;

            // Crear botones de incremento y decremento
            const incrementButton = document.createElement("button");
            incrementButton.textContent = "+";
            incrementButton.addEventListener("click", () => incrementarCantidad(product));

            const decrementButton = document.createElement("button");
            decrementButton.textContent = "-";
            decrementButton.addEventListener("click", () => decrementarCantidad(product));

            const quantityElement = document.createElement("span");
            // Verificar si la cantidad está definida, si no, establecerla en 1
            quantityElement.textContent = `Cantidad: ${product.quantity || 1}`;

            // Agregar elementos al listItem
            listItem.appendChild(productImage);
            listItem.appendChild(productName);
            listItem.appendChild(productPrice);

            listItem.appendChild(decrementButton);
            listItem.appendChild(quantityElement);
            listItem.appendChild(incrementButton);

            // Agregar listItem a la lista del carrito
            carritoLista.appendChild(listItem);
          });
        } else {
          carritoLista.innerHTML = "<p>El carrito está vacío.</p>";
        }
      }

      // Función para incrementar la cantidad del producto
      function incrementarCantidad(product) {
        // Verificar si la propiedad 'quantity' existe y es un número
        if (typeof product.quantity === 'number') {
          product.quantity += 1;
        } else {
          // Si no existe o no es un número, establecerla en 1
          product.quantity = 1;
        }

        // Llamar a la función para actualizar el carrito
        actualizarCarrito();
      }

      // Función para decrementar la cantidad del producto
      function decrementarCantidad(product) {
        if (product.quantity > 1) {
          product.quantity -= 1;
        } else {
          // Si la cantidad es 1 o menos, eliminar el producto del carrito
          carrito.splice(carrito.indexOf(product), 1);
        }
        actualizarCarrito();
      }

      // Actualiza el carrito en localStorage y vuelve a mostrarlo
      function actualizarCarrito() {
        localStorage.setItem("carrito", JSON.stringify(carrito));
        mostrarCarrito();
      }

      // Agrega un manejador de eventos al botón "Vaciar Carrito"
      const vaciarCarritoButton = document.getElementById("vaciar-carrito");
      vaciarCarritoButton.addEventListener("click", () => {
        // Llama a una función para vaciar el carrito
        vaciarCarrito();
      });

      // Función para vaciar el carrito
      function vaciarCarrito() {
        // Elimina los ítems del carrito desde el localStorage
        localStorage.removeItem("carrito");

        // Limpia la lista en la página
        carritoLista.innerHTML = "<p>El carrito está vacío.</p>";
      }

      mostrarCarrito(); // Asegurarse de que se muestre el carrito al cargar la página
    });
  </script>
</body>
</html>