Hi,

I have a menu in a partial:

[menu] start = "id-9" activeNode = "id-9" listItemClasses = "item" primaryClasses = "nav nav-pills" secondaryClasses = "dropdown-menu" numberOfLevels = 2

If I render the component like so:

{% component 'menu' %}

It works as normal, if I try the syntax/markup manually it doesn't work?

{% if parentNode and parentNode.getChildCount %}
    {% for primaryNav in parentNode.getChildren %}
        {% if primaryNav.enabled %}
            

                {{ primaryNav.title }}
            

        {% endif %}
    {% endfor %}
{% endif %}

I need my own markup so can't use the default.

Last updated 8 years ago

Hi Ricky

What you need to do, is in your theme over-ride the markup of the component. You still need to include it on the page, which is why it's not displaying unless use use {% component 'menu' %}

https://octobercms.com/forum/post/overriding-plugins-templates?page=1 seems to be a simple way to over-ride output to do what you need to do.

I have a memory of this working, and I know I posted about it. But that was when OctoberCMS was in beta, so it may no longer be possible.

Here, i fixed it :- )

    /**
    plugins\benfreke\menumanager\components\Menu.php
     */
<?php namespace BenFreke\MenuManager\Components;

use App;
use BenFreke\MenuManager\Models\Menu as menuModel;
use Cms\Classes\ComponentBase;
use DB;
use Lang;
use Request;

class Menu extends ComponentBase
{   
    public $topNode;
    public $activeNode;
    public function componentDetails()
    {
        return [
            'name'        => 'benfreke.menumanager::lang.menu.name',
            'description' => 'benfreke.menumanager::lang.menu.description'
        ];
    }

    /**
     * @return array
     * @todo Change start to parentNode to match my naming
     */
    public function defineProperties()
    {
        return [
            'start'            => [
                'description' => 'benfreke.menumanager::lang.component.start.description',
                'title'       => 'benfreke.menumanager::lang.component.start.title',
                'default'     => 1,
                'type'        => 'dropdown'
            ],
            'activeNode'       => [
                'description' => 'benfreke.menumanager::lang.component.activenode.description',
                'title'       => 'benfreke.menumanager::lang.component.activenode.title',
                'default'     => 0,
                'type'        => 'dropdown'
            ],
            'listItemClasses'  => [
                'description' => 'benfreke.menumanager::lang.component.listitemclasses.description',
                'title'       => 'benfreke.menumanager::lang.component.listitemclasses.title',
                'default'     => 'item',
                'type'        => 'string'
            ],
            'primaryClasses'   => [
                'description' => 'benfreke.menumanager::lang.component.primaryclasses.description',
                'title'       => 'benfreke.menumanager::lang.component.primaryclasses.title',
                'default'     => 'nav nav-pills',
                'type'        => 'string'
            ],
            'secondaryClasses' => [
                'description' => 'benfreke.menumanager::lang.component.secondaryclasses.description',
                'title'       => 'benfreke.menumanager::lang.component.secondaryclasses.title',
                'default'     => 'dropdown-menu',
                'type'        => 'string'
            ],
            'tertiaryClasses'  => [
                'description' => 'benfreke.menumanager::lang.component.tertiaryclasses.description',
                'title'       => 'benfreke.menumanager::lang.component.tertiaryclasses.title',
                'default'     => '',
                'type'        => 'string'
            ],
            'numberOfLevels'   => [
                'description' => 'benfreke.menumanager::lang.component.numberoflevels.description',
                'title'       => 'benfreke.menumanager::lang.component.numberoflevels.title',
                'default'     => '2', // This is the array key, not the value itself
                'type'        => 'dropdown',
                'options'     => [
                    1 => '1',
                    2 => '2',
                    3 => '3'
                ]
            ]
        ];
    }

    /**
     * Returns the list of menu items, plus an empty default option
     *
     * @return array
     */
    public function getActiveNodeOptions()
    {
        $options = $this->getStartOptions();
        array_unshift($options, 'default');

        return $options;
    }

    /**
     * Returns the list of menu items I can select
     *
     * @return array
     */
    public function getStartOptions()
    {
        $menuModel = new menuModel();

        return $menuModel->getSelectList();
    }

    /**
     * Build all my parameters for the view
     *
     * @todo Pull as much as possible into the model, including the column names
     */
    public function onRun()
    {
        // Set the parentNode for the component output
        $this->topNode = menuModel::find($this->getIdFromProperty($this->property('start')));
        $this->page['parentNode'] = $this->topNode;

        // What page is active?
        $this->page['activeLeft'] = 0;
        $this->page['activeRight'] = 0;
        $this->activeNode = $this->getIdFromProperty($this->property('activeNode'));

        if ($this->activeNode) {

            // It's been set by the user, so use what they've set it as
            $this->activeNode = menuModel::find($this->activeNode);
        } elseif ($this->topNode) {

            // Go and find the page we're on
            $baseFileName = $this->page->page->getBaseFileName();

            // Get extra URL parameters
            $params = $this->page->controller->getRouter()->getParameters();

            // And make sure the active page is a child of the parentNode
            $this->activeNode = menuModel::where('url', $baseFileName)
                ->where('nest_left', '>', $this->topNode->nest_left)
                ->where('nest_right', '<', $this->topNode->nest_right);

            $this->activeNode = $this->activeNode->first();
        }

        // If I've got a result that is a node
        if ($this->activeNode && menuModel::getClassName() === get_class($this->activeNode)) {
            $this->page['activeLeft'] = (int)$this->activeNode->nest_left;
            $this->page['activeRight'] = (int)$this->activeNode->nest_right;
        }

        // How deep do we want to go?
        $this->page['numberOfLevels'] = (int)$this->property('numberOfLevels');

        // Add the classes to the view
        $this->page['primaryClasses'] = $this->property('primaryClasses');
        $this->page['secondaryClasses'] = $this->property('secondaryClasses');
        $this->page['tertiaryClasses'] = $this->property('tertiaryClasses');
        $this->page['listItemClasses'] = $this->property('listItemClasses');
    }

    /**
     * Gets the id from the passed property
     *  Due to the component inspector re-ordering the array on keys, and me using the key as the menu model id,
     *  I've been forced to add a string to the key. This method removes it and returns the raw id.
     *
     * @param $value
     *
     * @return bool|string
     */
    protected function getIdFromProperty($value)
    {
        if (!strlen($value) > 3) {
            return false;
        }

        return substr($value, 3);
    }

}

`

Works only if you select Active Node, though. Needs more fixing ;- )