Blog Articles List Tags¶

blog_articles_list_tags module is used to display a list of blog tags including at least one blog post.

Configuration parameters¶

title¶

string the title of blog tags module visible on all devices but mobile.

Module source code¶

{% from "@macros/icon.twig" import icon %}
{% from "@macros/dropdown_button.twig" import dropdown_button %}
{% from "@macros/module_accordion_toggler.twig" import module_accordion_toggler %}
{% from "@macros/tag.twig" import tag %}

{% set blogTags = ObjectApi.getBlogTags() %}
{% set shopUrls = ObjectApi.getShopUrls() %}

{% set blogListUrl = shopUrls.blogListUrl %}

{% set dropdownName = "#{moduleInstance}-tags" %}

{% set tagsContent %}
    <div class="blog-articles-list-tags">
        <a class="blog-articles-list-tags__tag" href="{{ blogListUrl }}">
            {{
                tag(translate('All'), {
                    clickable: true,
                    secondary: true
                })
            }}
        </a>
        {% for tag in blogTags %}
            <a class="blog-articles-list-tags__tag" href="{{ tag.url }}">
                {{
                    tag(tag.name, {
                        clickable: true,
                        secondary: true
                    })
                }}
            </a>
        {% endfor %}
    </div>
{% endset %}

{% set tagsDropdownContent %}
    {% if moduleConfig.title %}
        <h2 class="module__header blog-articles-list-tags__header blog-articles-list-tags__header-mobile">
            {{ moduleConfig.title }}

            <h-dropdown-close name="dropdown-button-{{ dropdownName }}">
                {{
                    icon('icon-x', {
                        size: 'l'
                    })
                }}
            </h-dropdown-close>
        </h2>
    {% endif %}
    {{ tagsContent }}
{% endset %}

{% if blogTags|length > 0 %}
    <h-accordion class="hidden-xs-only accordion" disabled>
        <h-accordion-group opened>
            {% if moduleConfig.title %}
                <h2 class="module__header module__header_s blog-articles-list-tags__header">
                    {{ module_accordion_toggler({ title: moduleConfig.title, isDisabled: true }) }}
                </h2>
            {% endif %}

            <h-accordion-content>
                {{ tagsContent }}
            </h-accordion-content>
        </h-accordion-group>
    </h-accordion>

    {{
        dropdown_button(
            {
                title: translate('Tags'),
                main: tagsDropdownContent
            },
            {
                name: dropdownName,
                classNames: ['visible-xs-only'],
                contentClassNames: ['visible-xs-only'],
                mobilePosition: 'right',
                iconLeft: 'icon-tag',
            }
        )
    }}
{% endif %}

{% set keywords = '' %}

{% for tag in blogTags %}
    {% set keywords = keywords ~ "#{loop.first ? '' : ','} #{tag.name}" %}
{% endfor %}

<script type="application/ld+json">
    {
        "@context": [
            "http://schema.org/",
            { "@base": "{{ shopUrls.mainPageUrl.absolute }}" }
        ],
        "@id": "{{ shopUrls.blogListUrl.relative }}",
        "@type": "Article",
        "keywords": "{{ keywords }}"
    }
</script>

Macros reference¶

Used Object Api methods¶

getBlogTags()

Used styles¶

Module configuration schema¶

```json [ { "state": "unfolded", "label": "General settings", "elements": [ { "type": "infobox", "name": "infobox", "options": { "type": "blank", "message": "#### Related settings in the admin panel%s- adding tags while editing the entry on the List of entries%s- removing blog tags on the List of tags", "placeholderValues": [ "\n", "\/admin\/configBlog", "\n", "\/admin\/newsTags\/list" ] } }, { "type": "text", "name": "title", "label": "Module title", "defaultValue": "Tags", "supportsTranslations": 1, "isRequired": 1 } ] } ]

```