frontend sdk

Descoberta de produto sem cabeça, para cada corpo

Com o novo SDK da Klevu, você pode puxar o poder da descoberta de produtos de IA em qualquer coisa.

Um site tradicional, um aplicativo de página única (SPA), App Progressive Web (PWA), um aplicativo móvel, um site de campanha, um quiosque na loja, uma nave espacial ... seja qual for.

Mais simples para os desenvolvedores, mais rápido para inovar.

Klevu Monorepository sem cabeça

Aqui estão os links para diferentes projetos.

• @klevu/pacote de núcleo que pode ser usado para criar frontends modernos com a pesquisa klevu.
• Exemplo de reação reagir, reagir roteador, exemplo de interface do material.
• Exemplo de Vue Vue 3, Vue-Router, Exemplo de Tailwindcss.
• Exemplo Nuxt NUXT 3 Exemplo.
• Remix Exemplo Remix é um exemplo baseado em react de usar o KLEVU com a renderização do lado do servidor.
• Exemplo de Javascript de baunilha - Exemplo mínimo de JavaScript.
• Exemplo de hidrogênio do Shopify - Exemplo pequeno de hidrogênio

Integre o KLEVU ao seu aplicativo com facilidade. Fazemos todo o trabalho pesado.

O Klevu SDK traz pesquisa inteligente, categoria de merchandising e recomendações para sua loja de comércio eletrônico. A Klevu facilita a criação da melhor experiência de navegação de produtos para seus clientes.

Klevu já possui uma biblioteca JavaScript simples de implementar perfeita para a maioria dos usuários, então para quem é essa biblioteca?

TypeScript SDK

O Klevu SDK está escrito no TypeScript, que fornece:

• Suporte completo de conclusão automática de ambientes de desenvolvimento integrado (IDES)
• Documenação completa dos comentários do código!
• Maneira fácil e rápida de integrar Klevu à sua interface do usuário personalizada

Spa (aplicativos de página única)

Esta biblioteca suporta todas as principais bibliotecas de front -end, como React e Vue. Este SDK, no entanto, oferece a capacidade de plugin Klevu Smart Search, Category Merchandizing e recomendações de qualquer maneira que você quiser. Incluindo rastreamento de eventos de cliques de produtos, pesquisas e compras que dirigem a IA no núcleo de Klevu.

PWA (Aplicativos Progressivos da Web)

Os PWAs foram projetados para oferecer aos usuários uma experiência em pé de igualdade com aplicativos nativos. Com o Klevu SDK, você também pode trazer o poder de Klevu ai para o seu PWA.

SSR & SSG (renderização lateral do servidor e geração de sites estáticos)

O SSR e o SSG estão rapidamente se tornando recursos padrão em todas as estruturas de front -end mais populares, como NextJs e NuxtJs. Com o Klevu SDK, você pode aumentar o SEO da sua loja e a experiência do seu usuário solicitando resultados de pesquisa, páginas de categoria e recomendações antes que a página seja carregada.

Controle criativo completo, sobre o poder total

O Klevu SDK fornece aos desenvolvedores o máximo controle sobre a maneira como desejam exibir e permitir que os usuários interajam com o seu catálogo de produtos. Ao adicionar a biblioteca SDK ao seu projeto, você tem todos os blocos de construção necessários para criar experiências exclusivas para o usuário que se encaixem perfeitamente na sua marca.

Lista de recursos Klevu SDK

Nós embalamos muitos recursos no exemplo do React incluído neste SDK. Aqui estão muitos dos recursos e onde encontrar um exemplo de funcionamento. Você também pode dar uma olhada no exemplo do React Exemplo de leitura para obter mais informações sobre o que é implementado no exemplo e clique aqui para:

Ver uma demonstração ao vivo

Procurar

Recurso	Descrição	Exemplo
Pesquisa rápida	Exemplo usado para exibir os resultados da pesquisa enquanto você digita em um campo de texto.	quickSearch.tsx
Página de destino dos resultados da pesquisa	Exemplo para mostrar os resultados da pesquisa com base em uma palavra -chave passada no URL.	SearchResultPage.tsx
Navegação de categoria	Exemplo de exibição de produtos em uma categoria/coleção.	CategoryPage.tsx
Pesquisa de produto único	Exemplo de uso da pesquisa para consultar os dados de um único produto.	ProductPage.tsx
Filtros	Exemplos de filtros para restringir produtos com base em facetas de produtos.	SearchResultPage.tsx CategoryPage.tsx
Carregar mais resultados	Exemplo de um botão de carga mais para solicitar mais produtos.	SearchResultPage.tsx

Análise

O Analytics Drive the Machine Learning Klevu usa para fornecer aos usuários os melhores resultados.

Recurso	Descrição	Exemplo
SearchEvent	Acompanhe o que foi pesquisado.	quickSearch.tsx
Pesquisar produto de clique no evento	Rastreie os produtos clicados nos resultados da pesquisa.	SearchResultPage.tsx
Categoria Navigação Produto Clique em Evento	Rastreie os produtos clicados nas páginas da categoria.	CategoryPage.tsx
Evento de compra/compra	Rastreie os produtos que são comprados.	CheckOutpage.tsx

Recomendações

Recurso	Descrição	Exemplo
Recomendações do Klevu Merchant Center	Adicione recomendações criadas no KMC. 1	Homepage.tsx CategoryPage.tsx ProductPage.tsx
Produtos semelhantes		ProductPage.tsx

Personalização

Recurso	Descrição	Exemplo
Personalização	Adicione facilmente as pesquisas de pessoa às suas pesquisas KlevuFetch, adicionando um modificador.	Homepage.tsx

Utilitários

Recurso	Descrição	Exemplo
Klevukmcsettings	Carregue as configurações do Klevu Merchant Center no LocalSorage do navegador.	index.tsx

Desenvolvimento interno

Node.js e NPM devem ser instalados no seu sistema antes de iniciar. Isso deve ser feito uma vez antes de iniciar o desenvolvimento.

Essencial

Para executar o Build and Test @klevu/core você precisa primeiro ir para packages/klevu-core .

Antes de começar, você precisa ter todos os pacotes instalados com npm install

Criando versão de lançamento

npm run build cria uma versão de produção do @klevu/core . Ele faz uma construção limpa toda vez que executava.

Para realmente lançar, existem utils/release-klevu-core.js . Use Node.js para executá -lo.

Desenvolvendo núcleo

NPM Run Build: Assista

build:watch RunS Build no modo de relógio Aplicativo de reconstrução sempre que houver alterações. Ele não faz compilação limpa, mas construções incrementais e não faz todos os truques necessários para a liberação. É bom se você deseja fazer alterações na biblioteca enquanto desenvolve outro pacote como @klevu/ui que exigem alterações no núcleo.

NPM RUN QOC

Isso verifica se a qualidade do código é boa o suficiente. Será executado automaticamente pelo GitHub.

Teste de execução do NPM

Executa grande conjunto de testes para o núcleo. Não requer construção. Pode ser possível apenas desenvolver e executar testes de vez em quando para ver tudo funcionar perfeitamente. Será executado automaticamente pelo GitHub.

Ui

Para começar a criar @klevu/ui você primeiro precisa ir para a pasta packages/klevu-ui e fazer a npm install . Para fazer o trabalho de construção corretamente, você precisa executar npm install também em packages/klevu-ui-react e packages/klevu-ui-vue .

Os pacotes de reação e vue não precisam de outras alterações. Seus contens são gerados automaticamente pelo projeto klevu-ui .

Criando versão de lançamento

npm run build cria uma versão distribuída de @klevu/ui . Mas, para criar uma versão adequada e liberar as três bibliotecas da interface do usuário, existe um script de nó CI/CD no utils/update-klevu-ui.js .

Em desenvolvimento

A maneira mais fácil de desenvolver e testar componentes é executando o Storybook. Para isso, você precisa assistir Build the UI Project e executar o livro de histórias.

NPM Run Build: Assista

E em janela separada

NPM RUN Storybook

Isso deve abrir o ambiente de desenvolvimento.

Para criar componentes de geração, você pode usar o comando:

NPM RUN GERE

Extensões VSCode

É recomendado que as extensões ESLint e Prettier instalem para produzir código limpo.

Notas de rodapé

1. O Merchant Center da Klevu permite criar recomendações para usos específicos que levam em consideração o contexto das páginas em que são adicionadas. ↩