frontend sdk
vu
Avec le tout nouveau SDK de Klevu, vous pouvez tirer la puissance de la découverte de produits de l'IA dans n'importe quoi.
Un site Web traditionnel, une application de page (SPA), une application Web progressive (PWA), une application mobile, un site Web de campagne, un kiosque en magasin, un vaisseau spatial… peu importe.
Plus simple pour les développeurs, plus rapidement à innover.
Voici les liens vers différents projets.
Le SDK de Klevu apporte une recherche intelligente, une solution de marchandisage et de recommandations de catégorie à votre magasin de commerce électronique. Klevu facilite la création de la meilleure expérience de navigation de produit pour vos clients.
Klevu a déjà une bibliothèque JavaScript simple à implémenter qui est parfaite pour la plupart des utilisateurs, alors à qui cette bibliothèque est bonne?
Le SDK Klevu est écrit en dactylographie qui vous donne:
Cette bibliothèque prend en charge toutes les grandes bibliothèques frontales comme React et Vue. Ce SDK vous donne cependant la possibilité de plumer Klevu Smart Search, Catégorie Merchandising et Recommandations de la manière que vous le souhaitez. Y compris le suivi des événements des clics, des recherches et des achats de produits qui entraînent l'IA au cœur de Klevu.
Les PWA sont conçus pour offrir aux utilisateurs une expérience à égalité avec les applications natives. Avec le SDK de Klevu, vous pouvez également apporter la puissance de Klevu Ai dans votre PWA.
SSR & SSG devient rapidement des fonctionnalités standard dans tous les frameworks de frontend les plus populaires tels que NextJS et NuxtJS. Avec le SDK Klevu, vous pouvez à la fois augmenter le référencement de votre magasin et l'expérience de votre utilisateur en demandant les résultats de recherche, les pages de catégorie et les recommandations avant le chargement de la page.
Le SDK de Klevu offre aux développeurs un contrôle maximal sur la façon dont ils souhaitent afficher et permettre aux utilisateurs d'interagir avec votre catalogue de produits. Lorsque vous ajoutez la bibliothèque SDK à votre projet, vous avez tous les blocs de construction nécessaires pour créer des expériences utilisateur particulièrement uniques qui correspondent parfaitement à votre marque.
Nous avons emballé de nombreuses fonctionnalités dans l'exemple de réact inclus avec ce SDK. Voici de nombreuses fonctionnalités et où trouver un exemple de travail. Vous pouvez également jeter un coup d'œil à l'exemple de réaction Readme pour plus d'informations sur ce qui est implémenté dans l'exemple et cliquez ici pour:
| Fonctionnalité | Description | Exemple |
|---|---|---|
| Recherche rapide | Exemple utilisé pour afficher les résultats de recherche lorsque vous tapez dans un champ de texte. | QuickSearch.tsx |
| Page de destination des résultats de la recherche | Exemple pour afficher les résultats de recherche basés sur un mot-clé passé dans l'URL. | SearchResultPage.tsx |
| Navigation de catégorie | Exemple d'affichage de produits dans une catégorie / collection. | CategoryPage.tsx |
| Recherche de produits uniques | Exemple d'utilisation de la recherche pour interroger les données d'un seul produit. | ProductPage.tsx |
| Filtres | Exemples de filtres pour réduire les produits en fonction des facettes du produit. | SearchResultPage.tsx CategoryPage.tsx |
| Chargez plus de résultats | Exemple d'un bouton de chargement plus pour demander plus de produits. | SearchResultPage.tsx |
Drive des analyses que l'apprentissage automatique que Klevu utilise pour fournir aux utilisateurs les meilleurs résultats.
| Fonctionnalité | Description | Exemple |
|---|---|---|
| SearchEvent | Suivez ce qui a été fouillé. | QuickSearch.tsx |
| Rechercher l'événement de clic produit | Suivez les produits qui sont cliqués à partir des résultats de la recherche. | SearchResultPage.tsx |
| Catégorie Navigation Produit Click Event | Suivez les produits qui sont cliqués à partir des pages de catégorie. | CategoryPage.tsx |
| Événement d'achat / d'achat | Suivez les produits achetés. | CheckoutPage.TSX |
| Fonctionnalité | Description | Exemple |
|---|---|---|
| Recommandations de Klevu Merchant Center | Ajouter des recommandations créées dans KMC. 1 | Homepage.tsx CategoryPage.tsx ProductPage.tsx |
| Produits similaires | ProductPage.tsx |
| Fonctionnalité | Description | Exemple |
|---|---|---|
| Personnalisation | Ajoutez facilement la personlisation à vos recherches de Klevufetch en ajoutant un modificateur. | Homepage.tsx |
| Fonctionnalité | Description | Exemple |
|---|---|---|
| Klevukmcsettings | Chargez vos paramètres de centre marchand Klevu dans le storage local du navigateur. | index.tsx |
Node.js et NPM doivent être installés sur votre système avant de commencer. Cela devrait être fait une fois avant de commencer le développement.
Pour exécuter Build et tester @klevu/core vous devez d'abord aller dans packages/klevu-core .
Avant de commencer, vous devez installer tous les packages avec npm install
npm run build crée une version de production du @klevu/core . Il fait une construction propre à chaque fois qu'il était en cours.
Pour réellement publier, il y a un script CI / CD utils/release-klevu-core.js . Utilisez Node.js pour l'exécuter.
NPM Run Build: Watch
build:watch Runs Build in Watch Mode Rebuilding Application chaque fois qu'il y a des modifications. Il ne fait pas de construction propre, mais des constructions incrémentielles et il ne fait pas toutes les astuces requises pour la version. Il est bon si vous souhaitez apporter des modifications à la bibliothèque tout en développant un autre package comme @klevu/ui qui nécessite des modifications au noyau.
NPM Run QOC
Cela vérifie que la qualité du code est assez bonne. Sera automatiquement géré par GitHub.
Test d'exécution de NPM
Exécute une grande suite de tests pour le noyau. Ne nécessite pas de construction. Il peut être possible de développer et d'exécuter des tests de temps en temps pour voir tout fonctionne parfaitement. Sera automatiquement géré par GitHub.
Pour commencer à construire @klevu/ui vous devez d'abord aller dans le dossier packages/klevu-ui et effectuer l' npm install . Pour faire fonctionner correctement la construction, vous devez également exécuter npm install dans packages/klevu-ui-react et packages/klevu-ui-vue .
Les packages React et Vue n'ont pas besoin de modifications. Leurs contens sont automatiquement générés par le projet klevu-ui .
npm run build crée une version distribuée de @klevu/ui . Mais pour créer une version appropriée et publier les trois bibliothèques d'interface utilisateur, il existe un script de nœud CI / CD dans utils/update-klevu-ui.js .
Le moyen le plus simple de développer et de tester les composants est de gérer le livre de contes. Pour cela, vous devez regarder construire le projet d'interface utilisateur et exécuter le livre de contes.
NPM Run Build: Watch
Et dans une fenêtre séparée
NPM Run Storybook
Cela devrait ouvrir l'environnement de développement.
Pour créer des composants générés, vous pouvez utiliser la commande:
Run NPM Générer
Il est recommandé d'avoir des extensions ESLint et Prettier installées afin de produire du code propre.
Le centre marchand de Klevu vous permet de créer des recommandations pour des utilisations spécifiques qui prennent en compte le contexte des pages dans lesquelles ils sont ajoutés. ↩
