Как в битрикс сделать отдельный шаблон для мобильных устройств

Данная инструкция описывает процесс настройки адаптивной версии сайта на платформе 1С-Битрикс с автоматическим определением типа устройства пользователя. Реализация позволяет предоставлять пользователям оптимальную версию сайта в зависимости от используемого устройства (компьютер, планшет или телефон), а также сохранять выбор пользователя для последующих посещений.

Подготовительные работы

Загрузка библиотеки Mobile_Detect

1. Скачайте актуальную версию библиотеки Mobile_Detect с официального сайта: http://mobiledetect.net/

2. Разместите файл Mobile_Detect.php в директории /local/php_interface/classes/Mobile-Detect/

Пример структуры папок:

/local/
  /php_interface/
    /classes/
      /Mobile-Detect/
        Mobile_Detect.php

Настройка системы определения типа устройства

Инициализация в init.php

Добавьте следующий код в файл /local/php_interface/init.php:

<?php
// Определение типа сайта на основе cookie или GET-параметров
if (isset($_GET['type'])) {
    switch ($_GET['type']) {
        case 'pda':
            // Установка cookie для мобильной версии на 30 дней
            setcookie('siteType', 'pda', time() + 3600 * 24 * 30, '/');
            define('siteType', 'pda');
            break;
        default:
            // Установка cookie для полной версии на 30 дней
            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;
        default:
            define('siteType', '');
    }
}
?>

Принцип работы:

• Система проверяет наличие GET-параметра type

• При значении type=pda устанавливается мобильная версия

• При отсутствии параметра проверяются cookie пользователя

• Результат сохраняется в константе siteType

Настройка десктопного шаблона

Добавление кода в основной шаблон

В начало десктопного шаблона (например, header.php) добавьте:

<?php
// Подключение библиотеки Mobile_Detect
require_once $_SERVER['DOCUMENT_ROOT'] . '/local/php_interface/classes/Mobile-Detect/Mobile_Detect.php';
$detect = new Mobile_Detect;
$deviceType = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'phone') : 'computer');

// Перенаправление на мобильную версию для телефонов
if ($deviceType == 'phone' && siteType != 'original') {
    $separator = (strpos($APPLICATION->GetCurPageParam(), "?") !== false) ? "&" : "?";
    LocalRedirect($APPLICATION->GetCurPageParam() . $separator . "type=pda");
    exit();
}
?>

Пример использования:

// В шаблоне можно использовать условие для разного отображения
if (siteType == 'pda') {
    // Мобильная версия
    $APPLICATION->SetAdditionalCSS('/mobile-styles.css');
} else {
    // Десктопная версия  
    $APPLICATION->SetAdditionalCSS('/desktop-styles.css');
}

Настройка мобильного шаблона

Добавление кода в мобильный шаблон

В начало мобильного шаблона добавьте:

<?php
// Подключение библиотеки Mobile_Detect
require_once $_SERVER['DOCUMENT_ROOT'] . '/local/php_interface/classes/Mobile-Detect/Mobile_Detect.php';
$detect = new Mobile_Detect;
$deviceType = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'phone') : 'computer');

// Перенаправление на десктопную версию для компьютеров и планшетов
if ($deviceType != 'phone' && siteType != 'pda') {
    $separator = (strpos($APPLICATION->GetCurPageParam(), "?") !== false) ? "&" : "?";
    LocalRedirect($APPLICATION->GetCurPageParam() . $separator . "type=original");
    exit();
}
?>

Настройка в административной панели

Привязка шаблонов к условиям

1. Перейдите в раздел "Настройки сайта" → "Шаблоны сайтов"

2. Для мобильного шаблона задайте условие:

   • Тип условия: "PHP-выражение"

   • Условие: siteType=='pda'

3. Для основного шаблона установите условие по умолчанию или противоположное условие

Пример настройки шаблонов:

• Основной шаблон: Условие siteType!='pda' или "По умолчанию"

• Мобильный шаблон: Условие siteType=='pda'

Дополнительные возможности

Добавление переключателя версий

Для предоставления пользователям возможности ручного переключения между версиями, добавьте в шаблоны ссылки:

<!-- В мобильной версии -->
<a href="?type=original">Полная версия сайта</a>

<!-- В десктопной версии -->
<a href="?type=pda">Мобильная версия</a>

Пример обработки различных устройств

$detect = new Mobile_Detect;

// Проверка конкретных устройств
if ($detect->is('iPhone')) {
    // Особые настройки для iPhone
    $APPLICATION->SetPageProperty('special-script', 'iphone-fixes.js');
}

// Проверка конкретных ОС
if ($detect->is('iOS')) {
    // Настройки для iOS
} elseif ($detect->is('AndroidOS')) {
    // Настройки для Android
}

Заключение

Представленная реализация обеспечивает:

• Автоматическое определение типа устройства пользователя

• Сохранение выбора версии сайта в cookie

• Возможность ручного переключения между версиями

• Корректную работу с SEO (использование корректных редиректов)

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