> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# WebComponents

> WEBSALE WebComponents with the ws- prefix: HTML and CSS building blocks for search, filtering and pagination easily embedded in storefront templates.

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**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-search-box> </ws-search-box>
```

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten)

***

## 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:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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.:

```json theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{
  "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:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<p>{{record.name}}</p>
<p>{{record.price}} €</p>
```

### Overview of the template placeholders

[Template placeholders](/en/ws-search/integration-in-die-templates-storefront/webcomponents/template-placeholder)

***

## 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:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<template id="resultItemTemplate">

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

</template>
```