Меню групп
Меню групп – меню, располагаемое в элементе .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 он ещё работает), а в ближайшее время, скорее всего, он будет вырезан.