COS WP WooДокументация
Витрина

Меню витрины

МегаМеню каталога, нижнее мобильное меню и служебное меню WordPress — три разных навигационных инструмента магазина.

Раздел Витрина → Меню объединяет три независимых инструмента навигации: развёрнутое мега-меню каталога для десктопа, нижнюю панель для мобильных посетителей и настройку служебного меню самой админки WordPress.

МегаМеню

Витрина → Меню → МегаМеню (#/arch/megamenu).

Полноценная замена плагину MaxMegaMenu — выпадающие панели вместо простого списка пунктов, с двумя вкладками.

Вкладка «Настройки»

  • Расположения меню — тумблер «Включить модуль МегаМеню» и список мест вывода меню сайта (шапка, подвал и т. д.); мега-меню применяется только там, где к месту вывода уже привязано меню WordPress. Если включённых мест нет — экран предупреждает об этом.
  • Стили — цвета, отступы и прочие визуальные параметры панели меню, одним набором полей.
  • Настройки пунктов — выбор конкретного меню (по расположению), дальше для каждого пункта меню — своя выпадающая панель:
    • Тип панели: «По умолчанию» (простой список), «Табы», «Сетка», «Сетка с картинками» либо один из дополнительных типов панели, которые приходят с сервера (для них показывается своя форма настроек по схеме — например, число колонок и что за источник данных выводить).
    • Для простых типов — число колонок и иконка (FontAwesome-класс) пункта.
    • Картинка панели (через стандартный медиа-загрузчик WordPress), её ширина и высота.
    • Отключение ссылки на самом пункте (если он служит только заголовком для подпунктов), ширина панели, произвольный HTML-блок внутри панели.
  • Pro-возможности: липкое меню при прокрутке — с порогом в пикселях, после которого меню «прилипает» к верху страницы.
  • Дополнительно (интеграция с темой): CSS-селектор навигации темы, к которой подключается мега-меню (через запятую, если селекторов несколько; пусто — выключает ARIA-доработку) и «карточки аналогов на мобильном» — зеркалирование сетки аналогов конкретного пункта меню в мобильную раскладку конкретной посадочной страницы (нужны оба ID — страницы и пункта меню, — иначе выключено; это нишевая настройка для магазинов с карточками товаров-аналогов).

Вкладка «Миграция»

Витрина → Меню → МегаМеню → Миграция (#/arch/megamenu/migration).

Проверяет, установлен ли на сайте плагин MaxMegaMenu, и если да — показывает, что можно перенести (пункты меню, панели, настройки) одним действием.

Нижнее меню

Витрина → Меню → Нижнее меню (#/arch/bottom-menu).

Плавающая панель навигации внизу экрана для мобильных посетителей — замена плагинам mobile-bottom-menu-for-wp и его Pro-версии.

  • Включить модуль нижнего меню — общий тумблер.
  • Стиль: два готовых вида — «Текущий вид» (тёмная плавающая панель со скруглёнными углами и размытием фона) и «Новый вид» (белая панель во всю ширину экрана с приподнятой кнопкой поиска по центру и всплывающим окном «Контакты»); для нового вида дополнительно задаётся акцентный цвет кнопки поиска и активного пункта.
  • Пункты меню — конструктор строк: подпись, иконка (CSS-класс, например fas fa-home или fab fa-whatsapp), ссылка и тип пункта — «Ссылка», «Подменю» (раскрывающийся список вложенных пунктов), «Поиск», «Форма Битрикс24» (по ID и коду формы) или «Чат» (встраиваемый виджет по ссылке). Пункты можно перетаскивать стрелками вверх/вниз и вкладывать подпункты.
  • Внешние интеграции — ID портала Битрикс24 (нужен для пунктов типа «Форма Битрикс24») и ссылка на скрипт внешнего чат-виджета (нужна для пунктов типа «Чат»); если такие пункты добавлены, а поле пустое — экран предупреждает, что на витрине они не заработают.
  • Стиль — фон обёртки и панели, фон активного пункта, размытие фона, цвет и размер иконок, цвет и размер текста, скругление обёртки и панели, отступы от края экрана, число колонок, порог ширины экрана (брейкпоинт), с которого меню появляется, шрифт, z-index и тумблер «Скрывать при прокрутке до конца страницы».

Внизу — панель миграции настроек из плагина wp-mobile-bottom-menu, если он установлен.

Меню WordPress

Витрина → Меню → Меню WordPress (#/arch/wp-menu).

Небольшой экран, который убирает из служебного меню админки WordPress пункты, неактуальные для российского рынка: WooCommerce Payments, WooCommerce Analytics, WooCommerce Marketing. Тумблер у каждого пункта только прячет его из меню — сама функциональность WooCommerce и данные под ней не отключаются, включить пункт обратно можно в любой момент.

Как собрать навигацию каталога

  1. Откройте МегаМеню → Настройки → Расположения меню, включите модуль и убедитесь, что к нужному месту вывода привязано меню WordPress.
  2. На вкладке Настройки пунктов выберите меню и настройте панель для каждого пункта, у которого должна быть выпадающая витрина, а не простая ссылка — выберите тип панели и заполните её содержимое.
  3. При необходимости настройте цвета и отступы во вкладке Стили и включите липкое меню в Pro-возможностях.
  4. Если сайт стоит на чужой теме и мега-меню не подхватывает её навигацию само — впишите CSS-селектор темы во вкладке Дополнительно.

Как настроить нижнее меню для мобильных

  1. Откройте Нижнее меню, включите модуль и выберите стиль — «Текущий» или «Новый вид».
  2. Добавьте до 5–7 пунктов: обычно это главная, каталог, поиск, избранное/ корзина и контакты; для контактов удобен тип «Подменю» со всплывающим списком способов связи.
  3. Если используете пункты «Форма Битрикс24» или «Чат» — заполните ID портала или ссылку виджета в блоке «Внешние интеграции», иначе эти пункты не заработают на витрине.
  4. Подстройте цвета и размеры во вкладке «Стиль» под оформление магазина и сохраните.

Что учесть

  • МегаМеню и Нижнее меню — независимые модули: можно включить оба одновременно (десктоп/мобайл) или любой один.
  • После сохранения настроек служебного меню WordPress («Меню WordPress») пункт пропадает из меню не сразу — нужна перезагрузка страницы админки.
  • Пункт мега-меню без выбранного типа панели ведёт себя как обычная ссылка — тип панели задаётся отдельно для каждого пункта, а не для всего меню сразу.
  • «Карточки аналогов на мобильном» во вкладке «Дополнительно» — нишевая настройка для магазинов, у которых есть страницы товаров-аналогов; для обычного каталога оставляйте оба поля пустыми.

On this page