Configurações básicas Algolia

As configurações básicas possuem duas etapas: a primeira etapa é a configuração entre as plataformas Algolia e Olist Ecommerce; e a segunda etapa é a importação de pacotes no projeto front-end da loja.

Configurações entre plataformas

Para integração o lojista precisa obter o API Key da plataforma:

1. Acesse sua conta Algolia;
2. Acesse o painel de API Keys. Mantenhao painel API Keys aberto em segundo plano do seu navegador, pois utilizamos as credenciais Application ID e Search-Only API Key nos próximos itens.

Página API Keys do Algolia

3. Acesse o Admin da Olist Ecommerce;
4. Clique no ícone ⚙ de Configurações no canto inferior esquerdo;
5. Clique em Algolia na seção Integrações;
6. Preencha os campos:
   1. Id da aplicação: preencha com o Application ID obtido no passo 2.;
   2. API Key: preencha com o Search-Only API Key obtido no passo 2;
7. Clique em Enviar.

As configurações de permissão entre as plataformas foram concluídas.

📘

Para saber mais sobre APIs Key no Algolia, consulte API Keys documentation.

Instalação e importação de dependências

Para utilizar a integração no front-end da loja, você precisa incluir na pasta do seu projeto as dependências do Algolia.

Para incluir as dependências acesse a pasta do projeto da loja (diretório que contém os arquivos de front-end) pelo terminal e execute o comando a seguir:

npm install instantsearch.js algoliasearch -D

Confira se a dependência do algoliasearch está no arquivo package.json do seu projeto.

Depois de garantir que a dependência algoliasearch foi instalada, você precisa importar os pacotes Algolia:

1. Acesse pasta do projeto no seu editor de código;

2. Acesse o diretório assets > javascripts > store.js

3. Inclua o código abaixo no arquivo store.js:

   // Importando pacotes Algolia
   import algoliasearch from "algoliasearch/lite";
   import instantsearch from "instantsearch.js";
   import {
     searchBox,
     hits,
     configure,
     pagination,
     hitsPerPage,
   } from "instantsearch.js/es/widgets";
   
   //Adicionando as chaves do Algolia. Substitua os campos com as chaves do Algolia.
   const searchClient = algoliasearch(
         ‘APLICATION_ID’,
         ‘SEARCH_ONLY_API_KEY’
       );

4. Substitua no código os campos APLICATION_ID e SEARCH_ONLY_API_KEY pelas respectivas chaves geradas nas configurações entre plataformas;

5. Salve as alterações.

Os pacotes foram instalados e a vitrine da loja pode acessar o Algolia. A próxima etapa é configurar integrar a busca que você deseja gerenciar pelo Algolia (produto e/ou blog).