Gerenciando métodos de Busca
A página de busca é inserida na plataforma como uma página à parte das outras, e a sua inserção se dá pela criação de dois arquivos, um para o input de busca e outro para a página inicial em si.
Iremos dar início pela criação do arquivo do input de busca. Você pode adicioná-lo pela criação de um arquivo na listagem de arquivos, que foi explicado aqui.
Feito isso, precisamos adicionar o trecho de código que servirá para o campo de pesquisa, como no exemplo abaixo:
<script>
var
headerSearch;
$(document).ready(function() {
headerSearch = new HeaderSearch(new Searcher);
});
</script><form
action="/busca" method="GET">
<input name="term" type="text" class="header-search-field" value=""onkeyup="headerSearch.fieldKeyUp(this, $('select[name=category_id]').val());"
placeholder="Pesquisar..."
autocomplete="off"
>
<button type="submit" class="btn-submit"></button>
</form>
headerSearch = new HeaderSearch(new Searcher), esse trecho de código é utilizado para iniciar a ação de busca no campo de input.
action="/busca" e method="GET", são utilizados para chamar a página de busca com os termos inseridos no campo de pesquisa. Por padrão os campos do form serão submitados como parâmetros no request.
onkeyup="headerSearch.fieldKeyUp(this, $('select[name=category_id]').val());", esse objeto é necessário, pois ele que irá definir o evento de keyUp para input de busca no trecho que chama a a função 'fieldKeyUp', para definir a busca rápida com a junção do termo pesquisado + a sua possível categoria relacionada.
autocomplete="off", é utilizado para desligar a função que prevê a palavra que o usuário está digitando, e indica semelhantes. Utilizando o autocomplete="on" ativa essa função.
Feito isso, você poderá inserir essa seção na página desejada utilizando um @section e um @include.
Agora podemos partir para a codificação do segundo arquivo da busca, o que trará todas as informações relacionadas aos termos pesquisados. Podemos visualizá-lo no exemplo abaixo:
@if(!request()->ajax())
@extends(engine_view('index'))
@section('title', 'Resultados da busca')
@section('pagina_busca')@include(engine_view('cabecalho'))
<main class="main-container">
<div id="search-content"><div class="showcase"
canopus-showcase-infinite-scroll>
@foreach($searchResult->items as $item)
@include(engine_view('product-container'))
@endforeach@if(!request()->ajax())
</div>
@if($searchResult->collection->isNotEmpty() && $searchResult->collection->count() === 24)
<div><button class="load-more-product"
canopus-showcase-infinite-scroll-more>
Carregar mais produtos
</button>
</div>
@endif
</div>
@endif
</div>
</main>
@include(engine_view('rodape'))
@endsection
@endif
@if(!request()->ajax()), é utilizado para verificar se a requisição de dados é feita por ajax.
@extends(engine_view('index')), é utilizado para estender o arquivo de index.
@section('title', 'Resultados da busca'), é utilizado para trazer o titulo do site cadastrado no sistema + 'Resultados da busca', que é um termo modificável.
@section('pagina_busca'), é utilizado criar seção a ser utilizada, e todo o conteúdo da página vem dentro da mesma. O nome da section é modificável.
@include(engine_view('cabecalho')), serve para incluir o arquivo de cabeçalho criado previamente.
canopus-showcase-infinite-scroll, é utilizada para a exibição dos produtos na vitrine.
@foreach($searchResult->items as $item), é utilizado para iniciar a dinamização dos itens da busca. Lembrando que o Data Provider $searchResult foi cadastrado previamente no sistema. Você pode ler mais sobre isso aqui.
@include(engine_view('product-container')), é utilizado para incluir como corpo do item o arquivo HTML do item criado previamente.
@if($searchResult->collection->isNotEmpty() && $searchResult->collection->count() === 24), é utilizado para exibir uma coleção dos resultados da busca. Essa condição verifica se existe algum item com os parâmetros pesquisados, e exibe uma listagem com quantidade máxima de 24 itens por página.
canopus-showcase-infinite-scroll-more, é utilizado para identificar elementos cujo clique deve carregar mais itens em uma vitrine que não foi configurada como rolagem infinita. A não existência de uma tag com esse atributo implica na rolagem infinita da vitrine.
Comentários
0 comentário
Por favor, entre para comentar.