This page is about version 2.4.0 of the app, which is not the most recent version. The latest stable version is 2.18.3.
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:
_19{_19 "search-result-layout.desktop": {_19 "children": [_19 "flex-layout.row#banner-one"_19 ]_19 },_19 "search-banner#one": {_19 "props": {_19 "area": "one",_19 "blockClass": "myBanner",_19 "horizontalAlignment": "center"_19 }_19 },_19 "flex-layout.row#banner-one": {_19 "children": [_19 "search-banner#one"_19 ]_19 }_19}
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 |