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:

Formato de sugestões padrão da 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
      sku: '',              // item sku
      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

Formato de sugestões personalizadas

O passo-a-passo acima refere-se à utilização da sugestão de busca padrão do canopus. Caso alguma personalização seja necessária, o desenvolvimento poderá ser feito sem utilizar o padrão do plugin.

Para isso, basta disparar uma requisição AJAX para:

[GET] /ecommerce/search?term=<<search term>>

Também é possível filtrar essa busca a uma categoria específica acrescentando o ID da categoria ao final no query string:

[GET] /ecommerce/search?term=<<search term>>&category_id=<<category id>>

Também é possível determinar o tamanho da busca e o intervalo inicial a partir dos parâmetros from e size. Se não informados, os valores padrões são sempre 0 e 10, respectivamente:

[GET] /ecommerce/search?term=<<search term>>&category_id=<<category id>>&from=0&size=24

O formato de retorno será semelhante ao objeto a seguir:

{
  "total": 99,
  "from": 0,
  "limit": 10,
  "page": 99,
  "totalPages": 99,
  "data":[
    {
      "type":"items",
      "id":"9999",
      "source":{
        "slug":"items",
        "name": "Item name",
        "sku":"ITEM_SKU",
        "id":9999,
        "price":99.99,
        "category_ids":[999],
        "ean":"9999999999999",
        "id":9999,
        "source": "https://....",
        "url":"url-to-item-page",
        "image":"https://..."
      }
    },
    {...}
  ]
}