WebComponents

The WEBSALE WebComponents are reusable building blocks provided by WEBSALE. They automatically generate source code for HTML and CSS and simplify the integration of complex functions such as search, filtering, or pagination into the storefront templates.

UI components

Basic structure

Every WebComponent starts with the ws- prefix and follows the well-known HTML syntax. They must be opened and closed like HTML elements and can be supplemented with attributes or additional HTML elements in order to customize the functionality and design. Example of a simple WebComponent

<ws-search-box> </ws-search-box>

This component can be extended, for example by adding additional attributes or input fields inside the component:

<ws-search-box use-suggest="true">
    <input type="search" name="query" placeholder="Artikel suchen">
</ws-search-box>

CSS & styling

The UI components can automatically generate CSS classes that define the basic appearance. These classes can be transferred to your own CSS files and supplemented with further instructions to adapt the appearance to the individual shop design. However, some components do not generate their own classes and leave the styling entirely to the developers. This is described for the respective component.

Overview of the UI components

UI components

Template placeholders for dynamic content

Basic structure of the template placeholders

In addition to the visible UI components, the WebComponents also offer so-called template placeholders. These placeholders provide dynamic data from the search or other backend processes and are responsible for displaying content such as search results or product information. They are based on data bindings and output content only, without additional visual styling. An example of template placeholders:

<template id="resultItemTemplate">

        <h3>{{record.name}}</h3>
        <p>{{record.price}} €</p>

</template>

Here, {{record.name}} accesses the product name, while {{record.price}} displays the price from the search results. The available fields are provided in the JSON response of the search module.

Data binding with JSON

The data for the placeholders comes from a JSON object provided by the search API. This data can be included directly in the HTML template, e.g.:

{
  "results": [
    {
      "_index": "search_index_20241210063555",
      "_id": "402396",
      "_score": 40.209557,
      "_source": {
        "number": "402396",
        "prodindexbase": "402396",
        "name": "Hose",
        "price": "32.00",
        "brand": "Levis",
        "thumbnail": "https://www.hir-shop.de/produkte/medien/bilder/klein/B402396.jpg"
      }
    }
  ],
  "total": 2192
}

Access is done via record.fieldname, for example:

<p>{{record.name}}</p>
<p>{{record.price}} €</p>

Overview of the template placeholders

Template placeholders

React JS basis

The WebComponents are based on the React JS framework, which gives them extended functionality and efficient updating of the user interface. Thanks to this technology, React-specific features, such as the <template> tag, can also be used. An example of a React-based product display:

<template id="resultItemTemplate">

        <h3>{product.name}</h3>
        <p>{product.price} €</p>

</template>

WS-Search

Setup

Integration into templates (Storefront)

Web components – Template placeholders

Web components – UI components

UI components

Basic structure

CSS & styling

Overview of the UI components

Template placeholders for dynamic content

Basic structure of the template placeholders

Data binding with JSON

Overview of the template placeholders

React JS basis

​UI components

​Basic structure

​CSS & styling

​Overview of the UI components

​Template placeholders for dynamic content

​Basic structure of the template placeholders

​Data binding with JSON

​Overview of the template placeholders

​React JS basis

UI components

Basic structure

CSS & styling

Overview of the UI components

Template placeholders for dynamic content

Basic structure of the template placeholders

Data binding with JSON

Overview of the template placeholders

React JS basis