Loyalty List Context Products¶
Use loyalty_list_context_products module to display a list of products within a loyalty program list context with pagination and a possibility to select a sort option.
Configuration parameters¶
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.
shouldShowPaginationAboveProductList¶
int if set to 1 an additional small pagination will be rendered above the list next to the sort select.
hasFavouriteIcon¶
int if set to 1 the favourite icon is displayed
hasSkuCode¶
int if set to 1 a sku code is displayed
hasProducerCode¶
int if set to 1 a producer code is displayed
hasProducerName¶
int if set to 1 a producer name is displayed
hasAddToBasketButton¶
int if set to 1 add to basket button is displayed
hasAvailabilityStatus¶
int if set to 1 the availability status is 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/list_grid.twig" import list_grid %}
{% from "@macros/pagination.twig" import pagination %}
{% from "@macros/sort_select.twig" import sort_select %}
{% from "@macros/loyalty_product_tile.twig" import loyalty_product_tile %}
{% from "@macros/switch.twig" import switch %}
{% set productList = ObjectApi.getProducts(systemConfig.productsCount) %}
{% set shopUrls = ObjectApi.getShopUrls() %}
{% set sortList = ObjectApi.getProductsListSortTypes() %}
{% set moduleInstanceId = 'loyalty_list_context_products-' ~ moduleInstance %}
{%
set gridSettings = {
phoneItemsCountPerRow: moduleConfig.phoneProductsCountPerRow,
smallTabletItemsCountPerRow: moduleConfig.phoneProductsCountPerRow,
tabletItemsCountPerRow: moduleConfig.tabletProductsCountPerRow,
laptopItemsCountPerRow: moduleConfig.laptopProductsCountPerRow,
desktopItemsCountPerRow: moduleConfig.desktopProductsCountPerRow,
}
%}
{% set hasMultiplePages = productList.pages > 1 %}
{% set hasFirstPageButton = hasMultiplePages and productList.page != 1 %}
{% set hasPrevPageButton = hasMultiplePages and productList.page != 1 %}
{% set hasNextPageButton = hasMultiplePages and productList.page != productList.pages %}
{% set hasLastPageButton = hasMultiplePages and productList.page != productList.pages %}
{%
set basePaginationOptions = {
hasFirstPageButton: hasFirstPageButton,
prevPageButtonOptions: {
hasPrevPageButton: hasPrevPageButton
},
nextPageButtonOptions: {
hasNextPageButton: hasNextPageButton
},
hasLastPageButton: hasLastPageButton
}
%}
{%
set topPaginationOptions = basePaginationOptions|merge({
hasFirstPageButton: false,
hasLastPageButton: false,
classNames: ['pagination_top'],
id: "loyalty-list-context-products-pagination-top-#{moduleInstance}",
name: "loyalty-list-context-products-pagination-top-#{moduleInstance}"
})
%}
{%
set bottomPaginationOptions = basePaginationOptions|merge({
prevPageButtonOptions: basePaginationOptions.prevPageButtonOptions|merge({
prevButtonText: translate('Previous')
}),
nextPageButtonOptions: basePaginationOptions.nextPageButtonOptions|merge({
nextButtonText: translate('Next')
}),
classNames: ['pagination_bottom'],
id: "loyalty-list-context-products-pagination-bottom-#{moduleInstance}",
name: "loyalty-list-context-products-pagination-bottom-#{moduleInstance}"
})
%}
{%
set productTileOptions = {
"hasFavouriteIcon": moduleConfig.hasFavouriteIcon,
"hasSkuCode": moduleConfig.hasSkuCode,
"hasProducerCode": moduleConfig.hasProducerCode,
"hasProducerName": moduleConfig.hasProducerName,
"hasAddToBasketButton": moduleConfig.hasAddToBasketButton,
"hasAvailabilityStatus": moduleConfig.hasAvailabilityStatus,
"shouldShortenLongProductName": moduleConfig.shouldShortenLongProductName
}
%}
{% set listItemsTemplate %}
{% for product in productList %}
{{ loyalty_product_tile(product, productTileOptions|merge({ instanceId: moduleInstanceId, imageSize: systemConfig.lSize })) }}
{% endfor %}
{% endset %}
{% if productList|length or filter == 1 %}
<a href="{{ shopUrls.loyaltyProductsListUrl }}{% if filter == 0 %}/1{% endif %}">
{{ switch({
label: translate('Show only products for available points'),
classNames: 'mb-xs-3',
checked: filter == 1
}) }}
</a>
{% endif %}
{% if productList|length %}
<article class="product-list loyalty-product-list">
<header class="product-list__header loyalty-product-list__header">
<div class="loyalty-product-list__actions-wrapper">
{{
sort_select(sortList, {
currentSortId: sort,
instanceId: moduleInstance
})
}}
</div>
{% if moduleConfig.shouldShowPaginationAboveProductList %}
{{ pagination(productList, topPaginationOptions) }}
{% endif %}
</header>
{{
list_grid(listItemsTemplate, {
grid: gridSettings,
className: 'product-list-grid loyalty-product-list-grid'
})
}}
<footer class="product-list__footer loyalty-product-list__footer">
{{ pagination(productList, bottomPaginationOptions) }}
</footer>
</article>
{% elseif filter == 1 %}
<span class="flash-message flash-message__notice">
{{ translate('Currently, you have too few points to redeem for a product.') }}
</span>
{% else %}
<span class="flash-message flash-message__notice">
{{ translate('Currently, there are no products you can redeem points for.') }}
</span>
{% endif %}
Macros reference¶
Used Object Api methods¶
Module configuration schema¶
[
{
"state": "unfolded",
"label": "General settings",
"elements": [
{
"type": "infobox",
"name": "infobox",
"options": {
"type": "blank",
"message": "#### Related settings%s##### in the admin panel:%s- changing phrases in [translations](%s)%s- enabling additional sorting option in [product settings](%s)%s%s##### in the Shoper Visual Editor:%s- number of products on page in the 'Theme settings' tab",
"placeholderValues": [
"\n",
"\n",
"\/admin\/configLanguages\/list",
"\n",
"\/admin\/configProducts",
"\n",
"\n",
"\n"
]
}
},
{
"type": "header",
"name": "headerMobile",
"label": "Mobile",
"options": {
"icon": "mobile_devices"
},
"children": [
{
"type": "number",
"name": "phoneProductsCountPerRow",
"label": "Number of products in the row",
"labelDescription": "Max. 2.",
"defaultValue": 1,
"validators": [
{ "type": "int" },
{ "type": "lessEqThan", "options": { "max": 2} },
{ "type": "greaterEqThan", "options": { "min": 1} }
]
}
]
},
{
"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": "lessEqThan", "options": { "max": 4} },
{ "type": "greaterEqThan", "options": { "min": 1} }
]
}
]
},
{
"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": "lessEqThan", "options": { "max": 5} },
{ "type": "greaterEqThan", "options": { "min": 1} }
]
}
]
},
{
"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": "lessEqThan", "options": { "max": 6} },
{ "type": "greaterEqThan", "options": { "min": 1} }
]
}
]
},
{
"type": "checkbox",
"name": "shouldShowPaginationAboveProductList",
"label": "Display additional pagination above the product list",
"defaultValue": 1
}
]
},
{
"state": "unfolded",
"label": "Product tile",
"elements": [
{
"type": "infobox",
"name": "infoboxProductTile",
"options": {
"type": "blank",
"message": "#### Related settings%s##### in the admin panel:%s- changing phrases in [translations](%s)%s- enabling vendor's code in [product settings](%s)%s- enabling the purchase option in [the orders settings](%s)%s- setting [product availability statuses](%s)%s%s##### in the Shoper Visual Editor:%s - thumbnail size (L) in the 'Theme settings' tab%s - height of the space for a photo in the 'Colors and styles' tab",
"placeholderValues": [
"\n",
"\n",
"\/admin\/configLanguages\/list",
"\n",
"\/admin\/configProducts",
"\n",
"\/admin\/configShopping\/list",
"\n",
"\/admin\/configAvailabilities\/list",
"\n",
"\n",
"\n",
"\n"
]
}
},
{
"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": "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
}
]
}
]