menu_content¶
The menu_content macro allows to display content of a menu based on the list of categories.
Definition¶
Input parameters¶
categories¶
CategoriesList Object of CategoriesList type that represents a list of categories to display in the given menu content.
options¶
object represents an object of menu content options
| Option key | Type | Default | Required | Description |
|---|---|---|---|---|
| options.parentCategoryId | string |
"" | yes | Id of the toggler of a given menu content. Basically it should be the same as a toggleId attribute of a menu_toggle_action_button toggling a given menu and is necessary for a menu content to display properly |
| options.togglerPrefix | string |
"" | yes | A prefix for the id of the menu content, usually it is used to specify what the given menu content represents, eg. category or subcategory |
| options.categoryHash | string |
"" | yes | A unique hash id of the menu content |
| options.level | string |
"" | yes | Level of nesting for a specific category. For example, a button that toggles menu from a navbar has a level of 1, a button that toggles a menu inside menu opened from a navbar has level 2 and it's subcategories have level 3. |
Example¶
In this example we render a basic menu content for subcategories of a category header link. We get the list of header links with the help of getHeaderLinks() ObjectApi method. To get a random hash for the categoryHash parameter we use a random() Twig method.
{% from "@macros/menu_content.twig" import menu_content %}
{% for headerLink in headerLinks %}
{% set categoryHash = random() %}
{{
menu_content(headerLink.category.subCategories, {
parentCategoryId: "all-category-#{headerLinks.page}-#{loop.index}-#{categoryHash}",
togglerPrefix: 'category',
categoryHash: categoryHash,
level: 3
})
}}
{% endfor %}
Example¶
In this example we show a use case scenario of a menu content macro taken from the main_navigation module. Here the goal of the menu content macro is basically to render contents for each category in a given menu.
Like before, we use the getHeaderLinks() ObjectApi method to get the header links with categories and we iterate through them. On each iteration we render a toggle action button that toggles a given menu content and a menu content. Because of a specificity of a level 1 menu content we don't use the macro there and instead we render a webcomponent by hand giving it necessary classes and attributes. Inside the level 1 menu content we render a list of toggle action buttons for categories in a given menu content. Here we also use our menu content macro that gets a list of those categories and uses it to render a menu content for each of them.
{% from "@macros/menu_content.twig" import menu_content %}
{% from "@macros/menu_toggle_action_button.twig" import menu_toggle_action_button %}
{% set headerLinks = ObjectApi.getHeaderLinks() %}
{% for headerLink in headerLinks %}
{% set categoryHash = random() %}
{{ menu_toggle_action_button({
toggleId: "sub-category-#{headerLinks.page}-#{loop.index}-#{categoryHash}",
classList: "menu__list-link menu__list-link_toggle",
level: 1,
name: "#{headerLink.category.name}"
}) }}
<s-menu-content
hidden
contentLevel="1"
parentContentName="{{ headerLink.title }}"
parentContentId="root"
class="menu__content menu__content_level-1 menu-content menu-content_level-1"
contentId="all-category-{{ headerLinks.page }}-{{ loop.index }}-{{ categoryHash }}">
<div class="menu-content__container">
<div class="menu__level menu__level_2">
<ul class="js__sub-menu-list menu__submenu-list menu__submenu-list_level-2">
{% for category in headerLink.categories %}
<li class="js__menu-list-item menu__submenu-list-item">
{% is category.isParent %}
{{ menu_toggle_action_button({
toggleId: "category-#{category.id}-#{categoryHash}",
classList: "menu-action-button_icon-spread menu__submenu-list-link menu__submenu-list-link_toggle menu__submenu-list-link_level-2",
level: 2,
icon: {
orientation: "right"
},
name: "#{category.name}"
}) }}
{% endif %}
</li>
{% endfor %}
</ul>
</div>
<div hidden class="js__menu-level-rest menu__level menu__level_rest">
{{
menu_content(headerLink.categories, {
parentCategoryId: "all-category-#{headerLinks.page}-#{loop.index}-#{categoryHash}",
togglerPrefix: 'category',
categoryHash: categoryHash,
level: 3
})
}}
</div>
</div>
</s-menu-content>
{% endfor %}
Macro source code¶
{% macro menu_content(categories, options) %}
{% from "@macros/menu_toggle_action_button.twig" import menu_toggle_action_button %}
{% from "@macros/menu_link.twig" import menu_link %}
{% for category in categories %}
{% if category.isParent %}
<s-menu-content
hidden
contentId="{{ options.togglerPrefix }}-{{ category.id }}-{{ options.categoryHash }}"
goBackActionId="{{ options.parentCategoryId }}"
parentContentName="{{ category.name }}"
parentContentUrl="{{ category.url }}"
parentContentId="{{ options.parentCategoryId }}"
class="menu__content menu-content"
contentLevel="{{ options.level - 1 }}">
{% set newCategoryHash = random() %}
<ul class="js__sub-menu-list menu__submenu-list menu__submenu-list_level-rest">
{% for subCategory in category.subCategories %}
<li class="js__menu-list-item menu__submenu-list-item">
{% if not subCategory.isParent %}
{{ menu_link({
link: {
title: subCategory.name,
url: subCategory.url
},
classList: 'menu__submenu-list-link menu__submenu-list-link_level-rest'
}) }}
{% else %}
{{ menu_toggle_action_button({
toggleId: "#{options.togglerPrefix}-#{subCategory.id}-#{newCategoryHash}",
classList: "menu__submenu-list-link menu__submenu-list-link_level-rest",
level: options.level,
icon: {
orientation: "right"
},
name: "#{subCategory.name}"
}) }}
{% endif %}
</li>
{% endfor %}
</ul>
</s-menu-content>
{{
_self.menu_content(category.subCategories, {
parentCategoryId: parentCategoryId,
togglerPrefix: options.togglerPrefix,
categoryHash: newCategoryHash,
level: options.level + 1
})
}}
{% endif %}
{% endfor %}
{% endmacro %}