Magento mobile theme – imobile
Magento meets jQuery mobile (ver 1.1.0), before we start please note this is only experiment, use this theme on your own, this is not (yet) production ready. In a nutshell we have “package” under which we place all edited files. For start we use magento iphone theme and then add some “extra stuff”.
Some of key features:
- Autodetects the mobile device
- jQuery mobile (v. 1.1.0)
- Homepage slider (http://swipejs.com/)
- Almost all pages styled 🙂
Installation is simple, just copy downloaded files, (app, skin) after that go to administration and do some Magento magic. Magento already have browser detection, you only need to create rule. In our case we dropped table support because most of them will display normal desktop view store. Here is rule:
iPhone|iPod|BlackBerry|Palm|Googlebot-Mobile|mobile|mobi|Windows Mobile|Safari Mobile|Android|Opera Mini|FennecYou can add any other browser to this Expression, just point your device to http://whatsmyuseragent.com/ and find out user agent name of device browser. And this is how it looks in administration
Using expressions
We need to mention that theme is independent from main store theme, all files which are edited don’t “break” default Magento markup we are only using power of HTML5 and one of the new cool feature “custom data attributes“.
Simply, the specification for custom data attributes states that any attribute that starts with “data-” will be treated as a storage area for private data (private in the sense that the end user can’t see it – it doesn’t affect layout or presentation).
Short explanation by John Resig
And here is our example for store header:
</pre>
<div data-role="header" data-position="inline" data-theme="c">
<h1><a href="<?php echo $this->getUrl('') ?>" data-icon="home">
<img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a></h1>
<!--?php echo $this----->getChildhtml('top-user');?></div>
<pre>We don’t have any local hosted files regarding to jQuery because it is much easier to edit and place the newest version of js.
<![CDATA[<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script type="text/javascript">jQuery.noConflict();</script>]]>
<![CDATA[<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>]]>
<![CDATA[ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />]]>
skin_jsjs/swipe.jsAh, if you need more info about jQuery mobile framework go to: http://jquerymobile.com/.
Swipe JS, http://swipejs.com/,
Swipe is a lightweight mobile slider with 1:1 touch movement, resistant bounds, scroll prevention, and completely library agnostic. ;-).
Ok, we made simple approach, create static block, named Slider with ID slider and place this code
</pre>
<div style="display: block;"><img src="{{media url=" alt="" /></div>
<div style="display: none;"><img src="{{media url=" alt="" /></div>
<div style="display: none;"><img src="{{media url=" alt="" /></div>
<div style="display: none;"><img src="{{media url=" alt="" /></div>
<pre>If is there no needs for homepage slider just removed it from local.xml (from line 44).
For styling pages, we cover most of them but there is always more space to improve some part of Magento interface.
For demo and download, please visit @ github.
So if you have any suggestion, issues, trouble just comment below, enjoy
61 comments
We have also released a theme for magento mobile named “Elegant”. It has slick design as well langugage switch & custom options fro magento. Check it out here – https://mofluid.com/themes/
I used (and still using) this theme.
Yesterday I enabled the Stock Alert option and I got an error: when the user clicks on the link to be informed, if the user is not logged in, he gets an alert with “Error loading page”.
I think that the problem concern the redirect.
Could you help me?
Thanks
Hi,
I have installed this extension and done the setting in admin but there seems no changes has been showing in front please share your thought on this.
Hi everybody,
Just wanted to let you know about our Magnto mobile theme, Check it here:
Thanks,
I installed the theme just fine but I am having problems with custom options on product pages. When I change options, the pricing does not update. Does anyone know what the problem could be?
Hello,
I have the opposite problem to many people here.
When I view the list of products in a category the products each appear several times. The list of products repeats itself so you scroll down to the end of the list and it starts again, meaning each product is shown 2 or 3 or 4 times.
Different categories repeat the list a different number of times.
See it here http://www.awcycles.co.uk
Any idea why that would be?
Thanks
Hi,
I’ve used your theme to create a webapp which is installed on the homescreen of an iPhone. For some reason, in template/catalog/product/list.phtml, the <a hrefs are set with data-ajax=false. I've found out that without this the product page doesn't load, but this causes the webapp to load the next page in the browser. This is not the desired behaviour. I can't figure out why it's not loading without data-ajax=false. Can you share your thoughts on this?
Regards,
Fabian
I am using your mobile them. i installed it sucessfully and added an exception on admin panel system->configuration->Design -> packages ->add exception . I pasted the iPhone|iPod|BlackBerry|Palm|Googlebot-Mobile|mobile|mobi|Windows Mobile|Safari Mobile|Android|Opera Mini|Fennec in matched expression & value as imobile but am getting a blank page. Can you please help me. Am using enterprise edition Magento ver. 1.12.0.2
Hi,
I installed your mobile theme by setting the Matched Expression as “|iPod|BlackBerry|Palm|Googlebot-Mobile|mobile|mobi|Windows Mobile|Safari Mobile|Android|Opera Mini|Fennec” and Value as “imobile” in my design configruation page of magento, but it not getting loaded. The default page is loaded in iphone also. Can you please help me? I am using Magento 1.7.
I found that the imobile theme used in magento 1.6 version with paypal express checkout, when click on the “check out with paypal” it popup and shows “page load error” and can not checkout.
any help? thank you.
Im not sure I’ve been clear. I would like user to be able to slide left to access a page that contains search bar and login form OR account dashboard. I would like user to be able to slide right to access category list. Is it possible to modify the static block:
to achieve this result?