Opencart как вывести меню

Горизонтальное меню из статей в CMS Opencart

Здравствуйте читатели моего блога. Мы продолжаем рассматривать полезные фичи для создания интернет магазина на Opencart.

Кто уже работал с данной CMS, видели, что горизонтальное меню по умолчанию формируется из созданных категорий. Часто это не слишком удобно, и разработчикам нужно подключить вывод, например, статей, зачастую это пункты меню: Доставка, Оплата и прочие. По умолчанию, если при создании статьи поставить галочку «Bottom». То они будут отображаться в нижней части сайта – в футере.

Давайте осуществим несложные операции и выполним поставленную перед нами задачу.

1.) Для начала будем править файл контроллера, он находится в — /catalog/controller/common/header.php.

Ищем часть кода:

И перед ним вставляем следующий код:

После чего нам нужно подправить файл шаблона, в котором указан вывод меню. Для этого открываем файл — /catalog/view/theme/ваша тема/template/common/header.tpl и вместо кода:

Вставляем новый код:

Вот и все, теперь у вас вместо категорий будут выводиться нужные Вам статьи. Они также будут 100% поддерживать мультиязычность, о которой мы говорили вот здесь.

В ближайшее время я начну рассматривать настройку интересных платных компонентов для Opencart, чтобы вы могли оценить всю мощь функционала, и определится, нужно ли вам покупать тот или другой модуль или нет. Чтобы ничего не пропустить подписывайтесь на мой блог в форме, которая расположена в сайдбаре.

Источник

Главное меню OpenCart: как добавить, удалить пункт верхнего меню Опенкарт

Вступление

Предо мной стоит задача, убрать и добавить из главного меню магазина пункт меню. Показываю, как это сделать, предварительно рассказывая, про главное меню OpenCart магазина.

Про главное меню OpenCart

В коробочной версии системы управления OpenCart , можно создать главное меню (оно же верхнее меню) магазина, только из категорий родительских категорий.

Дочерние категории родительской категории будут выпадать из пунктов меню родительских категорий автоматически. В настройках меню вы можете задать, как будут показаны дочерние категории. А именно указать количество столбцов дочерних категорий, их порядок и статус (показать/скрыть).

В этой статье я не буду показывать правку кода для другой настройки главного меню. Однако замечу, что правка кода меню делается в файлах:

• /catalog/view/theme/default/template/common/header.twig
• /catalog/controller/common/header.php

Обратите внимание, что главное меню коробочной версии адаптивно и занимает весь экран устройства, на котором идёт просмотр. На малых экранах меню сворачивается в кнопку. На фото вы можете видеть, как выглядит меню на мобильных устройствах.

Как добавить новый пункт главного меню

Перейдем к практике и посмотрим, как добавить новый пункт главного меню в демо-меню коробочной версии (для примера).

• Идем на вкладку «Категории»;
• Выбираем родительскую категорию товаров и нажимаем значок «Редактировать» в строке выбранной категории;

• На странице ректора категории, на вкладке «Данные» выделяем чекбокс «Главное меню» (1 на фото);

• Ниже указываем количество столбцов для дочерних категорий (2 на фото). Значение «0, ноль» будет соответствовать одному столбцу, значению «1»;
• Не забываем указать сортировку этой категории в главном горизонтальном меню (3).

Убрать пункт меню из главного меню

Чтобы удалить любой пункт верхнего меню OpenCart нужно:

• Выбрать родительскую категорию товаров и нажать значок «Редактировать» в строке выбранной категории;
• На странице ректора категории, на вкладке «Данные» убрать галочку в чеке «Главное меню»;
• Не забыть сохраниться.

Вывод

Согласитесь, в коробочной версии главное меню OpenCart очень просто настраивается. По моему, слишком просто и слишком ограниченно. Если сравнивать настройки меню OpenCart с меню других CMS, оно явно проигрывает.

Однако код OpenCart несложный и всегда можно «допилить» меню системы под себя «ручками». Об этом в других статьях, для продвинутых пользователей. Подписывайтесь на обновления блога.

Источник

Как вывести свои ссылки в верхнем меню opencart?

Как вывести свои ссылки в верхнем меню opencart?

Сегодня хочу написать небольшую статью о добавлении своих произвольных ссылок в главное меню. По умолчанию в шаблоне выводятся только отмеченные категории в меню, но иногда нам требуется вместо категорий или вместе с ними выводить свои ссылки к примеру О компании,контакты,Доставка,оплата,документы и.т.д.
Ну что же приступим:
(PS: Данный метод может отличатся на не стандартных шаблонах)
Весь код главного меню лежит в файле header.tpl который лежит здесь:

Открываем данный файл в нашем любимом notepad+ и находим в нем код который и отвечает за меню:

И изменяем его на свой код к примеру так:

Таким образом мы убрали полностью весь вывод категорий и добавили свои ссылки.
Если же Вам требуется выводить ссылки совместно то просто добавляете их после закрывающего тега li

Вот так просто мы изменили верхнее меню , пробуйте комментируйте ,задавайте вопросы!

ПОЛЕЗНАЯ РЕКЛАМА НА САЙТЕ

Понравилась статья?
Комментируй , делись с друзьями!

Вас также может заинтересовать

Дата поступления в карточке товара opencart

Выводим информацию для определенной группы пользователей

Определение города посетителя по IP адресу

Нужна платная помощь?
Обращайтесь, сделаем все быстро и качественно!

13 комментариев

Здравствуйте! А как сделать чтобы ссылки были выпадающие ?

Тут нужно смотреть пациента, но обычно все сводится к добавлению нескольких строчек ли и css кода…

Бляяяяять Идите нахуй с такими туториалами, вы серьезно? Стереть динамически генерируемое содержимое и заменить на какие-то статические html-костыли? Понял, всего доброго

Ну во первых попрошу не выражаться и вести себя культурно.
Во вторых если вам не нравится самое простое решение то можете посмотреть более правильное и сложнее по ссылке ниже:
https://web-stydia.com/vyvod-informacionnyx-ssylok-v-shapku-sajta-opencart/
И в третьих если вы такой умный то что вы здесь делаете?

а к Ocstore 2.3 применим данный способ?

Да, данный метод применим к любой версии opencart, так как по сути вы просто вписываете в код шаблона hhml код.

Сорри, не глянул что это комментарий не к статье а к предыдущему комменту, но в любом случае, данный метод так же применим для вашей версии, но это уже не простой html и нужно немного больше файлов править!

Мало того, если у кого-то хватит ума последовать этому «туториалу», то получит на сайт еще и кучу крякозябров. Тут ведь даже не упоминается, как эта проблема решается

Извините конечно, не хочу Вас обидеть но крокозябры у вас в голове…
Зачем пугать людей этим бредом?
Крокозябры могут возникнуть при любом редактировании файлов не именно речь идет про данный метод, если вы используете кириллицу то позаботьтесь о сохранении в верной кодировке, и используйте notepad+ и будет вам счастье.
По вашему утверждению все лейдинги которые в большей степени сделаны на чистом HTML должны работать только крокозябрами , ведь у них все так же текст написан прям в файле, без подключения к базе данных…
Теперь по сути, в данном методе есть свои плюсы и есть минусы, давайте поговорим про минусы, и он только один, если вы используете на своем сайте несколько языков то данный метод вам не подходит, больше минусов нет.
А теперь про плюсы, главный плюс в том что редактировать нужно всего только один файл, второй плюс что при использовании вы не обращаетесь к базе данных соответственно на 1 запрос к базе данных у вас меньше…
По этому кому использовать данный метод решает каждый сам, если же вам нужно подключить чтоб можно было работать с несколькими языками, тогда нужно все подключать по следующей статье .
Так что уважаемый Филин, не вводите людей в заблуждение своими страшилками, тем более что если вы читаете данный туториал то скорей всего вы и сами не в курсе как это делать и пришли к нам в поисках решения.

Да, я ожидал статью, более или хотя бы менее), пример просто топ

К сожалению я не могу знать чего вы ожидали, но я уже многократно писал в комментариях напишу и Вам, если не нравится самый простой метод используйте более сложный по инструкции здесь https://web-stydia.com/vyvod-informacionnyx-ssylok-v-shapku-sajta-opencart/

Можно где то пример увидеть?

Пример чего Вы хотите увидеть? Ссылок на сайте…
Пример у вас в подвале , просто вывести можно где угодно и что угодно.

Источник

Посадка своего дизайна на страницу opencart, верхнее меню

Когда переносим наш дизайн в магазин мы занимаемся только стилизацией cms opencart.

Весь функционал есть.

Расширять функционал можно модулями.

Наши действия это брать файлы из темы по умолчанию default и копировать их в нашу тему.

Если мы хотим переопределить корзину это файл cart.tpl, мы копируем его в нашу тему и в sublime text делаем изменения.

Начнем делать изменения в нашем шаблоне, для этого запустим gulp.

Откроем шапку магазина в файле header.tpl, который мы скопировали в свою тему my из темы по умолчанию.

Полный путь к файлу C:\OpenServer\domains\opencart.loc\catalog\view\theme\my\template\common\header.tpl.

Редактируем header.tpl в opencart.

1). Изначально проверяем все пути к файлам.

Меняем папку /default/ на нашу папку с темой /my/.

Нажимаем сочетание клавиш ctrl+h и в поле найти find пишем папку default, в нижнем поле указываем нашу папку my.

Нажимаем клавишу replace all.

2). Перейдем к навигации nav с идентификатором top и удалим выбор валют.

3). Копируем nav и добавляем под тег header.

Теперь сделаем верхнюю линию header.

Сверху логотип, посередине будет поиск и справа логин и телефон.

Под строкой row у тега header пишем новую разметку.

1. Логотип занимает три колонки col-md-3. Вырезаем все, что от логотипа в коде и добавляем в нашу разметку.
2. Во второй колонке col-md-5 разместим поиск.
3. Копируем элемент списка li с логином в колонку и добавим ul div Перенесем телефон, копируем ссылку с телефоном в третью колонку.

Сделаем вторую линию nav с меню и корзиной.

1. Меню будет в колонке col-sm-8. Копируем в эту колонку nav удаляем все внутри списка ul navbar-nav и добавляем вывод информации . Делаем по аналогии с файлом footer.tpl, выводится внизу информация, которая выводится из административной панели opencart в меню каталог статьи.
Информация не отобразится, будет ошибка. Устраняем ошибку созданием модификатора. Готовый файл с модификатором загружаем в проект. Как создать новый модификатор для шапки читать тут. В итоге сверху должна отобразиться информация с меню.

2. Переместим код корзины в col-sm-4

Код index.html.

Стилизуем в файле стилей магазина stylesheet.sass.

В opencart, только дописываем свои стили, ничего из системного не переопределяем.

Это готовая система.

1. Добавим стили к header отступ сверху padding: 10px 0 и серый фон.
2. Чтобы стилизовать логотип добавим новый класс logo в html. Уменьшим размер логотипа.
3. У поиска нет классов, просто стилизуем идентификатор #search. Добавим нужные свойства поиску, плюс при наведении и в фокусе будет другой фон. Чтобы поменять слово по умолчанию в поле поиска откроем файл по пути C:\OpenServer\domains\opencart.loc\catalog\language\ru-ru\common\search.php и отредактируем. Изменим кнопку с классом input-group-btn.
4. Добавим обертке с классом dropdown для личного кабинета и телефона свойство display: inline-block.
5. Для выпадающего меню dropdown-toggle зададим отступы, размер шрифта и цвет.
6. Для фокуса, наведения мышкой и активного состояния меню личного кабинета убираем text-decoration: none
7. Для dropdown-menu добавим рамку и ко всем элементам списка и ссылкам отступ. Будем менять стиль при наведении мышкой &:focus, &:hover.
8. Чтобы стилизовать телефон, зададим новый класс в html phone, у телефона как и у личного кабинета добавим display: inline-block.

Добавляем стили для второй полосы с меню и корзиной.

1. Для навигации с классом top-menu. Для главного меню navbar сделаем шрифт font-size: 1.4em. Цвет черный шрифта. Для всех ссылок у дочернего элемента меню &-nav сделаем отступ сверху top: 15px. При наведении уберем текст подчеркнутым и цвет меняется на синий.
2. Корзина с идентификатором #cart. Внутри кнопка button, смотрим в браузере посмотреть код у элемента, поэтому к button пропишем свойства.

Источник