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

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

Просмотров: 42247

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

Смысл разработки адаптивного сайта-это показать контент пользователям мобильных устройств в удобочитаемом виде. Однако: в современном 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' 
Михаил Базаров 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 Miks 20.02.2018
http://prntscr.com/ihhtdv если сделать так то работает если поставить первым шаблон главной страницы с указателем на index.php то на главной работать не будет так приоритет стоит на указатель файла или папка. Видимо инит позже подгружаеться чем шаблон. Это так для развития.
victoriat 25.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
Цитата
Михаил Базаров написал:
На текущий момент актуален только адаптив
В таком случае хотелось бы надеяться увидеть ваш урок по созданию адаптивного дизайна, а то в демо-сайте битрикс  с адаптивным дизайном, который в этом уроке вами был почищен, очень сложно разобраться как это настраивать и как этим управлять.
Спасибо.

Записная книжка разработчика

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

Мобильные версии страниц и поисковые системы Просмотров: 5826 Согласно требования поисковых систем: Яндекс и Google, в случае если у вашего сайта имеетс... Получить множественное пользовательское поле раздела. Значения множес... Просмотров: 342 Задача: У разделов инфоблока есть множественное поле типа список. Зная ID раздела, нужно п... Установка веб-сервера LAMP на ubuntu 20.04 LTS, оптимизированный под ... Просмотров: 11378 В последнее время, плотно пересел c macOS на ubuntu, и решил настроить себе полноценное ра... Добавление в избранное или отложенные, на AJAX из карточки товара Просмотров: 27299 В этой заметке рассакажу как добавлять товары в "Отложенные", для иммитации функционала "И... Простые калькуляторы в карточке товара каталога на Битрикс Просмотров: 15368 На одном из создаваемых сайтов было необходимо сделать небольшой калькулятор и предварител... Менять большую картинку, при клике на маленькую, в детальной карточке Просмотров: 1749 Мини скриптик, может кому пригодится для каталога товаров или новостей при использовании д... Cordova, ввод в input под диктовку. Голосовой поиск в мобильном прило... Просмотров: 1254 Итак, задачка: реализовать голосовой поиск в мобильном приложении на Cordova. По сути, нам... Вывести новости из конкретного раздела инфоблока Битрикс Просмотров: 53388 Бывает что требуется вывести конкретные новости или статьи из одного раздела инфоблока в Б... Отключить поиск по описаниям товаров в Битрикс Просмотров: 10581 Иногда, нужно отключить поиск по описаниям анонсов и детальному описанию товаров, при разр... Сниппеты типографики bootstrap, для Битрикс Просмотров: 7575 Если вы подключили bootstrap к своему сайту, или сверстали весь шаблон, подключив bootstra... Как работает система сертификации партнеров 1С-Битрикс, уровни партне... Просмотров: 3456 Сертификация от «1С-Битрикс» – это объективная оценка знаний и практических навыков разраб... Ajax форма обратной связи, реализация в битрикс Просмотров: 7550 Иногда, на сайте требуется создать форму обратной связи, которая будет писать все данные в... Denwer c PHP 7.1.8 и MYSQL 5.7 оптимизированный для Битрикс Просмотров: 29478 В последнее время, все чаще приходиться работать на Windows, хотя и не люблю эту ОС- с точ... Добавить свойство в административную форму заказа Просмотров: 2771 Задача, кастомизировать административную форму заказа: добавить свойство заказа в шапку фо... Time Capsule на Windows 10. Хранение бекапов Time Machine на компьюте... Просмотров: 6628 Заметку написал скорее для себя, что бы собрать все в одну кучу. Написана на базе нескольк... Кастомизация компонента восстановления пароля bitrix:system.auth.forg... Просмотров: 24736 Достаточно часто спрашивают как кастомизировать компонент восстановления пароля пользовате... Вывести все товары, с постраничной навигацией, из всех разделов инфоб... Просмотров: 28363 По сути, эта заметка, небольшой лайфхак. Достаточно часто нужно, в корне каталога, в ТОП-е... Сгенерировать скидочные купоны, при заказе и отправить на почту Просмотров: 745 Задача: после того как пользователь сделал заказ, нужно сгенерировать одноразовые купоны д... Минимальная сумма заказа в корзине и оформлении заказа в 1С-Битрикс Просмотров: 8435 В этой заметке добавим возможность установки минимальной суммы заказа, в новом шаблоне кор... Настройка прав доступа в 1С-Битрикс Просмотров: 7511 Часто, в интернет-магазине под управлением 1С Битрикс, нужно создать группу пользователей ...