tech-store/scripts.js at main · tuliovitor/tech-store · 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
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
let textoPesquisa = "";
let categoriaAtual = "all";
let produtos = [
  {
    id: 1,
    nome: "iPhone 15 Pro",
    categoria: "smartphones",
    preco: 7999,
    precoOriginal: 8999,
    desconto: 11,
    imagem:
      "https://images.unsplash.com/photo-1695048133142-1a20484d2569?w=400",
    descricao: "Smartphone Apple com câmera avançada",
  },
  {
    id: 2,
    nome: "MacBook Air M2",
    categoria: "laptops",
    preco: 8999,
    precoOriginal: 10999,
    desconto: 18,
    imagem:
      "https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=400",
    descricao: "Notebook Apple ultrafino e potente",
  },
  {
    id: 3,
    nome: "AirPods Pro",
    categoria: "headphones",
    preco: 1899,
    precoOriginal: 2299,
    desconto: 17,
    imagem:
      "https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?w=400",
    descricao: "Fones sem fio com cancelamento de ruído",
  },
  {
    id: 4,
    nome: "Samsung Galaxy S24",
    categoria: "smartphones",
    preco: 5499,
    precoOriginal: 6299,
    desconto: 13,
    imagem:
      "https://images.unsplash.com/photo-1610945415295-d9bbf067e59c?w=400",
    descricao: "Smartphone Samsung com tela AMOLED",
  },
  {
    id: 5,
    nome: "Apple Watch Series 9",
    categoria: "smartwatch",
    preco: 3299,
    precoOriginal: 3799,
    desconto: 13,
    imagem:
      "https://images.unsplash.com/photo-1434494878577-86c23bcb06b9?w=400",
    descricao: "Relógio inteligente com monitoramento",
  },
  {
    id: 6,
    nome: "Teclado Mecânico",
    categoria: "accessories",
    preco: 499,
    precoOriginal: null,
    desconto: null,
    imagem:
      "https://images.unsplash.com/photo-1587829741301-dc798b83add3?w=400",
    descricao: "Teclado mecânico RGB para gamers",
  },
  {
    id: 7,
    nome: "Sony WH-1000XM5",
    categoria: "headphones",
    preco: 2499,
    precoOriginal: 2999,
    desconto: 17,
    imagem:
      "https://images.unsplash.com/photo-1618366712010-f4ae9c647dcb?w=400",
    descricao: "Fone com cancelamento de ruído",
  },
  {
    id: 8,
    nome: "Dell XPS 13",
    categoria: "laptops",
    preco: 7999,
    precoOriginal: null,
    desconto: null,
    imagem:
      "https://images.unsplash.com/photo-1593642702821-c8da6771f0c6?w=400",
    descricao: "Notebook Windows premium",
  },
];

let containerProdutos = document.querySelector(".products-container");
let input = document.querySelector(".search-input");
let todosBotoes = document.querySelectorAll(".category-btn");

function mostrarProdutos() {
  let htmlProdutos = "";
  let produtosFiltrados = produtos.filter(prd => {

    let passouCategoria = (categoriaAtual === "all" || prd.categoria === categoriaAtual);
    let passouPesquisa = prd.nome.toLowerCase().includes(textoPesquisa);

    return passouPesquisa && passouCategoria;
  });

  produtosFiltrados.forEach((prd) => {
    htmlProdutos = htmlProdutos + `<div class="product-card">
          <img class="product-img" src="${prd.imagem}" alt="${prd.nome}">
          <div class="product-info">
            <h3 class="product-name">${prd.nome}</h3>
            <p class="product-description">${prd.descricao}</p>
            <p class="product-price">R$ ${prd.preco}</p>
            <button class="product-button">Ver Detalhes</button>
          </div>
        </div>`;
  });

  containerProdutos.innerHTML = htmlProdutos;
}

function pesquisar() {
  textoPesquisa = input.value;

  mostrarProdutos();
}

function trocarCategoria(categoria) {
  categoriaAtual = categoria;

  todosBotoes.forEach(botao => {
    botao.classList.remove("active");

    if (botao.getAttribute("data-category") === categoria) {
      botao.classList.add("active");
    }
  });

  mostrarProdutos(); // Chama a função para mostrar os produtos com base na nova categoria
}

window.addEventListener("DOMContentLoaded", () => {
  mostrarProdutos();
  input.addEventListener('input', pesquisar);

  document.querySelectorAll(".category-btn");

  todosBotoes.forEach(botao => {
    botao.addEventListener("click", () => {
      let categoria = botao.getAttribute("data-category");
      trocarCategoria(categoria); // Chama a função para trocar a categoria ao clicar no botão
    });
  });
});