Blog Articles Slider¶
blog_articles_slider module is used to display tile slider with blog articles.
Configuration parameters¶
title¶
string Title of the module. If not specified no title will be displayed.
shouldDisplayLink¶
int if set to 1 the link to the full blog will be displayed.
linkTitle¶
string Represents the title of the link next to the module header.
showTitleDescription¶
int if set to 1 a short description under the title will be displayed.
description¶
string Description of the module. If not specified no description will be displayed.
articlesType¶
string Describes which articles will be shown. If the value is home only home articles will be displayed. If the value is module then the module articles will be displayed instead.
numberOfArticlesToShow¶
int Number which define how many article tiles should be displayed in slider. Maximum value is 16.
shouldShowImage¶
int if set to 1 the image linking to the article will be displayed. By default it is set to 1
shouldShowDate¶
int if set to 1 the date of the article creation will be displayed. By default it is set to 1
shouldShowCategory¶
int if set to 1 the category that the article belongs to will be displayed. By default it is set to 1
shouldShowShortContent¶
int if set to 1 the short content of the article will be displayed. By default it is set to 1
shouldShowTags¶
int if set to 1 the tags that the article is associated to will be displayed. By default it is set to 1
shouldShowAuthor¶
int if set to 1 the author of the article will be displayed. By default it is set to 0
shouldShowCommentsQuantity¶
int if set to 1 the quantity of comments under the article will be displayed. By default it is set to 0
Module source code¶
{% from "@macros/slider.twig" import slider %}
{% from "@macros/module_accordion_toggler.twig" import module_accordion_toggler %}
{% from "@macros/blog_article_tile.twig" import blog_article_tile %}
{% set blogArticlesListSettings = ObjectApi.getBlogSettings() %}
{% set maxArticlesToShow = 16 %}
{% set articlesPerPageDesktop = moduleConfig.desktopArticlesCountPerRow|default(4) %}
{% set articlesPerPageLaptop = moduleConfig.laptopArticlesCountPerRow|default(3) %}
{% set articlesPerPageTablet = moduleConfig.tabletArticlesCountPerRow|default(3) %}
{% set articlesPerPageMobile = moduleConfig.phoneArticlesCountPerRow|default(1) %}
{% set articlesToShow = moduleConfig.numberOfArticlesToShow > maxArticlesToShow ? maxArticlesToShow : moduleConfig.numberOfArticlesToShow %}
{% if moduleConfig.articlesType == 'home' %}
{% set articlesList = ObjectApi.getMainPageBlogArticles(articlesToShow) %}
{% elseif moduleConfig.articlesType == 'module' %}
{% set articlesList = ObjectApi.getModuleBlogArticles(articlesToShow) %}
{% endif %}
{% set blogListUrl = ObjectApi.getShopUrls().blogListUrl %}
{% set articlesVisible = articlesToShow > articlesList.count ? articlesList.count : articlesToShow %}
{%
set blogArticlesSliderSettings = {
"perPage": articlesPerPageDesktop,
"arrows": articlesVisible > articlesPerPageDesktop,
"pagination": true,
"hasArrowsOnMobile": true,
"breakpoints": {
1440: {
"perPage": articlesPerPageLaptop,
"arrows": articlesVisible > articlesPerPageLaptop
},
1000: {
"perPage": articlesPerPageTablet,
"arrows": articlesVisible > articlesPerPageTablet
},
576: {
"perPage": articlesPerPageMobile
}
}
}
%}
{%
set articleSettings = {
"shouldShowImage": moduleConfig.shouldShowImage == '1',
"shouldShowCategory": moduleConfig.shouldShowCategory == '1',
"shouldShowDate": moduleConfig.shouldShowDate == '1',
"shouldShowShortContent": moduleConfig.shouldShowShortContent == '1',
"shouldShowAuthor": moduleConfig.shouldShowAuthor == '1',
"shouldShowCommentsQuantity": blogArticlesListSettings.isCommentsEnabled and moduleConfig.shouldShowCommentsQuantity == '1',
"shouldShowTags": moduleConfig.shouldShowTags == '1',
"className": "article__slide"
}
%}
{% set sliderItemsTemplate %}
{% for article in articlesList %}
<li class="splide__slide">
{{
blog_article_tile(
article,
articleSettings|merge({
className: 'article__slide'
})
)
}}
</li>
{% endfor %}
{% endset %}
{% if not articlesList|length == 0 %}
<div class="blog-articles-slider">
{% if moduleConfig.title %}
<h2 class="module__header">
{{
module_accordion_toggler({
title: moduleConfig.title,
linkUrl: moduleConfig.shouldDisplayLink == '1' ? blogListUrl : '',
linkTitle: moduleConfig.linkTitle,
isDisabled: true
})
}}
</h2>
{% endif %}
{% if moduleConfig.description and moduleConfig.showTitleDescription == '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: "articles-slider-#{moduleInstance}",
sliderConfig: blogArticlesSliderSettings
})
}}
</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- changing phrases in [translations](%s)%s- adding blog entries and marking them as \"Home page\" in the [List of blog entries](%s)%s- marking the entry as \"module\" on the entry editing page%s- seo, comment and file settings in [blog settings](%s)",
"placeholderValues": [
"\n",
"\/admin\/configLanguages\/list",
"\n",
"\/admin\/news\/list",
"\n",
"\n",
"\/admin\/configBlog"
]
}
},
{
"type": "text",
"name": "title",
"label": "Module title",
"supportsTranslations": 1,
"isRequired": 1,
"defaultValue": "News"
},
{
"type": "checkbox",
"name": "shouldDisplayLink",
"label": "Display a link to the blog",
"defaultValue": 1,
"children": [
{
"type": "text",
"name": "linkTitle",
"label": "Link name",
"supportsTranslations": 1,
"defaultValue": "Go to blog",
"relations": [
{
"parentName": "shouldDisplayLink",
"parentValueToActionsMap": [
{
"value": 1,
"actions": ["setVisibleAndRequired"]
},
{
"value": 0,
"actions": ["setHiddenAndOptional"]
}
]
}
]
}
]
},
{
"type": "checkbox",
"name": "showTitleDescription",
"label": "Display additional description below the module title",
"defaultValue": 1,
"children": [
{
"type": "textarea",
"name": "description",
"label": "Description",
"supportsTranslations": true,
"relations": [
{
"parentName": "showTitleDescription",
"parentValueToActionsMap": [
{
"value": 1,
"actions": ["setVisible"]
},
{
"value": 0,
"actions": ["setHidden"]
}
]
}
]
}
]
},
{
"type": "radio",
"name": "articlesType",
"label": "Display entries:",
"defaultValue": "home",
"options": {
"radioOptions": [
{
"key": "home",
"label": "Marked as \"Home page\"",
"hint": {
"message": "You can mark entries in the administration panel on the [list of blog entries](%s).",
"placeholderValues": ["\/admin\/news\/list"]
}
},
{
"key": "module",
"label": "Marked as \"Module\"",
"hint": {
"message": "You can mark entries in the administration panel. Go to [the list of entries](%s) and then to the edit entry page.",
"placeholderValues": ["\/admin\/news\/list"]
}
}
]
}
},
{
"type": "number",
"name": "numberOfArticlesToShow",
"label": "The number of entries in the module",
"labelDescription": "Max. 16.",
"isRequired": 1,
"defaultValue": 16,
"validators": [
{ "type": "int" },
{ "type": "lessEqThan", "options": { "max": 16} },
{ "type": "greaterEqThan", "options": { "min": 1} }
],
"hint": "By default, the 16 most recent entries will be displayed. If there are more entries, the list will be limited to the selected number."
},
{
"type": "header",
"name": "headerMobile",
"label": "Mobile",
"options": {
"icon": "mobile_devices"
},
"children": [
{
"type": "number",
"name": "phoneArticlesCountPerRow",
"label": "Number of entries 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": "tabletArticlesCountPerRow",
"label": "Number of entries 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": "laptopArticlesCountPerRow",
"label": "Number of entries 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": "desktopArticlesCountPerRow",
"label": "Number of entries in the row",
"labelDescription": "Max. 6.",
"defaultValue": 4,
"validators": [
{ "type": "int" },
{ "type": "lessEqThan", "options": { "max": 6} },
{ "type": "greaterEqThan", "options": { "min": 1} }
]
}
]
}
]
},
{
"state": "unfolded",
"label": "Blog entry tile",
"elements": [
{
"type": "header",
"name": "entryOptions",
"label": "For each blog article, show:",
"children": [
{
"type": "checkbox",
"name": "shouldShowImage",
"label": "Main image",
"defaultValue": 1
},
{
"type": "checkbox",
"name": "shouldShowDate",
"label": "Entry date",
"defaultValue": 1
},
{
"type": "checkbox",
"name": "shouldShowCategory",
"label": "Entry category",
"defaultValue": 1,
"hint": "If more than one category is assigned to the blog entry, only one of them will be displayed."
},
{
"type": "checkbox",
"name": "shouldShowShortContent",
"label": "Abbreviated blog entry content",
"defaultValue": 1
},
{
"type": "checkbox",
"name": "shouldShowTags",
"label": "Tags",
"defaultValue": 1
},
{
"type": "checkbox",
"name": "shouldShowAuthor",
"label": "Author of the entry",
"defaultValue": 0
},
{
"type": "checkbox",
"name": "shouldShowCommentsQuantity",
"label": "Number of comments",
"defaultValue": 0
}
]
}
]
}
]