Мобільна версія шаблону Бітрікс з автовизначенням Mobile Detect

Замовити послугу
3 хв.
Відразу хочу висловити подяку Михайлу Базарову, за статтю в його блозі, яка надихнула мене піти далі і реалізувати більш модернізовану версію автовизначення мобільної версії сайту. Також велике спасибі Станіславу Сазонову за його підказки та за те, що познайомив мене з технологією Bootstrap.

Адаптивний дизайн чи мобільна версія шаблону сайту?

Для відображення контенту в цьому немає великої різниці. Але щоб показати цей контент на дисплеї вашого девайса, його потрібно попередньо завантажити. Добре, якщо користувач підключений до високошвидкісної точки доступу в інтернет. В ідеалі це ноутбук, що виконав вхід у всесвітню павутину через wi-fi точку доступу. Але скільки ж нервів і часу ми витрачаємо в тих випадках, коли у нас в руці мобільний телефон, а з'єднання навіть не 3G, а звичайний GPRS.

А тепер уявіть, що на потрібному сайті є тільки повна оригінальна версія шаблону сайту. Ця версія гарна: з анімацією, зображеннями, стилями, скриптами та ще купою рядків різного роду коду. І ось, ви зайшли на цей сайт... 10 секунд, 20... А ми на все чекаємо. У найгірших умовах час від кліка за посиланням, до завантаження контенту та видачі його вам на дисплей може затягнутися і до хвилини. Бувають випадки і важче... Як же бути? Адже у нас адаптивний дизайн, він повинен красиво відображатися на мобільних телефонах, без анімацій і великих зображень.

Відображатися він буде, але під час завантаження він підтягує весь контент, навіть той, який не відображає. Що робити? Все дуже просто - потрібен окремий і теж адаптивний шаблон сайту.

Мобільна версія шаблону Бітрікс з автовизначенням Mobile Detect

Мобільний шаблон сайту Бітрікс

Псевдонім домену

Отже, панове! Перше, що нам потрібно зробити, це піддомен для нашого основного домену. Найкраще не винаходити велосипед, а створити піддомен типу m.proger.com.ua . На просторах інтернету я бачив, що хлопці описують підключення різних шаблонів без створення псевдоніма домену для мобільної версії. Все добре, але ж ми користувачі Бітрікса, і використовуємо технологію "Композитний сайт". А якщо різні шаблони виводитимуться на однакових адресах, то й зміст композиту загубиться, оскільки кеш постійно перезаписуватиметься. Я вже через це пройшов. Тому нам потрібний додатковий псевдонім домену.

Полегшений шаблон

Тепер нам потрібно створити, а краще підготувати наперед окремий шаблон для мобільних пристроїв. Наскільки він буде полегшений – це залежатиме від розробника. Але краще забрати всі непотрібні файли js, css або мінімізувати їхній код. Наприклад прибрати всі стилі, що не використовуються. Забрати зайві анімації, слайдери. Звичайно ж, зовсім неприйнятно на мобільній версії залишати flash. Також полегшити код PHP. Вимкнути виведення непотрібних компонентів на мобільні версії. Це може бути фільтр у списку товарів. Як я помітив з ним, генерація сторінки на першому хіті відбувається довше.

Mobile Detect

Mobile Detect є легким PHP класом для виявлення мобільних пристроїв (у тому числі планшети). Він використовує рядок User-Agent у поєднанні з конкретними заголовками HTTP для виявлення мобільного середовища. Завантажуємо новий файл Mobile_Detect.php прямо з сайту розробника mobiledetect.net . Встановлюємо цей файл на сервер прямо в директорію шаблону "поряд" з файлом header.php. В обох шаблонах header.php підключаємо цей файл і ставимо умову для redirect.

Написання коду

Ну що ж, приступимо до написання самого коду. Щоб обійти технологію композитного сайту, і не переривати створення композитного кешу, нам знадобиться файл header.php, який підключається ще до підключення файлу header.php самого шаблону сайту. Цей файл знаходиться на адресі /bitrix/header.php. І пишемо наступний код:

20 січня 2017 (Boudybuilder) Виталий Фантич

Повернення до списку

file_download Завантажити Модуль Маркет
file_download Завантажити Модуль Маркет