1с битрикс адаптивное меню
Как создать адаптивный шаблон и сниппеты на Bootstrap 3 для 1С-Битрикс
Всем привет!
Решил затронуть тему адаптивной верстки.
Итак на дворе конец 2016 и более 20% посетителей вашего сайта заходят на него со смартфона. В южных регионах России этот показатель может быть более 40%, что очень большая доля и ее нельзя игнорировать. Ваш сайт должен нормально отображаться на любом устройстве вашего посетителя с которого он зашел на него.
Но как сделать адаптивную верстку?
Можно заказать ее у фрилансера/компании подрядчика, которые сделают это за 10-100 тысяч рублей в зависимости от типа вашего сайта. А можно сделать его самому или переделать существующий сайт в адаптивный. Как? Дальше я расскажу, как это сделать для системы управления сайтом 1С-Битиркс.
1: Подготавливаем Bootstrap элементы
Для подготовки нам понадобится сайт Bootstrap 3 или Bootstrap 4 если вас не смущает его альфа версия. На этом сайте мы будем создавать сборку bootstrap под себя и уже в дальнейшем будем использовать ее как базовый набор стилей для нашего сайта.
Также нам понадобится отличный сайт Layoutit с помощью которого мы будем делать прототип нашего сайта и уже на основе этого прототипа с созданной сборкой bootstrap создадим наш адаптивный шаблон.
В папке css есть как полные так и минимизированные версии файлов стилей нашей сборки bootstrap.
В папке js файл с javascript компонентами и его минимизированная копия.
1.2 Блоки bootstrap и верстка прототипа сайта
Теперь нам нужен прототип дизайнаи функциональные блоки для нашего сайта. Заходим на сайт http://www.layoutit.com/build и переносим из левого меню сайта нужные на нашем сайте блоки в правую часть. Это делается с помощью перетаскивания, при этом появляются подсказки и вы можете настроить эти блоки.
Я обычно переношу следующие обязательные блоки:
В архиве у нас некастомизированный bootstrap 3 и файл index.html с блоками нашего прототипа.
В итоге у нас скачан архив с готовыми стилями bootstrap и прототип шаблона. Теперь переходим к этапу 2.
2: Создаем базовый адаптивный шаблон для 1С-Битрикс
Из папки с подготовленными ранее стилями bootstrap копируем папки fonts и js.
Содержимое файлов стилей копируем:
bootstrap.css в style.css
bootstrap-theme.css в template_styles.css
Это делается для того, чтобы редакторы и администраторы сайта могли использовать стили bootstrap из редактора с помощью инструмента подсказок при наборе. Я покажу далее как это работает и насколько это удобно.
В файле description.php прописываем название шаблона, чтобы его можно было выбрать в панели управления сайтом.
Далее переходим к переносу прототипа. Идем в папку с архивом прототипа и разархивируем ее.
Идем в папку «/layoutit/src/js/» и копируем файл jquery.min.js в наш адаптивный шаблон в папку js.
Далее идем в папку «/layoutit/src/» и открываем файл index.html на редактирование.
Копируем в файл header.php следующее содержимое файла index.html
2.1.1 Гамбургер для меню
Потом добавляем «гамбургер» кнопку, которая появляется только на смартфонах. При нажатии на нее у нас на смартфоне появится меню.
Дальше у нас идет логотип
Да логотип нужно перед этим зачать в созданную папку /public_html/bitrix/templates/bootstrap/images/
Переменная содержит путь до корня сайта
Переменная содержит путь до шаблона в котором вызвана. В нашем случае это /bitrix/templates/bootstrap/
Подключаем файл header_logo.php в файле header.php в помощью компонента bitrix:main.include
Дальше у нас идет меню. Меню на разных устройствах может быть как развернутое, так и свернутое в «гамбургер». За то, что будет в свернутом блоке отвечает следующий div
Это стандартное горизонтальное меню с уровнем вложенности 2. То есть при нажатии на пункт меню низ выпадет список. Выглядит это изначально вот так.
Теперь мы копируем стиль компонента bitrix:menu и в него добавляем верстку из нашего прототипа index.html
Так как и в прототипе и в компоненте bitrix:menu используется ненумерованный список, то вы просто дописываем классы из прототипа вместо существующих
Его можно установить добавив в меню новый пункт с текстом divider
2.1.4 Телефон и другие элементы в header
Отдельно в div меню collapse navbar-collapse добавляем телефон. Делается это с помощью следующего кода кода
Так как меню у нас всегда приклеено к верхней части окна браузера, то часть элементов страницы расположенных ниже него будет перекрываться меню. Для предотвращения этого я использую div с вертикальным отступом margin-top. Размер отступа в пикселях ставим в зависимости от высоты блока с меню.
2.1.5 Хлебные крошки
Тут все просто.
Устанавливаем код компонента хлебные крошки bitrix:breadcrumb в отдельный div из grid таблицы:
Если вы заметили у меня все блоки добавляются в отдельные div container а уже в нем в col-md-12. Это сделано, чтобы на смартфоне, данный блок правильно адаптировался под содержимое страницы. Все блоки в дальнейшем будут вставляться в отдельные div.
Теперь в браузере в режиме правки создаем копию стилей для данного компонента и копируем их в наш шаблон.
Правим код компонента на основе кода прототипа с сайта Layoutit
Следующий обязательный элемент на странице, заголовок H1. Тут все просто вставляем его в grid блок col-md-12
На этом с файлом header.php закончили. Переходим к файлу footer.php
Теперь верхняя и нижняя части нашего адаптивного шаблона готовы. Осталось самое важное, сделать адаптивным компоненты и контентные страницы сайта.
3: Верстка страниц в редакторе и сниппеты
Мы сделали адаптивный шаблон таким образом, чтобы можно было верстать страницы, как во весь экран, так и с ограничением по ширине вне зависимости от настроек шаблона. Это нужно для создания на одном сайте, как лендинг страниц, так и обычных страниц. Плюс у нас стоит задача, чтобы создавать страницы мог контент менеджер или редактор сайта без необходимости редактирования страниц по FTP.
Для этого я использую инструмент редактора 1С-Битрикс под названием сниппет. Сниппет — это подготовленный код, который вставляется в нужное место на странице прямо в редакторе и уже содержит нужные стили и разметку.
Спиппеты находятся в папке /public_html/bitrix/templates/bootstrap/snippets
При редактировании новой страницы редактор выглядит так:
Укажем категорию для сниппета.
Код сниппетра «Блок 12» из прототипа с сайта LayoutIt:
grid с заголовками h2-h4
Блок 4-4-4 с заголовком h3.
Вот я на видео показываю, как с этим может работать копирайтер или редактор вашего сайта. Это позволит при должном опыте делать 4-6 лендингов в день!
Вот как это выглядит на сайте в компьютера.
Вот как выглядит со смартфона.
В итоге у нас есть адаптивный шаблон Bootstrap для сайта на 1С-Битрикс и набор сниппетов для работы копирайтера и редактора с таким сайтом.
Ссылки на скачивание шаблона сайта с Bootstrap 3 для 1С-Битрикс и скачивание отдельно сниппетов для 1С-Битрикс.
В этом посте я не ставил цель создать идеальный шаблон. Я хотел лишь показать, как можно работать со сниппетами и облегчить работу редакторов сайта.
Если у вас появились вопросы, то с радостью отвечу на них в комментариях.
Мобильное меню
1. Мобильное меню
1.1 Типы мобильного меню
1.2 Настройка мобильного меню
1. Мобильное меню 
1.1 Типы мобильного меню
Решение содержит следующие типы мобильного меню:
— Светлый
— Темный
— Цветной
1.2 Настройка мобильного меню
Обратите внимание! Мобильное меню доступно при ширине окна браузера 991px и ниже.
Для изменения телефонов:
Уменьшаем окно браузера до ширины 991px и ниже > Панель управления публичной части сайта > Включаем режим правки (1) > Выбираем мобильное меню (2) > Телефон в мобильной версии (3) > Меняем значения (4)
Для изменения контактов:
Уменьшаем окно браузера до ширины 991px и ниже > Панель управления публичной части сайта > Включаем режим правки (1) > Выбираем мобильное меню (2) > Контакты для мобильного (3) > Меняем значения (4)
Для редактирования параметров меню:
Уменьшаем окно браузера до ширины 991px и ниже > Панель управления публичной части сайта > Включаем режим правки (1) > Выбираем мобильное меню (2) > Настройка (3) > Настройки меню (4) / Внешний вид (5) / Настройка пункта (6)
Значения свойств в категории Настройки меню:
Значения свойств в категории Внешний вид:
Включить в мобильное меню пункт «Поиск»
Добавляет кнопку поиска (иконка «лупа»)
Включить в мобильное меню пункт «Обратная связь»
Добавляет кнопку для обратной связи/контактов (иконка «письмо»)
Включить в мобильное меню пункт «Телефоны»
Добавляет кнопку для вызова телефонов (иконка «телефон»)
Включить в мобильное меню пункт «Авторизация»
Добавляет кнопку для авторизации/регистрации
Включить в мобильное меню пункт «Сравнение»
Добавляет кнопку для сравнения товаров
Включить в мобильное меню пункт «Избранное»
Добавляет кнопку для избранных товаров
Включить в мобильное меню пункт «Корзина»
Добавляет кнопку корзины
Значения свойств в категории Авторизация / Сравнение / Избранное / Корзина:
Страница профиля пользователя
Текстовое поле в котором вы можете указать путь до главной страницы с профилем (например, /personal/profile/)
Страница сравнения товаров
Текстовое поле в котором вы можете указать путь до страницы сравнения (например, /catalog/compare.php)
Страница избранных товаров
Текстовое поле в котором вы можете указать путь до страницы с избранными товарами (например, /personal/favorites/)
Страница корзины
Текстовое поле в котором вы можете указать путь до корзины (например, /personal/basket/)
Полдня бьюсь, гугл перерыл.
В стилях проблем нет. Есть проблема в том что топ-меню сейчас горизонтальное строится из модуля. Те пункты все автоматические.
Я не врублюсь как мне все эти пункты впихнуть в новое адаптивное меню.
всем таким меню передается на входе список
Этот список формируется скриптом и обычно считывается из иерархии страниц сайта. Но можно и вручную добавлять свои пункты. А чтобы это меню при сужении изменилось, об этом заботится уже код, который не должен волновать программиста. Там и стили и в некоторых видах меню javascript сам всю работу сделает. Ему главное передать список.
Это понятно. Это ручное программирование меню.
(14) >>Это ручное программирование меню
Прелестно, просто прелестно. Это надо запомнить
Маня, найми программиста, не разобраться в принципе работы компонента меню в битриксе это сильно. По битриксу даже самые ленивые сделали видео уроки на ютубе, и такой компонент рассматривается всегда в начале, потому как это все начальный уровень
очень много полезного материала
Без скрипта нажатие на кнопку не будет тянуть свои классы.
(20) пункты меню хранятся в каталоге в определенном файле. при редактировании меню файл автоматически обновляется.
Для чтения этого файла используется стандартный компонент, который уже содержит свой определенный шаблон.
Менять этот шаблон будет большой геммор.
КОроче я нашел что надо как минимум два скрипта.
Один будет читать динамически пункты меню. а второй еще нужен по любому для нажатия на кнопку и выплывающий список.
Создаём шаблон 1С-Битрикс на базе Bootstrap вёрстки
Введение
Уважаемый читатель, данная статья является по сути своей продолжением статьи «Как сверстать веб-страницу. Часть 2 — Bootstrap» и здесь мы отойдём от собственно вёрстки, занявшись интеграцией HTML шаблона в CMS 1С-Битрикс.
В предыдущей части Хабраюзер Mirantus сверстал шаблон Corporate Blue от студии Pcklaboratory с помощью Bootstrap 3.
Для данной статьи мы воспользуемся одним из форков репозитория на GitHub, приведённого в конце предыдущей статьи, поскольку в нём были исправлены некоторые баги.
Создание каркаса шаблона
Шаблон сайта с точки зрения 1С-Битрикс – это папка с набором определённых файлов внутри, поэтому шаблон может быть создан как через файловую структуру (инструментами 1С-Битрикс, по FTP или SSH), так и с помощью раздела.
(это будет пример рабочей страницы на котором мы будем проверять работоспособность нашей рабочей области) в котором помимо Html разметки мы добавим вызов header’а и footer’а (они создадутся автоматически, если создавать страницу средствами 1С-Битрикс):
Элементы 1С-Битрикс
Фактически мы создали статичный HTML каркас с минимальным набором элементов 1С-Битрикс, который уже работает.
Дальнейшая наша задача – перевод отдельных функциональных блоков на работу с компонентами 1С-Битрикс.
Компоненты 1С-Битрикс
В рамках данной статьи мы остановимся только на процессе интеграции вёрстки со стандартными компонентами 1С-Битрикс. Мы не будем создавать свои компоненты и не будем кастомизировать типовые.
Мы создадим отдельную страницу (например, 1.php) на которой будем размещать по 1 компоненту для упрощения работы средствами 1С-Битрикс.
Разместим компонента (например, форму поиска — bitrix:search.form) с помощью визуального редактора:
Используя включенный режим правки скопируем шаблон компонента в шаблон сайта. Для этого наведём курсор мыши на область с компонентом, дождёмся пока появится контекстное меню с шестерёнкой и нажмём на стрелку выпадающего списка:
В появившемся диалоге нам необходимо указать имя шаблона компонента и выбрать шаблон сайта в котором будет хранится шаблон компонента (в нашем случае это whitesquare-bootstrap):
В результате наших действий в Шаблоне компонента /bitrix/templates/whitesquare-bootstrap/ появилась ещё одна папка – components – в ней будут находиться шаблоны всех компонентов, используемых в рамках шаблона сайта.
Первый появившийся шаблон компонента будет расположен по адресу /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/
Опытные разработчики могут сразу создавать шаблон компонента, копируя его в шаблон сайта из компонента.
Иногда для дальнейшей работы больше подходит один из шаблонов компонента, поставляемых вместе с системой. Тогда имеет смысл посмотреть каждый из них в работе. Это можно сделать в визуальном редакторе по нажатию на кнопку шестерёнки:
Включаемые области (лого, копирайт, соц сети)
Компонент включаемой области позволяет вложить внутрь себя любой текст, HTML или php код, а так же другие компоненты и вывести этот контент для определённой страницы, раздела или везде, где вызывается включаемая область.
Для всех указанных выше объектов мы считаем рациональным использование включаемой области с целью вынести эти блоки из шаблона. Т.е. для их редактирования по прежнему необходимо будет владеть минимумом познаний в HTML.
Профессионалы могут возразить, что для блока с кнопками соц сетей следовало бы сделать свой компонент, однако нам это кажется не рациональным. Проще загнать этот блок за 10 минут во включаемую область и отредактировать при необходимости, ведь адрес сообщества Facebook не меняется каждый день!
Внутри файла включаемой области просто помещаем кусок HTML кода:
Мы не будем в данной статье рассматривать вопрос интеграции Twitter Ленты, поскольку самое простое решение – положить виджет твиттера во включаемую область, аналогично описанным выше решениям.
Так же в Marketplace 1С-Битрикс хватает компонентов, выводящих твиттер ленту, которыми вы так же можете воспользоваться.
Форма поиска
Мы воспользовались компонентом bitrix:search.form и скопировали suggest шаблон компонента в шаблон сайта.
HTML код шаблона компонента находится в файле /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/template.php
Как видим, у нас не простой, а комплексный компонент (т.е. компонент в состав которого входят другие компоненты). В данном случае это сама форма в которую производится ввод поискового запроса.
Скопируем её шаблон в шаблон сайта.
К сожалению, это не очень красиво – в публичке мы используем 1 компонент, а шаблонов у нас 2. Воспользуемся обычной схемой для комплексных компонентов:
Комплексный компонент
Вернёмся к форме поиска
На наш взгляд русские версии очень «корявые», однако мы создали их лишь для демонстрации механизма языковых файлов. При желании в них можно разместить английский текст или оставить пустыми.
Теперь осталось лишь разместить код вызов компонента вместо вёрстки в шаблоне:
Верхнее меню
Теперь заменим блок верхнего меню в шаблоне на вызов компонента меню:
Левое меню
Заменим блок левого меню в шаблоне вызовом компонента:
Нижнее меню
Нижнее меню (в разделе SiteMap) отображается в 2 колонки. Можно конечно сделать универсальный компонент меню в шаблоне которого пункты будут делиться по столбцам (автоматически, либо по наличию какого-либо параметра, установленного для пунктов в режиме расширенного редактирования меню).
Однако, мы понимаем, что подвал – не самая часто редактируемая часть и нет смысла тратить значительные усилия на его разработку.
Поэтому мы пойдём по простому пути (за который любители идеального кода, вероятно, нас проклянут) – мы создадим 2 меню: bottomL и bottomR.
Несмотря на то, что меню будет 2 шаблон мы для них будем использовать 1.
Сайдбар – наши офисы
Теперь можно поместить вызов компонента сайдбара в шаблон сайта (если он должен выводиться на всём сайте, а лишь в определённых разделах, то достаточно обернуть его во включаемую область):
Теперь пришла пора взяться за рабочую область!
Список членов команды
Не забудем добавить значения в языковые файлы!
Сам шаблон тогда будет выглядеть так:
Мы не стали заморачиваться с выносом кода свойства в параметры, а так же с настройкой количества элементов в строке, чтобы не усложнять шаблон компонента.
Как видите, в нём практически ничего не осталось от первоначального шаблона списка новостей (и он гораздо легче громоздкого компонента каталога).
Не забудьте удалить ненужную более папку /bitrix/templates/whitesquare-bootstrap/images/team/ с картинками в шаблоне после перевода блока с персонами на инфоблок!
Текст страницы ABOUT
Поскольку у нас нет понимания какие функции выполняют остальные элементы страницы, должна ли появляться случайная цитата или, скажем, должны ли картинки вести в фотогалерею, мы пойдём по простому пути.
Весь контент останется статичным, мы лишь добавим несколько стилей, чтобы будущие редакторы могли работать со страницей с большим удобством.
Для этого воспользуемся файлом стилей сайта, приложенном к нашему шаблону /bitrix/templates/whitesquare-bootstrap/styles.css (или административным разделом):
Поскольку этот файл используется для применения CSS к контенту в том числе в визуальном редакторе, нам придётся «забыть» о каскадности CSS и прописать стили без учёта вложенности элементов.
Например, цитата станет выглядеть так:
Или через инструмент редактирования шаблона (вкладка «стили сайта»):
Наводим марафет
Вот собственно и всё!
Мы натянули готовую HTML вёрстку Bootstrap на 1С-Битрикс, сверстали страницу и получили полноценный шаблон!
Меню для мобильной платформы
Описание mobileapp.menu
В визуальном редакторе компонент расположен по пути: Служебные > Навигация > Меню для мобильной платформы.
Компонент относится к модулю Мобильное приложение.
Параметры
| Поле | Параметр | Описание |
| Путь к скриптам | SYNC_REQUEST_PATH | Указывается путь, где расположены административные скрипты |
| Путь к файлу меню | MENU_FILE_PATH | Указывается путь |
| Имя события | BUILD_MENU_EVENT_NAME | Наименование события формирования пунктов меню |
| Заголовок меню | MENU_TITLE | Указывается заголовок |
Пример вызова
Пользовательские комментарии
Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.
Для этого нужно всего лишь авторизоваться на сайте
Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.
Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.