Мировые тренды говорят, что интеренет-магазины должны быть адаптированы для мобильных пользователей. Споры так это или нет оставим без внимания. Точно так же обойдём стороной методы реализации: мобильные и адаптивные темы, приложения, отдельные сайты. Просто договоримся на сегодня: покупателю с мобильным устройством должно быть так же удобно пользоваться магазином, как и его коллеге перед десктопом.
Итак, договорились — мобильные темы нужны. Теперь давайте выясним кто же проводит в интеренет-магазине больше всего времени. Привередливый покупатель? Конкурент? Налоговые органы? Вы совершенно правы — больше всего времени на сайте проводит администратор! Однако, как сильно мы заботимся об удобстве покупателей, так же бездумно мы оставляем на произвол судьбы наших менеджеров. Я не хочу сказать что разработчики не думают об удобстве админки. Большинство разделов достаточно логично расположены и спланированы. Просто люди, работающие на десктопах и ноутбуках, проектируют админку для себя. Всё, кажется, справедливо. Только админу, попытавшемуся во время поездки проверить как идут дела в магазине, от такой справедливости не легче.
Пример админки в телефоне
Вообще, изменения темы админки описано слабо. Готовых решений ещё меньше. По сути, Magento, при всей её гибкости в настройке фронтенда, не предоставляет никаких инструментов для измененния админки. А раз нам чего-то не хватает — добавим это. Благо, принципы рендеренга админки те же самые, что и для фронтенда.
Итак, наша цель —указать отдельную тему для администраторов зашедших с мобильных устройств. Как водится, содаём модуль.
config.xml:
<?xml version="1.0"?> <config> <modules> <Belvg_AdminTheme> <version>1.0.0</version> </Belvg_AdminTheme> </modules> <global> <models> <admintheme> <class>Belvg_AdminTheme_Model</class> </admintheme> </models> </global> <adminhtml> <events> <adminhtml_controller_action_predispatch_start> <observers> <themeoverride_observer> <type>singleton</type> <class>Belvg_AdminTheme_Model_Observer</class> <method>getAdminTheme</method> </themeoverride_observer> </observers> </adminhtml_controller_action_predispatch_start> </events> </adminhtml> <default> <design> <admin> <theme>default</theme> </admin> </design> </default> </config>
Главная часть модуля — событие adminhtml_controller_action_predispatch_start, в котором мы должны сравнить User Agent клиента, подобрать соответствующую тему и заменить тему default на нашу.
Belvg_AdminTheme_Model_Observer:
<?php class Belvg_AdminTheme_Model_Observer { const DEFAULT_THEME = 'design/admin/theme'; const REGEX_PATH = 'design/admin/ua_regexp'; const AREA = 'adminhtml'; public function getAdminTheme() { $configValueSerialized = Mage::getStoreConfig(self::REGEX_PATH); if (!$configValueSerialized) { return $this; } $regexps = @unserialize($configValueSerialized); if (empty($regexps)) { return $this; } $_theme = Mage_Core_Model_Design_Package::getPackageByUserAgent($regexps, self::REGEX_PATH); $_theme = $_theme ? $_theme : Mage::getStoreConfig(self::DEFAULT_THEME); Mage::getDesign()->setArea(self::AREA)->setTheme($_theme); return $this; } }
Метод getAdminTheme() напоминает поведение класса Mage_Core_Model_Design_Package, отвечающего за выбор пакета и темы для фронтенда.
N.B. для педентов: подавление ошибок @unserialize($configValueSerialized) не моё, смотреть в Mage_Core_Model_Design_Package::_checkUserAgentAgainstRegexps() :)
И, собственно, самая важная для конечного пользователя часть — вывод дополнительной настройки в конфигурации.
system.xml:
<?xml version="1.0"?> <config> <sections> <design> <groups> <admin translate="label"> <label>Admin Theme</label> <frontend_type>text</frontend_type> <sort_order>1</sort_order> <show_in_default>1</show_in_default> <expanded>1</expanded> <fields> <theme translate="label comment"> <label>Default Admin Theme</label> <frontend_type>text</frontend_type> <sort_order>1</sort_order> <show_in_default>1</show_in_default> </theme> <ua_regexp translate="comment"> <label>Add expression</label> <frontend_model>adminhtml/system_config_form_field_regexceptions</frontend_model> <backend_model>adminhtml/system_config_backend_design_exception</backend_model> <sort_order>2</sort_order> <show_in_default>1</show_in_default> <comment>Match expressions in the same order as displayed in the configuration.</comment> </ua_regexp> </fields> </admin> </groups> </design> </sections> </config>
В Magento админка представляет из себя отдельный стор (store_id=0). Все остальные сторы представляют собой фронтенд. Благодаря событию adminhtml_controller_action_predispatch_start мы вызываем наш обсервер только при загрузке админки. Так что все параметры в нашем конфиге я сделал глобальными, независящими от выбранного для конфигурации стора.
И вот что же у нас получилось в итоге:
Осталось только добавить в исключения правила для мобильных браузеров (например, iPhone|iPod|BlackBerry|Palm|Googlebot-Mobile|mobile|mobi|Windows Mobile|Safari Mobile|Android|Opera Mini|Fennec) и, собственно, создать ту самую мобильну тему для админки.
P.S. в качестве примера конечного решения приведу наш «Tablet Dashboard» — достаточно удобный инструмент для работы с заказами для мобильных администраторов.