Busca com IA

A busca com IA é uma solução que utiliza queries GraphQL para recomendar produtos e otimizar os resultados de busca em lojas de e-commerce. Com isso, aprimora a experiência de navegação dos consumidores e atende às necessidades específicas de cada loja.

🚧

Hoje a funcionalidade está em beta, para utilizar é necessário abrir um chamado para nosso suporte.

Estrutura da Query GraphQL: Busca de Produtos (search)

A query search possibilita buscas avançadas para localizar produtos de forma eficiente. Ao interpretar o termo de busca inserido, a inteligência artificial aplica automaticamente filtros implícitos, como:

• Promoções
• Lançamentos
• Faixas de preço
• Ordenação
• Marca
• Gênero

Esses filtros ajudam a gerar uma lista de produtos altamente relevantes para o consumidor.

Implementação da Busca

Abaixo temos um passo a passo de como implementar a busca IA em uma loja Storefront.

❗️

A busca AI não deve substituir a busca padrão do site, deve ser usada como complementação da busca para evitar páginas sem resultados. Se utilizado substituindo a busca padrão do site levará a impactos de performance.

Criação do arquivo GraphQL

1. Objetivo: Configurar a query search para utilizar a IA na busca de produtos.
2. Instruções:
   1. No diretório do projeto, crie um arquivo com a extensão .graphql. Nomeie o arquivo de forma intuitiva para facilitar a identificação, por exemplo, busca_com_ia.graphql.
   2. Dentro desse arquivo, utilize a query “search” e configure os parâmetros para que a busca utilize IA (useAI: true), definindo também os dados que deseja retornar.

Exemplo de query

GraphQL

query Search($searchQuery: String,
  $partnerAccessToken: String,
  $resultSize: Int = 12) {
  search(query: $searchQuery, partnerAccessToken: $partnerAccessToken, useAI: true) {
    redirectUrl
    pageSize
    productsByOffset(limit: $resultSize) {
      totalCount
      pageSize
      page
      items {
        id
        productId
        productName
      }
    }
}

Criação do Componente HTML para Visualização

1. Objetivo: Configurar a estrutura de exibição dos produtos retornados pela busca com IA.
2. Instruções:
   1. No diretório de componentes, crie um arquivo HTML com o nome recomendacoes_ia_snippet.html.
   2. Esse arquivo será o componente onde a busca com IA exibirá os produtos recomendados. Configure-o para mostrar os produtos em uma lista ou carrossel, dependendo do design desejado.

Exemplo de snippet

HTML

{{ ##
Description: Render products suggested by AI
Usage:
await client.snippet.render("search_recommendations_AI_snippet.html", ...);
}}

{{~ if data.search.products_by_offset.total_count > 0 ~}}
    <div class="flex justify-center w-full flex-row mt-5 px-4">
       <h2 class="text-center font-bold uppercase tracking-[2px] mb-4 pb-4 text-lg lg:text-xl xl:text-2xl">Confira nossa recomendação de busca por IA</h2>
    </div>
     {{ spot_list products: data.search.products_by_offset }}
{{~ end ~}}

Utilização do componente snippet criado

1. Objetivo: Utilizar o componente de snippet criado para exibir produtos recomendados pela busca com IA diretamente na interface do usuário.
2. Instruções:
   1. Escolha a página .html onde deseja que seja renderizado a busca, este é o componente HTML onde o snippet de resultados da busca com IA será exibido.
   2. Neste componente verifique a lista retornada se existem produtos recomendados e, caso não haja resultados, mostre uma mensagem personalizada informando que nenhum produto foi encontrado para o termo de busca. Colocar um elemento html para ser utilizado pelo snippet da busca com IA.

Exemplo de componente na visualização de produtos

HTML

{{ if products.total_count > 0 }}    
        <div class="flex justify-center w-full flex-row gap-4 uppercase">
          <p class="text-[#000] font-bold text-[19px] mt-[20px] lg:mt-0 lg:mb-[24px] tracking-[0.5px]" id="resultado"></p>
        </div>
      {{ else }}
        <div class="flex justify-center w-full flex-row mt-5 px-4">
          <p class="text-[19px] text-[#000] mt-[20px] lg:mt-0 lg:mb-[24px] tracking-[0.5px]">
            Não encontramos produtos para o termo "<span id="search-term-not-found" class="font-bold"></span>".
            <span class="text-brown-500 text-[30px] font-bold ml-[30px]">:(</span>
          </p>
        </div>

        <div id="search-recommendation-ai" class="w-full"></div>
{{ end }}

Configuração do arquivo JavaScript para carregar o Snippet

1. Objetivo: Adicionar lógica em JavaScript para validar a presença de um termo de busca e carregar o snippet para exibição dos resultados.
2. Instruções:
   1. No arquivo JavaScript do .html escolhido para mostrar o snippet, configure um listener para carregar o snippet automaticamente ao iniciar a página e renderizar as recomendações com base no termo de busca.

Exemplo de função JS para o snippet

JavaScript

window.addEventListener("load", loadSearchRecommendationAISnippet, false);

async function loadSearchRecommendationAISnippet(){
  const elementId = document.getElementById("search-recommendation-ai")
  const busca = new URLSearchParams(window.location.search).get("busca");

  if(elementId && busca){
    const response = await client.snippet.render("search_recommendations_AI_snippet.html", "SnippetQueries/search_recommendations_AI.graphql", {searchQuery : busca});
    setInnerHtmlById(response, "search-recommendation-ai");
  }