O canopus disponibiliza uma forma de implementar a prévia da busca que pode ser implementado para sugerir itens durante a digitação no campo de busca do cabeçalho. Para isso, as seguintes classes estão disponíveis para a implementação via script na plataforma:

• Searcher
  Serve de base para executar a busca via AJAX, a partir de um termo e, opcionalmente, um número de identificação de uma categoria específica para buscar. É possível também, informar uma classe responsável por renderizar a prévia - por padrão, a HeaderSearcher.
  • search(term: string, categoryId: int, renderer: HeaderSearcher)
    Método que dispara a requisição de busca para a API e, após análise do resultado, chama o método showResult do renderer que é o responsável por apresentar a prévia.
  • setFrom(from: int)
    Método que seta nas propriedades da classe o valor from a ser incluído na requisição. Essa propriedade define o offset da busca.
  • setSize(size: int)
    Método que seta nas propriedades da classe o valor size a ser incluído na requisição. Essa propriedade define o limit da busca.

  Exemplo:

  var searcher = new Searcher;
  searcher.setSize(24); // 24 items
  searcher.setFrom(0);  // Start at 0 position
  searcher.search('test', 1234, myCustomHeaderSearcher); // Effective search term 'test'

• HeaderSearcher
  Classe responsável por renderizar a seção com a prévia da busca. Pode ser substituída quando necessário por outra classe semelhante para montar uma prévia num layout específico - nesse caso a classe personalizada deve ter o método showResult(result), onde o parâmetro result será um objeto com os resultados vindos da requisição AJAX disparada pelo Searcher:

  Exemplo:

  var headerSearch = new HeaderSearch(new Searcher);

  Formato do parâmetro result:

  {
      term: '', // string which has searched term
      total: 99, // number which define total items which attends to search term
      from: 99, // number about search initial item index
      limit: 99, // number about search result limit
      page: 99, // number about search current page considering 'from', 'limit' and total results
      totalPages: 99, // number about search total pages considering 'from', 'limit' and total results
      entities: [], // array which contains all result entities
  }

  Formato da entidade do resultado:

  {
      id: 1234,
      name: '',             // item name
      price: 1234.56,       // item price
      thumb: 'https://...', // item thumbnail url
      action: 'https://...' // item details page url
  }

Para efetivar a busca, direcionar o usuário para a URL escolhida com o data provider de busca acrescido dos parâmetros via GET no query string da página. Exemplo:

/my-search-url?term=<<search term>>&category_id=1234&from=0&size=24