Адаптация сайта по методике RESS на MODX
Всем привет, сегодня подумал как можно сделать адаптивный сайт на MODX при помощи RESS, для тех кто не в курсе это когда для разных устройств сервер отдаёт разные HTML и CSS, но по одному URL.
Сама эта схема завязана на проверке userAgent браузера, и да я знаю, что в modstore уже есть компонент для определения мобильных версий — MobileDetect, но он работает по принципу — вся вёрстка в одном шаблоне и при рендере страницы он ненужную разметку вырезает.
Я хочу попробовать другой вариант, но мне нужна помощь сообщества —
В общем всё дело происходит при работе с Fenom в pdoTools, в настройках системы есть параметр, задающий папку от куда нужно тянуть шаблоны для ресурсов, вот её я хочу менять на лету в зависимости от userAgent браузера.
Схема примерно такая — пользователь зашёл с мобильника, php cкрипт в плагине проверил userAgent и в зависимости от него выставил системную настройку Fenom из какой папки брать шаблоны.
Вопрос в том на какое событие и с каким приоритетом нужно вешать такой плагин, я не знаю когда происходит чтение системной настройки Fenom что бы успеть его поменять?
И так решение задачи:
Сама эта схема завязана на проверке userAgent браузера, и да я знаю, что в modstore уже есть компонент для определения мобильных версий — MobileDetect, но он работает по принципу — вся вёрстка в одном шаблоне и при рендере страницы он ненужную разметку вырезает.
Я хочу попробовать другой вариант, но мне нужна помощь сообщества —
В общем всё дело происходит при работе с Fenom в pdoTools, в настройках системы есть параметр, задающий папку от куда нужно тянуть шаблоны для ресурсов, вот её я хочу менять на лету в зависимости от userAgent браузера.
Вопрос в том на какое событие и с каким приоритетом нужно вешать такой плагин, я не знаю когда происходит чтение системной настройки Fenom что бы успеть его поменять?
P.S
И так, друзья, решение найдено! Спасибо, Андрею N за разъяснение внутренней «кухни» парсера и Володе, за наводку на какое событие вешать плагин.И так решение задачи:
//Создаём плагин на событие OnMODXInit (приоритет по моим экспериментам не сыграл роли - 0)
//Пишем код плагина с проверкой userAgent - я его взял уже готовый с сайта - http://detectmobilebrowsers.com/
<?php
if ($modx->event->name != 'OnMODXInit') {
return;
}
$mode; //Переменная, которую будем проверять далее
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
{
$mode = 'mobile';
}
// получаем текущее значение системной настройки
$path = $modx->getOption('pdotools_elements_path');
// проверяем переменную
switch ($mode) {
case 'mobile':
// если мобильник то просим парсер изменить конфигурацию
$modx->parser->pdoTools->config['elementsPath'] = $path.'mobile/';
break;
default:
//здесь поведение по-умолчанию "В моём случае - ничего"
break;
}
На этом всё. Спасибо любимому сообществу за обратную связь и всем, кто откликнулся на мой вопрос.Комментарии: 15
попробуй на OnMODXInit
if ($modx->event->name != 'OnMODXInit') {
return;
}
// тип
$mode = 'mobile';
// получил текущую
$path = $modx->getOption('pdotools_elements_path');
switch ($mode) {
case 'mobile':
// переопределил
$modx->setOption('pdotools_elements_path', $path.'mobile/');
break;
default:
break;
}
ну и событие назначь с приоритетом раньше
Спасибо, Володя. Попробовал запилить плагин, выставил ему приоритет ниже согласно документации чем у плагина pdoTools — у него -100, я своему поставил -200 (пробовал разные варианты 90, 0, 15), и проверяю:
Настройка меняется, но походу всё равно поздно, выводится шаблоны из пути который в системных настройках. Нашел среди событий ещё pdoToolsOnFenomInit попробовал с ним, но даже настройка перестала меняться. Теперь ломаю голову, как же Fenom умудряется так рано зацепить эту настройку, если мой плагин по приоритету срабатывает быстрее или всё таки нет?
Настройка меняется, но походу всё равно поздно, выводится шаблоны из пути который в системных настройках. Нашел среди событий ещё pdoToolsOnFenomInit попробовал с ним, но даже настройка перестала меняться. Теперь ломаю голову, как же Fenom умудряется так рано зацепить эту настройку, если мой плагин по приоритету срабатывает быстрее или всё таки нет?
Плагин pdoTools тут ни при чем, он даже не запускает сервис и феном ни при чем. Все дело в парсере — получение парсера происходит раньше, чем OnMODXInit, вернее во время запуска самого события, но до выполнения кода.
Попробуйте вместо/вместе с setOption:
Чуть радикальнее — внесите правки в core/components/pdotools/model/pdotools/pdoparser.class.php (только не наследуйте, а именно сюда вносите — pdoTools проверяет инстанс pdoParser). В конструктор:
Попробуйте вместо/вместе с setOption:
$modx->parser->pdoTools->config['elementsPath'] = $path.'mobile/';
Только вот это $path = $modx->getOption('pdotools_elements_path'); не пойдет — там плейсхолдер используется (по умолчанию) — {core_path}, а парсится он раньше.Чуть радикальнее — внесите правки в core/components/pdotools/model/pdotools/pdoparser.class.php (только не наследуйте, а именно сюда вносите — pdoTools проверяет инстанс pdoParser). В конструктор:
$this->pdoTools = new $pdoClass($modx, [
'elementsPath' => $path
]);
вот тут можете $path = $modx->getOption('pdotools_elements_path');
Андрей, спасибо Вам огромное, ваш комментарий полностью решил мою задачу. На всякий случай дописал в топик решение, может кому пригодится.
Допустим был шаблон «template1»
из него весь текст удалить. оставить
который возвращает нужный суффикс в зависимости от userAgent
сделать 2 (или больше) чанка. их содержимое=шаблон нужный
«template1-big»
«template1-small»
повторить фокус с остальными шаблонами
из него весь текст удалить. оставить
[[$template1-[[!userAgent]]]]
сделать сниппет userAgentкоторый возвращает нужный суффикс в зависимости от userAgent
сделать 2 (или больше) чанка. их содержимое=шаблон нужный
«template1-big»
«template1-small»
повторить фокус с остальными шаблонами
Дмитрий, это не многим отличается от того, что уже умеет компонент MobileDetect — снова нужно лезть в шаблоны и работать с разметкой. Цель моего варианта всего лишь поменять системную настройку откуда нужно брать шаблоны в зависимости от userAgent-a, и спокойно делать совершенно разные вёрстку и стили для разных устройств, зная, что им будет отдана подходящая версия. Тем более сниппет медленнее плагина, а его ещё нужно вызывать во всех шаблонах. Я думаю путь, который подсказал Володя верный, нужно только более детально разобраться в последовательности срабатывания плагинов и в целом работы pdoTools, возможно нам подскажет Василий по данной ситуации, всё таки автор как никто лучше знает свой компонент.
Тем более сниппет медленнее плагина, а его ещё нужно вызывать во всех шаблонахУ вас что сниппет один раз будет вызываться на страницу, что плагин один раз.
И откуда инфа про «сниппет медленнее плагина»?
Создавайте сайт на Fenom, пути подменяйте в событии pdoToolsOnFenomInit.
// получаем текущее значение системной настройка
$path = $modx->getOption('pdotools_elements_path');
это точно работает? Если в сис.настройке pdotools_elements_path используются плейсхолдеры (например {core_path} ), то, судя по коду pdoTools — не должно, хотя всякое бывает:)Думаю правильней получать так:
$path = $modx->parser->pdoTools->config['elementsPath'];
Андрей, да мой вариант работает, видимо плагин срабатывает уже когда плейсхолдеры распарсились, поэтому значение настройки уже можно получить таким образом, но ничто не мешает задействовать и Ваш вариант.
Просьба, не проверите ли вы свое решение на предмет работы с браузером — эмулятором мобильных устройств (blisk.io)? MobileDetect, настроенный через плагин предложенный Владимиром работает в указанном браузере корректно. Очень удобно в нем верстку допиливать под разные устройства (ошибки раздельно показывает, две консоли и т.п.)
Если не затруднит, напишите.
Если не затруднит, напишите.
Владимир, браузер blisk как раз работает по принципу отсылки разных заголовков userAgent, поэтому, отвечая на Ваш вопрос — да мой вариант решения в нём будет работать без проблем, проверено!
Вопрос только в том, что этот браузер с недавнего времени стал платным)) Старыми версиями ещё можно пользоваться, а вот новые только за деньги)) И куда катится этот мир, что даже браузеры становятся платными))???
Вопрос только в том, что этот браузер с недавнего времени стал платным)) Старыми версиями ещё можно пользоваться, а вот новые только за деньги)) И куда катится этот мир, что даже браузеры становятся платными))???
Спасибо.
Да, и я несколько месяцев плачу им по 9 баксов, но радуюсь :) Инструмент должен развиваться (кстати, его аналоги дороже в разы).
Теперь интересно, перейти с одного плагина (который сейчас использую) на другой (ваше решение) или если оба решения задействовать для сравнения на работающем сайте, будет ли трабл? Это скорее мысль вслух.
Да, и я несколько месяцев плачу им по 9 баксов, но радуюсь :) Инструмент должен развиваться (кстати, его аналоги дороже в разы).
Теперь интересно, перейти с одного плагина (который сейчас использую) на другой (ваше решение) или если оба решения задействовать для сравнения на работающем сайте, будет ли трабл? Это скорее мысль вслух.
Добрый день. решил воспользоваться Вашим решением, но возникло 2 вопроса:
1. вывожу в шаблонах — разных для мобильной и настольной версий значение
2. Скажите, а как задействовать разные чанки — у меня все на файловых элементах и если я указываю в шаблоне мобильной версии другой чанк — не тот, который для основной — то сайт вылетает в 500 ошибку.
1. вывожу в шаблонах — разных для мобильной и настольной версий значение
{$_modx->config.pdotools_elements_path}
И оно и там и там одинаковое (хотя выводится разная информация, то есть смена конфига работает).2. Скажите, а как задействовать разные чанки — у меня все на файловых элементах и если я указываю в шаблоне мобильной версии другой чанк — не тот, который для основной — то сайт вылетает в 500 ошибку.
Вопрос снят. Все чанки пихаем в общую папку, в отдельной лежит только шаблон. И уже в шаблоне мобильном выбираем нужный чанк
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.