2OC Megamenu

Особенности, установка, настройка и примеры


Ссылки на демо

Главная страница

Админка

login: demo

pass: demo

Описание

2OC Megamenu совмещает в себе:

На данный момент пока не реализованы: стикеры в дочерних меню.

Прилагается полная документация по установке и настройке (с картинками по шагам), на базе темы по умолчанию, для версий 2.x и 3.x.
Примеры со скриншотами настроек, как сделать то или иное меню, как включить нужный функционал и т.д. и т.п.

Удобный и быстрый редактор меню, Drag & Drop.

8 типов элементов меню:


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

Добавлена возможность, при наведении на ссылку в выпадающем меню, смены изображения как для группы ссылок, так и для одного изображения на всё меню.

2OC Megamenu Динамическая смена банеров по группам ссылок

Данная возможность доступна для таких типов меню как: категория и подкатегория, плюс если необходимо сделать что-то своё униальное, это можно реализовать с помощью HTML-контент.


Стикеры

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


Кеширование

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


Lazyload

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


2OC Megamenu поставляется с дополнительным модулем (модификатором) 2OC Layout header, который на примере темы по умолчанию показывает как правильно интегрировать 2OC Megamenu в вашу тему.

Совместимость с другими темами `из коробки` не гарантируется!
Если ваш шаблон отличается от шаблона по умолчанию, то интеграция 2OC Megamenu в ваш шаблон осуществляется на платной основе.

При особой необходимости адаптируем 2OC Megamenu под версии 2.1 или 2.2 OpenCart и ocStore.

Пример внешнего вида меню типа подкатегория, с показом изображений категорий:

Пример внешнего вида меню с изображениями и типом подкатегории, без показа изображений категорий:

Пример внешнего вида меню с изображениями и типом категории:

Примеры других типов меню смотрите на демо сайте и в админке...

Для установки вам понадобится:

 

Перед установкой у вас есть два варианта:

1. Конфигурация FTP.

2. Установка расширения QuickFix, которое отключает требование конфигурации FTP.

Второй вариант проще!!!

После того, как с FTP закончили, нужно установить модули.

Для установки модулей зайдите в Модули / Расширения -> Установка расширений и нажмите кнопку Загрузить, поочередно для каждого модуля.

В случае успешной загрузки вы увидите сообщение: Модуль успешно установлен!

После установки расширений, нужно дать права на просмотр и их изменение, для этого зайдите Система  -> Пользователи -> Группа пользователей, нажмите кнопку Редактировать напротив группы Administrator.

В открывшемся окне Группы пользователей выделите все разрешения и сохраните их.

Шаг 1. Нажмите "Выделить все".

Шаг 2. Нажмите "Выделить все".

Шаг 3. Нажмите кнопку "Сохранить".

После сохранения прав, нужно обновить модификаторы, зайдите в Модули / Расширения -> Модификаторы, нажмите кнопку Обновить.

Расширение установлено!

Для конфигурации FTP зайдите Система -> Настройки и нажмите кнопку Редактировать

В открывшемся окне выберите вкладку FTP, поставься переключатель Включить FTP в положение Да и заполните все поля:

Для установки расширения QuickFix, которое отключает требование настройки FTP, нужно:

Шаг 1. Загрузите QuickFix.

Шаг 2. Установите расширение Quickfix, для этого зайдите в Модули / Расширения -> Установка расширений и нажмите кнопку Загрузить.

В случае успешной загрузки появится сообщение: "Модуль успешно установлен!"

Шаг 3. Обновите модификаторы, для этого зайдите в Модули / Расширения -> Модификаторы и нажмите кнопку Обновить.

 

Модуль QuickFix установлен!

Для установки модулей зайдите в Модули/Расширения -> Установка расширений, нажмите кнопку Загрузить, поочередно для каждого модуля.

В случае успешной загрузки вы увидите сообщение: Настройки успешно изменены!

После установки расширений, нужно дать права на просмотр и их изменение, для этого зайдите Система  -> Пользователи -> Группы пользователей, нажмите кнопку Редактировать.

В открывшемся окне Группы пользователей выделит все разрешения и сохраните их.

Шаг 1. Нажмите "Выделить все".

Шаг 2. Нажмите "Выделить все".

Шаг 3. Нажмите кнопку "Сохранить".

После сохранения прав, нужно обновить модификаторы, зайдите в Модули / Расширения -> Модификаторы, нажмите кнопку Обновить.

После обновления модификаторов нужно обновить кеш темы.

Шаг 1. Нажмите логотип.

Шаг 2. Нажмите кнопку "Настройки".

Шаг 3. Нажмите кнопку "Обновить".

Шаг 4. Нажмите кнопку "Обновить".

Расширение установлено!

В версии Opencart версии 3.0.3.6 и выше (ocStore так же) есть проблема с работой Twig, в результате появляется ошибка вида:

        Fatal error: Uncaught Twig\Error\LoaderError: Template ...
    

Для ее решения нужно установить модфикатор: для версии от 3.0.3.6 до 3.0.3.8 или для версии 3.0.3.9.

Для его установки зайдите в Модули/Расширения -> Установка расширений, нажмите кнопку Загрузить, и выберите заранее скачанный модификатор.

В случае успешной загрузки вы увидите сообщение: Настройки успешно изменены!

После установки модификатора, нужно обновить модификаторы, для этого зайдите в Модули / Расширения -> Модификаторы, нажмите кнопку Обновить.

После обновления модификаторов нужно обновить кеш темы.

Шаг 1. Нажмите логотип.

Шаг 2. Нажмите кнопку "Настройки".

Шаг 3. Нажмите кнопку "Обновить".

Шаг 4. Нажмите кнопку "Обновить".

Расширение установлено!

Если вы установили oc_layout-[версия-расширения]-[версия-opencart]-default.ocmod.zip, то нужно данное расширение настроить.

Шаг 1. Нажмите "Модули/Расширения".

Шаг 2. В открывшемся подменю нажмите "Модули/Расширения".

Шаг 3. Для активации расширения нажмите кнопку "Активировать"

После активации.

Шаг 1. В случае успешной активации вы увидите сообщение: "Настройки успешно изменены!"

Шаг 2. Для редактивания расширения нажмите кнопку "Редактировать"

Будет открыто окно 2OC Layout Header.

Шаг 1. Убедитесь, что меню "Отключено"

Шаг 2. Убедитесь, что статус расширения "Включено"

Шаг 3. Для сохранения изменений нажмите кнопку "Сохранить"

В случае успешного сохранения вы увидите сообщение: "Настройки успешно изменены!".

Для активации расширения oc_megamenu-[версия-расширения]-[версия-opencart].ocmod.zip нужно:

Шаг 1. Нажмите "Модули/Расширения".

Шаг 2. В открывшемся подменю нажмите "Модули/Расширения".

Шаг 3. Для активации расширения нажмите кнопку "Активировать"

После активации.

Шаг 1. В случае успешной активации появится сообщение: "Настройки успешно изменены!"

Шаг 2. Появится дополнительный пункт, для редактирования меню нажмите кнопку "Редактировать"

В открывшемся окне 2OC Megamenu нужно будет ввести проверочный код для домена, который был получен при покупке расширения

Шаг 1. Введите проверочный код.

Шаг 2. Нажмите кнопку проверить.

В случае правильности проверочного кода появится окно показаное на рисунке ниже:

В том случае, если вы устанавливаете дополнение на тему по умолчанию, кнопки "Копировать 2OC Megamenu" не будет!

Эта кнопка появляется только в том случае, если текущая тема не является темой по умолчанию, так как директория oc_megamenu необходима для правильной работы дополнения...

В результате нажатия на эту кнопку, будет скопирована директория oc_megamenu из темы по умолчанию в вашу текущую тему, например:

2OC Megamenu активировано и готово к настройке!

Для адаптации нужен модуль 2OC Layout header, в котором нужно сделать правки в файле install.xml и переименовать папку в upload/catalog/view/theme/default на название папки с вашим шаблоном.

Ваши действия должны быть такими:

  1. Распаковали архив oc_layout-[версия-расширения]-[версия-opencart]-default.ocmod.zip.
  2. Изменили install.xml.
  3. Изменили название папки.
  4. Запаковали архив.
  5. Установили модуль.
  6. Обновили модификаторы.
  7. Проверили работу модуля.
  8. Если не работает и белый экран смотрите в логах ошибки.
  9. Если не работает и белый экран смотрите system/storage/modification/catalog/view/theme/default/template/common/header.tpl (или twig) это файл получившийся после работы модификатора и сравниваете его с оригиналом: catalog/view/theme/default/template/common/header.tpl (или twig).

Для для адаптации 2OC Megamenu с вашей темой требуется правка 2 секций file:

    <file path="catalog/view/theme/*/template/common/header.tpl">
        <operation>
            <search>
                <![CDATA[<?php if ($categories) { ?>]]>
            </search>
            <add position="before">
                <![CDATA[<?php if( $module_oc_layout_header_status == 0 || $module_oc_layout_header_menu_status == 1) { ?>]]>
            </add>
        </operation>
    </file>
    <file path="catalog/view/theme/*/template/common/header.tpl">
        <operation>
            <search regex="true" limit="1"><![CDATA[($)]]></search>
            <add position="before">
                <![CDATA[<?php } ?>
<?php echo $oc_layout_header; ?>]]>
            </add>
        </operation>
    </file>

В файле catalog/view/theme/*/template/common/header.tpl ищется:

    <?php if ($categories) { ?>

и в случае если нашлось перед найденной строкой вставляется:

     <?php if( $module_oc_layout_header_status == 0 || $module_oc_layout_header_menu_status == 1) { ?>

Далее снова в файле catalog/view/theme/*/template/common/header.tpl ищется конец файла:

    ($)

и перед ним вставляется:

    <?php } ?>
    <?php echo $oc_layout_header; ?>
        

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

Или может отсутствовать if ($categories) {, в место него нужно найти код начала старого меню, и вставить его в первую секцию.

Код меню может быть в других файлах, не обязательно catalog/view/theme/*/template/common/header.tpl, всё зависит от шаблона.

Для для адаптации 2OC Megamenu с вашей темой требуется правка 1 секции file:

<file path="catalog/view/theme/*/template/common/header.twig">
        <operation>
            <search>
                <![CDATA[{{ menu }}]]>
            </search>
            <add position="replace">
                <![CDATA[{% if module_oc_layout_header_status == 0 or module_oc_layout_header_menu_status == 1 %}
                {{ menu }}
                {% endif %}
                {{ oc_layout_header }}]]>
            </add>
        </operation>
    </file>

В файле catalog/view/theme/*/template/common/header.twig ищется:

        {{ menu }}

и в случае если нашлось меняется на:

        {% if module_oc_layout_header_status == 0 or module_oc_layout_header_menu_status == 1 %}
        {{ menu }}
        {% endif %}
        {{ oc_layout_header }}
    

{{ menu }} может отсутстовать в место него нужно найти код начала старого меню, и вставить его в первую секцию для поиска

Код меню может быть в других файлах, не обязательно catalog/view/theme/*/template/common/header.twig, всё зависит от шаблона.

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

Opencart 2OC Megamenu импорт меню

Не импортировать ничего не делать
Генерировать из категорий 2

генерировать из категорий уровень которых не меньше 2, например:

  • Электроника
    • GPS-навигаторы
    • Stem-игрушки
    • Аудио и видео
    • Всё для геймеров
    • Игры и приставки
    • Оптические приборы
    • Портативная техника
    • Робототехника
    • Смартфоны
    • Техника для авто
    • Умные часы
    • Умный дом
  • Авто
    • Инструменты
    • ...

В качестве типа меню будет выбрана подкатегория и выпадающее меню для категории Электроника будет выглядеть примерно так:

Opencart 2OC Megamenu импорт меню 2

Генерировать из категорий 3

генерировать из категорий уровень которых не меньше 3, например:

  • Компьютерная техника
    • Ноутбуки
      • Acer
      • ...
    • Настрольные ПК
      • Acer
      • ...
    • Комплектующие
      • Видеокарты
      • ...
    • Накопители
      • USB Flash drive
      • ...
    • Оргтехника
      • Принтеры и МФУ
      • ...
    • Аксессуары
      • Мыши
      • ...

В качестве типа меню будет выбрана категория и выпадающее меню для категории Компьютерная техника будет выглядеть примерно так:

Opencart 2OC Megamenu импорт меню 3

2OC MegaMenu импортировать пункты меню из выбранного меню в текущее, в результате
будет сделана полная копия меню

 

Для добавления меню зайдите в Модули/Расширения -> Модули/Расширения и нажмите кнопку Добавить.

Opencart 2OC Megamenu добавление меню

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

Opencart 2OC Megamenu добавление меню

 

Для удаления меню зайдите в Модули/Расширения -> Модули/Расширения и нажмите кнопку Удалить.

Opencart 2OC Megamenu удаление меню

Динамическая смена изображения при наведении на пункты меню устанавливается только для подменю с типами: категории и подкатегории.

По умолчанию банеры выключены. Для того, чтобы их включить нужно зайти в меню 1 уровня для редактирования и перейти во вкладку Банер.

Opencart 2OC Megamenu Стикеры

Есть два типа банеров:

Глобальный

одно меняющееся изображение, для всех элементов подменю с типом категория и подкатегория.

Opencart 2OC Megamenu тип подменю HTML
Локальный

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

Opencart 2OC Megamenu тип подменю HTML

Изображение нужно задавать только для типа банера - глобальный. Для типа локальный, берется 1 изображение из категории или подкатегории

Стикеры можно устанавливать только пунктам меню, которые являются родительскими меню 1 уровня.

По умолчанию стикеры выключены. Для того, чтобы их включить нужно зайти в меню 1 уровня для редактирования и перейти во вкладку Стикер.

Opencart 2OC Megamenu Стикеры

На данный момент можно задавать:

Кеширование по умолчанию выключено, оно включается во вкладке Кеширование основных настроек 2OC Megamenu.

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

Opencart 2OC Megamenu кеширование выключено

Для включения нужно в выпадающем списке выбрать Да и нажать кнопку Сохранить.

Opencart 2OC Megamenu кеширование включено

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

Lazy Load — отложенная загрузка изображений. Lazyload нужно включать только в том случае, если у вас стоит модуль отложенной загрузки изображений, который подключает например такой jQuery плагин как jquery.lazyload или lazysizes.

Lazyload включается и выключается во вкладке jQuery, основных настроек 2OC Megamenu, по умолчанию данный параметр выключен и его нужно включать для каждого меню! Opencart 2OC Megamenu Lazyload

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

Opencart 2OC Megamenu пример создания меню

4 подменю, тип: категория, ширина 3/12

Opencart 2OC Megamenu пример создания меню Opencart 2OC Megamenu пример создания меню Opencart 2OC Megamenu пример создания меню Opencart 2OC Megamenu пример создания меню
Opencart 2OC Megamenu пример создания меню

4 подменю, тип: продукт, ширина: 3/12

Opencart 2OC Megamenu пример создания меню Opencart 2OC Megamenu пример создания меню Opencart 2OC Megamenu пример создания меню Opencart 2OC Megamenu пример создания меню

1 подменю, тип: изображение, ширина: 4/12

Opencart 2OC Megamenu пример создания меню

1 подменю, тип: категория, ширина: 8/12

Opencart 2OC Megamenu пример создания меню
Opencart 2OC Megamenu пример создания меню

1 подменю, тип: изображение, ширина: 4/12

Opencart 2OC Megamenu пример создания меню

1 подменю, тип: подкатегория, ширина: 8/12

Opencart 2OC Megamenu пример создания меню

1 подменю, тип: изображение, ширина: 4/12

Opencart 2OC Megamenu пример создания меню

1 подменю, тип: подкатегория, ширина: 8/12

Opencart 2OC Megamenu пример создания меню
Opencart 2OC Megamenu пример создания меню

8 подменю, тип: продукт, ширина: 3/12

Opencart 2OC Megamenu пример создания меню Opencart 2OC Megamenu пример создания меню Opencart 2OC Megamenu пример создания меню Opencart 2OC Megamenu пример создания меню
Opencart 2OC Megamenu пример создания меню Opencart 2OC Megamenu пример создания меню Opencart 2OC Megamenu пример создания меню Opencart 2OC Megamenu пример создания меню

1 подменю, тип: изображение, ширина: 12/12

Opencart 2OC Megamenu пример создания меню
Opencart 2OC Megamenu пример создания меню

1 подменю, тип: подкатегория, ширина: 12/12

Opencart 2OC Megamenu пример создания меню

2 подменю, тип: изображение, ширина: 6/12

Opencart 2OC Megamenu пример создания меню Opencart 2OC Megamenu пример создания меню
Opencart 2OC Megamenu пример создания меню

1 подменю, тип: категория, ширина: 12/12

Opencart 2OC Megamenu пример создания меню

4 подменю, тип: изображение, ширина: 3/12

Opencart 2OC Megamenu пример создания меню Opencart 2OC Megamenu пример создания меню Opencart 2OC Megamenu пример создания меню Opencart 2OC Megamenu пример создания меню
Opencart 2OC Megamenu пример создания меню

1 подменю, тип: подкатегория, ширина: 12/12

Opencart 2OC Megamenu пример создания меню
Opencart 2OC Megamenu пример создания меню

1 подменю, тип: изображение, ширина: 3/12

Opencart 2OC Megamenu пример создания меню

1 подменю, тип: подкатегория, ширина: 9/12

Opencart 2OC Megamenu пример создания меню
Opencart 2OC Megamenu пример создания меню

1 подменю, тип: подкатегория, ширина: 8/12

Opencart 2OC Megamenu пример создания меню

1 подменю, тип: изображение, ширина: 4/12

Opencart 2OC Megamenu пример создания меню

1 подменю, тип: подкатегория, ширина: 8/12

Opencart 2OC Megamenu пример создания меню

1 подменю, тип: изображение, ширина: 4/12

Opencart 2OC Megamenu пример создания меню
Opencart 2OC Megamenu пример создания меню

1 подменю, тип: подкатегория, ширина: 12/12

Opencart 2OC Megamenu пример создания меню
Opencart 2OC Megamenu пример создания меню в меню

1 подменю, тип: меню, ширина: 12/12

Opencart 2OC Megamenu пример создания меню

само Меню-подменю создаётся отдельно и настраивается как обычное вертикальное меню.