curso-mongo-db/index.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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Tienda virtual</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <header style="margin-top: -21px">
  <h1>
    <div class="titulo-encabezado">
     Tienda Virtual Curso Javascript (Node JS Api REST)
    </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">
        <a href="carritodecompra.html"> <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
        </a>
      </div>

    </div>
  </header>


  <div class="contenedor"></div>

  <script>
    // Función para obtener datos de la API ficticia
    async function obtenerProductos() {
      try {
        //const response = await fetch('https://conexionbdmongo.mapatagbusqueda.repl.co/products');
        const response = await fetch('https://conexionbdmongo.mapatagbusqueda.repl.co/productsFromGraphQL');
	      console.log(response)
        if (!response.ok) {
          throw new Error('Error en la solicitud');
        }
        const data = await response.json();
        return data;
      } catch (error) {
        console.error('Error:', error);
        return [];
      }
    }

    document.addEventListener("DOMContentLoaded", async () => {
      const contenedor = document.querySelector(".contenedor");
      const products = await obtenerProductos();


      let productos = "";
      console.log(products)
      //products.test.forEach((product) => {  // para endpoint /products con json en data.js
       products.products.forEach(( product ) => {	       // para endpoint /productsFromGraphQL con json en mongo DB a través de GraphQL
	localStorage.setItem(`product_${product._id}`, JSON.stringify(product));
        productos += `
          <div class="card" style="width: 15rem; text-align: center">
            <img src="${product.imagen}" style="width: 10em" class="card-img-top" alt="...">
            <div class="card-body">
              <h4 class="card-text">${product.titulo}</h5>
              <p class="card-text">${product.precio}</p>
              <a href="detalleproducto.html?_id=${product._id}" class="btn btn-primary">Ver Detalle</a>
            </div>
          </div>
        `;
      });

      contenedor.innerHTML = productos; // Agrega el contenido al elemento con la clase "contenedor"
    });
  </script>
</body>
</html>