Как сделать мобильную версию сайта на Битрикс?

Адаптивные шаблоны сегодня уже давно не редкость, и частенько можно наблюдать, когда один и тот же шаблон адаптируется под разные виды устройств. Это удобно в тех случаях, когда шаблон сайта не перегружен большим количеством элементов, и не создаёт больших проблем при адаптации под мобильные устройства. Бывают и другие случаи, когда для мобильной версии нет необходимости тянуть все данные используемые на полноэкранной версии сайта. Часто приходиться переключать различные компоненты сайта в зависимости от того, с какого устройства заходит пользователь, и делать посредством CSS это не всегда оправдано. По этой причине целесообразно было-бы проверять с какого устройства заходит пользователь, после чего отдавать ему нужные данные.

В данном посту мы поговорим о том, как можно реализовать такой механизм проверки браузера в системе Битрикс.

Проверяем тип браузера пользователя

Один из простых способов проверить тип браузера пользователя, воспользоваться данными заголовка $_SERVER[‘HTTP_USER_AGENT’]. Таким образом заходя на сайт, сервер может видеть браузер, с которого заходит пользователь. Всё что нам остаётся — определить к какому типу устройства относится браузер, далее отдать ему нужные данные.

Первым делом, в шаблоне сайта, в файле header.php (перед началом вывода данных) мы пропишем простой код, который будет определять версию браузера пользователя:

// check device type
$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) &&
		empty($VISITOR_ID)) {
		// redirect to PDA-version
		$APPLICATION->set_cookie("MOBILE_VISITOR_MB", "MOBILE", time()+60*60);
		$page = $APPLICATION->GetCurPageParam("site-type=pda", array("site-type")); 
		LocalRedirect($page);
		exit();
}

В списке заданы практически все виды мобильных браузеров, таким образом если условие проверки срабатывает, то обозначаем в cookie мобильную версию браузера. После этого, перенаправляем на ту же страницу, но уже с параметром site-type=pda. При повторном заходе, если cookie уже заданы в браузере устройства, то редиректа происходить не будет.

Константа определяющая тип сайта

Далее будет удобно завести некую константу, которая будет содержать значение обозначающее тип сайта для браузера. Константу назовём по-простому — SITE_TYPE, принимать будет значение pda либо original (мобильная версия и полная соответственно).

В файле init.php нашего проекта пропишем следующий код:

if (isset ($_GET['site-type'])){

	switch ($_GET['site-type']) {
		case 'pda':
			setcookie('site_type', 'pda', time()+3600*24*30,'/');
			define('SITE_TYPE','pda');
		break;
		default:
			setcookie('site_type', 'original', time()+3600*24*30,'/');
			define('SITE_TYPE','original');
	}

} else {

	$checkType='';
	if (isset($_COOKIE['site_type']))
		$checkType = $_COOKIE['site_type'];

	switch ($checkType) {
		case 'pda':
			define('SITE_TYPE','pda');
		break;
		default:
			define('SITE_TYPE','original');
	}

}

В целом, всё готово. Далее в коде подключения компонентов можно проверять значение константы SITE_TYPE и подключать нужные участки кода. Для простого примера посмотрим подключение костюмного компонента слайдера.

Использование константы в компонентах

Компонент довольно простой, выводит слайдер в зависимости от типа браузера. Подробнее о реализации данного компонента можно почитать в посту «Создаём слайдер на Битрикс». В качестве параметра компоненту передаётся одно значение – TYPE_SID, которое обозначает тип слайдов, которые будут выбираться самим компонентом и выводиться в браузер.

$APPLICATION->IncludeComponent(
    "custom:swiper.slider",
    "",
    Array(
        "TYPE_SID" => (SITE_TYPE != 'pda' ? "MAIN" : "mobile_version")
    )
);

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

if (SITE_TYPE == 'pda'){
	// код для мобильной версии
} else {
	// код для полной версии
}

Используя константу можно гибко управлять шаблоном сайта, управляя представлением данных максимально просто. К примеру, вы можете подключать разные типы меню для разных типов экрана, менять отображение товаров в каталоге, оптимизировать вывод элементов на странице, и многое другое.