List Context Products¶
Use list_context_products module to display a list of products depending on the context you are in, with pagination and a possibility to select a sort option. The displayed products will differ depending on whether the module is placed in the context of a category, collection or promotion list. The displayed products will It uses sort_select macro, pagination macro and ist_grid macro.
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
hasRegularPriceWhilePromotionActive¶
int if set to 1 the regular price will be displayed on the product along with promotional price
hasPercentageDiscountValue¶
int if set to 1 a percentage value of the discount will be displayed on the product alongside the promotional price
hasTaxInfo¶
int if set to 1 tax info is displayed
hasUnitPrice¶
int if set to 1 the unit price is displayed
hasPriceWithoutDeliveryInfo¶
int if set to 1 the information about unaccounted shipping costs 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/product_tile.twig" import product_tile %}
{% set productList = ObjectApi.getProducts(systemConfig.productsCount) %}
{% set sortList = ObjectApi.getProductsListSortTypes() %}
{% set moduleInstanceId = '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: "list-context-products-pagination-top-#{moduleInstance}",
name: "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: "list-context-products-pagination-bottom-#{moduleInstance}",
name: "list-context-products-pagination-bottom-#{moduleInstance}"
})
%}
{%
set productTileOptions = {
"hasFavouriteIcon": moduleConfig.hasFavouriteIcon,
"hasSkuCode": moduleConfig.hasSkuCode,
"hasProducerCode": moduleConfig.hasProducerCode,
"hasProducerName": moduleConfig.hasProducerName,
"hasRegularPriceWhilePromotionActive": moduleConfig.hasRegularPriceWhilePromotionActive,
"hasPercentageDiscountValue": moduleConfig.hasPercentageDiscountValue,
"hasTaxInfo": moduleConfig.hasTaxInfo,
"hasUnitPrice": moduleConfig.hasUnitPrice,
"hasPriceWithoutDeliveryInfo": moduleConfig.hasPriceWithoutDeliveryInfo,
"hasAddToBasketButton": moduleConfig.hasAddToBasketButton,
"hasAvailabilityStatus": moduleConfig.hasAvailabilityStatus,
"shouldShortenLongProductName": moduleConfig.shouldShortenLongProductName
}
%}
{% set listItemsTemplate %}
{% for product in productList %}
{% set availability = product.availability %}
{% if _context_id == 20 %}
{% set isInactive = not availability.isAvailable and availability.visibilityConfig.isSearchResultsItemGrey %}
{% else %}
{% set isInactive = not availability.isAvailable and availability.visibilityConfig.isListsItemGrey %}
{% endif %}
{{ product_tile(product, productTileOptions|merge({ instanceId: moduleInstanceId, imageSize: systemConfig.lSize, isInactive })) }}
{% endfor %}
{% endset %}
{% if productList|length %}
<product-list role="article" class="product-list">
<header class="product-list__header">
{{
sort_select(sortList, {
currentSortId: sort,
instanceId: moduleInstance
})
}}
{% if moduleConfig.shouldShowPaginationAboveProductList %}
{{ pagination(productList, topPaginationOptions) }}
{% endif %}
</header>
{{
list_grid(listItemsTemplate, {
grid: gridSettings,
className: 'product-list-grid'
})
}}
<footer class="product-list__footer">
{{ pagination(productList, bottomPaginationOptions) }}
</footer>
</product-list>
{% else %}
<span class="flash-message flash-message__notice">{{ translate("There are currently no products in this category") }}</span>
{% 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- changing phrases in [translations](%s)%s- enabling additional sorting option in [product settings](%s)",
"placeholderValues": [
"\n",
"\/admin\/configLanguages\/list",
"\n",
"\/admin\/configProducts"
]
}
},
{
"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 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- showing prices net\/gross in [tax rates settings](%s)%s- enabling the purchase option in [the orders settings](%s)%s- setting [product availability statuses](%s)",
"placeholderValues": [
"\n",
"\/admin\/configLanguages\/list",
"\n",
"\/admin\/configProducts",
"\n",
"\/admin\/configTax\/list",
"\n",
"\/admin\/configShopping\/list",
"\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": "hasRegularPriceWhilePromotionActive",
"label": "regular price (for products on sale)",
"defaultValue": 1
},
{
"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": "hasUnitPrice",
"label": "unit price",
"defaultValue": 0
},
{
"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
}
]
}
]