Подключение мобильной версии шаблона Битрикс сайта, с автопереключением

Просмотров: 30028 | Комментариев: 61

Смысл разработки адаптивного сайта-это показать контент пользователям мобильных устройств в удобочитаемом виде. Однако: в современном web строительстве превуалируют скрипты, анимация, большое количество картинок. Адаптивному шаблону приходится тянуть все возможные файлы, которые используются шаблоном что полностью перечеркивает смысл мобильного представления шаблона. Через мобильный интернет он грузится на столько долго, что полностью теряет смысл.

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

Мобильная версия сайта для Битрикс

В данном видео расскажу как:

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

Все что потребуется для реализации (как использовать смотрите в видео):

В init.php

if (isset ($_GET['type'])){
switch ($_GET['type']) {
case 'pda':
setcookie('siteType', 'pda', time()+3600*24*30,'/');
define('siteType','pda');
break;
case 'special':
setcookie('siteType', 'special', time()+3600*24*30,'/');
define('siteType','special');
break;
default:
setcookie('siteType', 'original', time()+3600*24*30,'/');
define('siteType','original');
}
}
else{
$checkType='';
if (isset($_COOKIE['siteType'])) $checkType=$_COOKIE['siteType'];
switch ($checkType) {
case 'pda':
define('siteType','pda');
break;
case 'special':
define('siteType','special');
break;
default:
define('siteType','');
}
}

В 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 || $wp8) &&
($_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();
}
?>

Адреса шаблонов

/?type=special
/?type=pda
/?type=original 

Настройка условий

Основной шаблон | без условия
Мобильный | выражение PHP | siteType=='pda'
Контрастный | Выражение PHP | siteType=='special'



18.05.2015
Большое спасибо!
Но почему вместо прямого определения в коде UA устройств не использовать скрипт с http://mobiledetect.net?
Там и устройств гораздо больше, можно разделять телефон-планшет-компьютер, браузер, код упростится, например

$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();
}

Как-то так.
Михаил 18.05.2015
Цитата
Александр пишет:
Большое спасибо!
Но почему вместо прямого определения в коде UA устройств не использовать скрипт с http://mobiledetect.net ?
Там и устройств гораздо больше, можно разделять телефон-планшет-компьютер, браузер, код упростится, например

$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();
}

Как-то так.
В общем-то да, можно и так
23.05.2015
Здравствуйте!
Подскажите пожалуйста как подключить отсюда http://mobiledetect.net для определения устройств к битрикс, я не спец.
Заранее спасибо,
С Уважением, Алексей
Михаил 23.05.2015
Цитата
Алексей пишет:
Здравствуйте!
Подскажите пожалуйста как подключить отсюда http://mobiledetect.net для определения устройств к битрикс, я не спец.
Заранее спасибо,
С Уважением, Алексей
Инструкция там же на сайте имеется.
29.05.2015
Добрый день. Прошу уточнить как настраивать переключение на мобильный шаблон, если на сайте применен не один, а несколько шаблонов (для разных файлов и папок).
Михаил 29.05.2015
Цитата
Guest пишет:
Добрый день. Прошу уточнить как настраивать переключение на мобильный шаблон, если на сайте применен не один, а несколько шаблонов (для разных файлов и папок).
Интересный вопрос. Не задавался таким, но попробуйте сделать условие перехода на мобильную версию самым последним в списке шаблонов
29.05.2015
Цитата
Михаил Базаров пишет:
Цитата
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' для мобильно версии самого последнего в списке шаблона, то на мобильную версию переход не происходит ни на одном шаблоне.
07.07.2015
Добрый день.
На Apple Safari открывается мобильная версия (в другиз браузерах нормально). Необходимо чтоб открывался обычный шаблон. В заголовке передается USER_AGENT - Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/600.7.12 (KHTML, like Gecko) Version/8.0.7 Safari/600.7.12. Прошу уточнить, какое из указанных в header HTTP_USER_AGENT может на это влиять?
Михаил 08.07.2015
Цитата
Guest пишет:
Добрый день.
На Apple Safari открывается мобильная версия (в другиз браузерах нормально). Необходимо чтоб открывался обычный шаблон. В заголовке передается USER_AGENT - Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/600.7.12 (KHTML, like Gecko) Version/8.0.7 Safari/600.7.12. Прошу уточнить, какое из указанных в header HTTP_USER_AGENT может на это влиять?
Проверил у себя на Safari под 10,10,4 - все нормально, открывается полный сайт
Киньте ссылку на ваш сайт прямо сюда или на почту mihail@camouf.ru
09.07.2015
Сделал все как было описано выше. Все заработало. Но через несколько дней вхожу с мобильного устройства и обнаруживаю шаблон десктопа.
Может подскажите в чем дело
31.07.2015
Здравствуйте, Михаил!
У меня одного случилось так или просто никто не проверял:
Была адаптивная верстка и проверка google показывала, что сайт адаптирован для мобильных устройств.
После подключения второго шаблона (описанным выше способом)  проверка выдает ошибку:
Цитата
Произошла ошибка при получении или анализе страницы.Dismiss
Как это решить?
Михаил 31.07.2015
Цитата
Здравствуйте, Михаил!
У меня одного случилось так или просто никто не проверял:
Была адаптивная верстка и проверка google показывала, что сайт адаптирован для мобильных устройств.
После подключения второго шаблона (описанным выше способом) проверка выдает ошибку:
Цитата
Произошла ошибка при получении или анализе страницы.Dismiss
Как это решить?
А зачем вы при имении адаптивной версии, подключали мобильную, (просто интересно)?
А так, все что показано в видео работает прямо сейчас на этом сайте, проверку google проходит нормально
01.08.2015
Цитата
Михаил Базаров пишет:
Здравствуйте, Михаил!
У меня одного случилось так или просто никто не проверял:
Была адаптивная верстка и проверка google показывала, что сайт адаптирован для мобильных устройств.
После подключения второго шаблона (описанным выше способом) проверка выдает ошибку:
Цитата
Произошла ошибка при получении или анализе страницы.Dismiss
Как это решить?
Цитата
А зачем вы при имении адаптивной версии, подключали мобильную, (просто интересно)?
А так, все что показано в видео работает прямо сейчас на этом сайте, проверку google проходит нормально
Подключаю по тем же соображениям, что и вы. Для того, что бы убрать лишний мусор из верстки (слайдеры и т.д.).
Кстати, проблема решилась путем включения редиректа www на "безWWW".
А может сама собой решилась...
10.08.2015
А для чего вы используете куки?    Если все равно при каждой загрузке страницы проверяете тип устройства с которого зашел юзер.  
Михаил 10.08.2015
Цитата
Dina пишет:
А для чего вы используете куки? Если все равно при каждой загрузке страницы проверяете тип устройства с которого зашел юзер.
Если юзер предпочел перейти с мобильной версии на полную, что бы ему не приходилось на каждой странице переходить на полную
11.09.2015
Переадресовывается, а потом кликаешь любой пункт меню и переходишь в раздел уже в полной версии. Что не так?
12.09.2015
Учитывая верхний вопрос всё сделал проще, init.php не нужен вообще, в header добавляем следующий код:


<?
$mobile_ver = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone"   ;)   +
strpos($_SERVER['HTTP_USER_AGENT'],"Android"   ;)   +
strpos($_SERVER['HTTP_USER_AGENT'],"webOS"   ;)   +
strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry"   ;)   +
strpos($_SERVER['HTTP_USER_AGENT'],"iPod"   ;)   +
strpos($_SERVER['HTTP_USER_AGENT'],"Mobile"   ;)   +
strpos($_SERVER['HTTP_USER_AGENT'],"Symbian"   ;)   +
strpos($_SERVER['HTTP_USER_AGENT'],"Opera M"   ;)   +
strpos($_SERVER['HTTP_USER_AGENT'],"HTC_"   ;)   +
strpos($_SERVER['HTTP_USER_AGENT'],"Fennec/"   ;)   +
strpos($_SERVER['HTTP_USER_AGENT'],"WindowsPhone"   ;)   +
strpos($_SERVER['HTTP_USER_AGENT'],"WP7"   ;)   +
strpos($_SERVER['HTTP_USER_AGENT'],"WP8"   ;)   ;
if ($mobile_ver >0) {
LocalRedirect('?sitetype=mobile');
};
?>

В настройках сайта выбираем не "выражение PHP", а "Параметр URL", куда заносим соответственно sitetype в первое окошко и mobile во второе после знака равенства.

И всё работает!

Подскажите, чем мой код плох и зачем там у вас такой огород из кода нагроможден?
Михаил 06.11.2015
Цитата
Денис пишет:
Учитывая верхний вопрос всё сделал проще, init.php не нужен вообще, в header добавляем следующий код:


<?
$mobile_ver = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone"  ;)  +
strpos($_SERVER['HTTP_USER_AGENT'],"Android"  ;)  +
strpos($_SERVER['HTTP_USER_AGENT'],"webOS"  ;)  +
strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry"  ;)  +
strpos($_SERVER['HTTP_USER_AGENT'],"iPod"  ;)  +
strpos($_SERVER['HTTP_USER_AGENT'],"Mobile"  ;)  +
strpos($_SERVER['HTTP_USER_AGENT'],"Symbian"  ;)  +
strpos($_SERVER['HTTP_USER_AGENT'],"Opera M"  ;)  +
strpos($_SERVER['HTTP_USER_AGENT'],"HTC_"  ;)  +
strpos($_SERVER['HTTP_USER_AGENT'],"Fennec/"  ;)  +
strpos($_SERVER['HTTP_USER_AGENT'],"WindowsPhone"  ;)  +
strpos($_SERVER['HTTP_USER_AGENT'],"WP7"  ;)  +
strpos($_SERVER['HTTP_USER_AGENT'],"WP8"  ;)  ;
if ($mobile_ver >0) {
LocalRedirect('?sitetype=mobile');
};
?>

В настройках сайта выбираем не "выражение PHP", а "Параметр URL", куда заносим соответственно sitetype в первое окошко и mobile во второе после знака равенства.

И всё работает!

Подскажите, чем мой код плох и зачем там у вас такой огород из кода нагроможден?
А если человек захочет с мобильной версии перейти на основную?
09.11.2015
Здравствуйте, Михаил!
Использовал этот метод у себя и еще на сайте клиента.
На моем сайте все работает на ура, а у клиента первый раз закидывает на основную версию, а после обновления страницы или переходе по сайту подключается мобильный шаблон. Пробовал с разных устройств и браузеров - везде одно и то же.

Поможете разобраться?
Спасибо!
11.12.2015
Добрый день Михаил, во-первых спасибо за полезные уроки!, так держать!, у меня вопрос: все сделал как прописано, все редиректится, но редиректится на мобильную версию и когда с компьютера заходишь, а при нажатии перейти на полную версию сайта переходит, но при переходе на другую станицу на основном сайте опять переадресовывает на мобильную версию, буду признателен если натолкнете куда копать? заранее признателен
14.12.2015
Михаил спасибо за код, но на текущий момент при композитном режиме получается бред, постоянная перезапись в композит. Как написать этот же модуль без использования User Agent или что на что подменить, чтобы композит работал и переход??
05.01.2016
Михаил, спасибо за урок.
Уточняющий вопрос, если есть у вас есть время.
Правильно ли я понял, что для  мобильных устройств нужно создать не только новый шаблон "Главной страницы"  а новый сайт?
То есть к примеру  -Был один сайт, в терминах битрикс S1
Создаём копию сайта и пуcкай называется S2
И вот переход в случае захода с мобильного устройства должен идти именно на главную страницу S2

Спасибо
05.01.2016
Цитата
Максим пишет:
Михаил, спасибо за урок.
Уточняющий вопрос, если есть у вас есть время.
Правильно ли я понял, что для мобильных устройств нужно создать не только новый шаблон "Главной страницы" а новый сайт?
То есть к примеру -Был один сайт, в терминах битрикс S1
Создаём копию сайта и пуcкай называется S2
И вот переход в случае захода с мобильного устройства должен идти именно на главную страницу S2

Спасибо
Или все новые страницы для мобильной версии нужно создать в рамках первого сайта?
Михаил 05.01.2016
Цитата
Guest пишет:
Цитата
Максим пишет:
Михаил, спасибо за урок.
Уточняющий вопрос, если есть у вас есть время.
Правильно ли я понял, что для мобильных устройств нужно создать не только новый шаблон "Главной страницы" а новый сайт?
То есть к примеру -Был один сайт, в терминах битрикс S1
Создаём копию сайта и пуcкай называется S2
И вот переход в случае захода с мобильного устройства должен идти именно на главную страницу S2

Спасибо
Или все новые страницы для мобильной версии нужно создать в рамках первого сайта?
Можно, конечно и второй сайт сделать- именно как отдельный на поддомене m.site.ru
Но в этом способе именно шаблон, сам сайт тот же самый. Страницы созданные на сайте сразу попадают в обе версии. Просто переключается шаблон, в рамках того же сайта
07.01.2016
Михайл,
Спасибо за ответы.
Обращаюсь с вопросом -  Есть ли у вас время проделать переключение на разные шаблоны на сайте  ?
Сколько потребуется времени и какая стоимость?


Исходные данные
1. Привожу пример упрощенной картинки, до уровня которой пришлось упрощать сайт, чтобы google признал его оптимизированным
2. Сайт был сверстан давно и не переделывался.
3. Первоначально файл стилей находился в корне и я его перенес  в шаблон

Какие у меня возникли затруднения
4.После правки копии шаблона для PDA по каким то причинам сканер безопасности сообщал при сканировании, что внешнее сканирование невозможно. То есть я как-то вредил сайту.
5. На главной странице добавлена новостная лента, удаляя которую из копии шаблона (для PDA) я соответственно удалял её и с главной страницы.
6. Проделав указанные вами в видео действия, получалось так, что мобильные устройства сайт не видели. То есть шаблон PDA для них не включался.
19.01.2016
      Добрый день. Решение подключения мобильной версии при наличии на сайте нескольких шаблонов так и не нашли?
Михаил 19.01.2016
Цитата
Иван пишет:
Добрый день. Решение подключения мобильной версии при наличии на сайте нескольких шаблонов так и не нашли?
Пока с такой задачкой не пересекался, как подвернется допишу заметку
27.01.2016
Здравствуйте Михаил! Хочу выразить благодарность за доступный и весьма информативный урок уложенный в эту статью и видео. Сделал у себя на сайте, все работает как часы, без каких либо сложностей. Возник один вопрос, который возможно будет интересен и другим читателям этой страницы:

У меня в htpacces прописано два редирекста: с http на https и с www на без www. В связи с этим Гугд Пэйдж Спид Инсайт ругается на наличие двух лишних редиректов на странице при перебросе на ?type=pda. Подскажите пожалуйста как тут лучше поступить?

Вот как я подправил последний фрагмент кода из шаблона(полагаю, что в нем собака зарыта):
.......
($_SERVER["SERVER_NAME"] == "мойсайт.рф" ;)  &&
empty($VISITOR_ID)) {
$APPLICATION->set_cookie("MOBILE_VISITOR_MB", "MOBILE", time()+60*60);
LocalRedirect("?type=mobile" ;) ;
exit();
.....


При указании в LocalRedirect() полного названия сайта с http страница загружается только со второго раза. А при указании в пуникод выскакивает предупреждение о редиректе на другой ресурс, потому свел код к "?type=mobile".
26.02.2016
подскажите а как сделать переадресацию для разных сайтов без потери ссылки ?
site.ru/catalog/ на site.ru/m/catalog/
28.04.2016
Добрый день, Михаил!

Спасибо Вам за огромный труд!  
Обсудить статью на форуме

Кроме создания сайтов, я так же веду блог с заметками о вебразработке, записываю бесплатные видеоуроки и содержу форум, на котором можно задавать вопросы и просто общаться. Заметки, преимущественно - это короткие или подробные рецепты, по реализации часто требуемого функционала- в рамках разработки сайтов на 1С-Битрикс

Простой WEB сервер на ubuntu, для Битрикс

Расскажу как по быстрому сконфигурировать WEB сервер для работы с Битрикс. Безо всяких nginx и прочего, для высоконагруженных проектов конечно не пойд...

Ссылка и название раздела в списке новостей Битрикс

Если нужно вывести название раздела инфоблока в котором находится конкретный элемент/новость в компоненте "списк новостей" Битрикс, и ссылку на этот р...

Сниппеты типографики bootstrap, для Битрикс

Если вы подключили bootstrap к своему сайту, или сверстали весь шаблон, подключив bootstrap из ядра битрикс. Имеет смысл использовать эти 320 килобайт...

Тени уголком через css

Расскажу как сделать тень уголком не используя изображений, с одной стороны изображения это более кроссбраузерный способ, однако у css-3 несомненный п...

Как вывести картинки к разделам на базе _ext меню

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

Регистрация пользователя в определенную группу сайта на Битрикс

Достаточно часто требуется регистрировать пользователя в определенную группу, в зависимости от того какую форму регистрации прошел пользователь. Это д...

Показать еще
Авторизация
Напомнить пароль Зарегистрироваться
Быстрый вход через соц. сеть