frontend sdk

無頭產品發現，每個身體

借助Klevu的全新SDK，您可以將AI產品發現的力量納入任何東西。

傳統網站，單頁應用程序（SPA），Progressive Web應用程序（PWA），移動應用程序，廣告系列網站，店內售貨亭，太空飛船……無論如何。

更簡單的開發人員，更快地進行創新。

klevu無頭單星

這是指向不同項目的鏈接。

• @Klevu/Core軟件包，可用於使用Klevu搜索來構建現代前端。
• 反應示例反應，反應路由器，材料UI示例。
• VUE示例VUE 3，VUE-ROUTER，TAIRWINDCSS示例。
• NUXT示例NUXT 3示例。
• 混音示例混音是一個基於反應的示例，該示例是將Klevu與服務器端渲染使用。
• Vanilla JavaScript示例 - 最小JavaScript示例。
• Shopify氫例子 - 小氫例子

輕鬆將Klevu集成到您的應用程序中。我們做所有的繁重工作。

Klevu SDK將智能搜索，類別銷售和建議解決方案帶到您的電子商務商店。 Klevu使您可以輕鬆為客戶創建最佳的產品瀏覽體驗。

Klevu已經擁有一個易於實現的JavaScript庫，非常適合大多數用戶，那麼這個庫是誰？

打字稿SDK

Klevu SDK用打字稿編寫，該字樣為您提供：

• 綜合開發環境（IDE）的完整自動完成支持
• 代碼註釋中的完整文檔！
• 簡單快捷的方法將Klevu集成到您的自定義UI

水療中心（單頁應用程序）

該庫支持所有主要的前端庫，例如React和Vue。但是，此SDK使您能夠插入Klevu智能搜索，類別商品化和建議的任何方式。包括對產品點擊的事件跟踪，搜索和購買將AI驅動在Klevu核心的情況。

PWA（漸進式Web應用程序）

PWA旨在為用戶提供與本機應用程序相同的體驗。使用Klevu SDK，您還可以將Klevu AI的力量帶入PWA。

SSR＆SSG（服務器端渲染和靜態站點生成）

SSR＆SSG迅速成為所有最受歡迎的前端框架（例如NextJS和NUXTJS）的標準功能。使用Klevu SDK，您可以通過在頁面加載之前請求搜索結果，類別頁面和建議來增加商店的SEO和用戶的體驗。

完全創造性控制，全力

Klevu SDK可為開發人員提供對他們想要顯示的方式的最大控制權，並允許用戶與您的產品目錄進行交互。當您將SDK庫添加到項目中時，您將擁有創建非常適合您品牌的Trully獨特用戶體驗所需的所有構建塊。

Klevu SDK功能列表

我們已經在此SDK包含的React示例中包裝了許多功能。以下是許多功能以及在哪裡找到工作示例。您還可以查看A React示例README，以獲取有關示例中實現的內容的更多信息，然後單擊此處：

查看現場演示

搜尋

特徵	描述	例子
快速搜索	示例用於顯示搜索結果時，當您輸入文本字段時。	QuickSearch.tsx
搜索結果著陸頁	示例以根據URL中傳遞的關鍵字顯示搜索結果。	searchResultPage.tsx
類別導航	類別/集合中產品的示例顯示。	類別page.tsx
單產品搜索	使用搜索查詢數據中的單個產品的示例。	productpage.tsx
過濾器	過濾器的示例根據產品面縮小產品的縮小。	searchResultPage.tsx 類別page.tsx
加載更多結果	負載的示例更多按鈕以請求更多產品。	searchResultPage.tsx

分析

分析驅動機器學習Klevu用來為用戶提供最佳結果。

特徵	描述	例子
SearchEvent	跟踪搜索的內容。	QuickSearch.tsx
搜索產品點擊事件	跟踪從搜索結果中點擊的產品。	searchResultPage.tsx
類別導航產品點擊事件	跟踪從類別頁面上點擊的產品。	類別page.tsx
購買/購買活動	跟踪購買的產品。	CheckoutPage.tsx

建議

特徵	描述	例子
Klevu Merchant Center建議	添加在KMC中創建的建議。 1	homepage.tsx 類別page.tsx productpage.tsx
類似的產品		productpage.tsx

個性化

特徵	描述	例子
個性化	通過添加修飾符，輕鬆地將人格化添加到Klevufetch搜索中。	homepage.tsx

公用事業

特徵	描述	例子
klevukmcsettings	將您的Klevu商人中心設置加載到瀏覽器的LocalStorage中。	index.tsx

內部發展

啟動之前，必須在系統上安裝node.js和npm。這應該在開始開發之前完成一次。

核

要運行構建和測試@klevu/core您需要首先轉到packages/klevu-core 。

啟動之前，您需要使用npm install安裝所有軟件包

創建發行版

npm run build創建@klevu/core的生產版本。每次運行時，它都會進行乾淨的構建。

要實際發布，有CI/CD腳本utils/release-klevu-core.js 。使用node.js運行它。

發展核心

NPM運行構建：觀看

build:watch運行構建。它沒有乾淨的構建，但是增量構建，並且並不能執行發行版所需的所有技巧。如果您希望在開發需要更改核心的其他包裝（例如@klevu/ui （例如 @klevu/ui）時進行更改，那就很好。

NPM運行QOC

這檢查了代碼質量足夠好。將由GitHub自動運行。

NPM運行測試

運行大型核心測試。不需要建造。只需偶爾開發和運行測試即可看到一切正常工作。將由GitHub自動運行。

UI

要開始構建@klevu/ui您首先需要轉到packages/klevu-ui文件夾並進行npm install 。要使構建工作正確，您還需要在packages/klevu-ui-react和packages/klevu-ui-vue中運行npm install 。

React和Vue軟件包不需要任何其他更改。他們的競爭是由klevu-ui項目自動生成的。

創建發行版

npm run build創建@klevu/ui的分佈式版本。但是要創建正確的版本並發布所有三個UI庫，請在utils/update-klevu-ui.js中有一個CI/CD節點腳本。

發展

開發和測試組件的最簡單方法是運行故事書。為此，您需要觀看構建UI項目並運行故事書。

NPM運行構建：觀看

在單獨的窗口中

NPM Run Storybook

這應該打開開發環境。

要創建生成組件，您可以使用命令：

NPM運行生成

VSCODE擴展

建議安裝ESLint和Prettier擴展，以生成乾淨的代碼。

腳註

1. Klevu的商人中心使您可以為特定用途創建建議，以考慮到它們被添加到的頁面的上下文。 ↩