klevultd / frontend-sdk Goto Github PK

Simple SDK to do search to Klevu API

Required features

• Search
• Pagination
• Getting filters
• Applying filters to search

Pagination should have easy to use API that takes caches and applies filters automatically for better performance.

As described in title.

Hi, there's a problem with next function's offset property, instead of adding the offset value as a number it gets appended as a string

view screenshots below:

Make change to KlevuFetch in a way that it allows to use window.fetch instead of axios library.

If the whole KlevuFetch function is the same as before we should return result from local memory cache.

Create nuxt demo that mimics vue demo.

Recommendation web component pulls data from given KMC recommendation ID and it creates horizontal swiper component from products fetched by @klevu/core

It is preferred that no external UI libraries is used to create this component.

Required UI web component

• #85

Crete a demo based on react app that is for next.

Implement simple to use functions to get recommendations from the Klevu API

If personalisation() modifier is used and there is no previous user click data available then request will fail.

see KMC

Simple API to fetch data for category navigation.

Should implement helper function that fetches filters has ability to paginate category navigation fetches.

When you enable a filter (say color: blue) and change to a different category, the blue filter is still selected.

There was a fix submitted, but after QA the same issue is still there.

In addition:

• there seems to be a problem with the color swatch for "oliv". sometimes it's white, sometimes it burgundy, etc. My guess is that its having a hard time because it does not actually match a real color without the full spelling.
• there seems to be a problem with the price slider filtering.

There are videos that show these issues in Jira.

Jira: KS-12397

Implement class for easier event reporting.

On the QA site, the load more button is still present when no results.

Jira issue: KS-12466

A simple product component taking in KlevuRecord from @klevu/core and rendering a HTML output from that.

Component should be as extensible as possible so that developers can easily change the way it renders.

Create a tool that can take filters and handle their current selection. This model should be passable to search queries in order to make handling easier.

• Routing
• Product page
• Category listing

Currently calling next() page will automatically try to detect which of the queries should be paginated. That is not optimal way of it working.

We need to move next() to same level as sendEvent functions in the result so that developer explicitly selects which of the queries they wish get next page from.

Old function should be @deprecated in documentation and then removed in next version.

bring the Klevu SDK into an Unreal game

Instead of having add:

document.addEventListener(
    KlevuDomEvents.FilterSelectionUpdate,
    handleFilterUpdate
)

onBeforeRouteLeave((to, from, next) => {
    document.removeEventListener(
        KlevuDomEvents.FilterSelectionUpdate,
        handleFilterUpdate
    )
})

Could we do something like:

const removeFilterSelectionUpdate = KlevuDomEvents.addFilterSelectionUpdate(usersFilterUpdateHandler)

usersFilterUpdateHandler & removeFilterSelectionUpdate can be called anything, and this would allow the implementation to require less boiler plate.

Currently recommendations are created in Klevu Merchant Center and the data coming in is plain HTML and Javascript that should be injected using Klevu JSv2 library.

In milestone 1.0.0 we support only fetching recommendations through the API and KMC based builder is not available.
In milestone 2.0.0 we give a way to inject JSv2 into website and init these banners. Banners are loaded through the library.

After these in the next version we should build up provide JSON output from KMC that it's easier to build UI builder with any library.

sendSearchEvent() modifier should not be used when issuing a search request for quick search.

We need to clean and format incoming data. For example slider filter min/max values are coming in as string even though they are numbers in reality.

There are multiple cases this happens. There are also boolean values coming from API "true" or "false" strings.

Hi, we are using the @klevu-core v1.1.0 for the project, developed using React, as a dependency and we have a problem with filter options.

1. issue with price range filters, we could not find the detailed info and examples for it. using the updateSlider, filters were sent in payload but in the result the values ( end and start ) were returning null and records were empty.
2. the issue with filter toggle. filters get applied correctly and product records get updated, but the value ( selected ) isn't updated correctly, there are some issues with FilterManager. the same issue is noticeable on the demo page.

I wanted to ask for some suggestions or information about these issues if they are currently in development

Default id persists even though custom id is defined.

For example:

await KlevuFetch(
  trendingCategoryProducts("cat", { id: "test" })
)

Results will be with id trendingCategoryProducts

As it's most generic event that we can use to track all click events. Not just the ones that are coming from search.

Currently Axios is used to send analytical events to server. Axios support should be kept for Node.js functionality, but for browser side Beacon API should be used to prevent missing events.

https://calendar.perfplanet.com/2020/beaconing-in-practice/

V1 cannot use Beacon API as it requires POST message to be sent.

• Create ability to run AB test with library
• Bonus: Think of a way that it could be done in server side

Klevu Api supports to boost queries with another queries.

Some of the query functions do not have all search params definable. For example it is impossible to set fields to trendingCategoryProducts()

https://headless.developers.klevu.com/sdk/result-object#jk-click-events

A grid component that places given product components in a grid.

Required components

• #85

Steps to reproduce:

1. Go to https://headlessdemo.klevu.com
2. Click filter option
3. Click filter option again -> doesn't uncheck and state is wrong.