Blog Article Comments¶
blog_article_comments module is used to display a comments section for a currently viewed blog article.
Configuration parameters¶
displayTitle¶
int if set to 1 display module title.
title¶
string Title of the module. If not specified title will not be displayed.
isEnabled¶
int if set to 1 it will be possible to expand and collapse the module, otherwise it will always be expanded and it will not be possible to collapse it.
collapseExpand¶
string Decides if comment section should initially be opened. Values are 'expanded' or 'collapsed'.
Module source code¶
{% from "@macros/icon.twig" import icon %}
{% from "@macros/blog_add_comment_modal.twig" import blog_add_comment_modal %}
{% from "@macros/module_accordion_toggler.twig" import module_accordion_toggler %}
{% from "@macros/comment.twig" import comment %}
{% set article = ObjectApi.getBlogArticle(news_id) %}
{% set blogSettings = ObjectApi.getBlogSettings() %}
{% set shopUrls = ObjectApi.getShopUrls() %}
{% set isDisabled = not moduleConfig.isEnabled %}
{% set hasTitle = moduleConfig.displayTitle and moduleConfig.title %}
{% set isAccordionOpened = moduleConfig.collapseExpand == 'expanded' or isDisabled or not hasTitle %}
{% set accordionTitle = "#{moduleConfig.title} (#{article.comments|length})" %}
{% set modalName = "blog-article-comments-form-modal-#{moduleInstance}" %}
{% if blogSettings.isCommentsEnabled %}
<h-accordion lazy class="blog-article-comments accordion" {% if isDisabled %} disabled {% endif %}>
<h-accordion-group {% if isAccordionOpened %} opened {% endif %}>
{% if hasTitle %}
<h2 data-scroll="blog-article-comments" class="blog-article-comments__header module__header">
{{ module_accordion_toggler({ title: accordionTitle, isDisabled }) }}
</h2>
{% endif %}
<h-accordion-content>
<div class="grid__row grid__row_xs-hcenter grid__row_xs-vcenter mb-xs-6">
{% if not blogSettings.canAnyoneComment %}
<auth-controller hidden>
{% endif %}
<h-modal-opener
name="{{ modalName }}"
{% if not blogSettings.canAnyoneComment %} slot="logged-in" {% endif %}
>
<div class="btn btn_secondary btn_s">
{{
icon('icon-message-square', {
classNames: ['btn__icon', 'btn__icon_left']
})
}}
{{ translate("Write a comment") }}
</div>
</h-modal-opener>
{% if not blogSettings.canAnyoneComment %}
</auth-controller>
{% endif %}
{{
blog_add_comment_modal(article, {
instanceId: moduleInstance,
modalName
})
}}
</div>
<div class="grid__row">
<div class="grid__col">
{% for comment in article.comments %}
{{
comment(comment, {
hasAvatar: true
})
}}
{% endfor %}
</div>
</div>
</h-accordion-content>
</h-accordion-group>
</h-accordion>
{% endif %}
<script type="application/ld+json">
{
"@context": [
"http://schema.org/",
{ "@base": "{{ shopUrls.mainPageUrl.absolute }}" }
],
"@id": "{{ article.url.relative }}",
"@type": "Article",
"comment": {
"text": "{{ (article.comments|first).content }}",
"author": "{{ (article.comments|first).userName }}",
"datePublished": "{{ (article.comments|first).createdAt.iso8601 }}"
},
"commentCount": "{{ article.comments|length }}"
}
</script>
The module uses JSON-LD and Microdata from schema.org to optimize search results in browsers.
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- enabling the option of commenting on entries in the [blog settings](%s)%s- enabling comments moderation in the [blog settings](%s)",
"placeholderValues": [
"\n",
"\/admin\/configBlog",
"\n",
"\/admin\/configBlog"
]
}
},
{
"type": "checkbox",
"name": "displayTitle",
"label": "Display module title",
"defaultValue": 1,
"children": [
{
"type": "text",
"name": "title",
"label": "Module title",
"defaultValue": "Entry comments",
"supportsTranslations": 1,
"isRequired": 1,
"relations": [
{
"parentName": "displayTitle",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHiddenAndOptional", "setDisabled"]
},
{
"value": 1,
"actions": ["setVisibleAndRequired", "setAvailable"]
}
]
}
]
}
]
},
{
"type": "checkbox",
"name": "isEnabled",
"label": "Allow to collapse and expand the module content",
"defaultValue": 1,
"relations": [
{
"parentName": "displayTitle",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setDisabled"]
},
{
"value": 1,
"actions": ["setAvailable"]
}
]
}
],
"children": [
{
"type": "radio",
"name": "collapseExpand",
"label": "Set as:",
"defaultValue": "expanded",
"isRequired": 0,
"isHidden": 1,
"relations": [
{
"parentName": "displayTitle",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setDisabled"]
},
{
"value": 1,
"actions": ["setAvailable"]
}
]
},
{
"parentName": "isEnabled",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable"]
}
]
}
],
"options": {
"radioOptions": [
{
"key": "expanded",
"label": "expanded"
},
{
"key": "collapsed",
"label": "collapsed (only module title visible)"
}
]
}
}
]
}
]
}
]