React Examples
This is our most feature rich example to highlight many of the features available in the Klevu Headless SDK.
To help better understand how to implement the Klevu Headless SDK into your new or existing React project we've organized the features into a table with links to the source code where they are implemented.
Feature | Description | Link to Example |
|---|---|---|
Quick Search | Example used to display search results as you type into a text field. | |
Search Results Landing Page | Example to show search results based on a keyword passed in the URL. | |
Category Navigation | Example display of products in a Category/Collection. | |
Single Product Search | Example of using search to query the data for a single product. | |
Filters | Examples of filters to narrow down products based on product facets. | |
Load More Results | Example of a Load More button to request more products. |
Analytics drive the Machine Learning Klevu uses to provide users the best results. It is important to track key user interactions and send this data to Klevu. Here are examples of how easy it is to implement using the Klevu Headless SDK.
Feature | Description | Link to Example |
|---|---|---|
SearchEvent | Track what was searched. | |
Search Product Click Event | Track the products that are clicked from search results. | |
Category Navigation Product Click Event | Track the products that are clicked from category pages. | |
Buy/Purchase Event | Track the products that are purchased. |
Feature | Description | Link to Example |
|---|---|---|
Klevu Merchant Center Recommendations | Add recommendations created within KMC. | |
Similar Products | Request similar products based on a product ID |
Feature | Description | Link to Example |
|---|---|---|
KlevuKMCSettings | Load your Klevu Merchant Center settings into the browser's localstorage. |
Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience.
Remix is a seamless server and browser runtime that provides snappy page loads and instant transitions by leveraging distributed systems and native browser features instead of clunky static builds. Built on the Web Fetch API (instead of Node) it can run anywhere. It already runs natively on Cloudflare Workers, and of course supports serverless and traditional Node.js environments, so you can come as you are.
In this example, we leverage the power of Server-Side Rendering and the Klevu Headless SDK to generate a complete ecommerce site.
Click here to view our RemixJS Example: Code