Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: updating Banner.md file #205

Merged
merged 2 commits into from
Jan 22, 2025
Merged

docs: updating Banner.md file #205

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c25da41
Update Banner.md
barbara-celi Dec 3, 2024
d110c9f
Applying LOC review
barbara-celi Jan 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 11 additions & 10 deletions docs/Banner.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# Banner

Banners is the Intelligent Search feature that displays banners on the search results page of the customer, depending on the context of the search.
Banner is the Intelligent Search feature that displays banners on the customer search results page, depending on the search context.

## Before you begin

Make sure you have added the `search` app to your theme dependencies in the `manifest.json` as shown below:
Make sure you have added the `search` app to your theme dependencies within the `manifest.json`, as shown below:

```json
"dependencies": {
Expand All @@ -16,22 +16,22 @@ Check the [Search](https://developers.vtex.com/docs/apps/vtex.search) app docume

## Configuration

The banner entity is composed by the following fields:
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, which can be `HTML` or `IMAGE`. |
| `Banner name` | Unique identifier for the banner. |
| `Type banner` | Specifies the type of banner, which can be either `HTML` or `IMAGE`. |
| `HTML` / `Image URL` | HTML code or image to be inserted. |
| `Area` | Indicates in which area the banner should appear. It is important when there are multiple banners in the same page. |
| `Area` | Indicates the section of the page where the banner will be displayed. It's important when multiple banners are present on 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:
Add the `search-banner` block to `search-result-layout.desktop` or `search-result-layout.mobile`. For example:

```json
{
Expand Down Expand Up @@ -59,11 +59,12 @@ Add the `search-banner` block to the `search-result-layout.desktop` or `search-r

| 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. | - |
| `area` | `String` | Indicates the area. It must match the area configured in the banner. | - |
| `blockClass` | `String` | Defines a custom class to the banner div. | - |
| `horizontalAlignment` | `String` | Defines the horizontal alignment for the banner. | `"center"` |

The possible values for `horizontalAlignment` are:

| Values |
| --------- |
| `"left"` |
Expand All @@ -72,7 +73,7 @@ The possible values for `horizontalAlignment` are:

## 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](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).
To apply CSS customizations to this and other blocks, follow the instructions in the guide [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).

| CSS Handles |
| -------------- |
Expand Down
Loading