-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
139 lines (126 loc) · 6.41 KB
/
script.js
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
const cartItems = document.querySelector('.cart__items');
// Criando a função que vai definir o que vai conter e a classe da image
function createProductImageElement(imageSource) {
const img = document.createElement('img');
img.className = 'item__image';
img.src = imageSource;
return img;
}
// Criando a função que vai definir o que vai conter e a classe do sku e name
function createCustomElement(element, className, innerText) {
const e = document.createElement(element);
e.className = className;
e.innerText = innerText;
return e;
}
// Função que cria a seção que vão conter todos os produtos
function createProductItemElement({ sku, name, image }) {
const section = document.createElement('section');
section.className = 'item';
section.appendChild(createCustomElement('span', 'item__sku', sku));
section.appendChild(createCustomElement('span', 'item__title', name));
section.appendChild(createProductImageElement(image));
section.appendChild(createCustomElement('button', 'item__add', 'Adicionar ao carrinho!'));
return section;
}
// Seleciona o ID do item
function getSkuFromProductItem(item) {
return item.querySelector('span.item__sku').innerText;
}
// REQUISITO 5 - parte 1
// Pegando os itens do carrinho e transformando em array.
// function getItems() {
// const cartItem = document.querySelectorAll('.cart__item');
// // console.log(cartItem);
// // const arrayCartItem = Array.from(cartItem);
// // console.log(arrayCartItem);
// console.log(cartItem);
// return cartItem;
// }
// REQUISITO 5 - PARTE 1
// Tive ajuda do colega Vinícius de Paula.
// RESOLUÇÃO: Percorri com o forEach cada cart__item está no carrinho, acessei só o valor que tem no PRICE, mas a partir do $ e somando ao total
function pegarPreco() {
let total = 0;
const cartItemsAll = document.querySelectorAll('.cart__item');
cartItemsAll.forEach((element) => {
// element.innerText vai mostrar o SKU, o name e o PRICE. O PRICE SERÁ "PRICE: $2396.06". Com o .split('PRICE: $')[1], vai pegar a string "PRICE: $2396.06" e vai dividir em substrings a partir dos dois pontos, por isso que tem que ser [1], porque vai começar do $2396.06, o elemento[0] é um espaço vazio com $, o segundo será 239.06.
const precoItens = element.innerText.split('PRICE: $')[1];
// essa parte é a mesma coisa que total = total + precoItens. O parsefloat vai deixar tudo em decimal.
total += parseFloat(precoItens);
});
return total;
}
// REQUISITO 5 - PARTE 2
// RESOLUÇÃO: Estou adicionando os valores do lado do Total que está no carriho.
function somarPrecos() {
const totalPrice = document.querySelector('.total-price');
totalPrice.innerText = pegarPreco();
}
// REQUISITO 3: Função que, ao clicar no li, apaga o li
// RESOLUÇÃO: vai remover o conteúdo de todo ol (cart__items).
function cartItemClickListener(event) {
cartItems.removeChild(event.target);
// REQUISITO 4 - Quando eu clicar no cart__item, que ele apague do localStorage.
saveCartItems(cartItems.innerHTML);
// REQUISITO 5 - Quando eu apagar o li, que apague seu preço também.
somarPrecos();
}
// Função que cria os li
function createCartItemElement({ sku, name, salePrice }) {
const li = document.createElement('li');
li.className = 'cart__item';
li.innerText = `SKU: ${sku} | NAME: ${name} | PRICE: $${salePrice}`;
li.addEventListener('click', cartItemClickListener);
return li;
}
// REQUISITO 2 - PARTE 1
// RESOLUÇÃO: Eu tive ajuda de Sheila Arelo. Criei a função que vai ser responsável por adicionar produto no carrinho. Vai pegando o conteúdo do primeiro elemento do pai e vai criando um objeto com o id, title e price. Essa informação vai ser guardada em um elemento li que será filho do ol. Irá fazer isso com cada firstchild criado.
const carrinho = async (event) => {
const getSku = event.target.parentNode; // getSku quer retornar o conteúdo do primeiro filho do elemento pai do item__sku.
const data = await fetchItem(getSkuFromProductItem(getSku));
const objeto = { sku: data.id, name: data.title, salePrice: data.price };
cartItems.appendChild(createCartItemElement(objeto));
// REQUISITO 4 - Quando eu clicar no cart__item, que ele salve do localStorage.
saveCartItems(cartItems.innerHTML);
// REQUISITO 5 - Que ao adicionar o produto no carrinho, que esse preço seja adicionado no total.
somarPrecos();
};
// REQUISITO 6 - PARTE 1
// RESOLUÇÃO: Acessei o ol que armazena todas as li, através do cartItem. Percorri cada elemento e fui removendo.
const apagarTudo = () => {
const cartItem = document.querySelectorAll('.cart__item');
cartItem.forEach((element) => {
element.remove();
});
// REQUISITO 5 - quando eu remover o li, que seja removido também o preço.
somarPrecos();
};
// REQUISITO 4 - A função getSavedCartItems deve recuperar os itens do carrinho de compras do localStorage quando carregamos a página.
// RESOLUÇÃO: Ao clicar em cada filho do elemento cartItems, que estão no carrinho e que também foram salvos no localstorage, vai ativar a função cartItemClickListener.
const recuperarItem = () => {
cartItems.innerHTML = getSavedCartItems();
console.log(cartItems); // vão aparecer os itens salvos no local storage
cartItems.childNodes.forEach((li) => li.addEventListener('click', cartItemClickListener));
};
// REQUISITO 1 - PARTE 2
// RESOLUÇÃO: O conteúdo do results vai ser percorrido (que é um array de objetos), vai pegando o id, title e thumbnail de cada objeto. O createProductItemElement vai criar a section que vai armazenar os spans que vão conter todas essas informações.
window.onload = async () => {
await fetchProducts('computador')
.then((data) => {
data.results.forEach((item) => {
const objeto = { sku: item.id, name: item.title, image: item.thumbnail };
const pegarItem = document.querySelector('.items');
pegarItem.appendChild(createProductItemElement(objeto));
});
});
const btnAdd = document.querySelectorAll('.item__add');
btnAdd.forEach((button) => button.addEventListener('click', carrinho));
// REQUISITO 6 - PARTE 2
// RESOLUÇÃO: Acessei o botão 'Esvaziar carrinho' e adicionei um eventListener para ativar a função apagaTudo ao clicar nele.
const empty = document.querySelector('.empty-cart');
empty.addEventListener('click', apagarTudo);
document.querySelector('.loading').remove(); // Requisito 7 parte 2 - remover o "...carregando". O requisito 7 parte 1 está no index.html.
// REQUISITO 4
recuperarItem();
};