Web Components

Relewise Web Components are reusable, self-contained HTML extensions that enable you to quickly and easily implement a personalized recommendation and search experience on your site. These ready-to-use components are building blocks that can also be highly customized and modified to suit your needs.

A full walkthrough for installation and configuration is available on GitHub.

Web Components: Behavioral Tracking

Relewise Web Components enable you to track user behavior and send data to Relewise without rendering any UI components. The different kinds of tracking possible via Web Components are:

• Product View
• Product Category View
• Content View
• Content Category View
• Brand View

Web Components: Recommendations

Relewise Web Components support the following recommendation types:

• relewise-popular-products
• relewise-products-viewed-after-viewing-product
• relewise-purchased-with-product
• relewise-purchased-with-multiple-products
• relewise-personal-products
• relewise-recently-viewed-products

Web Components: Search

Relewise Web Components support the following search features:

• Product Search Overlay: Renders a search bar that displays results in an overlay. By default, search redirects are supported and activated when a user presses "Enter" and a redirect matches the search term.
• Product Search: Renders a search component with faceting and sorting options.
• Filters: The search components can take the following filters, which are applied on top of the filters defined when initializing the Relewise UI:
  • ProductCategoryIdFilter
  • BrandIdFilter
  • ProductAssortmentFilter
• useSearch() Function: The useSearch() function is used to start rendering search components. You can also call it with a configuration to specify which filters should be used.

Web Components: Attributes

Attributes are used to customize the behavior and appearance of the Web Components. Not all attributes are available on all components.

• displayed-at-location: Specifies where the recommendations or search results are being shown.
• number-of-recommendations: The number of products to render for recommendation components.
• number-of-products: The number of products to show in the results for search components.
• number-of-search-term-predictions: The number of search term predictions to show in the results overlay.
• since-minutes-ago: The time interval in minutes that popularity calculations should be based on.
• based-on: Defines the type of behavioral data for recommendations.
• target: A target for adding a specific configuration.
• search-page-url: The URL of your search page. When provided, a link to the search page will be present when results are found.
• debounce-time: The amount of time, in milliseconds, that must pass between requests to Relewise with a new search call.

Web Components: Styling

You can customize the styling of the Web Components using CSS variables and the ::part pseudo-element.

CSS Variables

Each component exposes a set of CSS variables that you can override to change its appearance. These variables are a convenient way to apply quick styling changes without writing complex CSS selectors. For example, you can change a component's background color or padding. A list of all available variables can be found in the component-specific documentation.

::part

For more fine-grained control, you can use the ::part pseudo-element to select and style internal elements of a component. The ::part selector is used to style a specific named part of an element in a shadow DOM. For example, a relewise-product-card component might expose a product-card part and a price part, allowing you to style those specific elements.

This provides a more powerful way to customize the component's look and feel, ensuring that your branding and design are reflected accurately.

Web Components: Miscellaneous Features

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

• Customized styling with CSS variables and ::part options.
• Expanding on which properties to render using selectedPropertiesSettings.
• Filtering based on the JavaScript SDK filter, which is applied before any potential search filters.

Server-Side Rendering (SSR) Frameworks

As of now, Relewise Web Components do not support server-side rendering. When using them with frameworks like Next.js or Nuxt, you must ensure the components are rendered on the client side.

Example for Next.js:

import dynamic from 'next/dynamic';

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

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

Example for Nuxt:

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