Categories

Новые шаблоны

PrestaShop 1.6.x. Как работать с модулем «TM Mega Menu» (v.1.7.0+)

Alain Johns Апрель 10, 2017
Rating: 5.0/5. From 4 votes.
Please wait...

Из этого туториала Вы узнаете, как настроить модуль TM Mega Menu (v.1.7.0+).

Это модуль создан для создания сложных меню. Модуль предоставляет возможность отобразить один элемент (без подменю), пункт меню с подменю и пункт меню с подменю с помощью блока с несколькими строками или несколькими столбцами. Модуль может использоваться в разных позициях, но он будет отображать одно и то же содержимое.

Доступные позиции: вверху (displayTop), слева (displayLeftColumn), справа (displayRightColumn), футер (displayFooter). Вы можете добавлять категории (с подкатегориями), категории CMS (с подкатегориями), производители (один или список), поставщики (один или список), магазины (если Вы используется мультимагазин), ссылки на любой товар, информационные блоки о товаре, пользовательские ссылки (не ограниченные по количеству), пользовательские блоки HTML (не ограниченные по количеству). Более того Вы можете добавить видео с YouTube и расположение на Google карте. Для получения более детальной информации читайте дальше.

Модуль TM Mega Menu разделен на разделы, которыми легко управлять. В первой строке Вы увидите свойства, которые Вы можете добавить в меню. Ниже, Вы увидите ряды, которые содержат эти элементы. Также, Вы можете изменить стили модуля. Он позволяет Вам создать пользовательский вид Элементов верхнего уровня, Ярлыков, Элементов первого и последующих уровней, а также их ссылок и условий «Ховер» и «Активный».

  1. Элемент Добавление элемента (Add an item).

    • Этот элемент является базовым элементом, который отображается в меню. Для того чтобы настроить существующие элементы, нажмите на кнопку ‘Редактировать’ (Edit) в конце строки (Вы можете также удалить элемент) ‘Список элементов’ (Item List), мы добавим элемент. Для того чтобы это сделать, нажмите на кнопку Добавить элемент (Add item).
    • В открывшемся окне Вы можете настроить Новый элемент (New Item), который отобразится в меню. Давайте рассмотрим, что обозначает каждое из полей:
      • Введите название элемента (Enter item name) – обязательное поле, которое отобразит название элемента.

      • Активный (Active) дает Вам возможность отобразить элемент меню или скрыть его.

      • Ссылка (Link): Вы можете выбирать между внешней ссылкой, которая является URL или существующей ссылкой, в первом случае вставьте URL ниже, во втором случае, выберите ссылку из списка, который отображается при нажатии на кнопку «Существующая ссылка».

      • Порядок отображения (Sort Order) отображает элементы в том порядке, который Вы указали. Например, если Вы введете 1, элемент меню будет первым в списке.

      • Особый класс (Specific class) задается, если Вы хотите внести пользовательские изменения CSS в элемент меню.

      • Введите ярлык элемента (Enter item badge) – это поле даёт Вам возможность использовать ярлык для элемента меню. Например, если у Вас есть новая категория товаров, Вы можете ввести Новое (New).

      • Это megamenu (It is megamenu) даёт Вам возможность использовать megamenu для этого элемента меню. Его очень легко настроить. Если Вы создаёте элемент Mega Menu, Вы можете добавить строку и разделить её на колонки. Максимальное количество колонок – это 12. Затем, Вы увидите удобные в использовании блоки, которые позволяют добавить или удалить содержимое из списка.

      • Настройка Использовать простое меню (Use simple menu) позволяет добавить подменю. Выберите элемент, который Вы хотите добавить из списка ‘Доступные элементы’, и нажмите на ‘Добавить’ ниже, для того чтобы переместить его в ‘Выбранные элементы’.

      Закончив настройку элемента меню, нажмите на кнопку Сохранить (Save) или Сохранить и остаться (Save or Stay). Теперь Вы знаете, как настроить Элементы меню. Они отобразятся в первой строке как список элементов, которые Вы добавляете.

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

  2. Элемент Добавление HTML (Add HTML)

    Этот элемент даёт Вам ряд возможностей создать ваше пользовательское содержимое при помощи HTML. Вы сможете добавить элементы при помощи пользовательского кода HTML, который Вам подходит. Для того чтобы добавить такой код, нажмите на кнопку Добавить HTML (Add HTML). Вам нужно указать значения следующих настроек:

    Давайте рассмотрим эти настройки:

    • Введение название элемента HTML (Enter HTML item name) – это обязательное поле, которое отображает название нового элемента HTML.

    • Особый класс (Specific Class) – эта настройка дает возможность закрепить пользовательский класс за элементом меню. Вы можете использовать этот класс в дальнейшем для добавления дополнительных правил CSS.

    • Содержимое HTML (HTML content) – редактор (отмеченный на изображении выше номером ‘3’) используется для вашего содержимого HTML. Вставьте код здесь. Более того, в редакторе есть дополнительные вкладки, которые помогут сделать его использование более простым. Если Вы хотите вставить простой код HTML, используйте вкладку Инструменты > Исходный код.

    Теперь Вы знаете, как добавить элементы HTML в ваше Mega Menu. Давайте перейдём к следующему свойству.

  3. Добавление ссылки (Add Link)

    Свойство Добавление ссылки (Add Link) довольно удобно, если Вы хотите просто добавить элемент меню и задать ссылку на него, не утруждая себя настройкой каких-то других полей. Это свойство очень просто использовать!

    • Введите название ссылки (Enter Link name) – это название элемента.

    • Введите URL ссылки (Enter Link UR) – введите URL элемента.

    • Особый класс (Specific Class) – эта настройка даёт Вам возможность добавить пользовательский класс в ваш элемент меню. Вы можете в дальнейшем использовать этот класс для добавления правил CSS.

    • Открывать в новом окне (Open in new window) – если для этой настройки задано значение «Да», элемент будет открываться в новом окне, если задано значение «Нет» — в том же окне.

  4. Добавление баннера (Add Banner )

    Элемент «Баннер» очень удобен, если Вы хотите добавить элемент меню с изображением, указывающим на вашу новую категорию, или на любой другой элемент. Вам понадобится изображение для загрузки и указания значений полей. Нажмите на кнопку Добавить баннер (Add Banner). Давайте ознакомимся с полями, которые нужно заполнить:

    • Выбор файла (Select a file) – обязательное поле, где нужно указать путь к изображению на компьютере. Наиболее подходящими форматами изображений для интернета являются JPEG или PNG.

    • Введите название баннера (Enter Banner name) – название баннера, не доступное для гостей сайта. Желательно, чтобы значение этого поля совпадало с полем Публикуемое название (Public Title) ниже.

    • Особый класс (Specific Class) – эта настройка даёт Вам возможность добавить пользовательский класс для вашего элемента меню.

    • Публикуемое название (Public Title) это название баннера, которое будут видеть гости сайта.

    • Описание (Description) – здесь такой же редактор, как и в элементе HTML. Этот редактор даёт Вам возможность добавить пользовательское содержимое в баннер, включая HTML.

    • Открыть в новом окне (Open in new window) – когда эта настройка имеет значение «Да» элемент открывается в новом окне, если «Нет» — в том же.

  5. Добавление видео (Open in new window)

    Добавление видео (Add Video) – свойство, которое позволяет Вам быстро добавить ваше пользовательское видео с YouTube или Vimeo при помощи ссылки. В этом свойстве есть только два параметра, значения которых нужно указать. Первый – это Введите название видео (Enter Video name), который содержит название элемента. Поле под ним называется Введите URL видео (Enter Video URL) и тут нужно вставить ссылку на ваше видео YouTube/Vimeo. Вы найдёте примеры ссылок ниже под этим полем.

  6. Добавление карты (Add Map)

    Это свойство даёт Вам возможность добавить карту в ваше меню. Давайте узнаем, как это сделать. Нажмите на кнопку Добавить карту (Add Map). Вы увидите следующее (поля, выделенные красным, обязательны для заполнения):

    • Введите название элемента карты (Enter Map item name) отображает название карты, которое Вы видите.

    • Введите широту карты, а затем долготу (Enter Map latitude and then Enter Map longitude) – эти поля должны быть заполнены значениями, которые указывают расположение на вашей карте, ознакомьтесь с изображением ниже. То, что отмечено красным под 1 – это широта, то, что отмечено синим под 2 – это долгота.

    • Маркер (Marker) – в этом поле должен быть значок (маленькое изображение), лучше, если это будет изображение PNG или ICO с размерами 64×64 пикселя. Нажмите на кнопку «Загрузить» и укажите путь к значку, который указывает расположение на карте.

    • Масштаб (Scale) – это масштаб карты. Значение должно быть между 1 и 21. 21 – это наибольшее приближение, 1 – наименьшее, отображает весь глобус.

    • Описание карты (Map description) – это поле, где Вы можете ввести пользовательское описание карты. Редактор довольно прост. Вы можете также использовать пользовательское форматирование HTML в поле Инструменты > Исходный код.

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

Мы рассмотрели все элементы и свойства, которые Вы можете использовать в модуле TM Mega Menu. Теперь Вы можете работать со всеми вашими элементами меню и добавить нужные элементы в него. Теперь мы рассмотрим инструмент Редактирование стилей (Edit Styles), который Вы можете использовать в правом верхнем углу страницы редактирования TM Mega Menu.

Это свойство даёт Вам возможность применить разные стили ко всем элементам, подэлементам, шрифтам и другим блокам вашего меню. Давайте ознакомимся со всеми доступными элементами. Нажмите на кнопку Редактировать стили (Edit Styles). Открывшееся окно отображает разные элементы одного уровня, которые разворачиваются и дают Вам возможность изменить стили. Также здесь есть условия «Ховер» и «Активный» для элемента. Эффект «Ховер» появляется, когда Вы наводите мышкой на элемент, элемент «Активен», когда Вы нажимаете на него. Давайте узнаем, какие стили Вы можете изменить:

  • Цвет (Color) – основной цвет шрифта выбранного уровня. Так что, если Вы выберите зеленый, ваш шрифт станет этого цвета.

  • Фоновый цвет (Background color) – цвет фона элементов текущего уровня.

  • Фоновое изображение (Background image) – альтернатива фонового цвета – даёт Вам возможность задать фоновое изображение.

  • Параметр Настройки фона (Background settings) имеет два поля, Повторение позволяет Вам повторить фоновое изображение вертикально (repeat-y), горизонтально (repeat-x), не повторять изображение, или повторить изображение и вертикально и горизонтально.

  • Цвет границы (Border color) изменяет каждый из цветов границы.

  • Тип границы (Border type) позволяет задать границы, состоящие из точек, черточек, сплошных линий или двойных границ.

  • Ширина границы (px, em) (Border type) – эта настройка задаёт ширину границ в px или em.

  • Радиус границы (px, em) — свойство, которое округляет уголки поля.

  • Тень блока (Box shadow) создаёт тень выбранного уровня. Вы должны вставить следующие параметры: 0px 0px 0px 0px rgba(0,0,0,0.75) — первый и второй параметры определяют отступ тени, то есть туда где падает тень. Третий параметр – размытие тени: чем меньше значение, тем меньше размытие. Четвертый параметр – это расширение, количество тени (определяет её размер). Последний параметр – цвет тени с кодом RGBA, который даёт Вам возможность определить прозрачность.

Эти же настройки доступны для каждого уровня и каждого элемента при ховере или нажатии в вашем Mega Menu. Измените их в соответствии с вашими потребностями.

Из этого туториала Вы узнаете, как настроить и использовать модуль TM Mega Menu.

Вы можете также ознакомиться с детальным видео-туториалом ниже:

PrestaShop 1.6.x. Как работать с модулем «TM Mega Menu» (v.1.7.0+)

Также, не забудьте ознакомиться с нашей коллекцией шаблонов PrestaShop.

Шаблоны для Prestashop
Эта запись была размещена в PrestaShop туториалы и помечена как menu, Prestashop, TM, TM mega menu. Добавьте в закладки постоянную ссылку.

Submit a ticket

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