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:

FieldDescription
ActiveIndicates if the banner is active or not.
Banner nameField used as an id.
Type bannerIndicates the banner type. It can be HTML or IMAGE.
HTML / Image URLHtml or image to be inserted.
AreaIndicates which area the banner should appear. It is important when there are multiple banners in the same page.
TermsList of terms for this banner.
PeriodThe period that this banner will be active.
AttributesList 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 nameTypeDescriptionDefault value
areaStringIdicates the area. It needs to match the area configured in the banner.-
blockClassStringDefines a custom class for the banner div.-
horizontalAlignmentStringDefines 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

Did this page help you?