Главная » IS-Kiosk » Редактирование web-шаблонов IS-Kiosk » Меню групп
Назад

Меню групп

Номер статьи: 0000448

Меню групп – меню, располагаемое в элементе .header, содержащее список групп. Настраивается в PMS в настройках отображения шаблона, во вкладках «Группы -> Меню групп» и «Экран заказа -> Настройка отображения групп в прейскуранте». Для более детальной настройки именно работы меню (как оно должно прокручиваться, когда срабатывать, т.п.) его можно настроить через секцию SETTINGS HTML-шаблона.

Типы меню

Карусель (тип "new")

Гибко настраиваемый тип, рекомендуемый для всех случаев. Очень поддерживается.

Имеет не самую простую структуру, поэтому рассмотрим её подробнее:

Контейнер .ec-kiosk-groups становится обёрткой карусели, ему приписывается класс .carousel, а также:

  • при бесконечной прокрутке - класс .endless
  • если происходит центрирование выбранного элемента - класс .centered
  • если прокрутка вертикальная, то класс .vertical, если горизонтальная - .horizontal

Внутрь .ec-kiosk-groups помещается контейнер .carouselOriginal , содержащий элементы меню. В случае, если имеет место бесконечная прокрутка, этот контейнер будет размножен, и добавятся .carouselOriginal.clone1 и .carouselOriginal.clone2.

Далее, каждый элемент группы имеет класс .ec-kiosk-group , плюс класс группы как элемента карусели - .carouselGroup, плюс:

  • .carouselHovered , если включено центрирование и элемент находится посередине (но не обязательно выбран)
  • .selected , если это активная в данный момент группа

В остальном элемент ничем не отличается от стандартного.


Несколько подсказок по стилизации карусели:

- Контейнер .ec-kiosk-groups должен иметь фиксированную ширину в случае горизонтальной прокрутки, и фиксированную высоту - в случае вертильной.

- Если карусель горизонтальная и бесконечная, то элементы .carouselOriginal должны корректно располагаться сбоку друг от друга и расширять родительский контейнер. Для достижения этой цели рекомендуется стилизовать .ec-kiosk-groups как "display: flex; flex-wrap: nowrap; flex-direction: row;" или "display: grid; grid-auto-flow: column; grid-auto-columns: min-content;"

- Если вы хотите воспользоваться функцией «уменьшение блока» и применить уменьшение к какому-то конкретному элементу, то вам нужно будет добавить кастомный подшаблон для элемента меню (GroupCarouselElement), если такогого ещё нет, и у нужного элемента указать класс .depletable

Простое меню (тип "standart")

Учитывая, что карусель имеет несколько обёрток, для простого меню без прокрутки существует этот тип. Контейнер у этого типа будет иметь классы .ec-kiosk-groups.standartGroupMenu

В контейнер сразу помещаются элементы групп .ec-kiosk-group , среди которых .ec-kiosk-group.ec-kiosk-selectedGroup - выбранный элемент.

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

Просмотры: 112