frontend sdk
vu
С новым SDK от Klevu вы можете втянуть силу открытия продукта ИИ во что -либо.
Традиционный веб-сайт, приложение для одной страницы (SPA), Progressive Web App (PWA), мобильное приложение, веб-сайт кампании, киоск в магазине, космический корабль ... что угодно.
Проще для разработчиков, быстрее в инновации.
Вот ссылки на разные проекты.
Klevu SDK привносит в ваш магазин электронной коммерции Smart Search, Category Merchandising и рекомендации. Klevu позволяет легко создавать лучший опыт просмотра продукта для ваших клиентов.
У Klevu уже есть простая в реализации библиотеки JavaScript, которая идеально подходит для большинства пользователей, так что для чего эта библиотека подходит?
Klevu SDK написан в TypeScript, который дает вам:
Эта библиотека поддерживает все основные библиотеки фронта, такие как React и Vue. Этот SDK, однако, дает вам возможность плагин Klevu Smart Search, категорий товаров и рекомендации, любые способы, которые вы хотели бы. Включая отслеживание событий кликов продукта, поиска и покупки, которые управляют искусственным интеллектом в ядре Клеву.
PWA предназначены для того, чтобы дать пользователям опыт работы с нативными приложениями. С SDK Klevu вы также можете принести силу AI Klevu AI в свой PWA.
SSR & SSG быстро становятся стандартными функциями во всех самых популярных фронтальных рамках, таких как NextJS и NuxtJS. С помощью Klevu SDK вы можете увеличить SEO вашего магазина и опыт вашего пользователя, запрашивая результаты поиска, страницы категорий и рекомендации до загрузки страницы.
Klevu SDK дает разработчикам максимальный контроль над тем, как они хотят отображать, и позволяют пользователям взаимодействовать с вашим каталогом продукта. Когда вы добавляете библиотеку SDK в свой проект, у вас есть все строительные блоки, необходимые для создания уникальных пользовательских опытов, которые идеально подходят для вашего бренда.
Мы собрали много функций в пример React, включенный в этот SDK. Вот много функций и где найти рабочий пример. Вы также можете взглянуть на пример React Readme для получения дополнительной информации о том, что реализовано в примере, и нажмите здесь, чтобы:
| Особенность | Описание | Пример |
|---|---|---|
| Быстрый поиск | Пример используется для отображения результатов поиска при вводе в текстовое поле. | QuickSearch.tsx |
| Целевая страница результатов поиска | Пример, чтобы показать результаты поиска на основе ключевого слова, передаваемого в URL. | Searchresultpage.tsx |
| Категория навигация | Пример отображения продуктов в категории/коллекции. | CategoryPage.tsx |
| Одиночный поиск продукта | Пример использования поиска для запроса данных для одного продукта. | ProductPage.tsx |
| Фильтры | Примеры фильтров для сужения продуктов на основе аспектов продуктов. | Searchresultpage.tsx CategoryPage.tsx |
| Загрузить больше результатов | Пример кнопки загрузки больше, чтобы запросить больше продуктов. | Searchresultpage.tsx |
Analytics управляет машинным обучением, которое Klevu использует для предоставления пользователям лучших результатов.
| Особенность | Описание | Пример |
|---|---|---|
| SearchEvent | Отслеживайте то, что было обыскано. | QuickSearch.tsx |
| Поиск продукта Click Event | Отслеживайте продукты, которые нажимают по результатам поиска. | Searchresultpage.tsx |
| Категория навигационная продукция нажимает событие | Отслеживайте продукты, которые нажимают со страниц категорий. | CategoryPage.tsx |
| Купить/купить мероприятие | Отслеживайте приобретенные продукты. | Checkoutpage.tsx |
| Особенность | Описание | Пример |
|---|---|---|
| Рекомендации по торговым центрам Klevu | Добавьте рекомендации, созданные в KMC. 1 | Homepage.tsx CategoryPage.tsx ProductPage.tsx |
| Подобные продукты | ProductPage.tsx |
| Особенность | Описание | Пример |
|---|---|---|
| Персонализация | Легко добавить PersonLization к поиску 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 Run Build: Смотрите
build:watch запускает Build in Watch Mode Rebuilding Applicing каждый раз, когда вносятся изменения. Он не делает чистую сборку, но постепенные сборки и не делают все уловки, необходимые для выпуска. Это хорошо, если вы хотите внести изменения в библиотеку при разработке другого пакета, таких как @klevu/ui , которые требуют изменения в Core.
NPM запустить QOC
Это проверяет, что качество кода достаточно хорошо. Будет автоматически запускать GitHub.
npm запустить тест
Запускает большой набор тестов для Core. Не требует строительства. Может быть возможно, чтобы разрабатывать и запустить тест время от времени, чтобы увидеть, как все работает отлично. Будет автоматически запускать GitHub.
Чтобы начать строительство @klevu/ui вам сначала нужно перейти в папку packages/klevu-ui и выполнить npm install . Чтобы правильно сделать сборку, вам нужно запустить npm install также в packages/klevu-ui-react и packages/klevu-ui-vue .
Пакеты React и Vue не нуждаются в других изменениях. Их продолжительность автоматически генерируется проектом klevu-ui .
npm run build создает распределенную версию @klevu/ui . Но чтобы создать правильную версию и выпустить все три библиотеки пользовательского интерфейса, существует скрипт узла CI/CD в utils/update-klevu-ui.js .
Самый простой способ разработки и тестирования компонентов - это запуск сборника рассказов. Для этого вам нужно посмотреть «Построить проект пользовательского интерфейса» и запустить сборник рассказов.
NPM Run Build: Смотрите
И в отдельном окне
NPM запустить сборник рассказов
Это должно открыть среду разработки.
Чтобы создать генераторные компоненты, вы можете использовать команду:
npm run Generate
Рекомендуется установить ESLint и Prettier расширения для производства чистого кода.
Торговый центр Klevu позволяет вам создавать рекомендации для конкретных использований, которые учитывают контекст страниц, в которые они добавлены. ↩
