Меню

Настройка шаблона битрикс под мобильные

Настройка шаблона битрикс под мобильные

Популярность мобильных устройств задает дополнительное требование к современным сайтам – адаптивность дизайна под дисплеи различного размера.

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

Просмотреть доступные варианты настроек внешнего вида мобильной версии вы можете через виджет в публичной части.

Во вкладке «Мобильная версия» есть примеры таких параметров для настройки как:

В темах оформления предусмотрены белая и цветная мобильные шапки.

Типы мобильного меню предлагают 2 варианта: «Краткий» и «Подробный».

В первом случае навигационное меню содержит только разделы сайта.

В Аспро: Next при использовании мультирегиональности последним пунктом меню дополнительно отображается название города, для которого предназначена просматриваемая версия сайта.

Во втором – подключаются дополнительные блоки: личный кабинет, корзина, адрес компании и способы связи.

Для Аспро: Digital – это личный кабинет, корзина, адрес компании и способы связи.

Для интернет-магазина к вышеперечисленному Аспро: Next также добавляет в меню возможность быстрого перехода к просмотру отложенных товаров и к удобному сервису, предназначенному для сравнения приглянувшихся предложений.

Мобильное меню может выдвигаться слева или выпадать сверху.

Для того, чтобы применить тот или иной вариант внешнего вида мобильной версии в Аспро: Next, установите требуемые настройки в виджете и нажмите кнопку в правом верхнем углу.

В Аспро: Digital применить настройки для мобильной версии можно только в админке: Рабочий стол → Аспро: Digital → Настройки.

В блоке «Мобильная версия» установите ту комбинацию настроек, которая вам нравится.

В пунктах меню «Мобильная шапка» и «Тип мобильного меню» присутствует вариант «Custom», которого нет в виджете настроек. Этот вариант предназначен для разработчиков.

Просмотр мобильной верстки с ПК

Чтобы просмотреть мобильную версию сайта с ПК, необходимо воспользоваться средствами браузера для разработчиков.

В Google Chrome, Mozilla Firefox и Яндекс браузере инструменты разработчика открываются клавишей F12.

В браузере Opera нужно открыть меню браузера и кликнуть пункт Другие инструменты → Показать меню разработчика.

Появится пункт «Разработка». Отсюда можете вызвать подпункт «Инструменты разработчика» или зажать комбинацию Ctrl+Shift+I.

Расположение кнопки перехода в режим адаптивного дизайна у Google Chrome, Opera и Яндекс браузера:

Кнопка перехода в режим адаптивного дизайна у Mozilla Firefox:

Источник

Как сделать мобильную версию сайта на Битрикс?

Адаптивные шаблоны сегодня уже давно не редкость, и частенько можно наблюдать, когда один и тот же шаблон адаптируется под разные виды устройств. Это удобно в тех случаях, когда шаблон сайта не перегружен большим количеством элементов, и не создаёт больших проблем при адаптации под мобильные устройства. Бывают и другие случаи, когда для мобильной версии нет необходимости тянуть все данные используемые на полноэкранной версии сайта. Часто приходиться переключать различные компоненты сайта в зависимости от того, с какого устройства заходит пользователь, и делать посредством CSS это не всегда оправдано. По этой причине целесообразно было-бы проверять с какого устройства заходит пользователь, после чего отдавать ему нужные данные.

Читайте также:  Как сбить настройки на телефоне майкрософт если забыл пароль

В данном посту мы поговорим о том, как можно реализовать такой механизм проверки браузера в системе Битрикс.

Проверяем тип браузера пользователя

Первым делом, в шаблоне сайта, в файле header.php (перед началом вывода данных) мы пропишем простой код, который будет определять версию браузера пользователя:

В списке заданы практически все виды мобильных браузеров, таким образом если условие проверки срабатывает, то обозначаем в cookie мобильную версию браузера. После этого, перенаправляем на ту же страницу, но уже с параметром site-type=pda. При повторном заходе, если cookie уже заданы в браузере устройства, то редиректа происходить не будет.

Константа определяющая тип сайта

Далее будет удобно завести некую константу, которая будет содержать значение обозначающее тип сайта для браузера. Константу назовём по-простому — SITE_TYPE, принимать будет значение pda либо original (мобильная версия и полная соответственно).

В файле init.php нашего проекта пропишем следующий код:

В целом, всё готово. Далее в коде подключения компонентов можно проверять значение константы SITE_TYPE и подключать нужные участки кода. Для простого примера посмотрим подключение костюмного компонента слайдера.

Использование константы в компонентах

Компонент довольно простой, выводит слайдер в зависимости от типа браузера. Подробнее о реализации данного компонента можно почитать в посту «Создаём слайдер на Битрикс». В качестве параметра компоненту передаётся одно значение – TYPE_SID, которое обозначает тип слайдов, которые будут выбираться самим компонентом и выводиться в браузер.

По этой же аналогии можно подключать различные участки кода, проверка будет как вы уже поняли выполняться аналогичным образом.

Используя константу можно гибко управлять шаблоном сайта, управляя представлением данных максимально просто. К примеру, вы можете подключать разные типы меню для разных типов экрана, менять отображение товаров в каталоге, оптимизировать вывод элементов на странице, и многое другое.

Источник

Как создать адаптивный шаблон и сниппеты на 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С-Битрикс.

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

Источник

Регулировка и настройка © 2022
Внимание! Информация, опубликованная на сайте, носит исключительно ознакомительный характер и не является рекомендацией к применению.

Adblock
detector