cursojs/carritodecompra.html at gh-pages · AlejoZapataIF/cursojs · 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
<!-- Página del carrito de compras -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>

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

  <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");

      if (carrito && carrito.length > 0) {
        // Recorre los productos en el carrito y muestra cada uno en la lista
        carrito.forEach((product) => {
          const listItem = document.createElement("li");
          listItem.textContent = product.title;
          carritoLista.appendChild(listItem);
        });
      } else {
        // Si el carrito está vacío, muestra un mensaje
        carritoLista.innerHTML = "<p>El carrito está vacío.</p>";
      }
    });
  </script>
</body>
</html>