Как настроить мобильную версию сайта 1с битрикс
Как всем нам известно, с 21 апреля 2015 года Google будет пессимизирует сайты, непригодные к просмотру на мобильных устройствах при ранжировании. Со многими бедами помогают бороться CSS фреймворки типа Bootstrap, настройки CMS, в частности, 1С-БУС последних версий. Но все они не решают другой, очень важной проблемы: мало просто скрывать ненужный контент на определенных устройствах, нужно предотвращать его загрузку.
В данной статье я расскажу о расширении написанном мной для 1C-Bitrix управление сайтом, которое решает объявленную выше проблему.
Сам Google отдает предпочтение адаптивным сайтам, один сайт лучше двух одинаковых по содержимому, но разных по форме. Для студий и их клиентов адаптивные сайты привлекательны также и с экономической точки зрения, адаптивный сайт выйдет дешевле в разработке и поддержке нежели дескопный и мобильный вариант.
Итак, мы имеем сайт на 1C-Bitrix, интегрированную верстку на Bootstrap3 и желание помочь своим мобильным пользователям.
Ранее для достижения более менее приличного вида адаптивной версии сайта верстальщики и контент менеджеры пользовались замечательными классами видимости ".hidden-lg, .hidden-md, .hidden-sm и .hidden-xs". Этого достаточно чтобы скрывать ненужные блоки на тех или иных разрешениях экранов пользователей.
— «Но что с ресурсами?» Картинки и js как загружались, так и загружаются на устройства пользователей. Порой это мегабайты ненужного трафика, а если говорить о мобильных пользователях, то дорогого и медленного трафика. Тут конечно можно отмахнуться — «есть ведь тег и проверки в js!», но мы же понимаем что тот же контент менеджер не в состоянии решить задачу при помощи данных инструментов.
Размышляя над этим я пришел к выводу, что классы видимости, конечно, штука хорошая, но нужно сделать какой-то более действенный инструмент. Инструмент должен позволять отменить загрузку какого-либо контента на устройство пользователя, иными словами, сам сервер не должен отдавать конкретный участок кода, чтобы тот не был загружен пользователем. В тоже время инструмент должен быть максимально простым, простым как классы видимости.
Начал с поиска решений, которые бы позволили определить мобильного пользователя «еще на подлете», а не во время рендера страницы. Таким решением оказалась PHP библиотека «Mobile Detect» (ссылка в подвале). Данная PHP библиотека позволяет определять пользователя смартфона/планшета/десктопа, а также выдает еще уйму справочной информации по устройству юзера, зашедшего на сайт. Из всего разнообразия библиотеки я выбрал всего один метод, он отвечал на вопрос — «мобильный это юзер или нет». Можно, конечно, было вычленить еще и планшеты, но я сгреб их в кучу со смартфонами.
Начало положено, мы можем отделять мобильных пользователей от декстопных, далее нужно сделать сам инструмент.
Здесь на помощь приходит API 1C-Bitrix, а конкретно — событие OnEndBufferContent (ссылка в подвале). Метод вызывается при выводе буферизированного контента и позволяет им манипулировать.
Дело за малым, перехватываем событие OnEndBufferContent, подключаем библиотеку «Mobile Detect» и узнаем мобильный ли перед нами пользователь. Далее в зависимости от ответа выкидываем из контента ненужные блоки, а остальное передаем на вывод пользователю.
Для контент менеджеров я сделал наипростейший вариант разметки страницы. Контент, обернутый в , будет отображен только на десктопах, а — только на мобильных устройствах. Понятно, просто и эффективно. Естественно, при отлове неугодных блоков из кода вырезаются и теги разметки , что позволяет не вредить семантике верстки.
На этом можно было бы и закончить, но проектом у студии много, копировать код туда-сюда неудобно + нужно как-то обновляться. Поэтому я обернул свою наработку в модуль, а затем и в отдельное расширение для Маркетплейс. В ходе работы над расширением оно приобрело инструкцию по использованию, выводимую в административную панель, а также API метод, отвечающий на все тот же вопрос «мобильный?». Последнее нововведение позволяет использовать модуль при написании своих компонентов и шаблонов к ним, тут полет фантазии безграничен, шаблоны компонентов могут трансформироваться и подстраиваться под пользователя, а самое главное — все это дело отлично дружит со встроенным кешем Битрикс.
В итоге мне удалось создать быстрый и простой аналог классов видимости для 1C-Bitrix УТ. Решение не только позволяет скрывать и отображать контент для разных типов пользователей, но и существенно экономить трафик, уменьшать время загрузки страниц, разгружать процессор мобильных устройств не отдавая сложные и ненужные на мобильниках js слайдеры и прочие изыски десктопных версий сайта.
Адаптивная верстка шагает по www но я не ее сторонник. Предпочитаю, что бы сайт не грузил чертову кучу скриптов и стилей. При загрузке адаптивного шаблона за ним тянется очень много файлов, которые перегружают мобильный трафик, что полностью нивелирует преимущества "легкого" отображения сайта. Решил создать мобильную версию шаблона для битрикс с автоматическим переключением на нужный шаблон.
$detect = new Mobile_Detect;
$deviceType = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'phone') : 'computer');
if (($deviceType == 'phone') &&($_SERVER["SERVER_NAME"] == "camouf.ru" || $_SERVER["SERVER_NAME"] == "www.camouf.ru" &&
empty($VISITOR_ID)) <
$APPLICATION->set_cookie("MOBILE_VISITOR_MB", "MOBILE", time()+60*60);
LocalRedirect("http://camouf.ru/?type=pda" ;
exit();
>
Добрый день. Прошу уточнить как настраивать переключение на мобильный шаблон, если на сайте применен не один, а несколько шаблонов (для разных файлов и папок).
Цитата |
---|
Guest пишет: Добрый день. Прошу уточнить как настраивать переключение на мобильный шаблон, если на сайте применен не один, а несколько шаблонов (для разных файлов и папок). |
Интересный вопрос. Не задавался таким, но попробуйте сделать условие перехода на мобильную версию самым последним в списке шаблонов
Цитата |
---|
Guest пишет: Добрый день. Прошу уточнить как настраивать переключение на мобильный шаблон, если на сайте применен не один, а несколько шаблонов (для разных файлов и папок). |
Сделала копии всех шаблонов. В основных в header.php указанный Вами код
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone" ;) ;
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android" ;) ;
$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS" ;) ;
$berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry" ;) ;
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod" ;) ;
$mobile = strpos($_SERVER['HTTP_USER_AGENT'],"Mobile" ;) ;
$symb = strpos($_SERVER['HTTP_USER_AGENT'],"Symbian" ;) ;
$operam = strpos($_SERVER['HTTP_USER_AGENT'],"Opera M" ;) ;
$htc = strpos($_SERVER['HTTP_USER_AGENT'],"HTC_" ;) ;
$fennec = strpos($_SERVER['HTTP_USER_AGENT'],"Fennec/" ;) ;
$winphone = strpos($_SERVER['HTTP_USER_AGENT'],"WindowsPhone" ;) ;
$wp7 = strpos($_SERVER['HTTP_USER_AGENT'],"WP7" ;) ;
$wp8 = strpos($_SERVER['HTTP_USER_AGENT'],"WP8" ;) ;
$VISITOR_ID = $APPLICATION->get_cookie("MOBILE_VISITOR_MB" ;) ;
if (($ipad || $iphone || $android || $palmpre || $ipod || $berry || $mobile || $symb || $operam || $htc || $fennec || $winphone || $wp7 || $wp 8) &&
($_SERVER["SERVER_NAME"] == "192.168.56.3" || $_SERVER["SERVER_NAME"] == "www.192.168.56.3" ;) &&
empty($VISITOR_ID) ) $APPLICATION->set_cookie("MOBILE_VISITOR_MB", "MOBILE", time()+60*60);
LocalRedirect("192.168.56.3/?type=pda" ;) ;
exit();
>
?>
В настройках сайта если прописать условие "Выражение php" - siteType=='pda' для мобильного шаблона (если его основной шаблон без условия), то переключение на этот мобильный шаблон происходит.
Для основных шаблонов, для которых существуют условия "Для папки или файла" переход на мобильные шаблоны не происходит.
Если прописать условие "Выражение php" - siteType=='pda' для мобильно версии самого последнего в списке шаблона, то на мобильную версию переход не происходит ни на одном шаблоне.
Сделал все как было описано выше. Все заработало. Но через несколько дней вхожу с мобильного устройства и обнаруживаю шаблон десктопа.
Может подскажите в чем дело
Здравствуйте, Михаил!
У меня одного случилось так или просто никто не проверял:
Была адаптивная верстка и проверка google показывала, что сайт адаптирован для мобильных устройств.
После подключения второго шаблона (описанным выше способом) проверка выдает ошибку:
Цитата |
---|
Произошла ошибка при получении или анализе страницы.Dismiss |
А зачем вы при имении адаптивной версии, подключали мобильную, (просто интересно)?
А так, все что показано в видео работает прямо сейчас на этом сайте, проверку google проходит нормально
Цитата | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Михаил Базаров пишет: Здравствуйте, Михаил! У меня одного случилось так или просто никто не проверял: Была адаптивная верстка и проверка google показывала, что сайт адаптирован для мобильных устройств. После подключения второго шаблона (описанным выше способом) проверка выдает ошибку:
Подключаю по тем же соображениям, что и вы. Для того, что бы убрать лишний мусор из верстки (слайдеры и т.д.). А для чего вы используете куки? Если все равно при каждой загрузке страницы проверяете тип устройства с которого зашел юзер.
Если юзер предпочел перейти с мобильной версии на полную, что бы ему не приходилось на каждой странице переходить на полную Переадресовывается, а потом кликаешь любой пункт меню и переходишь в раздел уже в полной версии. Что не так? Учитывая верхний вопрос всё сделал проще, init.php не нужен вообще, в header добавляем следующий код: $mobile_ver = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone" ;) + В настройках сайта выбираем не "выражение PHP", а "Параметр URL", куда заносим соответственно sitetype в первое окошко и mobile во второе после знака равенства. Подскажите, чем мой код плох и зачем там у вас такой огород из кода нагроможден? $mobile_ver = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone" + В настройках сайта выбираем не "выражение PHP", а "Параметр URL", куда заносим соответственно sitetype в первое окошко и mobile во второе после знака равенства. Здравствуйте, Михаил! Добрый день Михаил, во-первых спасибо за полезные уроки!, так держать!, у меня вопрос: все сделал как прописано, все редиректится, но редиректится на мобильную версию и когда с компьютера заходишь, а при нажатии перейти на полную версию сайта переходит, но при переходе на другую станицу на основном сайте опять переадресовывает на мобильную версию, буду признателен если натолкнете куда копать? заранее признателен Адаптивная верстка шагает по www но я не ее сторонник. Предпочитаю, что бы сайт не грузил чертову кучу скриптов и стилей. При загрузке адаптивного шаблона за ним тянется очень много файлов, которые перегружают мобильный трафик, что полностью нивелирует преимущества "легкого" отображения сайта. Решил создать мобильную версию шаблона для битрикс с автоматическим переключением на нужный шаблон. $detect = new Mobile_Detect; Добрый день. Прошу уточнить как настраивать переключение на мобильный шаблон, если на сайте применен не один, а несколько шаблонов (для разных файлов и папок).
Интересный вопрос. Не задавался таким, но попробуйте сделать условие перехода на мобильную версию самым последним в списке шаблонов
Сделала копии всех шаблонов. В основных в header.php указанный Вами код Сделал все как было описано выше. Все заработало. Но через несколько дней вхожу с мобильного устройства и обнаруживаю шаблон десктопа. Здравствуйте, Михаил!
А зачем вы при имении адаптивной версии, подключали мобильную, (просто интересно)?
|