Skip to content

Front-end da Busca (navegador.js)

O ficheiro navegador.js é um micro-frontend complexo injetado na loja através do Google Tag Manager (GTM). Ele possui mais de 600 linhas de código focadas em interceptar eventos nativos, manipular o DOM de forma agressiva e orquestrar chamadas para o Meilisearch e Ollama.

1. Gestão de Estado Global

Para evitar a sobrecarga de frameworks como React, o script gere o seu estado diretamente no objeto window. * Variáveis de Busca e Paginação: window.ultimoTermoBuscado, window.paginaAtual, e window.itensPorPagina (padrão de 24 itens). * Variáveis de Facetas: window.filtrosAtivos e controlos de limites de preço (precoMinimoAtivo, precoMaximoAtivo).

2. A "Opção Nuclear" (Capa de Invisibilidade)

Quando o script deteta que o utilizador está na rota de busca (/busca ou URLs com ?q=), ele injeta imediatamente a variável cssNuclear. * Ação: Cria uma tag <style> que aplica display: none !important a todo o corpo (body) da loja nativa da Wake, preservando estritamente o header e o footer. * Objetivo: Evitar o efeito de "piscar" (FOUC) onde os resultados da Wake aparecem por um milissegundo antes de serem subscritos pelo Meilisearch.

3. Motor de Personalização Edge (Comportamental)

O script não depende de cookies do servidor; ele constrói um perfil do utilizador diretamente no seu navegador (localStorage na chave foco_perfil). * Gravação (registrarInteresse): Sempre que um utilizador clica num produto, o script regista a marca, o tipo de produto e a categoria. Existe uma trava de sanidade que limpa o histórico se este ultrapassar os 20 registos para evitar lentidão. * Leitura (getMarcasPreferidas e getContextoCategoria): Se um utilizador clicar 2 ou mais vezes numa categoria ou marca, o sistema assume essa preferência. Estas funções são usadas como "pesos" nas futuras pesquisas.

4. Sequestro de Eventos e Barra de Busca

O script anula os controlos padrão da Wake sobre o formulário de busca (formNativo e barraNativa): * Blindagem de Eventos: Interceta globalmente os eventos submit, keydown (Enter) e cliques no botão de lupa. Ele aplica preventDefault(), stopPropagation() e stopImmediatePropagation() para matar a ação da Wake na raiz e forçar a execução da função executarRedirecionamentoPuro(). * Single Page Application (SPA): Se o utilizador já estiver na página /busca, o script altera a URL via window.history.pushState e atualiza a grelha sem recarregar a página (com um atraso tático de 400ms para a Wake desistir da ação dela).

5. Experiência de Autocomplete e Ghost Text

A barra de pesquisa transforma-se numa experiência imersiva: * Painel de Sugestões (Focus): Ao clicar na barra vazia, o script gera dinamicamente a caixa #foco-autocomplete-box. Exibe links rápidos (Mais Buscados) e faz um fetch direto ao Meilisearch para exibir os "Mais Vendidos" consultando um array estático de SKUs (ex: '120641', '220686'). * Ghost Input (Estilo Google): O script clona a barra de busca original (#foco-ghost-input), coloca-a na mesma célula de uma grelha CSS invisível, e usa uma pesquisa ultrarrápida do Meilisearch a cada digitação para sugerir o autocompletar na cor cinzenta. O utilizador pode aceitar a sugestão premindo Tab ou a Seta Direita. * Busca por Voz: Injeta um botão com ícone de microfone. Ao ser clicado, utiliza a API nativa do navegador (SpeechRecognition), que, ao obter o resultado, preenche a barra e submete a pesquisa automaticamente.

6. O Motor Híbrido (Meilisearch + Ollama)

A função realizarBuscaMeili(termo) é o cérebro da operação de pesquisa. Ela é dividida em três fases assíncronas: 1. Vetorização (IA Local): Chama o Ollama (https://ollama.cademinhacomida.com.br/api/embeddings) para transformar a string de texto pesquisada num vetor matemático. 2. Motor Orgânico: Realiza a pesquisa no Meilisearch (50 itens). Se o vetor do passo anterior existir, ativa a pesquisa híbrida (semanticRatio: 0.05). Aplica ordenação e filtros dinâmicos de facetas. 3. Motor Recomendado: Se o utilizador tiver histórico no Edge (passo 3) e estiver na página 1, o script faz um segundo fetch ao Meilisearch à procura de 4 produtos que façam correspondência cruzada entre o termo pesquisado e a "Marca/Categoria Favorita" do cliente.

7. Renderização (DOM) e Regras de Negócio

Ao receber os dados das APIs, o script constrói toda a interface do zero. * Filtro de Exibição: Ignora produtos onde valido seja falso ou exibirSite seja falso ('false', '0', 'nao'). * Rebaixamento de Indisponíveis: O script ordena os 13 primeiros produtos listados (top13), forçando os produtos sem availability a caírem para o final deste lote. * Clone de Cards e Desconto Dinâmico: Para cada produto, o JS calcula o desconto de 10% no PIX em tempo de execução (precoOriginal * 0.90) e exibe o crachá verde "% OFF". * Cálculo de Parcelamento: Existe um loop inverso (de 6x a 1x) que divide o preço original e fixa a parcela máxima permitida, garantindo que o valor mínimo de parcela seja de R$ 10.65. * Estados de Botão: Se is_televendas for verdadeiro, esconde o preço e muda o botão para "SOB CONSULTA". Se não houver stock, aplica opacidade e o texto "INDISPONÍVEL". * Yourviews: Ao finalizar a injeção do HTML, aciona window.yvQuickReview() para forçar a renderização nativa das estrelas de avaliação nos novos cards.

8. Filtros Facetados e Overlay Dinâmico

  • Barra Lateral Nativa: Lê todas as propriedades dos produtos (facetDistribution) e gera dinamicamente caixas de verificação (checkboxes) com contadores. Substitui textos como "ANHANGUERA" por "Pronta Entrega" em tempo real.
  • Filtro de Preço (Dual Slider): Constrói uma barra deslizante com duas pontas para estipular faixas de preço mínimo e máximo. Para evitar conflitos de CSP e bloqueios de eventos inline pela loja, os eventos são mapeados programaticamente (addEventListener).
  • Overlay Exclusivo: Enquanto o utilizador digita, se a palavra tiver mais de 2 letras, em vez de mudar de página, o script puxa um "lençol" cobrindo a parte inferior da loja (#foco-overlay-global), injetando uma versão resumida da pesquisa (limitada a 12 itens), completa com filtros laterais funcionais.

9. Estratégia de "Warmup" (GPU Local)

Funcionalidade: Prevenção de "Cold Start" da Inteligência Artificial. * No exato momento em que o script carrega, ele dispara um fetch assíncrono para a API do Ollama com o payload prompt: 'warmup' e keep_alive: -1. * Objetivo: O modelo bge-m3:latest pode demorar alguns segundos a ser carregado da RAM do servidor para a VRAM da placa de vídeo (RTX 3050). Este "falso ping" obriga a GPU a alocar o modelo imediatamente, garantindo que a primeira pesquisa real do utilizador ocorra em milissegundos. O erro deste fetch é silenciosamente ignorado (.catch(() => { })) para não poluir a consola.

10. Sincronização de DOM (Mutation Observer)

Funcionalidade: Função aguardarWakeRenderizar(). * Como a Wake constrói partes do layout de forma assíncrona, injetar o Meilisearch imediatamente poderia causar a quebra do layout ou erros de "Nó não encontrado". * O script anexa um MutationObserver ao document.documentElement, observando ativamente as mutações da árvore do DOM (childList: true, subtree: true). * Assim que o seletor do cabeçalho (header, .header-container, #cabecalho, .fbits-header) é renderizado ou o readyState atinge complete, o observador desconecta-se instantaneamente (obs.disconnect()) para poupar processamento e aciona o motor de busca.

11. Telemetria Ativa e Tracking Comportamental

Funcionalidade: Função logarBuscaSistema. O script vigia ativamente o comportamento do utilizador e envia os dados para a API do Laravel (/api/logs-busca): * Request Blindado: Utiliza a flag keepalive: true no fetch. Isto é vital porque garante que o navegador termina a requisição HTTP mesmo que o utilizador feche a aba ou clique num produto e saia da página. * Gatilho 1 (Zero Resultados): Se o Meilisearch devolver hits.length === 0, o sistema aguarda 3 segundos (setTimeout) e envia o log de zero_resultados. * Gatilho 2 (Falta de Clique): O script regista um document.addEventListener('click', listenerCliqueBusca) para vigiar cliques nos produtos. Se o utilizador não clicar em nada num espaço de 30 segundos, dispara um log classificando o evento como falta_de_clique.

12. Engenharia de Interface e UX (CSS Avançado)

Funcionalidade: Melhoria de taxa de clique (CTR) e responsividade. * Card Inteiro Clicável (A "Mágica"): Em vez de colocar múltiplos links <a> na imagem e no título (o que prejudica o SEO e a acessibilidade), o script aplica um position: relative no card e utiliza o pseudo-elemento ::after no link do título. Esse elemento invisível expande-se sobre todo o card (top: 0; bottom: 0; left: 0; right: 0), tornando a área 100% clicável. * Proteção de Z-Index: Para garantir que o botão "Comprar" e as estrelas da Yourviews não fiquem inoperantes debaixo da camada invisível, o script eleva o z-index desses componentes interativos. * Menu Off-Canvas (Mobile): Abaixo de 991px de resolução, o CSS anula a barra lateral fixa (.hotsite-sidebar) e transforma-a num menu deslizante que entra pela esquerda (left: -100% para left: 0) utilizando uma transição suave, ativado pelo botão #foco-btn-mobile-nativa.

13. Motor de Paginação Dinâmica e Scroll

Funcionalidade: Controle de navegação em SPAs. * O script calcula o total de páginas dividindo o totalHits pela constante window.itensPorPagina (24). * Construção de Nós (DOM Elements): A paginação é construída criando elementos <li> e <button> via JavaScript. * Lógica de Reticências (Ellipsis): O algoritmo de paginação exibe sempre a página 1, a última página e um raio de 2 páginas ao redor da paginaAtual. Se houver saltos maiores que 3 páginas, o script insere dinamicamente reticências (...) para não quebrar o layout visual. * Soft-Reload e Scroll: Ao clicar numa página, a função intercepta o evento (e.preventDefault()), atualiza a window.paginaAtual, dispara a nova busca no Meilisearch e executa um scrollIntoView({ behavior: 'smooth' }) para devolver o utilizador suavemente ao topo da vitrine.