Documentação para integração da Busca e das Vitrines SmartHint.
A integração utiliza a API SmartHint “Vitrines por Página com Produtos”, que permite exibir vitrines de recomendações de produtos (módulos dinâmicos) posicionadas na Home do aplicativo, juntamente com os produtos que as compõem.
Essa funcionalidade faz uso do parâmetro /WithProducts, responsável por retornar não apenas os metadados da vitrine (como título e posição), mas também a lista completa de produtos associados a ela.
🔗 Documentação da rota utilizada:
https://developers.smarthint.co/#ac7ee721-b9cf-4150-8bfa-eaf27e191899
1. Informações necessárias para configuração inicial
Para habilitar a integração, é necessário entrar em contato com o suporte da Kobe:
📧 suporte@kobe.io
Envie as informações abaixo, que são essenciais para a ativação da Busca e das Vitrines:
URL da Loja
Plataforma (ex: VTEX, Tray, Nuvemshop etc.)
Cluster
SHCode (código identificador SmartHint)
Esses dados serão adicionados como parâmetros de configuração do aplicativo.
2. Configuração via CMS (VTEX)
2.1 Configuração para exibição na Home
Acesse a configuração da página Home no CMS VTEX.
Adicione um componente do tipo Carrossel de Produto, que será utilizado para exibir as vitrines na Home.
-
No campo Tipo de listagem do carrossel, selecione a opção:
smart-hint-recommendationEsse tipo indica que o carrossel exibirá as vitrines de recomendações geradas pela API SmartHint.
-
No campo Identificador, informe o ID da vitrine que deseja exibir, seguindo o padrão:
local:positionExemplo:
home:01para a primeira vitrine na Home,home:02para a segunda, e assim por diante. Configure o Título do carrossel para facilitar a identificação no CMS.
2.2 Configuração para exibição em outras páginas (ex: carrinho)
Para adicionar vitrines fora da Home, como na página do carrinho ou outras áreas, siga os passos abaixo:
No CMS VTEX, acesse a aba Headless CMS e clique em Criar documento.
Selecione o tipo de documento Content Container para criar um novo container de conteúdo.
Dentro da configuração do novo documento, na seção de componentes, adicione um componente de Carrossel de Produto.
-
Na aba Settings do componente, defina:
Um Título descritivo, por exemplo:
"Vitrine SmartHint Carrinho"para facilitar o gerenciamento e seguir o exemplo abaixo:
3. Padrão dos identificadores de vitrines
Os identificadores de vitrines SmartHint devem seguir o formato:
local:positionExemplos:
home:01→ primeira vitrine da Homeproduct:02→ segunda vitrine da página de produtocart:01→ vitrine na página do carrinho
Locais disponíveis:
home — página inicial
cart — carrinho
emptycart — carrinho vazio
product — página de produto
A position corresponde à ordem da vitrine na página, variando de 01 a 05.
Ao final, lembre-se de publicar a alteração realizada no painel do CMS VTEX para que ela seja aplicada no aplicativo.
4. Exemplo Visual da Vitrine Ativa
Abaixo segue vitrine SmartHint "O que outros clientes estão vendo" ativa:
Caso fique com alguma dúvida, você pode enviar um e-mail para 📩 suporte@kobe.io