frontend sdk
vu
Mit dem brandneuen SDK von Klevu können Sie die Kraft der KI -Produktentdeckung in irgendetwas ziehen.
Eine traditionelle Website, eine einseitige Anwendung (SPA), eine progressive Web-App (PWA), eine mobile App, eine Kampagnenwebsite, ein Kiosk im Geschäft, ein Raumschiff… was auch immer.
Einfacher für Entwickler, schneller zu Innovationen.
Hier sind die Links zu verschiedenen Projekten.
Klevu SDK bringt Smart Search, Kategorie Merchandising und Empfehlungslösung in Ihren E -Commerce -Geschäft. Klevu erleichtert einfach, das beste Produkt -Browsing -Erlebnis für Ihre Kunden zu schaffen.
Klevu hat bereits eine einfache Implementierung der JavaScript -Bibliothek, die für die meisten Benutzer perfekt ist. Für wen ist diese Bibliothek gut?
Das Klevu SDK ist in Typenkript geschrieben, das Ihnen:
Diese Bibliothek unterstützt alle wichtigen Frontend -Bibliotheken wie React und Vue. Mit diesem SDK können Sie jedoch die Klevu -Smart Search, die Kategorie -Merchandisierung und Empfehlungen auf jede Art und Weise, wie Sie möchten, Plugin -Plugin -Plugin -Plugin -Plugin erhalten. Einschließlich der Ereignisverfolgung von Produktklicks, Suchanfragen und Einkäufen, die die KI im Kern von Klevu vorantreiben.
PWAs sollen den Benutzern ein Erlebnis mit nativen Apps bieten. Mit dem Klevu SDK können Sie auch die Kraft von Klevu AI in Ihre PWA bringen.
SSR & SSG werden in den beliebtesten Frontend -Frontworks wie NextJs und NuxtJs schnell zu Standardfunktionen. Mit dem KLEVU SDK können Sie sowohl die SEO- als auch die Erfahrung Ihres Geschäfts durch die Erfahrung Ihres Benutzers erhöhen, indem Sie Suchergebnisse, Kategorienseiten und Empfehlungen anfordern, bevor die Seite geladen wird.
Das Klevu SDK bietet Entwicklern die maximale Kontrolle über die Art und Weise, wie sie angezeigt werden möchten, und ermöglichen es Benutzern, mit Ihrem Produktkatalog zu interagieren. Wenn Sie die SDK -Bibliothek zu Ihrem Projekt hinzufügen, verfügen Sie über alle Bausteine, die erforderlich sind, um Trully einzigartige Benutzererlebnisse zu erstellen, die perfekt zu Ihrer Marke passen.
Wir haben viele Funktionen in das in diesem SDK enthaltene Beispiel für React -Beispiel eingebaut. Hier sind viele Funktionen und wo ein funktionierendes Beispiel finden. Sie können auch das React -Beispiel für weitere Informationen darüber werfen, was im Beispiel implementiert ist, und klicken Sie hier, um:
| Besonderheit | Beschreibung | Beispiel |
|---|---|---|
| Schnelle Suche | Beispiel zum Anzeigen von Suchergebnissen, wenn Sie in ein Textfeld eingeben. | quicksearch.tsx |
| Suchergebnisse Landingpage | Beispiel zum Anzeigen von Suchergebnissen basierend auf einem in der URL übergebenen Schlüsselwort. | SearchResultpage.tsx |
| Kategorie Navigation | Beispielanzeige von Produkten in einer Kategorie/Sammlung. | CategoryPage.tsx |
| Einzelproduktsuche | Beispiel für die Verwendung der Suche, um die Daten für ein einzelnes Produkt abzufragen. | ProductPage.tsx |
| Filter | Beispiele für Filter zur Eingrenzung von Produkten auf der Grundlage von Produktfacetten. | SearchResultpage.tsx CategoryPage.tsx |
| Lasten Sie mehr Ergebnisse | Beispiel für eine Lade -Taste, um mehr Produkte anzufordern. | SearchResultpage.tsx |
Analytics fährt das maschinelle Lernen, das Klevu verwendet, um den Benutzern die besten Ergebnisse zu liefern.
| Besonderheit | Beschreibung | Beispiel |
|---|---|---|
| SearchEvent | Verfolgen Sie, was durchsucht wurde. | quicksearch.tsx |
| Suchen Sie Produktklick -Ereignis | Verfolgen Sie die Produkte, auf die die Suchergebnisse geklickt werden. | SearchResultpage.tsx |
| Kategorie Navigationsprodukt Klicken Sie auf Ereignis | Verfolgen Sie die Produkte, auf die auf Kategorienseiten geklickt wird. | CategoryPage.tsx |
| Veranstaltung kaufen/kaufen | Verfolgen Sie die gekauften Produkte. | CheckoutPage.tsx |
| Besonderheit | Beschreibung | Beispiel |
|---|---|---|
| Empfehlungen des Klevu Merchant Center | Fügen Sie Empfehlungen hinzu, die in KMC erstellt wurden. 1 | Homepage.tsx CategoryPage.tsx ProductPage.tsx |
| Ähnliche Produkte | ProductPage.tsx |
| Besonderheit | Beschreibung | Beispiel |
|---|---|---|
| Personalisierung | Fügen Sie Ihren Klevufetch -Suchanfragen einfach eine Personlizierung hinzu, indem Sie einen Modifikator hinzufügen. | Homepage.tsx |
| Besonderheit | Beschreibung | Beispiel |
|---|---|---|
| KlevukmcSetings | Laden Sie Ihre Klevu Merchant Center -Einstellungen in die lokale Storage des Browsers. | index.tsx |
Node.js und NPM müssen vor dem Start auf Ihrem System installiert werden. Dies sollte einmal vor Beginn der Entwicklung erfolgen.
Um Build und testen Sie @klevu/core müssen Sie zuerst zu packages/klevu-core gehen.
Vor dem Start müssen alle Pakete mit npm install installiert werden
npm run build erstellt eine Produktionsversion des @klevu/core . Jedes Mal, wenn es abfuhr, macht es ein sauberes Gebäude.
Um tatsächlich zu veröffentlichen, gibt es CI/CD-Skript utils/release-klevu-core.js . Verwenden Sie Node.js, um es auszuführen.
NPM Run Build: Uhr
build:watch Runs Build im Uhrenmodus, das jedes Mal die Anwendung neu aufgebaut hat, wenn sich Änderungen vorstellen. Es wird nicht sauber erstellt, aber inkrementelle Builds und nicht alle für die Veröffentlichung erforderlichen Tricks. Es ist gut, wenn Sie sich wünschen, Änderungen an der Bibliothek vorzunehmen, während Sie ein anderes Paket wie @klevu/ui entwickeln, die Änderungen am Kern erfordern.
NPM Run QOC
Dies überprüft, ob die Qualität des Code gut genug ist. Wird automatisch von GitHub ausgeführt.
NPM Run -Test
Führen Sie eine große Suite von Tests für den Kern durch. Erfordert kein Gebäude. Es kann möglich sein, ab und zu den Test zu entwickeln und durchzuführen, um zu sehen, dass alles perfekt funktioniert. Wird automatisch von GitHub ausgeführt.
Um mit der Erstellung @klevu/ui zu beginnen, müssen Sie zuerst in den Ordner packages/klevu-ui gehen und die npm install durchführen. Damit die Erstellung korrekt funktioniert, müssen Sie npm install auch in packages/klevu-ui-react und packages/klevu-ui-vue ausführen.
Reakt- und VUE -Pakete benötigen keine anderen Änderungen. Ihre Zapfen werden automatisch vom klevu-ui -Projekt generiert.
npm run build erstellt eine verteilte Version von @klevu/ui . Um jedoch die richtige Version zu erstellen und alle drei UI-Bibliotheken zu veröffentlichen, gibt es ein CI/CD-Knoten-Skript in utils/update-klevu-ui.js .
Der einfachste Weg, um Komponenten zu entwickeln und zu testen, besteht darin, Storybook auszuführen. Dafür müssen Sie das UI -Projekt erstellen und das Storybook ausführen.
NPM Run Build: Uhr
Und im separaten Fenster
NPM Run Storybook
Dies sollte die Entwicklungsumgebung öffnen.
Um Komponenten zu erstellen, können Sie den Befehl verwenden:
NPM -Lauf generieren
Es wird empfohlen, ESLint und Prettier Erweiterungen zu installieren, um sauberen Code zu erstellen.
Mit Klevus Merchant Center können Sie Empfehlungen für bestimmte Verwendungen erstellen, die den Kontext der Seiten berücksichtigen, in die sie hinzugefügt werden. ↩
