├── README.md ├── api.json ├── index.html └── app.js /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 | ] -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Carrito de compras 7 | 8 | 9 | 10 | 11 |
12 |

Mi Carrito

13 |
14 | 15 |
16 |

Carrito de compras nivel principiante

17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
#ItemCantidadAcciónTotal
34 |
35 | 36 |
37 | 38 | 39 |
40 | 41 | 51 | 52 | 68 | 69 | 85 | 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /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 | Carrito vacío con innerHTML 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 | --------------------------------------------------------------------------------