Customize Nav with twig


#1

Hi,

I’m having problems customizing the nav ouput with twig. I’m using pimcore 5.4.4 and currently I’m rendering my nav using

{% set navStartNode = document.getProperty('navigationRoot') %}
{% if not navStartNode is instanceof('\\Pimcore\\Model\\Document\\Page') %}
    {% set navStartNode = pimcore_document(1) %}
{% endif %}

{% set mainNavigation = pimcore_build_nav(document, navStartNode) %}

This, renders my nav, I would like to customize it however; I need to add some additional content into the list items. Is there a way to achieve this, i.e. to render each nav item individually?

Greetings, DeM


#2

sure there is, create a twig extension and do it in there like:

in this specific extension, I also create menus for side-navigation, social-navigation and meta-navigation. I figured this could help others too.

<?php

namespace AppBundle\Twig\Extension;

use Pimcore\Model\Document;
use Pimcore\Navigation\Container;
use Pimcore\Templating\Helper\Navigation;

final class NavigationExtension extends \Twig_Extension
{
    /**
     * @var Navigation
     */
    private $navigationHelper;

    /**
     * @param Navigation                    $navigationHelper
     */
    public function __construct(Navigation $navigationHelper) {
        $this->navigationHelper = $navigationHelper;
    }

    public function getFunctions(): array
    {
        return [
            new \Twig_Function('tilo_navigation', [$this, 'buildMainNavigation']),
            new \Twig_Function('tilo_side_navigation', [$this, 'buildSideNavigation']),
            new \Twig_Function('tilo_social_navigation', [$this, 'buildSocialNavigation']),
            new \Twig_Function('tilo_meta_navigation', [$this, 'buildMetaNavigation']),
        ];
    }

    public function buildMainNavigation(Document $activeDocument): Container
    {
        $navigationRootDocument = $activeDocument->getProperty('mainNavStartNode');

        return $this->navigationHelper->buildNavigation(
            $activeDocument,
            $navigationRootDocument,
            null,
            function (\Pimcore\Navigation\Page\Document $page, $child) {
                if (!$child instanceof Document) {
                    return;
                }

                if (!$child->getProperty('topNavigation')) {
                    $page->setVisible(false);
                }

                return $page;
            }
        );
    }

    public function buildSideNavigation(Document $activeDocument): Container
    {
        $navigationRootDocument = $activeDocument->getProperty('mainNavStartNode');

        return $this->navigationHelper->buildNavigation(
            $activeDocument,
            $navigationRootDocument,
            null,
            function (\Pimcore\Navigation\Page\Document $page, $child) {
                if (!$child instanceof Document) {
                    return;
                }

                if ($child->getProperty('topNavigation')) {
                    $page->setVisible(false);
                }

                if ($child->getProperty('metaNavigation')) {
                    $page->setVisible(false);
                }

                return $page;
            }
        );
    }

    public function buildSocialNavigation(Document $activeDocument): Container
    {
        $navigationRootDocument = $activeDocument->getProperty('socialNavStartNode');

        return $this->navigationHelper->buildNavigation(
            $activeDocument,
            $navigationRootDocument,
            null,
            function (\Pimcore\Navigation\Page\Document $page, $child) {
                if (!$child instanceof Document) {
                    return;
                }

                return $page;
            }
        );
    }

    public function buildMetaNavigation(Document $activeDocument): Container
    {
        $navigationRootDocument = $activeDocument->getProperty('mainNavStartNode');

        return $this->navigationHelper->buildNavigation(
            $activeDocument,
            $navigationRootDocument,
            null,
            function (\Pimcore\Navigation\Page\Document $page, $child) {
                if (!$child instanceof Document) {
                    return;
                }

                if (!$child->getProperty('metaNavigation')) {
                    $page->setVisible(false);
                }

                return $page;
            }
        );
    }
}

#3

Ah this makes total sense… I didn’t even remotely think in this direction. Thanks for pointing me in the right direction.