Телеграм: @camouf_ru Почта: mihail@bazarow.ru

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

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

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

Смысл разработки адаптивного сайта-это показать контент пользователям мобильных устройств в удобочитаемом виде. Однако: в современном 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' 
Сергей Манник05.12.2016
добрый день. сделал все как на вашем видео и вроде заработало. но при попытке зайти на сайт с мобильного устройства выдает предупреждение о том что идет переадресация на мой же сайт (www.site.ru/?type=pda) можно как то избежать данного предупреждения. так как другие люди просто не поймут и уйдут с сайта
Михаил Базаров05.12.2016
Цитата
Сергей Манник написал:
добрый день. сделал все как на вашем видео и вроде заработало. но при попытке зайти на сайт с мобильного устройства выдает предупреждение о том что идет переадресация на мой же сайт (www.site.ru/?type=pda) можно как то избежать данного предупреждения. так как другие люди просто не поймут и уйдут с сайта
За это отвечает модуль "Проактивная защита" посмотрите в нем, добавте в исключения вида *?type=pda
Денис11.12.2016
Здравствуйте, Михаил!
Большое спасибо за материал! Сделал как Вы описали и все заработало. Есть только один вопрос:
А как сделать чтобы на телефонах показывалась мобильная версия сайта, а на планшетах обычная?
Заранее благодарен за ответ.
Михаил Базаров11.12.2016
Цитата
Денис написал:
Здравствуйте, Михаил!
Большое спасибо за материал! Сделал как Вы описали и все заработало. Есть только один вопрос:
А как сделать чтобы на телефонах показывалась мобильная версия сайта, а на планшетах обычная?
Заранее благодарен за ответ.
Тяжеловато будет, описанной мной проверкой устройств. С андроидами будет напряжно, их целый огород. Видимо, в вашем случае, лучше воспользоваться методом из второго комментария, по поводу http://mobiledetect.net и городить кучу проверок на разрешения и устройства
Денис12.12.2016
Цитата
Михаил Базаров пишет:
Цитата
Денис написал:
Здравствуйте, Михаил!
Большое спасибо за материал! Сделал как Вы описали и все заработало. Есть только один вопрос:
А как сделать чтобы на телефонах показывалась мобильная версия сайта, а на планшетах обычная?
Заранее благодарен за ответ.
Тяжеловато будет, описанной мной проверкой устройств. С андроидами будет напряжно, их целый огород. Видимо, в вашем случае, лучше воспользоваться методом из второго комментария, по поводу http://mobiledetect.net и городить кучу проверок на разрешения и устройства
А чтобы на IPHONE показывалась мобильная версия сайта, а на IPAD обычная - так можно сделать?
Константин06.01.2017
Здравствуйте. Использовал ваш код для подключения мобильной версии. Вопрос такой. А как быть с переходами по ссылкам типа mysite.ru/?type=pda
Кто нибудь сошлется на сайт, другой перейдет с десктопа по этой ссылке и окажется на мобильной версии.
У меня так работает сейчас. Как быть? Это не правильно.
Михаил Базаров06.01.2017
Цитата
Константин написал:
Здравствуйте. Использовал ваш код для подключения мобильной версии. Вопрос такой. А как быть с переходами по ссылкам типа mysite.ru/?type=pda
Кто нибудь сошлется на сайт, другой перейдет с десктопа по этой ссылке и окажется на мобильной версии.
У меня так работает сейчас. Как быть? Это не правильно.
Тут только навешивать условие, обратное проверкам в данном коде. Но тогда все теряет смысл, проще сделать адаптивную верстку

Что то вроде:
Код
if (перечисление мобильных устройств) {
        Редирект на /?type=pda
}else{
        Редирект на /?type=original
}
Константин07.01.2017
Не согласен - адаптивную не проще))

Я сделал в мобильном шаблоне следующее

if ($_GET['type'] == 'pda' && $_GET['special'] != 'pda') {
    Редирект на /?type=original
}

Где special=pda - это дополнительный параметр, который я добавил в ссылку "Перейти на мобильную версию" ( mysite.ru/?type=pda&special=pda )
Таким образом при переходе по ссылкам с type=pda, все десктопы попадают на десктопную версию. А те кто в футере нашел ссылку "Перейти на мобильную версию" в любом случае попадут на мобильную.
Константин07.01.2017
А в общем спасибо помогли разобраться. Последнее дополнение делает этот метод вполне рабочим.
Советую собрать весь материал по этой теме и актуализировать с учетом подключения mobiledetect. Про канонические ссылки тоже туда. Может получиться очень полезный материал. Это я вам как сеошник говорю))
Адаптивные версии очень сложно реализовать для "старых сайтов", поэтому мне было проще новый шаблон.
Илья Волков25.01.2017
Доброго времени суток, скажите а как с таким бороться?
Скриншот
Михаил Базаров25.01.2017
Цитата
Илья Волков написал:
Доброго времени суток, скажите а как с таким бороться?
Скриншот
Добавте в исключения в веб безопасности. Админка - Настройки - Проактивная защита - Защита от редиректов
Рустам Хасанов09.02.2017
Здравствуйте! Меняю шаблон мобильной версии сайта, захожу затем на основной сайт и там у меня загружается как в мобильной версии. Что не так? Вроде сделал все как на видео.
Кос Дей28.05.2017
Добрый день ! Видел, что вам задавал уже этот вопрос , но ответа не было ... Повторюсь : почему - то с мобильной версии иногда переходит на обычную , причём после обновления, страницы опять переходит на обычную . и страницы абсолютно случайные. То товар , то категория
Автокешироание и и cdn отключили ... Пробовал с разных устройст ( кеш тоже чистили ) Уже голову поломали . подскажите , пожалуйста!
Денис Чучумашев25.08.2017
Таки вы меня извините, а зачем что-то вообще каждый раз редиректить и добавлять в адресную строку параметры?

Прописываешь в dbconn.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"  ;)  ;

if ($ipad || $iphone || $android || $palmpre || $ipod || $berry || $mobile || $symb || $operam || $htc || $fennec || $winphone || $wp7 || $wp  8)  define("MOBILE", 'pda');

И ставишь условие для подгрузки шаблона MOBILE=='pda'
И вуаля... А уж если клиент так хочет перейти на обычную версию с мобильной, тогда уже редиректим переопределяем куки.
Михаил Базаров25.08.2017
Цитата
Денис Чучумашев написал:
Таки вы меня извините, а зачем что-то вообще каждый раз редиректить и добавлять в адресную строку параметры?

Прописываешь в dbconn.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"    ;

if ($ipad || $iphone || $android || $palmpre || $ipod || $berry || $mobile || $symb || $operam || $htc || $fennec || $winphone || $wp7 || $wp    define("MOBILE", 'pda');

И ставишь условие для подгрузки шаблона MOBILE=='pda'
И вуаля... А уж если клиент так хочет перейти на обычную версию с мобильной, тогда уже редиректим переопределяем куки.
Я сторонник того, что все относящееся к работе шаблонов- должно быть в шаблоне. Не в системных файлах.
Во вторых, не проверяли как к такому подходу относятся поисковые системы? Это вопрос без подковырки, реально интересно.
Но мне кажется поисковые системы к такому относятся не очень хорошо (вменяется "манипулирование поисковой системой" дорвеи).
Masyasya Miks20.02.2018
http://prntscr.com/ihhtdv если сделать так то работает если поставить первым шаблон главной страницы с указателем на index.php то на главной работать не будет так приоритет стоит на указатель файла или папка. Видимо инит позже подгружаеться чем шаблон. Это так для развития.
victoriat25.03.2018
Подскажите, пожалуйста, каким должно быть условие в файле header чтобы сделать версию для слабовидящих.  и еще я удалила все стили в шаблоне для версии, но при физическом переключении вид сайта не меняется. не пойму в чем дело.
Александр Посохов04.05.2020
Цитата
Михаил Базаров написал:
Адаптивная верстка шагает по www но я не ее сторонник. Предпочитаю, что бы сайт не грузил чертову кучу скриптов и стилей.
Здравствуйте!
Возникла необходимость в мобильной версии сайта и выборе способа её реализации.
Вы пишите, что вы не сторонник адаптивной верстки и на примере вашего сайта показали как это можно сделать по другому.
Но это было очень давно и сейчас (2020 год) на вашем же сайте переход на мобильную версию по https://camouf.ru/?type=pda не срабатывает.
На другом сайте www.domcvetov.net/, который судя по вашему видео уроку https://camouf.ru/video/bxstorenew/ разработан вами, также нет перехода на  мобильную версию по /?type=pda.
Судя по всему этот способ для вас уже не подходит и сейчас вы предпочитаете другой способ реализации мобильной версии сайта (похоже опять адаптивный дизайн)?

Подскажите, какой способ реализации мобильной версии сайта актуален на сегодня (2020 год)?
Спасибо.
Михаил Базаров05.05.2020
Цитата
Александр Посохов написал:
Цитата
Михаил Базаров написал:
Адаптивная верстка шагает по www но я не ее сторонник. Предпочитаю, что бы сайт не грузил чертову кучу скриптов и стилей.
Подскажите, какой способ реализации мобильной версии сайта актуален на сегодня (2020 год)?
Спасибо.
Да, заметка написана очень давно.
На текущий момент актуален только адаптив, скорости мобильного интернета и самих телефонов- вполне позволяют.

Поддерживать, фактически, два сайта: мобильный и декстопный, иногда, накладно даже.

PS: Заметку подкорректирую, что бы не вводит в заблуждение, устаревшими доводами.
Александр Посохов05.05.2020
Цитата
Михаил Базаров написал:
На текущий момент актуален только адаптив
В таком случае хотелось бы надеяться увидеть ваш урок по созданию адаптивного дизайна, а то в демо-сайте битрикс  с адаптивным дизайном, который в этом уроке вами был почищен, очень сложно разобраться как это настраивать и как этим управлять.
Спасибо.

Случайные заметки

Глобальные фильтры на всякие случаи жизни

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

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

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