CODEWITHSUNDEEP
symfonytwig
BentCoder
BentCoder

Reputation: 12740

Creating a hedear menu by extending twig templates

I'm trying to achieve menu below but for some reason it doesn't show middle parts (level 2 and 3) of the menu if I navigate up to level 3 and 4. If I'm on level 3 then 1, 2, 3 should be visible. If I'm on level 4 then all the levels. That's what I want to achieve.

I read whole templating documentation, this post and some more but cannot find why my code below won't work.

Expected:

FRONTEND - BACKEND
----------------------
COUNTRY | LEAGUE      -> After selecting FRONTEND in level 1 above
----------------------
INDEX | LIST | CREATE -> After selecting COUNTRY in level 2 above
----------------------
Countries will appear here after selecting LIST in level 3 above

My failed attempts:

FRONTEND - BACKEND
----------------------
INDEX | LIST | CREATE -> After selecting COUNTRY in level 2 above
----------------------

or

FRONTEND - BACKEND
----------------------
Countries will appear here after selecting LIST in level 3 above

base.html.twig

   Football
      BackendBundle
      .....
      FrontendBundle
         Resources
            views
               Default
                  index.html.twig
               Country
                  index.html.twig
                  list.html.twig

base.html.twig

<body>
    <a href="{{ path('football_frontend_default_index') }}">FRONTEND</a>
    &nbsp;&dash;&nbsp;
    <a href="{{ path('football_backend_default_index') }}">BACKEND</a>
    <hr />
    {% block body %}{% endblock %}
    {% block javascripts %}{% endblock %}
</body>

Default/index.html.twig

{% extends '::base.html.twig' %}

{% block body %}
    {% spaceless %}
        <a href="{{ path('football_frontend_country_index') }}">COUNTRY</a>
        &nbsp;|&nbsp;
        <a href="{{ path('football_frontend_league_index') }}">LEAGUE</a>
        <hr />
    {% endspaceless %}
{% endblock %}

Country/inedx.html.twig

{% extends 'FootballFrontendBundle:Default:index.html.twig' %}

{% block body %}
    {% spaceless %}
        <a href="{{ path('football_frontend_country_index') }}">Index</a>
        &nbsp;|&nbsp;
        <a href="{{ path('football_frontend_country_list') }}">List</a>
        &nbsp;|&nbsp;
        <a href="{{ path('football_frontend_country_create') }}">create</a>
        <hr />
    {% endspaceless %}
{% endblock %}

Country/list.html.twig

{% extends 'FootballFrontendBundle:Country:index.html.twig' %}

{% block body %}
    {% spaceless %}
        COUNTRY - List
        <hr />
        ....
    {% endspaceless %}
{% endblock %}

Upvotes: 0

Views: 205

Answers (1)

Rapha&#235;l Mali&#233;
Rapha&#235;l Mali&#233;

Reputation: 4012

When you use the body block in your file Country/list.html.twig, you replace the one in the root file base.html.twig. It's the same than method inheritance in PHP. If you want to do what you try to achieve, you have two ways :

  1. Use {{ parent() }} inside your block, to display the parent template content of the block
  2. Use a different name for your blocks for each subtemplate

E.g.

Default/index.html.twig

{% extends '::base.html.twig' %}

{% block body %}
    {% spaceless %}
        <a href="{{ path('football_frontend_country_index') }}">COUNTRY</a>
        &nbsp;|&nbsp;
        <a href="{{ path('football_frontend_league_index') }}">LEAGUE</a>
        <hr />
    {% endspaceless %}
    {% block body2 %}{% endblock %}
{% endblock %}

Country/inedx.html.twig

{% extends 'FootballFrontendBundle:Default:index.html.twig' %}

{% block body2 %}
    {% spaceless %}
        <a href="{{ path('football_frontend_country_index') }}">Index</a>
        &nbsp;|&nbsp;
        <a href="{{ path('football_frontend_country_list') }}">List</a>
        &nbsp;|&nbsp;
        <a href="{{ path('football_frontend_country_create') }}">create</a>
        <hr />
    {% endspaceless %}
    {% block body3 %}{% endblock %}
{% endblock %}

Upvotes: 1

Related Questions