10 |
10 |
11 |
--------------------------------------------------------------------------------
/custom.js:
--------------------------------------------------------------------------------
1 | //variables
2 | let allContainerCart = document.querySelector('.products');
3 | let containerBuyCart = document.querySelector('.card-items');
4 | let priceTotal = document.querySelector('.price-total')
5 | let amountProduct = document.querySelector('.count-product');
6 |
7 |
8 | let buyThings = [];
9 | let totalCard = 0;
10 | let countProduct = 0;
11 |
12 | //functions
13 | loadEventListenrs();
14 | function loadEventListenrs(){
15 | allContainerCart.addEventListener('click', addProduct);
16 |
17 | containerBuyCart.addEventListener('click', deleteProduct);
18 | }
19 |
20 | function addProduct(e){
21 | e.preventDefault();
22 | if (e.target.classList.contains('btn-add-cart')) {
23 | const selectProduct = e.target.parentElement;
24 | readTheContent(selectProduct);
25 | }
26 | }
27 |
28 | function deleteProduct(e) {
29 | if (e.target.classList.contains('delete-product')) {
30 | const deleteId = e.target.getAttribute('data-id');
31 |
32 | buyThings.forEach(value => {
33 | if (value.id == deleteId) {
34 | let priceReduce = parseFloat(value.price) * parseFloat(value.amount);
35 | totalCard = totalCard - priceReduce;
36 | totalCard = totalCard.toFixed(2);
37 | }
38 | });
39 | buyThings = buyThings.filter(product => product.id !== deleteId);
40 |
41 | countProduct--;
42 | }
43 | //FIX: El contador se quedaba con "1" aunque ubiera 0 productos
44 | if (buyThings.length === 0) {
45 | priceTotal.innerHTML = 0;
46 | amountProduct.innerHTML = 0;
47 | }
48 | loadHtml();
49 | }
50 |
51 | function readTheContent(product){
52 | const infoProduct = {
53 | image: product.querySelector('div img').src,
54 | title: product.querySelector('.title').textContent,
55 | price: product.querySelector('div p span').textContent,
56 | id: product.querySelector('a').getAttribute('data-id'),
57 | amount: 1
58 | }
59 |
60 | totalCard = parseFloat(totalCard) + parseFloat(infoProduct.price);
61 | totalCard = totalCard.toFixed(2);
62 |
63 | const exist = buyThings.some(product => product.id === infoProduct.id);
64 | if (exist) {
65 | const pro = buyThings.map(product => {
66 | if (product.id === infoProduct.id) {
67 | product.amount++;
68 | return product;
69 | } else {
70 | return product
71 | }
72 | });
73 | buyThings = [...pro];
74 | } else {
75 | buyThings = [...buyThings, infoProduct]
76 | countProduct++;
77 | }
78 | loadHtml();
79 | //console.log(infoProduct);
80 | }
81 |
82 | function loadHtml(){
83 | clearHtml();
84 | buyThings.forEach(product => {
85 | const {image, title, price, amount, id} = product;
86 | const row = document.createElement('div');
87 | row.classList.add('item');
88 | row.innerHTML = `
89 | 
16 | 
18 | 0
19 |X
22 |
61 | 35$
62 |Newskill Suiko Ivory Teclado Mecánico Gaming Full RGB
64 | add to cart 65 |
69 | 15.50$
70 |Aukey KM-G16 Teclado Mecánico Gaming Retroiluminado
72 | add to cart 73 |
77 | 20.20$
78 |Razer Huntsman Elite Teclado Mecánico Gaming RGB
80 | add to cart 81 |
101 | 23.99$
102 |Genesis Thor 300 RGB Teclado Mecánico Gaming RGB Switch Rojo
104 | add to cart 105 |
109 | 50$
110 |Mars Gaming MKXTKL Teclado Mecánico Gaming RGB
112 | add to cart 113 |
117 | 16$
118 |Trust GXT 881 Odyss Teclado Gaming Semi-Mecánico RGB
120 | add to cart 121 |
125 | 17.50$
126 |Krom Krusher Teclado Gaming Híbrido RGB + Ratón
128 | add to cart 129 |
133 | 45$
134 |Corsair K55 RGB PRO XT Teclado Gaming Retroiluminado Negro
136 | add to cart 137 |