Examples
React Examples
6min
reactjs examples this is our most feature rich example to highlight many of the features available in the klevu headless sdk click here to view our reactjs example live demo | code 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 search feature description link to example quick search example used to display search results as you type into a text field quicksearch tsx search results landing page example to show search results based on a keyword passed in the url searchresultpage tsx category navigation example display of products in a category/collection categorypage tsx single product search example of using search to query the data for a single product productpage tsx filters examples of filters to narrow down products based on product facets searchresultpage tsx load more results example of a load more button to request more products searchresultpage tsx analytics 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 searchresultpage tsx search product click event track the products that are clicked from search results searchresultpage tsx category navigation product click event track the products that are clicked from category pages categorypage tsx buy/purchase event track the products that are purchased checkoutpage tsx recommendations feature description link to example klevu merchant center recommendations add recommendations created within kmc homepage tsx similar products request similar products based on a product id productpage tsx utilities feature description link to example klevukmcsettings load your klevu merchant center settings into the browser's localstorage index tsx remixjs examples 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