- PVSM.RU - https://www.pvsm.ru -
Недавно мне поставили задачу создать мобильную версию существующего сайта, написанного на ModX Revolution. Конечно, первым делом я посоветовал использовать Best Practies в этом деле — адаптивную верстку, на что получил отказ: переделывать дизайн основного сайта вместе с его версткой оказалось слишком накладно, а создать простую мобильную версию на отдельном поддомене с приставкой m и настроить простой редирект на него через javascript в зависимости от разрешения экрана — дело пары часов. Кому интересны подробности — читайте под катом.
Как известно, панель управления modx revolution далека от mobile friendly, поэтому для обеспечения удобства администрирования, было применено расширение Modx Handyman [1], установив которое через стандартный менеджер пакетов, удалось добиться более или менее приличного вида панели управления по ссылке сайт.ру/handyman
Следующим шагом была подготовка мобильной верстки. Если не учитывать время на отрисовку макета в фотошопе, то верстка обошлась мне в несколько часов времени, так как ничего сложного в ней делать не планировалось. О том, как делать верстку, здесь говорить не буду, это тема уже скорее касается html/css, чем работы с modx. Конечно, можно скачать любой бесплатный шаблон для мобильной версии, но в моем случае дизайн был довольно специфический, поэтому самому сделать ее было куда быстрее.
Этот вопрос решился путем вставки в 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 как мобильной, так и десктопной версии, то он будет перенаправлять и обратно при увеличении размеров экрана (например, если поменять ориентацию страницы с вертикальной на горизонтальную и обновить страницу). Для смены шаблонов будет необходимо обновлять страницу, но это не страшно, поскольку нормальный адекватный пользователь (не тестировщик) не будет часто менять разрешение экрана и переход по страницам сайта его не затруднит, так как является частью его работы с самим сайтом.
Здесь можно много писать, но это будет не очень эффективно, так как не наглядно, поэтому я записал видео демонстрацию на эту тему. Она прикреплена ниже:
В этом видео используется код, который определяет мобильную версию. Его я приведу ниже, чтобы было удобно копировать:
<?
$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
Источник [2]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/mobile-development/172212
Ссылки в тексте:
[1] Handyman: http://modx.com/extras/package/handyman234
[2] Источник: https://habrahabr.ru/post/307678/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best
Нажмите здесь для печати.