How to move a block into another block

Viewed 109

Within @Storefront/storefront/base.html.twig the blocks base_header and base_navigation are defined. I would like t move base_navigation into base_header to achieve a markup like this:

<header>
    <div class="header-main">
        <!-- base_header_inner -->
    </div>
    <div class="nav-main">
        <!-- base_navigation_inner -->
    </div>
</header>

I have already tried the following:

{% sw_extends '@Storefront/storefront/base.html.twig' %}

{% block base_header %}
    <header>
        <div class="header-main">
            {% block base_header_inner %}
                {{ parent() }}
            {% endblock %}
        </div>

        {% block base_navigation %}
            {{ parent() }}
        {% endblock %}
    </header>
{% endblock %}

But instead of moving it it simply creates a new navigation within the header but keeps the original one.

1 Answers

You can empty the block in your twig file and load the original block with the block function (https://twig.symfony.com/doc/3.x/functions/block.html)

Your file then looks something like this:

{% sw_extends '@Storefront/storefront/base.html.twig' %}

{% block base_header %}
    <header class="header-main">
        {% block base_header_inner %}
            <div class="container">
                {% sw_include '@Storefront/storefront/layout/header/header.html.twig' %}
            </div>
        {% endblock %}

        {{ block('base_navigation', '@Storefront/storefront/base.html.twig') }}
    </header>
{% endblock %}

{% block base_navigation %}
{% endblock %}
Related