This page is about version 1.0.8 of the app, which is not the most recent version. The latest stable version is 2.18.1.
A simple banner with that can configured to appear depending on the context of the search.
Configuration
The banner entity is composed by the following fields:
| Field | Description |
|---|---|
Active | Indicates if banner is active or not. |
Banner name | Field used as an id. |
Type banner | Indicates the banner type. It can be HTML or IMAGE. |
HTML / Image URL | Html or image to be inserted. |
Area | Indicates which area the banner should appear. It is importante when there is multiple banners in the same page. |
Terms | List of terms for this banner. |
Period | The period that this banner will be active. |
Attributes | List of selected attributes for this banner. |
Usage
Add the search-banner block to the search-result-layout.desktop or search-result-layout.mobile. For example:
_15"search-result-layout.desktop": {_15 "children": [_15 "flex-layout.row#banner-one",_15 ],_15 "search-banner#one": {_15 "props": {_15 "area": "one",_15 "blockClass": "myBanner",_15 "horizontalAlignment": "center"_15 }_15 },_15 "flex-layout.row#banner-one": {_15 "children": ["search-banner#one"]_15 },_15}
Props
| Prop name | Type | Description | Default value |
|---|---|---|---|
area | String | Idicates the area. It needs to match the area configured in the banner. | - |
blockClass | String | Defines a custom class for the banner div. | - |
horizontalAlignment | String | Defines the horizontal alignment for the banner. | "center" |
The possible values for horizontalAlignment are:
| Values |
|---|
"left" |
"right" |
"center" |
Customization
In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.
| CSS Handles |
|---|
searchBanner |