Skip to content

Roster Product Bestsellers

roster_product_bestsellers module is used to display tile slider with best-selling products.

Configuration parameters

title

string Title of the module. If not specified title won't be displayed.

displayDescription

int if set to 1 module description will be displayed.

description

string Description of the module. If not specified description won't be displayed.

numberOfProductsToShow

int Number which define how many product tiles should be displayed in slider. Maximum value is 16.

phoneProductsCountPerRow

int An indicator of how many products should fit in one row of the grid on phone resolution.

tabletProductsCountPerRow

int An indicator of how many products should fit in one row of the grid on tablet resolution.

laptopProductsCountPerRow

int An indicator of how many products should fit in one row of the grid on laptop resolution.

desktopProductsCountPerRow

int An indicator of how many products should fit in one row of the grid on desktop resolution.

hasArrowsOnMobile

int if set to 1 navigation arrows will be displayed on mobile view.

hasFavouriteIcon

int if set to 1 the favourite icon will be displayed

hasSkuCode

int if set to 1 a sku code will be displayed

hasProducerCode

int if set to 1 a producer code will be displayed

hasProducerName

int if set to 1 a producer name will be displayed

hasRegularPriceWhilePromotionActive

int if set to 1 the regular price will be displayed on products undergoing a promotion

hasPercentageDiscountValue

int if set to 1 a percentage value of the discount will be displayed on products undergoing promotion

hasTaxInfo

int if set to 1 tax info will be displayed

hasUnitPrice

int if set to 1 the unit price will be displayed

hasPriceWithoutDeliveryInfo

int if set to 1 the information about unaccounted shipping costs will be displayed

hasAddToBasketButton

int if set to 1 add to basket button will be displayed

hasAvailabilityStatus

int if set to 1 the availability status will be displayed

shouldShortenLongProductName

int if set to 1 a long product name will be trimmed to take no more than two lines

Module source code

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

{% set maxProductsToShow = 16 %}
{% set productsPerPageDesktop = moduleConfig.desktopProductsCountPerRow|default(4) %}
{% set productsPerPageLaptop = moduleConfig.laptopProductsCountPerRow|default(3) %}
{% set productsPerPageTablet = moduleConfig.tabletProductsCountPerRow|default(3) %}
{% set productsPerPageMobile = moduleConfig.phoneProductsCountPerRow|default(1) %}

{% set productsToShow = moduleConfig.numberOfProductsToShow > maxProductsToShow ? maxProductsToShow : moduleConfig.numberOfProductsToShow %}

{% set bestsellingProducts = ObjectApi.getBestsellingProducts(productsToShow) %}
{% set moduleInstanceId = 'roster-product-bestsellers-' ~ moduleInstance %}

{% set productsVisible = productsToShow > bestsellingProducts.count ? bestsellingProducts.count : productsToShow %}

{%
    set bestsellerProductsSliderSettings = {
        "perPage": productsPerPageDesktop,
        "arrows": productsVisible > productsPerPageDesktop,
        "pagination": true,
        "hasArrowsOnMobile": moduleConfig.hasArrowsOnMobile == '1',
        "breakpoints": {
            1440: {
                "perPage": productsPerPageLaptop,
                "arrows": productsVisible > productsPerPageLaptop
            },
            1000: {
                "perPage": productsPerPageTablet,
                "arrows": productsVisible > productsPerPageTablet
            },
            576: {
                "perPage": productsPerPageMobile
            }
        }
    }
%}

{%
    set productTileSettings  = {
        "hasFavouriteIcon": moduleConfig.hasFavouriteIcon == '1',
        "hasSkuCode": moduleConfig.hasSkuCode == '1',
        "hasProducerCode": moduleConfig.hasProducerCode == '1',
        "hasProducerName": moduleConfig.hasProducerName == '1',
        "hasRegularPriceWhilePromotionActive": moduleConfig.hasRegularPriceWhilePromotionActive == '1',
        "hasPercentageDiscountValue": moduleConfig.hasPercentageDiscountValue == '1',
        "hasTaxInfo": moduleConfig.hasTaxInfo == '1',
        "hasUnitPrice": moduleConfig.hasUnitPrice == '1',
        "hasPriceWithoutDeliveryInfo": moduleConfig.hasPriceWithoutDeliveryInfo == '1',
        "hasAddToBasketButton": moduleConfig.hasAddToBasketButton == '1',
        "hasAvailabilityStatus": moduleConfig.hasAvailabilityStatus == '1',
        "shouldShortenLongProductName": moduleConfig.shouldShortenLongProductName == '1'
    }
%}


{% set sliderItemsTemplate %}
    {% for product in bestsellingProducts %}
        <li class="splide__slide">
            {{ product_tile(product, productTileSettings|merge({ instanceId: moduleInstanceId, imageSize: systemConfig.lSize })) }}
        </li>
    {% endfor %}
{% endset %}

{% if not bestsellingProducts|length == 0 %}
    <div class="bestseller-products">
        {% if moduleConfig.title %}
            <h2 class="module__header">
                {{ module_accordion_toggler({ title: moduleConfig.title, isDisabled: true }) }}
            </h2>
        {% endif %}

        {% if moduleConfig.description and moduleConfig.displayDescription == '1' %}
            <div class="grid__col grid__col_xs-12 grid__col_md-10">
                <span class="module__description">{{ moduleConfig.description }}</span>
            </div>
        {% endif %}

        {{
            slider(sliderItemsTemplate, {
                id: "bestseller-#{moduleInstance}",
                sliderConfig: bestsellerProductsSliderSettings
            })
        }}
    </div>
{% endif %}

Macros reference

Used Object Api methods

Used styles

Module configuration schema

[
    {
        "state": "unfolded",
        "label": "General settings",
        "elements": [
            {
                "type": "infobox",
                "name": "infobox",
                "options": {
                    "type": "blank",
                    "message": "#### Related settings in the admin panel%s- mechanism for marking products as bestseller in [product settings](%s)",
                    "placeholderValues": [
                        "\n",
                        "\/admin\/configProducts"
                    ]
                }
            },
            {
                "type": "text",
                "name": "title",
                "label": "Module title",
                "defaultValue": "Bestsellers",
                "supportsTranslations": true,
                "isRequired": false
            },
            {
                "type": "checkbox",
                "name": "displayDescription",
                "label": "Display extra description under module title",
                "defaultValue": 0,
                "children": [
                    {
                        "type": "textarea",
                        "name": "description",
                        "label": "Description",
                        "supportsTranslations": 1,
                        "relations": [
                            {
                                "parentName": "displayDescription",
                                "parentValueToActionsMap": [
                                    {
                                        "value": 0,
                                        "actions": ["setHidden", "setDisabled"]
                                    },
                                    {
                                        "value": 1,
                                        "actions": ["setVisible", "setAvailable"]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                "type": "number",
                "name": "numberOfProductsToShow",
                "label": "Number of products in the module",
                "labelDescription": "Max. 16.",
                "isRequired": 1,
                "defaultValue": 16,
                "validators": [
                    { "type": "int" },
                    { "type": "greaterEqThan", "options": { "min": 1} },
                    { "type": "lessEqThan", "options": { "max": 16} }
                ]
            },
            {
                "type": "header",
                "name": "headerMobile",
                "label": "Mobile",
                "options": {
                    "icon": "phone"
                },
                "children": [
                    {
                        "type": "number",
                        "name": "phoneProductsCountPerRow",
                        "label": "Number of products in the row",
                        "labelDescription": "Max. 2.",
                        "defaultValue": 1,
                        "validators": [{ "type": "positiveNumber" }, { "type": "int" }, { "type": "lessEqThan", "options": { "max": 2} }]
                    }
                ]
            },
            {
                "type": "header",
                "name": "headerTablet",
                "label": "Tablet",
                "options": {
                    "icon": "tablet"
                },
                "children": [
                    {
                        "type": "number",
                        "name": "tabletProductsCountPerRow",
                        "label": "Number of products in the row",
                        "labelDescription": "Max. 4.",
                        "defaultValue": 3,
                        "validators": [
                            { "type": "int" },
                            { "type": "greaterEqThan", "options": { "min": 1} },
                            { "type": "lessEqThan", "options": { "max": 4} }
                        ]
                    }
                ]
            },
            {
                "type": "header",
                "name": "headerLaptop",
                "label": "Laptop",
                "options": {
                    "icon": "laptop"
                },
                "children": [
                    {
                        "type": "number",
                        "name": "laptopProductsCountPerRow",
                        "label": "Number of products in the row",
                        "labelDescription": "Max. 5.",
                        "isRequired": 1,
                        "defaultValue": 3,
                        "validators": [{ "type": "positiveNumber" }, { "type": "int" }, { "type": "lessEqThan", "options": { "max": 5} }]
                    }
                ]
            },
            {
                "type": "header",
                "name": "headerDesktop",
                "label": "Desktop",
                "options": {
                    "icon": "desktop"
                },
                "children": [
                    {
                        "type": "number",
                        "name": "desktopProductsCountPerRow",
                        "label": "Number of products in the row",
                        "labelDescription": "Max. 6.",
                        "isRequired": 1,
                        "defaultValue": 4,
                        "validators": [{ "type": "positiveNumber" }, { "type": "int" }, { "type": "lessEqThan", "options": { "max": 6} }]
                    }
                ]
            },
            {
                "type": "header",
                "name": "headerMobileDevices",
                "label": "Mobile devices",
                "options": {
                    "icon": "mobile_devices"
                },
                "children": [
                    {
                        "type": "checkbox",
                        "name": "hasArrowsOnMobile",
                        "label": "Enable navigation arrows",
                        "defaultValue": 1
                    }
                ]
            }
        ]
    },
    {
        "state": "unfolded",
        "label": "Product tile",
        "elements": [
            {
                "type": "infobox",
                "name": "infoboxProductTile",
                "options": {
                    "type": "blank",
                    "message": "#### Related settings in the admin panel%s- changing phrases in [translations](%s)%s- enabling vendor's code, 30-day lowest price and unit price calculation in [product settings](%s)%s- displaying net\/gross prices in the [price and VAT rate settings](%s)%s- enabling the ability to buy in [order settings](%s)%s- setting product [availability statuses](%s)",
                    "placeholderValues": [
                        "\n",
                        "\/admin\/configLanguages\/list",
                        "\n",
                        "\/admin\/configProducts",
                        "\n",
                        "\/admin\/configTax\/list",
                        "\n",
                        "\/admin\/configShopping",
                        "\n",
                        "\/admin\/configAvailabilities\/list"
                    ]
                }
            },
            {
                "type": "header",
                "name": "productOptions",
                "label": "Display for every product:",
                "children": [
                    {
                        "type": "checkbox",
                        "name": "hasFavouriteIcon",
                        "label": "\"Add to favourites\" icon",
                        "defaultValue": 1
                    },
                    {
                        "type": "checkbox",
                        "name": "hasSkuCode",
                        "label": "product code\/SKU",
                        "defaultValue": 0
                    },
                    {
                        "type": "checkbox",
                        "name": "hasProducerCode",
                        "label": "vendor's code",
                        "defaultValue": 0
                    },
                    {
                        "type": "checkbox",
                        "name": "hasProducerName",
                        "label": "vendor's name",
                        "defaultValue": 1
                    },
                    {
                        "type": "checkbox",
                        "name": "hasUnitPrice",
                        "label": "unit price",
                        "defaultValue": 0
                    },
                    {
                        "type": "checkbox",
                        "name": "hasRegularPriceWhilePromotionActive",
                        "label": "regular price (for products on sale)",
                        "defaultValue": 0
                    },
                    {
                        "type": "checkbox",
                        "name": "hasPercentageDiscountValue",
                        "label": "by how many percent the price has changed (for products on sale)",
                        "defaultValue": 1
                    },
                    {
                        "type": "checkbox",
                        "name": "hasTaxInfo",
                        "label": "tax class (if there is only one price: net or gross)",
                        "defaultValue": 0,
                        "hint": "Tax Class rate will be displayed regardless of these settings, if the store displays the net and gross prices at the same time."
                    },
                    {
                        "type": "checkbox",
                        "name": "hasPriceWithoutDeliveryInfo",
                        "label": "information that prices are quoted without delivery costs",
                        "defaultValue": 0
                    },
                    {
                        "type": "checkbox",
                        "name": "hasAddToBasketButton",
                        "label": "\"Add to cart\" button",
                        "defaultValue": 1
                    },
                    {
                        "type": "checkbox",
                        "name": "hasAvailabilityStatus",
                        "label": "availability status",
                        "defaultValue": 0
                    }
                ]
            },
            {
                "type": "checkbox",
                "name": "shouldShortenLongProductName",
                "label": "Shorten long product names",
                "defaultValue": 1
            }
        ]
    }
]