Configurable CMS block

Getting started

In this article, you can learn about configurable CMS block functionality, which will allow you to put and properly configure banners visible on a website. There are two defined CMS blocks:

• above_cart_steps_banner - Displays a configured banner only in a cart page (/cart).
• above_layout_content_banner - Displays a configured banner everywhere except the customer panel, cart page, and checkout.

As with every CMS block that is configured to be visible on a homepage it is important to make sure, that created CMS block has exactly the same name as provided above. If the CMS block has a different name it won't be displayed on a website.

Visualization of the above_cart_steps_banner in a /cart page

Visualization of the above_layout_content_banner on a homepage

  RememberYou can find more about CMS blocks creation and configuration in the CMS blocks article.

Table of contents:

1. Configuration

Configuration

The new banners are configured exactly like every CMS block, but they have one new field, which manages the properties of the block.

Visualization of the configurable block configuration

In order to see the new JSON field you have to select the configurable block type.

The CMS block configuration is a JSON field, which allows to configure few properties of created banners:

• visibility (string) - Sets if the selected block is visible for all users, only logged-in users, or only logged-out ones. Available options are: all, logged_in, logged_out
• closeable.position (string) - Sets the position of the close (X) button. Available positions are: top-right, top-left, bottom-right, bottom-left
• closeable.color (string) - Sets the close (X) button color. Available options are:
  • primary - Green.
  • secondary - Red.
• closeable.time (integer) - Sets after how many hours the banner will be visible to the customers again after they closed it.
• width (string) - A CMS block width option. There are three possible widths:
  • full - Banner is stretched to fit the entire width of the screen. Please remember, that a proper background image has to be prepared for it to fit.
  • full-bg - Banner has the same width as the container width, but the rest of the screen width is colored with a color set in the background parameter.
  • container - Banner width that fits the website layout. The banner width is set to 1248px for the desktop view - the same as the slider.
• background (string) - A background color that is visible when a full-bg width is selected. This value should be in hex i.e. #0AA78F
• bottomShadow (boolean) - A small shadow below the banner that is visible whenever widths full and full-bg are selected. This field accepts true and false values.

Example of a valid JSON:

{"visibility": "all", "closeable": {"position": "top-right", "color": "secondary", "time": 1}, "width": "full-bg", "background": "#0AA78F", "bottomShadow": true}

It is possible to configure these blocks to change their state according to users login status (logged in / logged out) and have them still visible for all groups in the visibility property. This needs to be coded in the CMS block HTML content.

  RememberYou can find examples of checking of the current cart value and verification of the user logged in / logged out status in the Public JS API article.