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

Просмотров: 26567 | Комментариев: 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

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

Предыдущая запись Следующая запись

Уважаемый читатель! В связи с участившимся спамом в комментариях, возможность писать доступна только для зарегистрированных пользователей Быстрая регистрация или вход через социальную сеть:

Александр 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 для определения устройств к битрикс, я не спец. Заранее спасибо, С Уважением, Алексей

Инструкция там же на сайте имеется.

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

Михаил Базаров 29.05.2015

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

Интересный вопрос. Не задавался таким, но попробуйте сделать условие перехода на мобильную версию самым последним в списке шаблонов

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' для мобильно версии самого последнего в списке шаблона, то на мобильную версию переход не происходит ни на одном шаблоне.

Guest 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
Сделал все как было описано выше. Все заработало. Но через несколько дней вхожу с мобильного устройства и обнаруживаю шаблон десктопа. Может подскажите в чем дело

Vakh 31.07.2015

Здравствуйте, Михаил!
У меня одного случилось так или просто никто не проверял:
Была адаптивная верстка и проверка google показывала, что сайт адаптирован для мобильных устройств.
После подключения второго шаблона (описанным выше способом) проверка выдает ошибку:

Цитата
Произошла ошибка при получении или анализе страницы.Dismiss

Как это решить?

Михаил Базаров 31.07.2015

Цитата

Цитата
Произошла ошибка при получении или анализе страницы.Dismiss

Как это решить?

А зачем вы при имении адаптивной версии, подключали мобильную, (просто интересно)?
А так, все что показано в видео работает прямо сейчас на этом сайте, проверку google проходит нормально

Vakh 01.08.2015

Цитата

Михаил Базаров пишет:
Здравствуйте, Михаил!
У меня одного случилось так или просто никто не проверял:
Была адаптивная верстка и проверка google показывала, что сайт адаптирован для мобильных устройств.
После подключения второго шаблона (описанным выше способом) проверка выдает ошибку:

Цитата
Произошла ошибка при получении или анализе страницы.Dismiss

Как это решить?

Цитата

Подключаю по тем же соображениям, что и вы. Для того, что бы убрать лишний мусор из верстки (слайдеры и т.д.).
Кстати, проблема решилась путем включения редиректа www на "безWWW".
А может сама собой решилась...

Dina 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 во второе после знака равенства.

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

Подскажите, чем мой код плох и зачем там у вас такой огород из кода нагроможден?

А если человек захочет с мобильной версии перейти на основную?

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

Guest 11.12.2015
Добрый день Михаил, во-первых спасибо за полезные уроки!, так держать!, у меня вопрос: все сделал как прописано, все редиректится, но редиректится на мобильную версию и когда с компьютера заходишь, а при нажатии перейти на полную версию сайта переходит, но при переходе на другую станицу на основном сайте опять переадресовывает на мобильную версию, буду признателен если натолкнете куда копать? заранее признателен

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

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

Записная книжка: