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的商人中心使您可以为特定用途创建建议，以考虑到它们被添加到的页面的上下文。 ↩