Blog Articles List Categories¶

blog_articles_list_categories module is used to display a list of blog categories including at least one blog post.

Configuration parameters¶

title¶

string the title of blog categories 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 %}

{% set allBlogCategories = ObjectApi.getBlogCategories() %}
{% set shopUrls = ObjectApi.getShopUrls() %}

{% set blogCategory = category_id ? ObjectApi.getBlogCategory(category_id) : null %}

{% set blogListUrl = shopUrls.blogListUrl %}

{% set articlesSection = '' %}

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

{% set categoriesContent %}
    <div class="blog-articles-list-categories__container">
        <div class="blog-articles-list-categories">
            <a
                class="
                    blog-articles-list-categories__category
                    {% if blogCategory == null %} blog-articles-list-categories__category_current {% endif %}
                "
                href="{{ blogListUrl }}"
            >
                {{ translate('All') }}
            </a>
            {% for category in allBlogCategories %}
                <a
                    class="
                        blog-articles-list-categories__category
                        {% if category.id == blogCategory.id %} blog-articles-list-categories__category_current {% endif %}
                    "
                    href="{{ category.url }}"
                >
                    {{ category.name }}
                </a>
            {% endfor %}
        </div>
    </div>
{% endset %}

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

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

{% if allBlogCategories|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-categories__header">
                    {{ module_accordion_toggler({ title: moduleConfig.title, isDisabled: true }) }}
                </h2>
            {% endif %}

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

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

{% for category in allBlogCategories %}
    {% set articlesSection = loop.first ? category.name : "#{articlesSection}, #{category.name}" %}
{% endfor %}

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

Macros reference¶

Used Object Api methods¶

getBlogCategories()

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- adding and editing blog categories in [the List of blog entry categories](%s)",
                    "placeholderValues": [
                        "\n",
                        "\/admin\/newsTags\/list"
                    ]
                }
            },
            {
                "type": "text",
                "name": "title",
                "label": "Module title",
                "supportsTranslations": 1,
                "isRequired": 1,
                "defaultValue": "Blog categories"
            }
        ]
    }
]