Павел Новицкий

Мировые тренды говорят, что интеренет-магазины должны быть адаптированы для мобильных пользователей. Споры так это или нет оставим без внимания. Точно так же обойдём стороной методы реализации: мобильные и адаптивные темы, приложения, отдельные сайты. Просто договоримся на сегодня: покупателю с мобильным устройством должно быть так же удобно пользоваться магазином, как и его коллеге перед десктопом.

Итак, договорились — мобильные темы нужны. Теперь давайте выясним кто же проводит в интеренет-магазине больше всего времени. Привередливый покупатель? Конкурент? Налоговые органы? Вы совершенно правы — больше всего времени на сайте проводит администратор! Однако, как сильно мы заботимся об удобстве покупателей, так же бездумно мы оставляем на произвол судьбы наших менеджеров. Я не хочу сказать что разработчики не думают об удобстве админки. Большинство разделов достаточно логично расположены и спланированы. Просто люди, работающие на десктопах и ноутбуках, проектируют админку для себя. Всё, кажется, справедливо. Только админу, попытавшемуся во время поездки проверить как идут дела в магазине, от такой справедливости не легче.

Пример админки в телефоне

Вообще, изменения темы админки описано слабо. Готовых решений ещё меньше. По сути, 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» — достаточно удобный инструмент для работы с заказами для мобильных администраторов.