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.