Настройка шаблона битрикс под мобильные
Популярность мобильных устройств задает дополнительное требование к современным сайтам – адаптивность дизайна под дисплеи различного размера.
В решениях Аспро реализован отдельный блок настроек для мобильной версии сайта. Обычно такая возможность присутствует только в крупных проектах.
Просмотреть доступные варианты настроек внешнего вида мобильной версии вы можете через виджет в публичной части.
Во вкладке «Мобильная версия» есть примеры таких параметров для настройки как:
В темах оформления предусмотрены белая и цветная мобильные шапки.
Типы мобильного меню предлагают 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С-Битрикс
 |
