Busca

Sobre

Um componente padrão para busca com container de sugestão de busca. Este componente possui recurso de preenchimento da pesquisa por microfone, porém é necessário configurar essa opção via prop, alguns navegadores pode não suportar esse recurso. Garanta também que as permissoes estão ativas, acesso por http é bloqueado o recurso de microfone pelos navegadores.

---

Dependências

Store

Prop	Descrição	Tipo	Uso
screenWidth 1.2.0	Variável encontrada no módulo principal da $store, responsável por conter o valor atualizado da largura da tela.	Variável da $store.	$store.state.screenWidth

---

Instalação

• Instale o app através do seu terminal

npm install @wapstore/busca

• Valide se seu arquivo package.json possui a dependência

"dependencies": {
  "@wapstore/busca": "^1.2.0"
}

Agora a loja está apta para o uso da aplicação.

---

Uso

Para seu perfeito funcionamento, este componente contém um módulo próprio na $store que deve ser vinculado a mesma, para isso basta inserir o trecho a seguir no arquivo index.js da pasta store. Neste arquivo você pode inserir todas as props e slots que o componente aceita, além de seus estilos.

---

Exemplo

-Este é um exemplo da aplicação de um arquivo padrão para uma Newsletter na Home:

<template>
  <busca id="searchTopo" textPlaceholder="Buscar aqui..." :sugestoes="true" :limit="6">
    <template #contentBtBusca>
      <img src="~/static/img/header/search.svg" width="18px" height="18px" alt="Buscar">
    </template>
  </busca>
</template>

<script>
  import busca from '@wapstore/busca/store/busca.module.js';

  export const modules = {
    busca
  };
</script>
<style>
  ...
</style>

---

Recursos

Props

Prop	Descrição	Tipo	Valor padrão
closeOnMobile 1.2.0	Ativa/desativa a ocultação da busca no mobile.	Boolean	true
sugestoes 1.2.0	Ativa/desativa o box de sugestões.	Boolean	false
textPlaceholder 1.2.0	Texto da barra de pesquisa.	String	Texto da barra de pesquisa
sugestoesDefaultBusca 1.2.0	Array que recebe dados de produto para exibir nas sugestões quando não houver nada no box de pesquisa.	Array	-
limit 1.2.0	Limite de itens que a sugestão terá.	Number	5

Slots

Slot	Descrição	Name	Exemplo de uso
Botão de busca 1.2.0	Slot para alteração do conteúdo do botão de busca.	contentBtBusca	<busca><template #contentBtBusca><span>Buscar</span><img src="icone.png" alt="Busca"></template></busca>

---

Estilização

Para a estilização, basta inserir os estilos sem escopos no componente pai ou em um arquivo CSS separado dentro de static/css/packages-styles/ com o nome do mesmo como nome do arquivo, utilizando sempre de um ID ou classe específica na tag do componente inserido para que em outras chamadas o estilo não influencie. Caso o estilo seja para várias chamadas do componente é recomendado a inserção dos estilos em um arquivo CSS separado. Para estilos em arquivos separados, utilizar o import no componente pai do componente correspondente ao estilo.