Get Free Audit

Magento For Mobile Admins

Sep 11, 2013

2720 Pavel Novitsky

Magento For Mobile Admins

According to the world’s trends, online stores should be adapted for mobile users. We’ll pass without notice any disputes on this issue. We’ll also ignore the implementation methods: mobile and responsive themes, applications and separated mobile websites. Let’s simply agree with the following fact: mobile store customers should be just as satisfied with browsing experience as their desktop colleagues.

So be it, then – mobile themes are reasonably necessary. Let’s now find out who spends more time in the online store. Is it a fastidious customer? Or a competitor? Or maybe Tax Authorities? None of the above. This is an admin! But we care about our customers as much as we ignore our managers. I don’t mean that developers don’t think how to make easy-to-use admin panel. They work on desktop devices and develop admin panel for themselves. It sounds justly. But this justice doesn’t work for the admin who decided to check out how it goes in the store during the trip.

1Magento For Mobile Admins

Mobile admin panel example

Ways of admin template modification are not so well described. There are not so many ready-to-use solutions as well. In fact, Magento with all its frontend configuration flexibility has no tools to customize admin panel. If we lack something and need it we should do something about it, wouldn’t we? Admin layout rendering uses the same functionality as the frontend presentation.

So, our goal is to create the theme for admins to use from mobile devices. As usual, we create the extension.

config.xml:


The main extension’s part is the adminhtml_controller_action_predispatch_start event. This is where client’s User Agent is compared, the respective template is chosen and the default template is replaced with our one.

Belvg_AdminTheme_Model_Observer:

Andrey_Dubina
Partner With Us Let's discuss how to grow your business. Get a Free Quote.
Talk to Andrey


The getAdminTheme() method resembles the Mage_Core_Model_Design_Package class, which is responsible for choosing the pack and the template for the frontend, in terms of behavior.

N.B. for pedants: @unserialize($configValueSerialized) error suppression is not mine, see Mage_Core_Model_Design_Package::_checkUserAgentAgainstRegexps() :)

Here goes the most important part for an end user – additional configuration setting output.

system.xml:


Administration panel in Magento is a separate store (store_id=0). All the other stores are being frontend. Thanks to the adminhtml_controller_action_predispatch_start event our observer is fired only during admin panel load process. So I’ve added all our configuration options to the global scope view to make sure that settings are independent from the selected store scope. Here is what we have at the end:

2Magento For Mobile Admins

The only thing left to do is adding the rules for mobile browsers as exceptions (for example, iPhone|iPod|BlackBerry|Palm|Googlebot-Mobile|mobile|mobi|Windows Mobile|Safari Mobile|Android|Opera Mini|Fennec). Create the same mobile theme for the admin panel as well.

P.S. Our «Tablet Dashboard» is a great example of how the admin panel can be modified for mobile devices. It is a very useful tool for mobile administrators to operate with orders.

Andrey Dubina
Partner With Us Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Andrey

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *