Banner

A simple banner can be configured to appear depending on the context of the search.

Configuration

The banner entity is composed of the following fields:

Field	Description
`Active`	Indicates if the 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 important when there are 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:

{
  "search-result-layout.desktop": {
    "children": [
      "flex-layout.row#banner-one"
    ]
  },
  "search-banner#one": {
    "props": {
      "area": "one",
      "blockClass": "myBanner",
      "horizontalAlignment": "center"
    }
  },
  "flex-layout.row#banner-one": {
    "children": [
      "search-banner#one"
    ]
  }
}

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`