Адаптивная верстка шагает по www но я не ее сторонник. Предпочитаю, что бы сайт не грузил чертову кучу скриптов и стилей. При загрузке адаптивного шаблона за ним тянется очень много файлов, которые перегружают мобильный трафик, что полностью нивелирует преимущества "легкого" отображения сайта. Решил создать мобильную версию шаблона для битрикс с автоматическим переключением на нужный шаблон.
Подключение мобильной версии шаблона Битрикс сайта, с автопереключением
|
Михаил Базаров: 18.05.2015 03:00:00
Подключение мобильной версии шаблона Битрикс сайта, с автопереключением
Адаптивная верстка шагает по www но я не ее сторонник. Предпочитаю, что бы сайт не грузил чертову кучу скриптов и стилей. При загрузке адаптивного шаблона за ним тянется очень много файлов, которые перегружают мобильный трафик, что полностью нивелирует преимущества "легкого" отображения сайта. Решил создать мобильную версию шаблона для битрикс с автоматическим переключением на нужный шаблон. |
|
Александр: 18.05.2015 03:00:00
Большое спасибо!
Но почему вместо прямого определения в коде 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 10:00:00
|
|
Алексей: 23.05.2015 02:00:00
Здравствуйте!
Подскажите пожалуйста как подключить отсюда http://mobiledetect.net для определения устройств к битрикс, я не спец. Заранее спасибо, С Уважением, Алексей |
|
Михаил Базаров: 23.05.2015 04:00:00
|
|
Guest: 29.05.2015 08:00:00
Добрый день. Прошу уточнить как настраивать переключение на мобильный шаблон, если на сайте применен не один, а несколько шаблонов (для разных файлов и папок).
|
|
Михаил Базаров: 29.05.2015 08:00:00
|
|
Guest: 29.05.2015 09:00:00
В настройках сайта если прописать условие "Выражение php" - siteType=='pda' для мобильного шаблона (если его основной шаблон без условия), то переключение на этот мобильный шаблон происходит. Для основных шаблонов, для которых существуют условия "Для папки или файла" переход на мобильные шаблоны не происходит. Если прописать условие "Выражение php" - siteType=='pda' для мобильно версии самого последнего в списке шаблона, то на мобильную версию переход не происходит ни на одном шаблоне. |
|
Guest: 07.07.2015 08:00:00
Добрый день.
На 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 06:00:00
Киньте ссылку на ваш сайт прямо сюда или на почту mihail@camouf.ru |
|
Александр: 09.07.2015 10:00:00
Сделал все как было описано выше. Все заработало. Но через несколько дней вхожу с мобильного устройства и обнаруживаю шаблон десктопа.
Может подскажите в чем дело |
|
Vakh: 31.07.2015 05:00:00
Здравствуйте, Михаил!
У меня одного случилось так или просто никто не проверял: Была адаптивная верстка и проверка google показывала, что сайт адаптирован для мобильных устройств. После подключения второго шаблона (описанным выше способом) проверка выдает ошибку:
|
|
Михаил Базаров: 31.07.2015 08:00:00
А так, все что показано в видео работает прямо сейчас на этом сайте, проверку google проходит нормально |
|
Vakh: 01.08.2015 02:00:00
Кстати, проблема решилась путем включения редиректа www на "безWWW". А может сама собой решилась... |
|
Dina: 10.08.2015 04:00:00
А для чего вы используете куки? Если все равно при каждой загрузке страницы проверяете тип устройства с которого зашел юзер.
|
|
Михаил Базаров: 10.08.2015 04:00:00
|
|
Денис: 11.09.2015 11:00:00
Переадресовывается, а потом кликаешь любой пункт меню и переходишь в раздел уже в полной версии. Что не так?
|
|
Денис: 12.09.2015 01:00:00
Учитывая верхний вопрос всё сделал проще, 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 01:00:00
|
|
Vakh: 09.11.2015 01:00:00
Здравствуйте, Михаил!
Использовал этот метод у себя и еще на сайте клиента. На моем сайте все работает на ура, а у клиента первый раз закидывает на основную версию, а после обновления страницы или переходе по сайту подключается мобильный шаблон. Пробовал с разных устройств и браузеров - везде одно и то же. Поможете разобраться? Спасибо! |
|
Guest: 11.12.2015 12:00:00
Добрый день Михаил, во-первых спасибо за полезные уроки!, так держать!, у меня вопрос: все сделал как прописано, все редиректится, но редиректится на мобильную версию и когда с компьютера заходишь, а при нажатии перейти на полную версию сайта переходит, но при переходе на другую станицу на основном сайте опять переадресовывает на мобильную версию, буду признателен если натолкнете куда копать? заранее признателен
|
|
Виктор: 14.12.2015 05:00:00
Михаил спасибо за код, но на текущий момент при композитном режиме получается бред, постоянная перезапись в композит. Как написать этот же модуль без использования User Agent или что на что подменить, чтобы композит работал и переход??
|
|
Максим: 05.01.2016 02:00:00
Михаил, спасибо за урок.
Уточняющий вопрос, если есть у вас есть время. Правильно ли я понял, что для мобильных устройств нужно создать не только новый шаблон "Главной страницы" а новый сайт? То есть к примеру -Был один сайт, в терминах битрикс S1 Создаём копию сайта и пуcкай называется S2 И вот переход в случае захода с мобильного устройства должен идти именно на главную страницу S2 Спасибо |
|
Guest: 05.01.2016 02:00:00
|
|
Михаил Базаров: 05.01.2016 05:00:00
Но в этом способе именно шаблон, сам сайт тот же самый. Страницы созданные на сайте сразу попадают в обе версии. Просто переключается шаблон, в рамках того же сайта |
|
Максим: 07.01.2016 10:00:00
Михайл,
Спасибо за ответы. Обращаюсь с вопросом - Есть ли у вас время проделать переключение на разные шаблоны на сайте ? Сколько потребуется времени и какая стоимость? ![]() Исходные данные 1. Привожу пример упрощенной картинки, до уровня которой пришлось упрощать сайт, чтобы google признал его оптимизированным 2. Сайт был сверстан давно и не переделывался. 3. Первоначально файл стилей находился в корне и я его перенес в шаблон Какие у меня возникли затруднения 4.После правки копии шаблона для PDA по каким то причинам сканер безопасности сообщал при сканировании, что внешнее сканирование невозможно. То есть я как-то вредил сайту. 5. На главной странице добавлена новостная лента, удаляя которую из копии шаблона (для PDA) я соответственно удалял её и с главной страницы. 6. Проделав указанные вами в видео действия, получалось так, что мобильные устройства сайт не видели. То есть шаблон PDA для них не включался. |
|
Иван: 19.01.2016 12:00:00
Добрый день. Решение подключения мобильной версии при наличии на сайте нескольких шаблонов так и не нашли?
|
|
Михаил Базаров: 19.01.2016 01:00:00
|
|
Guest: 27.01.2016 02:00:00
Здравствуйте Михаил! Хочу выразить благодарность за доступный и весьма информативный урок уложенный в эту статью и видео. Сделал у себя на сайте, все работает как часы, без каких либо сложностей. Возник один вопрос, который возможно будет интересен и другим читателям этой страницы:
У меня в 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 02:00:00
подскажите а как сделать переадресацию для разных сайтов без потери ссылки ?
site.ru/catalog/ на site.ru/m/catalog/ |
|
Марина: 28.04.2016 01:00:00
Добрый день, Михаил!
Спасибо Вам за огромный труд! |
|
Вилен Давыдов: 02.07.2016 10:00:00
Спасибо за инструкцию, но каким способом можно дать возможность пользователю переключиться на обычную версию сайта? Куда должна вести ссылка?
|
|
Михаил Базаров: 02.07.2016 10:00:00
/?type=original |
|
Вилен Давыдов: 20.07.2016 06:00:00
"Многие страницы с различным контентом перенаправляют на одну и ту же страницу мобильной версии сайта. Примеры целей редиректа:" и перечисляются страницы. Есть ли решение и прошел ли ваш сайт проверку в яндексе на адаптивность? |
|
Михаил Базаров: 20.07.2016 06:00:00
Яндекс не сразу, но итоге переварил. А по поводу прохождения, да все без проблем |
|
Вилен Давыдов: 20.07.2016 06:00:00
Спасибо, то есть это нужно доделать к тому, что уже сделано по этой статье в файле init и код определения операционной системы в основном шаблоне, я правильно понимаю?
|
|
Артём Волторнистый: 21.07.2016 07:00:00
Михаил, спасибо за ваш материал.
Поменяйте в материале строку переадресации на главную, если зашли с мобильного устройства:
|
|
Вилен Давыдов: 22.07.2016 05:00:00
"Многие страницы с различным контентом перенаправляют на одну и ту же страницу мобильной версии сайта." |
|
Ольга Стафиевская: 25.07.2016 01:00:00
Михаил, спасибо большое за Ваши уроки, очень полезно.
По этому материалу все сделала, все получилось. Но у меня вопрос. Как выяснилось, поменять шаблон недостаточно. Например, файл index.php тоже будет совершенно другой. Создаю в корне сайта папку /m для мобильной версии. Подскажите, пожалуйста, как и где сделать перенаправление на эту папку, если пользователь заходит с мобильного устройства? |
|
Михаил Базаров: 25.07.2016 05:00:00
|
|
Alexey Kirillov: 26.07.2016 02:00:00
У меня заработало следующим образом
$VISITOR_ID = $APPLICATION->get_cookie("MOBILE_VISITOR_MB"); if ($ipad || $iphone || $android || $palmpre || $ipod || $berry || $mobile || $symb || $operam || $htc || $fennec || $winphone || $wp7 || $wp) { $APPLICATION->set_cookie("MOBILE_VISITOR_MB", "MOBILE", time()+60*60); header("Location: sitepath/?type=pda"); break; } Заметьте, я использую break; Чтобы не было цикличного перехода. Тип условие в параметрах Bitrix: Параметр в URL: type = pda |
|
Андрей Колчанов: 29.10.2016 03:00:00
Здравствуйте, нужно разделения на 6 видов шаблона:
ПК, Планшеты ipad, палншеты андроид, iphone, андроид смартфоны и версия для слабовидящих. Как реализовать на битрикс? |
|
Михаил Базаров: 29.10.2016 03:00:00
+ одну для слабовидящих по инструкции выше |
|
Андрей Колчанов: 29.10.2016 07:00:00
В общем-то, на текущем проекте ПК и планшетная версия почти одно и то же по функциям но по визуалу отличается, а в мобильной явно требуется отключение кучи скриптов, как по визуалу так и по функционалу. Поэтому считаю, что нужно делить хотя бы так: ПК, планшеты, смартфоны, для слабовидящих. Собственно я так полагаю, что самая большая сложность, это как отделить андроид планшеты и андроид смартфоны. Сможете помочь? |
|
Михаил Базаров: 29.10.2016 08:00:00
Думаю только через http://mobiledetect.net городить кучу запросов для каждого устройства. Умнее сходу не придумаю. |
|
Сергей Манник: 05.12.2016 02:00:00
добрый день. сделал все как на вашем видео и вроде заработало. но при попытке зайти на сайт с мобильного устройства выдает предупреждение о том что идет переадресация на мой же сайт (www.site.ru/?type=pda) можно как то избежать данного предупреждения. так как другие люди просто не поймут и уйдут с сайта
|
|
Михаил Базаров: 05.12.2016 03:00:00
|
|
Денис: 11.12.2016 11:00:00
Здравствуйте, Михаил!
Большое спасибо за материал! Сделал как Вы описали и все заработало. Есть только один вопрос: А как сделать чтобы на телефонах показывалась мобильная версия сайта, а на планшетах обычная? Заранее благодарен за ответ. |
|
Михаил Базаров: 11.12.2016 11:00:00
|
|
Денис: 12.12.2016 09:00:00
|
|
Константин: 06.01.2017 05:00:00
Здравствуйте. Использовал ваш код для подключения мобильной версии. Вопрос такой. А как быть с переходами по ссылкам типа mysite.ru/?type=pda
Кто нибудь сошлется на сайт, другой перейдет с десктопа по этой ссылке и окажется на мобильной версии. У меня так работает сейчас. Как быть? Это не правильно. |
|
Михаил Базаров: 06.01.2017 06:00:00
Что то вроде:
|
|
Константин: 07.01.2017 07:00:00
Не согласен - адаптивную не проще))
Я сделал в мобильном шаблоне следующее if ($_GET['type'] == 'pda' && $_GET['special'] != 'pda') { Редирект на /?type=original } Где special=pda - это дополнительный параметр, который я добавил в ссылку "Перейти на мобильную версию" ( mysite.ru/?type=pda&special=pda ) Таким образом при переходе по ссылкам с type=pda, все десктопы попадают на десктопную версию. А те кто в футере нашел ссылку "Перейти на мобильную версию" в любом случае попадут на мобильную. |
|
Константин: 07.01.2017 07:00:00
А в общем спасибо помогли разобраться. Последнее дополнение делает этот метод вполне рабочим.
Советую собрать весь материал по этой теме и актуализировать с учетом подключения mobiledetect. Про канонические ссылки тоже туда. Может получиться очень полезный материал. Это я вам как сеошник говорю)) Адаптивные версии очень сложно реализовать для "старых сайтов", поэтому мне было проще новый шаблон. |
|
Илья Волков: 25.01.2017 04:00:00
Доброго времени суток, скажите а как с таким бороться?
Скриншот |
|
Михаил Базаров: 25.01.2017 04:00:00
|
|
Рустам Хасанов: 09.02.2017 08:00:00
Здравствуйте! Меняю шаблон мобильной версии сайта, захожу затем на основной сайт и там у меня загружается как в мобильной версии. Что не так? Вроде сделал все как на видео.
|
|
Кос Дей: 28.05.2017 02:00:00
Добрый день ! Видел, что вам задавал уже этот вопрос , но ответа не было ... Повторюсь : почему - то с мобильной версии иногда переходит на обычную , причём после обновления, страницы опять переходит на обычную . и страницы абсолютно случайные. То товар , то категория
Автокешироание и и cdn отключили ... Пробовал с разных устройст ( кеш тоже чистили ) Уже голову поломали . подскажите , пожалуйста! |
|
Денис Чучумашев: 25.08.2017 04:00:00
Таки вы меня извините, а зачем что-то вообще каждый раз редиректить и добавлять в адресную строку параметры?
Прописываешь в 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 06:00:00
Во вторых, не проверяли как к такому подходу относятся поисковые системы? Это вопрос без подковырки, реально интересно. Но мне кажется поисковые системы к такому относятся не очень хорошо (вменяется "манипулирование поисковой системой" дорвеи). |
|
Masyasya Miks: 20.02.2018 10:00:00
http://prntscr.com/ihhtdv если сделать так то работает если поставить первым шаблон главной страницы с указателем на index.php то на главной работать не будет так приоритет стоит на указатель файла или папка. Видимо инит позже подгружаеться чем шаблон. Это так для развития.
|
|
victoriat: 25.03.2018 02:00:00
Подскажите, пожалуйста, каким должно быть условие в файле header чтобы сделать версию для слабовидящих. и еще я удалила все стили в шаблоне для версии, но при физическом переключении вид сайта не меняется. не пойму в чем дело.
|
|
Александр Посохов: 04.05.2020 04:00:00
Возникла необходимость в мобильной версии сайта и выборе способа её реализации. Вы пишите, что вы не сторонник адаптивной верстки и на примере вашего сайта показали как это можно сделать по другому. Но это было очень давно и сейчас (2020 год) на вашем же сайте переход на мобильную версию по https://camouf.ru/?type=pda не срабатывает. На другом сайте www.domcvetov.net/, который судя по вашему видео уроку https://camouf.ru/video/bxstorenew/ разработан вами, также нет перехода на мобильную версию по /?type=pda. Судя по всему этот способ для вас уже не подходит и сейчас вы предпочитаете другой способ реализации мобильной версии сайта (похоже опять адаптивный дизайн)? Подскажите, какой способ реализации мобильной версии сайта актуален на сегодня (2020 год)? Спасибо. |
|
Михаил Базаров: 05.05.2020 08:00:00
На текущий момент актуален только адаптив, скорости мобильного интернета и самих телефонов- вполне позволяют. Поддерживать, фактически, два сайта: мобильный и декстопный, иногда, накладно даже. PS: Заметку подкорректирую, что бы не вводит в заблуждение, устаревшими доводами. |
|
Александр Посохов: 05.05.2020 01:00:00
Спасибо. |
|
Юрий: 13.04.2023 01:00:00
Увы, не работает. После занесение записи в инит.пхп сразу ругань движка, мол не хватает в пролонг.пхп
|
|
Artyr: 13.12.2023 08:00:00
Подскажите, как сделать так чтоб мобильный шаблон подключался только для главной страницы, а для всех остальных страниц сайта включался стандартный?
|
Блог-note Заметки по 1С-Битрикс
-
Добавление в избранное или отложенные, на AJAX из карточки товара
В этой заметке рассакажу как добавлять товары в "Отложенные", для иммитации функционала "Избранное". Для этого будем использовать API 1С-Битрикс. Доба...
-
Показать пользователей онлайн на странице сайта
Задача: показать на странице сайта пользователей которые сейчас находятся на сайте. Используется штатный модуль "Веб-аналитика" - должен быт...
-
Вывести информацию, только на первом уровне раздела каталога, в 1С-Битрикс
Задача: на сайте, в каталоге, выводится два фильтра - боковой и верхний. Оба компонента подключены в файле section.php комплексного шаблона. Соотвеств...
-
Как ускорить AJAX и служебные страницы в Битриксе с помощью define()
В Битриксе очень легко сделать страницу, которая просто отдаёт JSON, и так же легко случайно запускает половину ядра ради одного поля из базы. Это не ...
-
GIT-репозиторий на собственном сервере с веб-интерфейсом: Gitea - аналог GitHub
Задача: Развернуть git-репозиторий на собственном сервере с помощью Gitea — для ведения проектов, с веб-интерфейсом и поддержкой многопользовательской...
-
Вывести новости из конкретного раздела инфоблока Битрикс
Бывает что требуется вывести конкретные новости или статьи из одного раздела инфоблока в Битрикс, для этого потребуется сначала вывести сам компнент "...
