Свои статичные ссылки в главном меню Opencart

В данной статье даём пошаговую инструкцию для вставки статичных ссылок в стандартное меню Opencart. Может кому и пригодится. Забираем!

В нашем случае при построении простого лендинга, меню с категориями товара просто не требовалось — ввиду их отсутствия. Но была задача: вставить свои ссылки на якорь посадочной страницы, а также относительные ссылки на контакты и схему проезда. На выходе получилось весьма неплохое и красивое меню, с быстрым доступом к содержимому страницы.

Готовое меню в мобильной версии сайта

 

Готовое меню в веб версии сайта

Первоначально пытались вывести модуль навигации в позиции "Left" (Левая колонка), но что-то не очень впечатлило. Выглядело как то сумбурно и не айс; тем более, что в мобильной версии сайта этот модуль был бы скрыт. Решили задействовать ВЕРХНЕЕ МЕНЮ по умолчанию и вот что из этого вышло.

Разбираем на живом примере вставку ссылок в навигационное меню "navbar"a дефолтного шаблона Opencart. А также поиграемся с графической вставкой лёгкой графики (эмодзи).

Переходим в файловый менеджер вашего хостинга с админпанели:
public_html >> catalog >> view >> theme >> default >> template >> common >> menu.twig открываем его

через поиск находим: <li><a href="{{ category.href }}">{{ category.name }}</a></li> и вырезаем его. Выделить, клик правой кнопки мыши "Вырезать".

Далее вверху страницы ищем класс: <ul class="nav navbar-nav"> и после него вставляем свои ссылки
      <li><a href="#m-aks">Ваш_эмодзи Аксессуары</a></li>
      <li><a href="#peref">Ваш_эмодзи Периферия</a></li>
      <li><a href="#el-pit">Ваш_эмодзи Элементы питания</a></li>
      <li><a href="#kanc">Ваш_эмодзи Канцтовары</a></li>
      <li><a href="#feast">Ваш_эмодзи Для праздника</a></li>
      <li><a href="#service">Ваш_эмодзи Наши услуги</a></li>
      <li><a href="#maps">Ваш_эмодзи Схема проезда</a></li>
      <li><a href="index.php?route=information/contact">Ваш_эмодзи Обратная связь</a></li>

Что бы всё работало тип-топ: соответственно якорь на нашем одностраничнике необходимо предварительно создать. Переходим в "Расширения" >> "HTML контент".
У нас это реализовано так: под каждую группу товара, создан НОВЫЙ МОДУЛЬ БЕЗ ЗАГОЛОВКА. Пункт меню вывели в содержимом модуля с предварительно вставив якорь перед ЗАГОЛОВКОМ СОДЕРЖИМОГО модуля.

Для отображения модулей на главной странице их необходимо вывести в "МАКЕТАХ". Для этого переходим на вкладку "Дизайн" >> "Макеты" >> "Главная"

Готово! Переходим на сайт и любуемся результатом.

Надеемся, что наша скромная статья поможет вам! Статья написана для людей и мы были бы вам безмерно признательны, если вы поделитесь ссылкой на материал статьи.