Недавно мне поставили задачу создать мобильную версию существующего сайта, написанного на ModX Revolution. Конечно, первым делом я посоветовал использовать Best Practies в этом деле — адаптивную верстку, на что получил отказ: переделывать дизайн основного сайта вместе с его версткой оказалось слишком накладно, а создать простую мобильную версию на отдельном поддомене с приставкой m и настроить простой редирект на него через javascript в зависимости от разрешения экрана — дело пары часов. Кому интересны подробности — читайте под катом.
1. Сделать панель управления mobile friendly — 5 минут
Как известно, панель управления modx revolution далека от mobile friendly, поэтому для обеспечения удобства администрирования, было применено расширение Modx Handyman, установив которое через стандартный менеджер пакетов, удалось добиться более или менее приличного вида панели управления по ссылке сайт.ру/handyman
2. Скачать или сделать верстку всех страниц мобильной версии сайта — несколько часов
Следующим шагом была подготовка мобильной верстки. Если не учитывать время на отрисовку макета в фотошопе, то верстка обошлась мне в несколько часов времени, так как ничего сложного в ней делать не планировалось. О том, как делать верстку, здесь говорить не буду, это тема уже скорее касается html/css, чем работы с modx. Конечно, можно скачать любой бесплатный шаблон для мобильной версии, но в моем случае дизайн был довольно специфический, поэтому самому сделать ее было куда быстрее.
3. Заставить CMS ModX перенаправлять посетителя на мобильный сайт при маленьком разрешении экрана — 5 минут
Этот вопрос решился путем вставки в head страницы следующего кода:
<script>
(function checkMobile(){
var location = window.location.href,
isMobile = $(window).width() < 1024,
mobileLocation = location.replace(/(http://)?(www.)?(m.)?/, 'http://m.'),
desktopLocation = location.replace(/m./g, ''),
selectedLocation = isMobile ? mobileLocation : desktopLocation;
if (selectedLocation !== location) window.location.href = selectedLocation;
})();
</script>
Данный код определяет ширину экрана посетителя и, если она меньше 1024 пикселов, считает, что пользователю будет удобнее пользоваться мобильной версией, чем десктопной. Далее происходит определение ссылок на мобильную и на десктопную версию путем удаления приставки m из домена для десктопной и добавления такой приставки для мобильной версии, а затем перенаправление на нужную версию, если мы в данный момент находимся еще не на ней. Если добавить этот код в head как мобильной, так и десктопной версии, то он будет перенаправлять и обратно при увеличении размеров экрана (например, если поменять ориентацию страницы с вертикальной на горизонтальную и обновить страницу). Для смены шаблонов будет необходимо обновлять страницу, но это не страшно, поскольку нормальный адекватный пользователь (не тестировщик) не будет часто менять разрешение экрана и переход по страницам сайта его не затруднит, так как является частью его работы с самим сайтом.
4. Заставить Modx Revolution загружать разную верстку сайта в зависимости от домена — 15 минут
Здесь можно много писать, но это будет не очень эффективно, так как не наглядно, поэтому я записал видео демонстрацию на эту тему. Она прикреплена ниже:
В этом видео используется код, который определяет мобильную версию. Его я приведу ниже, чтобы было удобно копировать:
<?
$host = $_SERVER['HTTP_HOST'];
$tpl = $modx->getObject('modTemplate', $modx->resource->get('template'));
$description = $tpl->get('description');
if ($host == "m.autospa") $description = str_replace(".tpl", "_mobile.tpl", $description);
return $modx->smarty->fetch($description);
Этот код определяет домен, затем считывает из описания шаблона файл, в котором хранится сам шаблон, а затем, если домен является мобильным, дописывает к имени файла суффикс _mobile. Таким образом, обычная верстка сайта считывается из файлов с именами name.tpl, а мобильная — name_mobile.tpl.
При использовании вышеуказанного кода не забудьте заменить «m.autospa» на «m.(ваш домен.ру)», иначе работать не будет.
Надеюсь, что мой пост поможет тем, кто решает аналогичные задачи. Если появятся вопросы — пишите, буду корректировать статью и отвечать на них.
Автор: mrjohn0011
