Box Filter Container component

add & filter teasers boxes to promote pages

page teaser boxes
source filtering via tags
front-end filtering via tags
ability to select and compare boxes

The Box Filter Container component is used to embed Page Teaser Boxes that are used to promote pages. There are several teaser types and their scrolling behaviour can be defined. Additionally, it is possible to offer front-end filters for the page visitor in order to reduce / filter the displayed boxes.

on this page:

CMS settings , Öffnet in neuem Fenster Step by step - general settings , Öffnet in neuem Fenster

Source filters , Öffnet in neuem Fenster Front-end filters , Öffnet in neuem Fenster

Box type , Öffnet in neuem Fenster Scrolling type , Öffnet in neuem Fenster

Comparison , Öffnet in neuem Fenster

The Box filter container component serves as a container to display page teasers that can be filtered by the page visitor in the front end. To add teaser boxes, it is not necessary to select each teaser box individually. It is possible to define a source path and all created teasers that that lie underneath this path are automatically added. The source path selection can be filtered by source filter tags, meaning that only pages are added that contain a certain tag.

Example:

go to top

Editorial hint:

Use Box Filter Container without front-end filtering

It is also possible to use the Box filter container without the front-end filtering options. In this use case, simply choose the source path with the respective teasered pages, set no filters and the display will be similar to the one in the component Box container. The big difference is, that only one source path must be added and the component chooses its boxes by the defined tags.

tab: General

In the tab General, the front end display related options can be set, such as the box or scrolling type.

tab: Source

In the Source tab, the source of the page teaser boxes is defined (which pages with their teasers should be considered). It is possible to add multiple source paths with the option to choose which child pages of the defined path should be chosen. Additionally, it is possible to filter the Page Teaser Boxes from the chosen path by adding Source filter tags (only take a box with a certain tag) or to use the Exclude Filter Tags option (in order to exclude a box with a certain tag).

These source filtering options can be very handy in order not to have to define each single teaser page but simply choose a parent page as source filter and then define that only the teasers of the pages XY and XZ shall be chosen. Of course, prior to using this feature, all standard content page templates with page teasers must be tagged accordingly.

tab: Filter

In the Filter tab, it is possible to add multiple front end filters that offer the visitor to filter the displayed page teaser boxes. There are two filter types: tag/category and full text search (currently not implemented yet). For the tag/category filters, it is possible to define if they are rendered as buttons, checkboxes or dropdowns.

The site visitor can then filter the offered teaser boxes accoring to his/her desires, e.g. the box filter container contains all available products of an entity and the page visitor can then filter the boxes by conditions or target audience other preferences...

tab: Comparison

In the Comparison tab, it is possible to add a defined Comparison Set, that has previously been created by a Comparison Set component in the Comparison Set Configuration Page.

The Comparison Set defines the fields that shall be compared with each other.

tab: Labels

In the Labels tab, some filter search related labels must be defined.

tab: Spacing

go to top

1

2

3

4

5

6

go to top

The Comparison feature allows the website visitor to select up to X boxes in order to group them in a side by side view in a modal overlay. By doing so, it is possible to compare a defined set of values of the boxes next to each other in order to make a choice for e.g. a promoted product or offer.

To set up the feature in GEM, besides the Page Teaser Boxes themselves, it is necessary to configure the Comparison Sets Configuration Page (to be found under /configuration), the Comparison Configuration Page component (to be found in the Page Teaser Configuration of a Standard Content Page) and the Comparisons Sets element in the Box Filter Container component.

As a first step, a Comparison Set has to be created. In this set, the WHAT FIELDS shall be compared with each other is defined. These fields consist of a label and a type, such as Text, Number or Percentage. So the type defines how the values to be compared with shall be displayed. Once the set is set-up, the WHERE is defined by adding the set to the Box Filter Container component where the acutal comparing takes place. Additionally, some labels have to be filled in. As a third step, the WHAT VALUES shall be compared must be defined. So for every Teaser Box, that shall be available for Comparison, the comparable values can be set in the Page Teaser Configuration.

Once everything is set up properly, for every box that offers the Comparison, the Add To Compare checkbox is displayed on the bottom of the box. As soon as more than 1 box is added, the Compare button becomes active. Pressing the button opens a modal overlay where the defined values of the chosen boxes can be compared with each other. The title displayed over each column is the Page Title itself and the label of the action button below is set in the tab Labels of the Box Filter Container.

Comparison example

Comparison Sets Configuration Page template / Configuration Set component - WHAT FIELDS

This configuration page consists of only one template: Comparison Set and it is used to create the Configuration Sets. These sets define the labels and the fields by what the boxes shall be compared with in the Comparison overlay.

Please see the Comparison Sets Configuration Page template help pages for more information.

Page Teaser Configuration: Comparison Configuration component - WHAT VALUES

In the Page Teaser Configuration, a Comparion Configuration component can be added in order to choose the previously, in the Comparions Configuration Page created Comparison Set. By doing so, it is possible to define the values that shall be compared with each other in the Comparison overlay.

Please see the Page Teaser Configuration help pages for more information.