Skip to content

list_grid

The list_grid macro is used to render a list of tile elements in a form of a grid.

Definition

{% list_grid(itemsList, options) %}

Input parameters

itemsList

itemsList represents a template of items being passed to a list grid. It is usually created with the help of tile macros like product_tile.

options

object represents an object of list grid options

Option key Type Default Required Description
options.grid object null yes Settings of the product list grid for different screen resolutions
options.classNames string "" no List of classes that will be added to the list grid

options.grid

object represents settings of the product list grid for different screen resolutions

Option key Type Default Required Description
options.grid.phoneItemsCountPerRow number - yes Number of items per row on a mobile screen resolution
options.grid.smallTabletItemsCountPerRow number - yes Number of items per row on a small tablet screen resolution
options.grid.tabletItemsCountPerRow number - yes Number of items per row on a tablet screen resolution
options.grid.laptopItemsCountPerRow number - yes Number of items per row on a laptop screen resolution
options.grid.desktopItemsCountPerRow number - yes Number of items per row on a desktop screen resolution
options.grid.specialTileSizePhone string - no Banner tile size for mobile devices (tile, 2horizontal, 2vertical, square)
options.grid.specialTileSizeTablet string - no Banner tile size for tablet devices (tile, 2horizontal, 2vertical, square)
options.grid.specialTileSizeLaptop string - no Banner tile size for laptop devices (tile, 2horizontal, 2vertical, square)
options.grid.specialTileSizeDesktop string - no Banner tile size for desktop devices (tile, 2horizontal, 2vertical, square)

Example

In this example we use a list grid to render a tile grid of products. In order to get the necessary product list we use a getProducts() method from Object Api. Then we create a template of tile items using the product_tile macro and use that template in our list grid.

{% from "@macros/list_grid.twig" import list_grid %}
{% from "@macros/product_tile.twig" import product_tile %}

{% set products = ObjectApi.getProducts() %}

{% set itemsList %}
    {% for product in products %}
        {{ product_tile(product, {
            instanceId: moduleInstance,
            imageSize: systemConfig.lSize
        }) }}
    {% endfor %}
{% endset %}

{{
    list_grid(
        itemsList,
        {
            grid: {
                phoneItemsCountPerRow: 1,
                smallTabletItemsCountPerRow: 2,
                tabletItemsCountPerRow: 2,
                laptopItemsCountPerRow: 4,
                desktopItemsCountPerRow: 5
            }
        }
    )
}}

Example

In this example we use a similar list grid to the previous example but we add a box class to the list grid giving it a border and some padding.

{% from "@macros/list_grid.twig" import list_grid %}
{% from "@macros/product_tile.twig" import product_tile %}

{% set products = ObjectApi.getProducts() %}

{% set itemsList %}
    {% for product in products %}
        {{ product_tile(product, {
            instanceId: moduleInstance,
            imageSize: systemConfig.lSize
        }) }}
    {% endfor %}
{% endset %}

{{
    list_grid(
        itemsList,
        {
            classNames: 'box',
            grid: {
                phoneItemsCountPerRow: 1,
                smallTabletItemsCountPerRow: 2,
                tabletItemsCountPerRow: 2,
                laptopItemsCountPerRow: 4,
                desktopItemsCountPerRow: 5
            }
        }
    )
}}

Macro source code

{% macro list_grid(itemsList, options) %}
    <div class="
            tile-grid
            tile-grid_l
            tile-grid_xs-{{ options.grid.phoneItemsCountPerRow }}
            tile-grid_sm-{{ options.grid.smallTabletItemsCountPerRow }}
            tile-grid_md-{{ options.grid.tabletItemsCountPerRow }}
            tile-grid_lg-{{ options.grid.laptopItemsCountPerRow }}
            tile-grid_xxl-{{ options.grid.desktopItemsCountPerRow }}
            special-tile-size-mobile-{{ options.grid.specialTileSizePhone }}
            special-tile-size-tablet-{{ options.grid.specialTileSizeTablet }}
            special-tile-size-laptop-{{ options.grid.specialTileSizeLaptop }}
            special-tile-size-desktop-{{ options.grid.specialTileSizeDesktop }}
            {{ options.classNames|join(' ') }}
        "
    >
        {{ itemsList }}
    </div>
{% endmacro %}

ObjectApi objects reference

ObjectApi methods reference