Iterating over Shopware Array and trying to get the key not working

Question

Hey iam currently trying to get the description of the first menu navigation in Shopware 6. For that i use the array page.header.navigation.active.breadcrumb and use its key in page.header.navigation.tree[key].description, but my key value is empty. Thats happening due to the key beeing empty for no reason.

Heres my Code:

{% sw_extends "@Storefront/storefront/section/cms-section-sidebar.html.twig" %}

{% set topMenu = null %}
{% for key, value in page.header.navigation.active.breadcrumb %}
    {% if loop.index == 2 %}
        {% set topMenu = value %}
        {# {% set topMenuDescription = page.header.navigation.tree[key].category.description %} #}
        {% set topMenuDescription = key %}
    {% endif %}
{% endfor %}
{% set currentMenu = page.header.navigation.active.breadcrumb | last %}
{# {% set currentMenu = page.header.navigation.active.name %} #}
{# {% set topMenuDescription = page.header.navigation.active.description %} #}
{# {% if ! topMenuDescription %}
    {% set topMenuDescription = page.header.navigation.active.description %}
{% endif %} #}

{% block section_main_content_block %}
    <div class="category-top">
        <div class="category-banner">
            <img src="/media/6a/fd/8b/1632946677/listing-banner.jpg">
            <div class="category-banner-headlines">
                {% if (currentMenu != topMenu) %}
                    <h3>{{ topMenu }}<h3>
                    <h2>{{ currentMenu }}<h2>
                {% else %}
                    <h2 class="sameMenu">{{ currentMenu }}<h2>
                {% endif %}
            </div>
        </div>
        <div class="category-description">
            <h1>{{ currentMenu }}</h1>
            {{ topMenuDescription | trans | raw }}
        </div>
    </div>
    {{ parent() }}
{% endblock %}

Also here is the structure of the key i want to get: key-i-want-to-get

And heres the description i want to get: description-i-want-to-get

Sidenote: The description in my example is empty, since i do the showcase in a seperate testing area, where i havent set a description

Answer 1

The reason topMenuDescription is empty is because the variable only exist inside the scope of the {% for %}-loop you've created. Outside this loop the variable doesn't exist.

In order to solve this issue you need to alter the scope of topMenuDescription by defining the variable outside the {% for %}-loop

{% set topMenuDescription = null %}
{% for key, value in page.header.navigation.active.breadcrumb %}
    {% if loop.index == 2 %}
        {% set topMenu = value %}
        {# {% set topMenuDescription = page.header.navigation.tree[key].category.description %} #}
        {% set topMenuDescription = key %}
    {% endif %}
{% endfor %}

---

sidenote

You really should enable twig's debug whilst developing as your current snippet would throw a RuntimeError explaining the variable does not exist.