CMS

Configurable CMS block

Screenshot_2020-04-29_at_19.12.41.png 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:

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.

Screenshot 2025-01-31 at 16.29.13.png
Visualization of the above_cart_steps_banner in a /cart page
Screenshot 2025-01-31 at 16.32.47.png
Visualization of the above_layout_content_banner on a homepage

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

Table of contents:

  1. Configuration


Screenshot_2020-04-29_at_19.12.41.png Configuration

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

Screenshot 2025-01-31 at 16.33.49.png
Visualization of the configurable block configuration

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

The

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.

info2.svg  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.

Featured products list

Screenshot_2020-04-29_at_19.12.41.png Getting started

In this article, you will learn about the featured products list. Featured products list functionality allows displaying new, selected, or Exponea products in the respective tabs on the home page of the website below the slider (1). This block is responsive, so products will be correctly visible both on desktop and mobile devices without additional input.

Screenshot 2025-02-06 at 11.27.01.png
Visualization of the featured products on the home page (desktop view)
Screenshot 2025-02-06 at 11.44.27.png
Visualization of the featured products on the home page (mobile view)

All possible operations to perform on the Featured products / list view can be done in the Filters (2), and Featured products / list (3) tabs.

Screenshot 2025-01-31 at 16.53.34.png
Visualization of the featured products / list

Table of contents:

  1. Filters section
  2. Featured products / list
  3. Adding new featured products
  4. Configuring featured products list
    1. Custom
    2. Bestsellers
    3. News
    4. Exponea recommendations


Screenshot_2020-04-29_at_19.12.41.png Filters section

The Filters section allows sorting of the featured products in the CMS module, based on the available filters. Below you will find a description of available filters

Screenshot 2025-02-06 at 11.59.46.png
Visualization of the filters tab in the Featured products / list module

After defining the above filters, select the Apply Filters button to get a list of sites according to the applied filters.  


Screenshot_2020-04-29_at_19.12.41.png Featured products / list

Below you will find a description of all possible actions you can perform in the featured products / list section.

Screenshot 2025-02-06 at 12.53.48.png
      Visualization of the select list section in the Featured products / list module


Screenshot_2020-04-29_at_19.12.41.png Adding new featured products list

Add button allows users to create a new featured products list. While creating a new featured products list, you can only set key features about the list, without the ability to add or remove products. In order to add or remove products to the list, you have to edit the desired featured products list. More about editing of the featured products list can be found in the Configuring featured products list chapter.

Below, you will find a description of all possible fields that can be edited while creating a new featured products list.

Screenshot 2025-02-06 at 12.55.44.png
Visualization of the adding of the featured products list

With all necessary fields filled, you can save the changes using the save button, and add the products to your list by editing it. More about editing the featured products list can be found in the Configuring featured products list chapter.


Screenshot_2020-04-29_at_19.12.41.png Configuring featured products list

As users are unable to add products to their featured products list during its creation, it is needed to edit the desired list. Below you will find different types of product lists.

Custom

Custom type allows users to add their desired products to the list and change their sort order.

Screenshot 2025-02-06 at 12.57.40.png
Visualization of the custom type

You can change the sort order of the products by using the drag & drop functionality.

Products will show alerts next ot their name in case of product having no stock, or being inactive. You can remove the products by pressing the "remove" buton.

Bestsellers

Bestsellers type works exactly like custom type, but has one additional tab, where products are visible with their sold quantity, which helps to decide which products should be visible. You can add products by pressing the "Add to list" button

Screenshot 2025-02-06 at 13.00.59.png
Visualization of the bestsellers type

In the Bestsellers propositions tab you can also hide the unwanted products by pressing the hide button.

You can change the sort order of the products by using the drag & drop functionality.

Products will show alerts next ot their name in case of product having no stock, or being inactive. You can remove the products by pressing the "remove" buton.

News

News type automatically adds and changes the products visible in the featured products list. It shows only the newest products.

Exponea recommendations

Exponea recommendations tab allows to select an Exponea product block from
CMS > Exponea / Recommend Product Block

info2.svg  RememberYou can learn about the Exponea functionality in the [UNDER CONSTRUCTION] article

POWERPNT_pGASDbDhfH.png
Visualization of the adding of the exponea recommendations type

Friendly URLs

Screenshot_2020-04-29_at_19.12.41.png Getting started

This article describes Friendly URLs and their aliases. Friendly URLs are links that are assigned to created content for example CMS pages, products, promotion pages or opensets.

Friendly URLs can have assigned aliases, which will redirect the user to the selected friendly URL using the custom-made alias.

To open the Blocks / list view, in the admin panel, navigate to:

CMS > Friendly URLs / list

In the Friendly URLs / list view, we can find one tab: Friendly / URLs (1)

Screenshot 2025-02-06 at 13.17.56.png
   Visualization of the Friendly URLs / list page

Friendly URL aliases are located in the:

CMS > Friendly URLs / Aliases

In the Friendly URLs / aliases view, we can find two tabs: Filters (2) and Friendly URLs / aliases (3)

Screenshot 2025-02-06 at 13.42.09.png
   Visualization of the Friendly URLs / aliases page

Table of contents:

  1. Friendly URLs / list
  2. Friendly URLs / Aliases
    1. Filters section
    2. Friendly URL / aliases section
    3. Adding a new alias
    4. Importing aliases


Screenshot_2020-04-29_at_19.12.41.png Friendly URLs / list

Friendly URLs / list section contains all the already assigned URLs from all the products, CMS pages, Opensets and Promotion pages.

Friendly URLs are created in their respective categories, for example creating a new CMS page with URL /New_CMS_Page will create and assign automatically a friendly URL /New_CMS_Page to the created CMS page.

Below you will find a description of all possible actions you can perform in the Select block section.

Screenshot 2025-02-06 at 13.55.09.png
   Visualization of the Friendly URLs section


Screenshot_2020-04-29_at_19.12.41.png Friendly URLs / aliases

The Friendly URLs / aliases section allows organizing the filtered aliases, editing them, and adding the new ones.

Aliases are alternative URLs that will redirect to the source URL. For example, if the source URL is a
"/Source_URL", and we create an alias "/New_link" customer can access the /Source_URL through the /Source_URL link and /New_link, as it redirect to the source link.

Filters section

The Filters section allows sorting of the aliases, based on the available filters.

Below you will find a description of each filter.

Screenshot 2025-02-06 at 13.50.11.png
   Visualization of the filters section in the Friendly URLs / aliases

After defining the above filters, select the Apply Filters button to get a list of sites according to the applied filters.  

Friendly URLs / aliases section

The Friendly URLs / aliases section allows organizing the filtered aliases, editing them, and removing of the unnecessary ones.

Below you will find a description of all possible actions you can perform in the Select block section.

Screenshot 2025-02-06 at 13.59.03.png
   Visualization of the Friendly URLs / aliases section

At the bottom of the page you will find a Mass removal tab, which contains the Remove all url aliases button.

Screenshot 2025-02-06 at 13.59.57.png
   Visualization of the Friendly URLs / aliases section

By pressing this button you will remove all aliases in the environment database without an ability to restore them. Please use this option only if previously created aliases have been exported beforehand and are ready to be imported.

Screenshot 2025-02-06 at 14.00.36.png
   Visualization of the Friendly URLs / aliases section

After pressing the Remove all url aliases button there is a pop-up that warns the user, that it is an irreversible process, and an additional confirmation is required by pressing the Yes, remove all button. This process at this point still can be cancelled by pressing the No button.

Adding a new alias

Add button allows users to create new aliases.

Screenshot 2025-02-06 at 14.01.16.png
   Visualization of the adding of the new aliases.

While creating a new alias or editing an existing one, you have to specify the:

For example, if you want customers to access the promotion page "/New_promotion" by URL "/New_link" we need to type "/New_link" to the Request path, and "/New_promotion" to the Target path.

After typing the necessary URLs you can save the changes with the "Save" button.

Importing aliases

Aliases can be imported using the import functionality. This can be done by pressing the import button in the CMS > Friendly URLs / Aliases, or by directly accessing Import / Export > Import and selecting the Aliases option.

POWERPNT_XwA3wbkmS9.png

   Visualization of the adding of the new aliases.

The prepared file needs to be in an xlsx format and it has to contain the following columns:

The request path and target path cannot contain exactly the same URL in the same row.

An example of an incorrect path:

request_path target_path
/Webpage /webpage

As both request_path and target_path contain exactly the same URL it will create a loop when accessing it. This option will result in an error when trying to import such an alias.

The import mechanism has validation, that automatically cancels the import of aliases if they contain the same URL in request_path and target_path as well as if the target_path doesn't start with a slash ("/").

The import mechanism can only add new aliases. For alias removal please remove the unnecessary aliases in CMS > Friendly URLs / Aliases by pressing the delete button next to the alias, or remove all aliases from the database by pressing the Remove all url aliases button, and import the correct aliases from an xlsx file.

Banner notifications

Getting started

This article describes Banners / list tab in the admin panel, which will allow users to create header and side notifications on the website. Notifications work like CMS blocks using HTML + CSS code, and can be activated on specific altshops.

There can be more than one header banner (1) visible at the same time. When the top banner is closed by the client, it will be not visible to the customer for configured in the System / Settings amount of days.

Only one side banner (2) can be visible, and it is determined by their sort order.

Screenshot 2025-02-07 at 12.20.36.png
   Visualization of the banners on the homepage (Desktop view)
Screenshot 2025-02-07 at 12.17.30.png
   Visualization of the banners on the homepage (Mobile view)

Table of contents:

  1. Configuring the banners
  2. System / settings configuration
  3. Customer perspective


Screenshot_2020-04-29_at_19.12.41.png Configuring the baanners

Top and side banners can be created and managed in the
CMS > Banners / list

info2.svg  RememberEvery created banner needs to be activated in the desired altshop. More about activating banners in the altshops can be found in the Banners / list - browsing and managing banners in altshop module article.

Screenshot 2025-02-07 at 12.37.03.png
   Visualization of the Banners / list tab

In the Banner / list tab,  it is possible to select the Show X entries (1) field to set the number of banners, displayed on one page (min 10 / max 100).

In this tab we can also find columns (2), that can be sorted, with basic information regarding the banners:

In order to create new banner, we need to click on the Add (3) button

It is possible to search for a desired banner by their name using the search box (4), change the pages when the number of banners is by default bigger than 10 (5), and see how many banners are currently visible on the page out of them all (6).

Screenshot 2025-02-07 at 12.38.45.png
   Visualization of the new banner creation

When creating new banner, we can specify:

In the content tab, we need to type HTML code in order for it to be visible on the website for the customer.

Example code for Top banner:

<div style="width: 100%">
<p style="text-align:center;">Connectes-vouz our creez votre compte pour profiter de vos <strong>avantages exclusifs</strong></p>
</div>

Example code for side banner:

<style type="text/css">.side-banner-content {
    height: 100%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
<div class="side-banner-content">
<p style="color: #fff;">Connectes-vouz our creez votre<br />
compte pour profiter de vos<br />
<strong>avantages exclusifs</strong></p>
</div>


With the correctly filled necessary fields and code, we can save the banner.


Screenshot_2020-04-29_at_19.12.41.png System / settings configuration

Layout banners can be closed by the customers, and they will reappear after a configured amount of time. It can be configured in the
System > System / settings > Built-in functions > Layout banners

Screenshot 2025-02-07 at 12.40.08.png
   Visualization of the Layout banners tab in the System / settings

There we can find two options, one for top banner and second one for side banners.