├── README.md
├── api.json
├── app.js
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | # carrito-directo-js
2 | Carrito con Js 2
3 | 


--------------------------------------------------------------------------------
/api.json:
--------------------------------------------------------------------------------
 1 | [
 2 |     {
 3 |         "precio": 500,
 4 |         "id": 1,
 5 |         "title": "Café",
 6 |         "thumbnailUrl": "https://picsum.photos/id/0/600"
 7 |     },
 8 |     {
 9 |         "precio": 300,
10 |         "id": 2,
11 |         "title": "Pizza",
12 |         "thumbnailUrl": "https://picsum.photos/id/10/600"
13 |     },
14 |     {
15 |         "precio": 100,
16 |         "id": 3,
17 |         "title": "Agua",
18 |         "thumbnailUrl": "https://picsum.photos/id/20/600"
19 |     },
20 |     {
21 |         "precio": 50,
22 |         "id": 4,
23 |         "title": "Sandía",
24 |         "thumbnailUrl": "https://picsum.photos/id/30/600"
25 |     },
26 |     {
27 |         "precio": 10,
28 |         "id": 5,
29 |         "title": "Mango",
30 |         "thumbnailUrl": "https://picsum.photos/id/40/600"
31 |     },
32 |     {
33 |         "precio": 150,
34 |         "id": 6,
35 |         "title": "Chela",
36 |         "thumbnailUrl": "https://picsum.photos/id/50/600"
37 |     }
38 | ]


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
  1 | document.addEventListener("DOMContentLoaded", () => {
  2 |     fetchData()
  3 | })
  4 | 
  5 | const fetchData = async () => {
  6 |     try {
  7 |         const res = await fetch('api.json')
  8 |         const data = await res.json()
  9 |         // console.log(data)
 10 |         pintarProductos(data)
 11 |         detectarBotones(data)
 12 |     } catch (error) {
 13 |         console.log(error)
 14 |     }
 15 | }
 16 | 
 17 | const contendorProductos = document.querySelector('#contenedor-productos')
 18 | const pintarProductos = (data) => {
 19 |     const template = document.querySelector('#template-productos').content
 20 |     const fragment = document.createDocumentFragment()
 21 |     // console.log(template)
 22 |     data.forEach(producto => {
 23 |         // console.log(producto)
 24 |         template.querySelector('img').setAttribute('src', producto.thumbnailUrl)
 25 |         template.querySelector('h5').textContent = producto.title
 26 |         template.querySelector('p span').textContent = producto.precio
 27 |         template.querySelector('button').dataset.id = producto.id
 28 |         const clone = template.cloneNode(true)
 29 |         fragment.appendChild(clone)
 30 |     })
 31 |     contendorProductos.appendChild(fragment)
 32 | }
 33 | 
 34 | let carrito = {}
 35 | 
 36 | const detectarBotones = (data) => {
 37 |     const botones = document.querySelectorAll('.card button')
 38 | 
 39 |     botones.forEach(btn => {
 40 |         btn.addEventListener('click', () => {
 41 |             // console.log(btn.dataset.id)
 42 |             const producto = data.find(item => item.id === parseInt(btn.dataset.id))
 43 |             producto.cantidad = 1
 44 |             if (carrito.hasOwnProperty(producto.id)) {
 45 |                 producto.cantidad = carrito[producto.id].cantidad + 1
 46 |             }
 47 |             carrito[producto.id] = { ...producto }
 48 |             // console.log('carrito', carrito)
 49 |             pintarCarrito()
 50 |         })
 51 |     })
 52 | }
 53 | 
 54 | const items = document.querySelector('#items')
 55 | 
 56 | const pintarCarrito = () => {
 57 | 
 58 |     //pendiente innerHTML
 59 |     items.innerHTML = ''
 60 | 
 61 |     const template = document.querySelector('#template-carrito').content
 62 |     const fragment = document.createDocumentFragment()
 63 | 
 64 |     Object.values(carrito).forEach(producto => {
 65 |         // console.log('producto', producto)
 66 |         template.querySelector('th').textContent = producto.id
 67 |         template.querySelectorAll('td')[0].textContent = producto.title
 68 |         template.querySelectorAll('td')[1].textContent = producto.cantidad
 69 |         template.querySelector('span').textContent = producto.precio * producto.cantidad
 70 |         
 71 |         //botones
 72 |         template.querySelector('.btn-info').dataset.id = producto.id
 73 |         template.querySelector('.btn-danger').dataset.id = producto.id
 74 | 
 75 |         const clone = template.cloneNode(true)
 76 |         fragment.appendChild(clone)
 77 |     })
 78 | 
 79 |     items.appendChild(fragment)
 80 | 
 81 |     pintarFooter()
 82 |     accionBotones()
 83 | 
 84 | }
 85 | 
 86 | const footer = document.querySelector('#footer-carrito')
 87 | const pintarFooter = () => {
 88 | 
 89 |     footer.innerHTML = ''
 90 | 
 91 |     if (Object.keys(carrito).length === 0) {
 92 |         footer.innerHTML = `
 93 |         <th scope="row" colspan="5">Carrito vacío con innerHTML</th>
 94 |         `
 95 |         return
 96 |     }
 97 | 
 98 |     const template = document.querySelector('#template-footer').content
 99 |     const fragment = document.createDocumentFragment()
100 | 
101 |     // sumar cantidad y sumar totales
102 |     const nCantidad = Object.values(carrito).reduce((acc, { cantidad }) => acc + cantidad, 0)
103 |     const nPrecio = Object.values(carrito).reduce((acc, {cantidad, precio}) => acc + cantidad * precio ,0)
104 |     // console.log(nPrecio)
105 | 
106 |     template.querySelectorAll('td')[0].textContent = nCantidad
107 |     template.querySelector('span').textContent = nPrecio
108 | 
109 |     const clone = template.cloneNode(true)
110 |     fragment.appendChild(clone)
111 | 
112 |     footer.appendChild(fragment)
113 | 
114 | 
115 |     const boton = document.querySelector('#vaciar-carrito')
116 |     boton.addEventListener('click', () => {
117 |         carrito = {}
118 |         pintarCarrito()
119 |     })
120 | 
121 | }
122 | 
123 | const accionBotones = () => {
124 |     const botonesAgregar = document.querySelectorAll('#items .btn-info')
125 |     const botonesEliminar = document.querySelectorAll('#items .btn-danger')
126 | 
127 |     // console.log(botonesAgregar)
128 | 
129 |     botonesAgregar.forEach(btn => {
130 |         btn.addEventListener('click', () => {
131 |             // console.log(btn.dataset.id)
132 |             const producto = carrito[btn.dataset.id]
133 |             producto.cantidad ++
134 |             carrito[btn.dataset.id] = { ...producto }
135 |             pintarCarrito()
136 |         })
137 |     })
138 | 
139 |     botonesEliminar.forEach(btn => {
140 |         btn.addEventListener('click', () => {
141 |             // console.log('eliminando...')
142 |             const producto = carrito[btn.dataset.id]
143 |             producto.cantidad--
144 |             if (producto.cantidad === 0) {
145 |                 delete carrito[btn.dataset.id]
146 |             } else {
147 |                 carrito[btn.dataset.id] = { ...producto }
148 |             }
149 |             pintarCarrito()
150 |         })
151 |     })
152 | }
153 | 
154 | // let carritoEjemplo = {}
155 | // carritoEjemplo = {
156 | //     1: {id: 1, titulo: 'cafe', precio: 500, cantidad: 3},
157 | //     2: {id: 3, titulo: 'pizza', precio: 100, cantidad: 2},
158 | // }
159 | 
160 | // console.log(carritoEjemplo[1])
161 | 
162 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Carrito de compras</title>
 7 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
 8 | 
 9 | </head>
10 | <body>
11 |     <div class="container">
12 |         <h1 class="text-center">Mi Carrito</h1>
13 |         <hr>
14 | 
15 |         <div class="my-5">
16 |             <h4>Carrito de compras nivel principiante</h4>
17 |             <table class="table">
18 |               <thead>
19 |                 <tr>
20 |                   <th scope="col">#</th>
21 |                   <th scope="col">Item</th>
22 |                   <th scope="col">Cantidad</th>
23 |                   <th scope="col">Acción</th>
24 |                   <th scope="col">Total</th>
25 |                 </tr>
26 |               </thead>
27 |               <tbody id="items"></tbody>
28 |               <tfoot>
29 |                 <tr id="footer-carrito">
30 |                     <th scope="row" colspan="5">Carrito vacío - comience a comprar!</th>
31 |                 </tr>
32 |               </tfoot>
33 |             </table>
34 |           </div>
35 | 
36 |         <div class="row" id="contenedor-productos"></div>
37 | 
38 | 
39 |     </div>
40 | 
41 |     <template id="template-footer">
42 |         <th scope="row" colspan="2">Total productos</th>
43 |         <td>10</td>
44 |         <td>
45 |             <button class="btn btn-danger btn-sm" id="vaciar-carrito">
46 |                 vaciar todo
47 |             </button>
48 |         </td>
49 |         <td class="font-weight-bold">$ <span>5000</span></td>
50 |     </template>
51 |     
52 |     <template id="template-carrito">
53 |       <tr>
54 |         <th scope="row">id</th>
55 |         <td>Café</td>
56 |         <td>1</td>
57 |         <td>
58 |             <button class="btn btn-info btn-sm">
59 |                 +
60 |             </button>
61 |             <button class="btn btn-danger btn-sm">
62 |                 -
63 |             </button>
64 |         </td>
65 |         <td>$ <span>500</span></td>
66 |       </tr>
67 |     </template>
68 | 
69 |     <template id="template-productos">
70 |         <div class="col-12 col-md-4 mb-3">
71 |             <div class="card">
72 |                 <img src="" class="card-img-top" alt="...">
73 |                 <div class="card-body">
74 |                   <h5 class="card-title">
75 |                       Café
76 |                   </h5>
77 |                   <p class="card-text">$ <span>5000</span></p>
78 |                   <button class="btn btn-dark">
79 |                       Comprar
80 |                   </button>
81 |                 </div>
82 |               </div>
83 |         </div>
84 |     </template>
85 | 
86 |     <script src="app.js"></script>
87 | </body>
88 | </html>
89 | 


--------------------------------------------------------------------------------