Разработчикам на MODX: мобильная версия сайта

Данная статья рассчитана в большей степени, на разработчиков MODX.

Небольшой экскурс, как ЛегионА делает мобильные версии сайтов.

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

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

В качестве примера – одна из проблем: как закрыть сайдбар если у тебя только один css-файл? Очень просто? - display:none; ?! Такой вариант не пойдёт, так как и сервер тут что-то посчитал, выполнив php-скрипт из сниппета, и html ненужный загрузился у клиента (а может и js-код что-то хочет поменять), а мы его взяли и закрыли.

Поэтому решили воспользоваться технологией "RESS".

Всё просто!

Логику работы мы предусмотрели так:

Есть версия PC, а есть M (мобильная).
В зависимости от устройства открывается нужная версия сайта, но! обязательно! должна быть возможность перехода с версии на версию!

Приступаем:

Определяем устройство и создаём переменную, куда впишем тип устройства.
В коде шаблонов, чанков, сниппетов и плагинов, в зависимости от переменной, будем отдавать пользователю только нужный код.
Ну и размещаем кнопку для смены версии.

Для определения типа устройства мы используем вот это решение.

Скачиваем.

Загружаем файлы на сервер (в примере ниже это корень сайт -> папка 51)

Создаём сниппет:

Название: 51d

Код:

<?php
if ($_SESSION['whatmode'] == '' && $_POST['whatmode'] == '')
{
	require_once MODX_BASE_PATH.'51/core/51Degrees.php';
	if ($_51d['IsMobile'] == true)
	{
		$modx->setPlaceholder('51d','1');
		$_SESSION['whatmode'] = '1';
	}
	else
	{
		$modx->setPlaceholder('51d','0');
		$_SESSION['whatmode'] = '0';
	}
}
elseif ($_POST['whatmode'] != '')
{
	$_POST['whatmode'] = ($_POST['whatmode'] == '1') ? '1' : '0';
	$modx->setPlaceholder('51d',$_POST['whatmode']);
	$_SESSION['whatmode'] = $_POST['whatmode'];

	$id = $modx->documentIdentifier;
	$url = $modx->makeUrl($id);
	header("HTTP/1.1 301 Moved Permanently");
	header("Location: ".$url);
	exit();
}
elseif ($_SESSION['whatmode'] != '' && $_POST['whatmode'] == '')
{
	$_SESSION['whatmode'] = ($_SESSION['whatmode'] == '1') ? '1' : '0';
	$modx->setPlaceholder('51d',$_SESSION['whatmode']);
}
?>

Использовать так:

Сниппет подключаем самым первым на странице, до загрузки html! Можно всё оформить в плагине, но у нас немного другая логика работы сайтов.

Сниппет 51d определяет тип устройства, создёт placeholder 51d и сессию whatmode. Placeholder используем в коде, а сессию, чтобы не забыть устройство при переходе со страницы на страницу. На самом деле можно использовать только сессию, но для наших задач удобней так.

Значение 1 – значит, что пользователь зашёл с мобильника, значение 0 - с PC

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

Название: pom

Код:

<?php
if ($modx->getPlaceholder('51d') != '1')
{
	echo $pc;
}
else
{
	echo $m;
}
?>

Использовать так:

Например:

Ну и сниппет с кнопкой переключения версий.

Название: pcOrMobile

Код:

<?php
$result = '
	<form method="POST">
';
if ($modx->getPlaceholder('51d') == '1')
{
	$result .= '
		<input type="hidden" name="whatmode" value="0" />
		<input type="submit" value="Полная версия" />
	';
}
elseif ($modx->getPlaceholder('51d') == '0')
{
	$result .= '
		<input type="hidden" name="whatmode" value="1" />
		<input type="submit" value="Мобильная версия" />
	';
}
$result .= '
	</form>
';
echo $result;
?>

Использовать так:

Лучше вызов вставить в footer, так удобней пользователю.

Надеемся, что наше решение будет для вас удобным и полезным.

(руководитель «ЛегионА» и разработчик Колтышев Илья Сергеевич).