Web Components

Relewise Web Components allow you to quickly and easily implement a personalized Recommendation and Search experience on your site. The ready-to-use web components are building blocks that can also be highly customized and modified to suit your needs.

To get you started, we have collected a full walkthrough for installing and configuring the web components on GitHub; you can find the readme here.

Web Components: Recommendations

Relewise Web Components support the following recommendation types:

• Popular Products
• Products viewed after viewing Product
• Products purchased with Product

Web Components: Search

Relewise Web Components support the following search features:

• Filters: The Search web component can take the following filters: ProductCategoryIdFilter, BrandIdFilter, ProductAssortmentFilter, which will be applied on top of the filters you can define when initializing the Relewise UI.
• Localization and Layout: You can overwrite the search overlay to replace text strings with the language-specific localization you require for your site, as well as customize the layout of the component in part or in full with HTML.
• Product Search Overlay: Renders a search bar that displays results in an overlay.
• Product Search: Renders a search component with faceting and sorting options.
• Scroll Position: Toggles the ability for the page to remember where the user had scrolled to before navigation.
• Facets: Renders client-side faceting

Tracking User Behavior

Relewise Web Components enables you to track user behavior. Tracking user behavior does not render any UI components, but does send behavioral data to Relewise.

The different kinds of tracking possible via Web Components are:

• Product View
• Product category view
• Content view
• Content category view
• Brand view

Misc. Features

The Web Components can also be configured in the following ways:

• Customized styling of grid and product tile with CSS variables.
• Expanding on which properties to render by using selectedPropertiesSettings.
• Filtering on the basis of our Javascript SDK filter. These are applied before any potential search filters you might use.

Server Side Rendering frameworks

As of now, web components do not support server side rendering. Therefore, when using our web components in a framework that supports both server and client side rendering, make sure to render the Relewise components client side. This is often done by wrapping whatever needs to be rendered client side in a components of its own.

NextJs:

import dynamic from 'next/dynamic';

const RelewiseComponent = dynamic(() => import('../components/RelewiseComponent'), {
    ssr: false,
})

export default function Wrapper() {
    return (
        <RelewiseComponent />
    )
}

Nuxt:

<template>
  <div>
    <ClientOnly>
      <RelewiseComponent></RelewiseComponent>
    </ClientOnly>
  </div>
</template>

<script lang="ts">
import type { ClientOnly, RelewiseComponent } from '#build/components';
</script>