Klevu Components integration #25

rallu · 2023-12-13T08:45:23Z

Overview

This pull request introduces a practical guide for integrating Klevu's advanced AI-driven search functionalities into the Composable-UI framework. Klevu, renowned for its e-commerce search capabilities, offers features like autocomplete, natural language processing, and machine learning insights, all aimed at elevating the user experience on e-commerce platforms.

Challenge

A key challenge in this integration is the circular dependency between @composable/klevu and @composable/ui. Housing these components in separate packages would create interdependencies that are impractical for efficient development and deployment.

Solution

To circumvent this issue, we propose a streamlined approach. This integration comprises three essential files rather than creating separate packages. These files are designed to be seamlessly integrated into the main project's structure.

Implementation Guide

Detailed instructions for the integration process are provided in the attached README. This guide outlines the necessary steps to embed Klevu's search components into your Composable-UI project, ensuring a smooth and effective integration.

netlify · 2023-12-13T08:45:28Z

‼️ Deploy request for composable-ui-storefront rejected.

Name	Link
🔨 Latest commit	`360980c`

vercel · 2023-12-13T08:45:30Z

@rallu is attempting to deploy a commit to the Composable Development Team on Vercel.

A member of the Team first needs to authorize it.

vercel · 2023-12-19T15:52:08Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
composable-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 29, 2024 4:08pm
composable-ui-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 29, 2024 4:08pm
composable-ui-docs-public	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 29, 2024 4:08pm
composable-ui-public	❌ Failed (Inspect)			Feb 29, 2024 4:08pm

dannytlake · 2023-12-19T16:14:40Z

Hi @rallu!

The pnpm-lock.yaml file looks to be stale and is preventing a successful build on Vercel. Please commit an updated lock file for the newly installed @klevu/ packages(see here and here)

dannytlake

The changes applied by following the installation steps must be able to successfully deploy to Vercel and Netlify, please provide a link to a deploy running on Vercel and Netlify
pnpm-lock.yaml file was not updated and prevented build on Vercel, see PR comment
Klevu UI components must be built with Chakra UI
- The Klevu UI components should be built with Chakra UI to fit into the Composable UI component ecosystem, and can be most likely be based on, or use, the components that power the default Product Listing Page
- Concern: separate CSS files are imported in _app.tsx to style the Klevu components.
  - This diverges from the Chakra UI theme, and takes the styling and building of these components out of Chakra UI and into an isolated pattern for Klevu
  - Can lead to several issues: specificity issues, ssr issues, difficulty in theming
command # 6 in Klevu README needs to be escaped
- cp ../packages/klevu/copythese/\[slug\].tsx src/pages/category/\[slug\].tsx
command # 8 in readme should provide sample code of the QuickSearch component placed in header.tsx, with a sample screenshot of the code and expected UI output
The Klevu README should contain screenshots of the outcome after installation of all Kelvu code + components
Please explain how to create a new Klevu account and sandbox
- How to configure a new Klevu sandbox
- How to retrieve the API keys used for KLEVU_API_KEY and KLEVU_REST_KEY
- How to populate this new sandbox to power the Product Listing Page and QuickSearch
klevu.tsx has hard coded variables: apiKey, url, and assetsPath
- These should be changed to environment variables
README does not explain whether "Data Indexing in Klevu” is an additional optional step or if it is required for the QuickSearch component.
- Will QuickSearch function only after this step has been completed?
Product grid is not contained within max page width, see screenshot

composable-ui/package.json

dannytlake · 2023-12-23T00:53:08Z

@rallu please also add a page to in the Docusaurus app in docs, under docs/docs/integrations/search. See Composable UI Docs for the deployed Docusaurus app.

Please add an introduction, screenshots, etc - anything you would want a developer to understand about the integration to Klevu, and how to get started. Referencing the klevu package README for installation steps is great as well.

rallu · 2024-01-12T03:11:11Z

New version of Klevu installation instructions has been added. We have done following changes:

@composable/klevu package is not imported by composable-ui in any way.
packages/klevu is now just storage that keeps all files related to Klevu in one place.
NPM script copyfiles was created to simplify the installation process.
CSS styles are copied also to the composable-ui project so that it can be easily modified
Proper ENV variables were created
Created modified docusaurus page from the README.md. I removed the images the docusaurus version as I don't know if they work in there.

dannytlake · 2024-01-29T17:09:04Z

@rallu I'll be looking at reviewing + merging this PR this week.

nikhil-narayana-klevu · 2024-02-13T09:53:28Z

@dannytlake Hello Danny, my name is Nikhil and I work in the Klevu components team. I wanted to check if anything is still pending in this PR and if you need anything else from our side to get this merged. Let me know. Thanks.

dannytlake · 2024-02-21T23:57:47Z

@dannytlake Hello Danny, my name is Nikhil and I work in the Klevu components team. I wanted to check if anything is still pending in this PR and if you need anything else from our side to get this merged. Let me know. Thanks.

Hello @nikhil-narayana-klevu, nice to meet you.

Can you please reset my Klevu sandbox account trial period, my account is under danny.lake@orium.com?
Please run pnpm install at the root of your branch klevu-empty-state, it should modify the root pnpm-lock.yaml file with changes similar to the below screenshot. Please commit this change to the branch.

Please let me when the two items above are completed, and then I will run through the install instructions again to verify I can successfuly install Klevu UI and run the components on the storefront.

I also suggest adding screenshots to the documentation (/docs/integrations/search/klevu) of the expected output on the Composable UI storefront once the Klevui UI components have been installed, this will greatly help illustrate to developers the features offered in this integration.

Thank you!

dannytlake · 2024-02-23T22:47:30Z

Hi @nikhil-narayana-klevu, thank you for resetting my account.

I'm not able to successfully run the setup process of importing products via command pnpm run klevu-setup

Please see the below logs as I run the command. I am receiving error The request payload was invalid

➜  scripts git:(klevu-empty-state) ✗ pnpm run klevu-setup

> scripts@0.0.0 klevu-setup /Users/dannylake/Documents/code/accelerator/composable-ui/klevu-cui/scripts
> ts-node src/klevu-setup/index.ts

Starting setting up Klevu!
=== Indexing attributes ===
[KlevuClient] PUT https://indexing.ksearchnet.com/v2/attributes/slug
Attribute saved successfully
[KlevuClient] PUT https://indexing.ksearchnet.com/v2/attributes/brand
Attribute saved successfully
[KlevuClient] PUT https://indexing.ksearchnet.com/v2/attributes/materialAndCare
Attribute saved successfully
=== Indexing categories ===
[KlevuClient] PUT https://indexing.ksearchnet.com/v2/batch
Batch accepted successfully
=== Indexing products ===
[KlevuClient] PUT https://indexing.ksearchnet.com/v2/batch
The request payload was invalid. Please check the provided payload for errors.

I am using the API keys

Am I expected to modify this script? I see this message in the Klevu integration doc:

Modifying the Indexing Script

Before running the script, ensure that it is tailored to your site's specific data structure. The script provided requires customization to match the attributes and data types you wish to index. This step is crucial for accurate and efficient search functionality.

Should I be able to successfully upload the default product dataset without any code modifications?

nikhil-narayana-klevu · 2024-02-26T08:30:57Z

Hi @nikhil-narayana-klevu, thank you for resetting my account.

I'm not able to successfully run the setup process of importing products via command pnpm run klevu-setup

Please see the below logs as I run the command. I am receiving error The request payload was invalid

➜  scripts git:(klevu-empty-state) ✗ pnpm run klevu-setup

> scripts@0.0.0 klevu-setup /Users/dannylake/Documents/code/accelerator/composable-ui/klevu-cui/scripts
> ts-node src/klevu-setup/index.ts

Starting setting up Klevu!
=== Indexing attributes ===
[KlevuClient] PUT https://indexing.ksearchnet.com/v2/attributes/slug
Attribute saved successfully
[KlevuClient] PUT https://indexing.ksearchnet.com/v2/attributes/brand
Attribute saved successfully
[KlevuClient] PUT https://indexing.ksearchnet.com/v2/attributes/materialAndCare
Attribute saved successfully
=== Indexing categories ===
[KlevuClient] PUT https://indexing.ksearchnet.com/v2/batch
Batch accepted successfully
=== Indexing products ===
[KlevuClient] PUT https://indexing.ksearchnet.com/v2/batch
The request payload was invalid. Please check the provided payload for errors.

I am using the API keys

Am I expected to modify this script? I see this message in the Klevu integration doc:

Modifying the Indexing Script

Before running the script, ensure that it is tailored to your site's specific data structure. The script provided requires customization to match the attributes and data types you wish to index. This step is crucial for accurate and efficient search functionality.

Should I be able to successfully upload the default product dataset without any code modifications?

Hi @dannytlake
I have pushed a change in the payload to the branch, there is also a change in the indexing package we use to push catalog data to our servers. Can you reinstall the packages and try again, it should work now.
Let me know if you still face issues.

dannytlake · 2024-02-27T18:17:30Z

Thank you @nikhil-narayana-klevu, pnpm run klevu-setup now runs successfully. I can now see products in the Klevu dashboard, and on my Composable UI storefront. Both Global Search and the Product Listing pages are functioning with the Klevu UI components :)

One small issue I see is the Global Search component, there is an "undefined" row in the "Last searches" section. Even if I perform a couple of searches, the "undefined" row still exists. Can you please investigate?

nikhil-narayana-klevu · 2024-02-28T06:59:44Z

@dannytlake I am unable to replicate on my end. can you try once in an Incognito window and check?
I have also updated the klevu packages to the latest version which has some improvements and bug fixes. Please reinstall the packages for your local testing.
You can also try by clearing all the browser cache and storage values.
For this issue in particular, we have taken note and will review what could have caused this to appear.

dannytlake · 2024-02-28T18:04:02Z

@nikhil-narayana-klevu clearing the site data for localhost:3000 solved the issue. Everything looks great now thank you for working on these last few items.

dannytlake · 2024-02-28T18:27:57Z

composable-ui/package.json

@@ -27,6 +27,9 @@
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@hookform/resolvers": "^2.9.7",
+    "@klevu/core": "^5.0.0",
+    "@klevu/ui": "^2.0.0",
+    "@klevu/ui-react": "^2.0.0",


@nikhil-narayana-klevu please remove these dependencies, as they should not be a part of the baseline composable-ui package.json. The developer will install these when following the Klevu install documentation.

I have removed these packages. Please check now.

dannytlake · 2024-02-28T18:31:01Z

pnpm-lock.yaml

@nikhil-narayana-klevu please regenerate this lock file. There is an issue in this lock file, it downgrades many dependencies compared to the lock file in main. Please start with a fresh working copy from here and re-run pnpm i to update the lock file in this branch as needed. This current lock file is the breaking build of the next.js application.

This is updated, please check now.

Thank you @nikhil-narayana-klevu

vercel bot had a problem deploying to Preview – composable-ui-public December 19, 2023 15:52 Failure

vercel bot deployed to Preview – composable-ui-docs-public December 19, 2023 15:53 View deployment

dannytlake requested changes Dec 20, 2023

View reviewed changes

dannytlake reviewed Dec 23, 2023

View reviewed changes

composable-ui/package.json Outdated Show resolved Hide resolved

rallu force-pushed the klevu-empty-state branch from 360980c to ff5a492 Compare January 12, 2024 03:03

Klevu Components

1456a3e

rallu force-pushed the klevu-empty-state branch from ff5a492 to 1456a3e Compare January 12, 2024 03:06

updated the pnpm lock file

83082b4

vercel bot deployed to Preview – composable-ui-docs February 23, 2024 20:22 View deployment

vercel bot deployed to Preview – composable-ui February 23, 2024 20:24 View deployment

Updated the json payload as per indexing api requirement

bdc7b07

update packages to latest version

a7e70fa

vercel bot deployed to Preview – composable-ui-docs February 28, 2024 18:04 View deployment

vercel bot had a problem deploying to Preview – composable-ui February 28, 2024 18:05 Failure

dannytlake requested changes Feb 28, 2024

View reviewed changes

Updating lock file and removed klevu packages

14f21f7

vercel bot deployed to Preview – composable-ui-docs February 29, 2024 16:06 View deployment

vercel bot deployed to Preview – composable-ui February 29, 2024 16:08 View deployment

dannytlake approved these changes Feb 29, 2024

View reviewed changes

dannytlake merged commit 2b29727 into composable-com:main Feb 29, 2024
7 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Klevu Components integration #25

Klevu Components integration #25

rallu commented Dec 13, 2023

netlify bot commented Dec 13, 2023 •

edited

Loading

vercel bot commented Dec 13, 2023

vercel bot commented Dec 19, 2023 •

edited

Loading

dannytlake commented Dec 19, 2023

dannytlake left a comment

dannytlake commented Dec 23, 2023

rallu commented Jan 12, 2024

dannytlake commented Jan 29, 2024

nikhil-narayana-klevu commented Feb 13, 2024

dannytlake commented Feb 21, 2024 •

edited

Loading

dannytlake commented Feb 23, 2024 •

edited

Loading

nikhil-narayana-klevu commented Feb 26, 2024 •

edited

Loading

dannytlake commented Feb 27, 2024

nikhil-narayana-klevu commented Feb 28, 2024

dannytlake commented Feb 28, 2024

dannytlake Feb 28, 2024

nikhil-narayana-klevu Feb 29, 2024

dannytlake Feb 28, 2024

nikhil-narayana-klevu Feb 29, 2024

dannytlake Feb 29, 2024

Klevu Components integration #25

Klevu Components integration #25

Conversation

rallu commented Dec 13, 2023

Overview

Challenge

Solution

Implementation Guide

netlify bot commented Dec 13, 2023 • edited Loading

‼️ Deploy request for composable-ui-storefront rejected.

vercel bot commented Dec 13, 2023

vercel bot commented Dec 19, 2023 • edited Loading

dannytlake commented Dec 19, 2023

dannytlake left a comment

Choose a reason for hiding this comment

dannytlake commented Dec 23, 2023

rallu commented Jan 12, 2024

dannytlake commented Jan 29, 2024

nikhil-narayana-klevu commented Feb 13, 2024

dannytlake commented Feb 21, 2024 • edited Loading

dannytlake commented Feb 23, 2024 • edited Loading

nikhil-narayana-klevu commented Feb 26, 2024 • edited Loading

dannytlake commented Feb 27, 2024

nikhil-narayana-klevu commented Feb 28, 2024

dannytlake commented Feb 28, 2024

dannytlake Feb 28, 2024

Choose a reason for hiding this comment

nikhil-narayana-klevu Feb 29, 2024

Choose a reason for hiding this comment

dannytlake Feb 28, 2024

Choose a reason for hiding this comment

nikhil-narayana-klevu Feb 29, 2024

Choose a reason for hiding this comment

dannytlake Feb 29, 2024

Choose a reason for hiding this comment

netlify bot commented Dec 13, 2023 •

edited

Loading

vercel bot commented Dec 19, 2023 •

edited

Loading

dannytlake commented Feb 21, 2024 •

edited

Loading

dannytlake commented Feb 23, 2024 •

edited

Loading

nikhil-narayana-klevu commented Feb 26, 2024 •

edited

Loading