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.