Roster Product Promotions¶
Availability: All contexts
roster_product_promotions module is used to display tile slider with products that are currently undergoing a promotion.
Configuration parameters¶
title¶
string Title of the module. If not specified title won't be displayed.
shouldDisplayHeadingUnderline¶
int (optional) If set to 1 the header underline will 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.
shouldDisplayLink¶
int if set to 1 a link to a full products list will be rendered next to the module header.
displayMode¶
carousel - renders the products roster in a carousel view (scrollable products)
list - renders the products roster in a list view (all products visible)
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.
shouldDisplayLink¶
int if set to 1 the link to all products undergoing promotion will appear next to the module header.
linkTitle¶
string Represents the title of the link next to the module header.
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
hasImageBackgroundColor¶
if set to 1 allows to set a background color behind photo (for photos with transparency)
imageBackgroundColor¶
colorPicker Allows you to select the background color for the product image.
Module source code¶
{% from "@macros/slider.twig" import slider %}
{% from "@macros/list_grid.twig" import list_grid %}
{% from "@macros/header.twig" import header %}
{% from "@macros/product_tile.twig" import product_tile %}
{% set title = moduleConfig.title %}
{% 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 promotionsProducts = ObjectApi.getSpecialOffers(productsToShow) %}
{% set allPromotionsProductsUrl = ObjectApi.getShopUrls().promotionsUrl %}
{% set moduleInstanceId = 'roster-product-promotions-' ~ moduleInstance %}
{% set productsVisible = productsToShow > promotionsProducts.count ? promotionsProducts.count : productsToShow %}
{%
set promotionsProductsSliderSettings = {
"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
}
},
"i18n": {
"prev": translate('Previous products'),
"next": translate('Next products'),
"first": translate('Next products'),
"last": translate('Previous products'),
"slideLabel": translate('Product %s of %s', ['%s', '%s'])
}
}
%}
{%
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',
"imageBackgroundColor": moduleConfig.hasImageBackgroundColor ? moduleConfig.imageBackgroundColor : ''
}
%}
{% if not promotionsProducts|length == 0 %}
<div class="promotions-products">
{% if title %}
{{
header({
level: 'h2',
content: title,
linkUrl: moduleConfig.shouldDisplayLink == '1' ? allPromotionsProductsUrl : null,
linkTitle: moduleConfig.linkTitle,
hasUnderline: moduleConfig.shouldDisplayHeadingUnderline == '1',
classNames: 'promotions-products__header products__header'
})
}}
{% 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 %}
{% if moduleConfig.displayMode == 'carousel' %}
{% set sliderItemsTemplate %}
{% for product in promotionsProducts %}
<li class="splide__slide">
{{ product_tile(product, productTileSettings|merge({ instanceId: moduleInstanceId, imageSize: systemConfig.lSize })) }}
</li>
{% endfor %}
{% endset %}
{{
slider(sliderItemsTemplate, {
id: "promotions-#{moduleInstance}",
sliderConfig: promotionsProductsSliderSettings,
visibleItems: productsVisible
})
}}
{% elseif moduleConfig.displayMode == 'list' %}
{% set listItemsTemplate %}
{% for product in promotionsProducts %}
{% if loop.index <= productsVisible %}
{{ product_tile(product, productTileSettings|merge({ instanceId: moduleInstanceId, imageSize: systemConfig.lSize })) }}
{% endif %}
{% endfor %}
{% endset %}
{{
list_grid(listItemsTemplate, {
classNames: 'promotions-products__list tile-grid_products',
grid: {
phoneItemsCountPerRow: productsPerPageMobile,
smallTabletItemsCountPerRow: productsPerPageTablet,
tabletItemsCountPerRow: productsPerPageTablet,
laptopItemsCountPerRow: productsPerPageLaptop,
desktopItemsCountPerRow: productsPerPageDesktop,
}
}
)
}}
{% endif %}
</div>
{% endif %}
Macros reference¶
Used Object Api methods¶
Used styles¶
Module configuration schema¶
[
{
"state": "unfolded",
"label": "General settings",
"elements": [
{
"type": "text",
"name": "title",
"label": "Module heading content",
"defaultValue": "Products on sale",
"supportsTranslations": true,
"isRequired": false
},
{
"type": "checkbox",
"name": "shouldDisplayHeadingUnderline",
"label": "Add underline below the heading",
"defaultValue": 1
},
{
"type": "checkbox",
"name": "displayDescription",
"label": "Display additional description below the heading",
"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": "checkbox",
"name": "shouldDisplayLink",
"label": "Display a link to the page with all products in this group",
"defaultValue": 1,
"children": [
{
"type": "text",
"name": "linkTitle",
"label": "Link name",
"defaultValue": "All products on sale",
"isRequired": 1,
"supportsTranslations": 1,
"relations": [
{
"parentName": "shouldDisplayLink",
"parentValueToActionsMap": [
{
"value": 0,
"actions": [
"setHidden",
"setDisabled",
"setOptional"
]
},
{
"value": 1,
"actions": [
"setVisible",
"setAvailable",
"setRequired"
]
}
]
}
]
}
]
},
{
"type": "radio",
"name": "displayMode",
"label": "Display mode",
"defaultValue": "carousel",
"options": {
"radioOptions": [
{
"key": "carousel",
"label": "Carousel (scrollable products)"
},
{
"key": "list",
"label": "List (all products visible)"
}
]
}
},
{
"type": "number",
"name": "numberOfProductsToShow",
"label": "Number of products in the module",
"labelDescription": "Max. 16.",
"isRequired": 1,
"defaultValue": 16,
"hint": {
"message": "By default, the first 16 products will be displayed in the order set in [product settings](%s). If there are more products, the list will be limited to the selected number.",
"placeholderValues": [
"\/admin\/configProducts"
]
},
"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": "int"
},
{
"type": "greaterEqThan",
"options": {
"min": 1
}
},
{
"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.",
"defaultValue": 3,
"validators": [
{
"type": "int"
},
{
"type": "greaterEqThan",
"options": {
"min": 1
}
},
{
"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.",
"defaultValue": 4,
"validators": [
{
"type": "int"
},
{
"type": "greaterEqThan",
"options": {
"min": 1
}
},
{
"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
}
],
"relations": [
{
"parentName": "displayMode",
"parentValueToActionsMap": [
{
"value": "carousel",
"actions": [
"setVisible",
"setAvailable"
]
},
{
"value": "list",
"actions": [
"setHidden",
"setDisabled"
]
}
]
}
]
}
]
},
{
"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
},
{
"type": "checkbox",
"name": "hasImageBackgroundColor",
"label": "Add background color behind photo",
"defaultValue": 0,
"children": [
{
"type": "colorPicker",
"name": "imageBackgroundColor",
"label": "Background color behind photo",
"defaultValue": "@globalBodyBackgroundColor",
"labelDescription": "For photos with transparency",
"options": {
"allowVariables": true
},
"relations": [
{
"parentName": "hasImageBackgroundColor",
"parentValueToActionsMap": [
{
"value": 0,
"actions": [
"setHidden",
"setDisabled"
]
},
{
"value": 1,
"actions": [
"setVisible",
"setAvailable"
]
}
]
}
]
}
]
}
]
}
]