frontend sdk

Descubrimiento de productos sin cabeza, para cada cuerpo

Con el nuevo SDK de Klevu, puede atraer el poder del descubrimiento de productos AI en cualquier cosa.

Un sitio web tradicional, una aplicación de una sola página (SPA), aplicación web progresiva (PWA), una aplicación móvil, un sitio web de campaña, un quiosco en la tienda, una nave espacial ... lo que sea.

Más simple para los desarrolladores, más rápido para innovar.

Klevu Monorepositorio sin cabeza

Aquí están los enlaces a diferentes proyectos.

• @paquete Klevu/Core que se puede usar para construir frontends modernos con la búsqueda de Klevu.
• React Ejemplo React, React Router, Material UI Ejemplo.
• Vue Ejemplo Vue 3, Vue-Router, Tailwindcss Ejemplo.
• Ejemplo de NUXT NUXT 3 Ejemplo.
• Remix Ejemplo Remix es un ejemplo basado en React de usar Klevu con representación del lado del servidor.
• Ejemplo de Vanilla JavaScript - Ejemplo mínimo de JavaScript.
• Ejemplo de hidrógeno de Shopify - Ejemplo de hidrógeno pequeño

Integre Klevu en su aplicación con facilidad. Hacemos todo el trabajo pesado.

Klevu SDK trae búsqueda inteligente, comercialización de categorías y solución de recomendaciones a su tienda de comercio electrónico. Klevu facilita la creación de la mejor experiencia de navegación de productos para sus clientes.

Klevu ya tiene una biblioteca simple de implementar JavaScript que es perfecta para la mayoría de los usuarios, entonces, ¿para quién es buena esta biblioteca?

TypeScript SDK

El Klevu SDK está escrito en TypeScript que le da:

• Soporte completo de combustión automática de entornos de desarrollo integrados (IDES)
• ¡Documenación completa de los comentarios del código!
• Forma fácil y rápida de integrar klevu a su interfaz de usuario personalizada

SPA (aplicaciones de una sola página)

Esta biblioteca admite todas las principales bibliotecas frontend como React y Vue. Sin embargo, este SDK le brinda la capacidad de completar la búsqueda inteligente de Klevu, la comercialización de categorías y las recomendaciones de cualquier forma que desee. Incluyendo el seguimiento de eventos de los clics, las búsquedas y las compras que impulsan la IA en el núcleo de Klevu.

PWA (aplicaciones web progresivas)

Los PWA están diseñados para brindar a los usuarios una experiencia a la par con las aplicaciones nativas. Con el Klevu SDK, también puedes llevar el poder de Klevu Ai a tu PWA.

SSR y SSG (Renderización del lado del servidor y generación de sitios estáticos)

SSR y SSG se están convirtiendo rápidamente en características estándar en todos los marcos frontend más populares, como NextJS y NuxtJS. Con el Klevu SDK, puede aumentar el SEO de su tienda y la experiencia de su usuario solicitando resultados de búsqueda, páginas de categoría y recomendaciones antes de que se cargue la página.

Control creativo completo, en pleno poder

El Klevu SDK ofrece a los desarrolladores un control máximo sobre la forma en que desean mostrar y permiten a los usuarios interactuar con el catálogo de su producto. Cuando agrega la biblioteca SDK a su proyecto, tiene todos los bloques de construcción necesarios para crear experiencias de usuario únicas que se ajusten perfectamente a su marca.

Lista de funciones de Klevu SDK

Hemos empacado muchas características en el ejemplo React incluido con este SDK. Estas son muchas de las características y dónde encontrar un ejemplo de trabajo. También puede echar un vistazo a React Ejemplo ReadMe para obtener más información sobre lo que se implementa en el ejemplo y haga clic aquí para:

Ver una demostración en vivo

Buscar

Característica	Descripción	Ejemplo
Búsqueda rápida	Ejemplo utilizado para mostrar los resultados de búsqueda a medida que escribe en un campo de texto.	QuickSearch.tsx
Página de destino de resultados de búsqueda	Ejemplo para mostrar los resultados de búsqueda basados ​​en una palabra clave aprobada en la URL.	SearchResultPage.tsx
Navegación por categoría	Ejemplo de la visualización de productos en una categoría/colección.	CategoryPage.tsx
Búsqueda de productos individuales	Ejemplo de usar la búsqueda para consultar los datos para un solo producto.	ProductPage.tsx
Filtros	Ejemplos de filtros para reducir los productos basados ​​en facetas del producto.	SearchResultPage.tsx CategoryPage.tsx
Cargar más resultados	Ejemplo de un botón de carga más para solicitar más productos.	SearchResultPage.tsx

Analítica

Analytics impulsa el aprendizaje automático que Klevu utiliza para proporcionar a los usuarios los mejores resultados.

Característica	Descripción	Ejemplo
Búsqueda	Rastrear lo que se buscó.	QuickSearch.tsx
Evento de clic del producto de búsqueda	Rastree los productos que se hacen clic en los resultados de búsqueda.	SearchResultPage.tsx
Categoría de navegación Producto Haga clic en Evento	Rastree los productos que se hacen clic en las páginas de categoría.	CategoryPage.tsx
Evento de compra/compra	Rastrear los productos que se compran.	CheckoutPage.tsx

Recomendaciones

Característica	Descripción	Ejemplo
Recomendaciones del Centro de mercancías de Klevu	Agregue recomendaciones creadas dentro de KMC. 1	Homepage.tsx CategoryPage.tsx ProductPage.tsx
Productos similares		ProductPage.tsx

Personalización

Característica	Descripción	Ejemplo
Personalización	Agregue fácilmente la persona a sus búsquedas de Klevufetch agregando un modificador.	Homepage.tsx

Utilidades

Característica	Descripción	Ejemplo
Klevukmcsettings	Cargue su configuración del Centro de mercancías Klevu en el almacenamiento local del navegador.	index.tsx

Desarrollo interno

Node.js y NPM deben instalarse en su sistema antes de comenzar. Esto debe hacerse una vez antes de comenzar el desarrollo.

Centro

Para ejecutar construir y probar @klevu/core primero debe ir a packages/klevu-core .

Antes de comenzar, debe tener todos los paquetes instalados con npm install

Creación de la versión de lanzamiento

npm run build crea la versión de producción del @klevu/core . Hace una construcción limpia cada vez que corría.

Para su lanzamiento, hay CI/CD Script utils/release-klevu-core.js . Use Node.js para ejecutarlo.

Desarrollo del núcleo

NPM Run Build: Mira

build:watch ejecuta la aplicación de reconstrucción del modo de reloj cada vez que hay cambios. No hace una construcción limpia, pero las compilaciones incrementales y no hacen todos los trucos necesarios para el lanzamiento. Es bueno si desea realizar cambios en la biblioteca al desarrollar otro paquete como @klevu/ui que requieren cambios en el núcleo.

NPM Run QOC

Esto verifica que la calidad del código es lo suficientemente buena. Será ejecutado automáticamente por GitHub.

Prueba de ejecución de NPM

Ejecuta un gran conjunto de pruebas para el núcleo. No requiere edificio. Puede ser posible desarrollar y ejecutar la prueba de vez en cuando para ver que todo funciona perfectamente. Será ejecutado automáticamente por GitHub.

Ui

Para comenzar a construir @klevu/ui , primero debe ir a la carpeta packages/klevu-ui y hacer la npm install . Para que la compilación funcione correctamente, debe ejecutar npm install también en packages/klevu-ui-react y packages/klevu-ui-vue .

Los paquetes React y Vue no necesitan ningún otro cambio. Sus contensos son generados automáticamente por el proyecto klevu-ui .

Creación de la versión de lanzamiento

npm run build crea una versión distribuida de @klevu/ui . Pero para crear una versión adecuada y lanzar las tres bibliotecas de UI hay un script CI/CD de nodo en utils/update-klevu-ui.js .

Desarrollo

La forma más fácil de desarrollar y probar componentes es ejecutando Storybook. Para eso, debe ver Build the UI Project y ejecutar el libro de cuentos.

NPM Run Build: Mira

Y en la ventana separada

NPM Run Storybook

Esto debería abrir el entorno de desarrollo.

Para crear componentes Generar, puede usar el comando:

NPM Run Generar

Extensiones de Vscode

Se recomienda tener instaladas extensiones ESLint y Prettier para producir código limpio.

Notas al pie

1. El centro comercial de Klevu le permite crear recomendaciones para usos específicos que tengan en cuenta el contexto de las páginas en las que se agregan. ↩