Enter an information page in top menu in OpenCart 3.0.x

Question

All the help for OpenCart on internet is on *.tpl files... But OpenCart is updated now so the basic problem I'm facing is that I want to add an information page 'aboutus' in top menu. There's no HTML view which I can change so, I've a .twig file which only let categories show in top menu as follows:

{% if categories %}
<div class="container">
  <nav id="menu" class="navbar">
    <div class="navbar-header"><span id="category" class="visible-xs">{{ text_category }}</span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars">    </i></button>
    </div>

    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        {% for category in categories %}
        {% if category.children %}


          <div class="dropdown-menu">
            <div class="dropdown-inner"> {% for children in category.children|batch(category.children|length / category.column|round(1, 'ceil')) %}
              <ul class="list-unstyled">
                {% for child in children %}
                <li><a href="{{ child.href }}">{{ child.name }}</a></li>
                {% endfor %}
              </ul>
              {% endfor %}</div>
     <a href="{{ category.href }}" class="see-all">{{ text_all}}{{category.name }}</a> </div>

        </li>

        {% else %}
        <li><a href="{{ category.href }}">{{ category.name }}</a></li>

       {% endif %}
        {% endfor %}

       <li><a href="{{ information.href }}">{{ information.href }}</a></li>

    </ul>

      </div>
    <ul class="nav navbar-nav">
    <li><a href="{{ localhost/ghazi/upload/about_us }}">About US</a></li>

    </ul>
    </nav>
    </div>
{% endif %} 

and the controller is menu.php as follows:

<?php
class ControllerCommonMenu extends Controller {
    public function index() {
        $this->load->language('common/menu');

        // Menu
        $this->load->model('catalog/category');

        $this->load->model('catalog/product');
        $this->load->model('catalog/information');
        $data['categories'] = array();

        $categories = $this->model_catalog_category->getCategories(0);

        foreach ($categories as $category) {
            if ($category['top']) {
                // Level 2
                $children_data = array();

                $children = $this->model_catalog_category->getCategories($category['category_id']);

                foreach ($children as $child) {
                    $filter_data = array(
                        'filter_category_id'  => $child['category_id'],
                        'filter_sub_category' => true
                    );

                    $children_data[] = array(
                        'name'  => $child['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),
                        'href'  => $this->url->link('product/category', 'path=' . $category['category_id'] . '_' . $child['category_id'])
                    );
                }

                // Level 1
                $data['categories'][] = array(
                    'name'=> $category['name'],
                    'children' => $children_data,
                    'column'=> $category['column'] ? $category['column'] : 1,
                 'href'=>$this->url->link('product/category','path='.category['category_id'])
                );

            }
        }


        return $this->load->view('common/menu', $data);
        }
        }

I just want to show about us page in top menu

Answer 1

Since editing the controller to show a page is, in effect, similar to editing the template in that you're adjusting the code, I feel the simplest route would be to hard-code the URL on the twig file. Assuming you're going to add the menu-item at the end of the existing menu, you can try the code below:

{% if categories %}
<div class="container">
  <nav id="menu" class="navbar">
    <div class="navbar-header"><span id="category" class="visible-xs">{{ text_category }}</span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        {% for category in categories %}
        {% if category.children %}
        <li class="dropdown"><a href="{{ category.href }}" class="dropdown-toggle" data-toggle="dropdown">{{ category.name }}</a>
          <div class="dropdown-menu">
            <div class="dropdown-inner"> {% for children in category.children|batch(category.children|length / category.column|round(1, 'ceil')) %}
              <ul class="list-unstyled">
                {% for child in children %}
                <li><a href="{{ child.href }}">{{ child.name }}</a></li>
                {% endfor %}
              </ul>
              {% endfor %}</div>
            <a href="{{ category.href }}" class="see-all">{{ text_all }} {{ category.name }}</a> </div>
        </li>
        {% else %}
        <li><a href="{{ category.href }}">{{ category.name }}</a></li>
        {% endif %}
        {% endfor %}
        <li><a href="http://storeURL/index.php?route=information/information&information_id=4">About Us</a></li>  
      </ul>
    </div>
  </nav>
</div>
{% endif %} 

Please confirm the ID of the information page is indeed "4" and change storeURL to that of your store.

We could take it a step further and include the storeURL in the controller file and then reference that in the menu but I feel this is additional work that serves no real benefit, especially if you only want to show ONE information page in the top menu.