Categories

Fast Quote Request

:
:
:

Magento mobile - iPhone customized theme for NicNacNoo

By Wolf | 27.12.2010

Hello guys!

Today we will share with you our expirience with customization Magento theme for iPhone.  

As you all know m-commerce market grows very fast. U.S. mobile commerce sales will grow 100% this year to $2.4 billion from $1.2 billion in 2009. By 2015, shoppers worldwide will spend $119 billion on goods and services purchased via mobile phones, representing about 8% of total e-commerce sales according to ABI Research.

Our customer needed a magento mobile version for his shop NicNacNoo

As you know Magento version 1.4.1.0 has iPhone optimized theme by default, the only thing is to set it up correctly. But in our case we needed not only optimized theme, but also full customization according to brand style. So we have remade default theme to suit our client's needs.

First of all we changed company logo and general layout styles. Also we modified footer zone. As you have noticed Home Page in Magento iPhone theme doesn't have CMS content – only list of all categories. Here we had a problem because there were a lot of categories and it was total nightmare to scroll to the bottom. We resolved this by showing only first level categories. To reach the second and third you just click on the arrow on the left and categories expand. Clear and simple.

On product view we integrated our Gift Wrap module that was developed for main theme. At the bottom you can see how it looks.

Another thing we have noticed during development process – default theme wasn't optimized for "landscape" position. After digging online we have found script that can check in what position iPhone is "landscape" or "portrait". We've made some modification to this script. Now it adds classes "portrait" and "landscape" to the body tag. Then using this classes you can easily change width of your theme. You can see this script bellow.


/* updateOrientation checks the current orientation, sets the body's class attribute to portrait, landscape, 
   and displays a descriptive message on "Handling iPhone or iPod touch Orientation Events".  */
function updateOrientation(){
	var orientation=window.orientation;
	switch(orientation){
		case 0:
				document.body.setAttribute("class","portrait");
				break;		
		case 90:	
		case -90:	
				document.body.setAttribute("class","landscape");
				break;
	}
}

// Point to the updateOrientation function when iPhone switches between portrait and landscape modes.
window.onorientationchange=updateOrientation;

After you add this script you will need to add the following right after body tag starts. It will prevent "jumping" during browsing the site.


<body>
	<script type="text/javascript">
		updateOrientation && updateOrientation();
	</script>
	...
</body>	

Now when you rotate your iPhone - theme will fill the whole screen, because we have foreseen this :).

So if you have Magento shop and don't have iPhone optimized theme yet do not hesitate to order one.

Good luck!

Posted in: Magento | Tags: iphone thememagento mobilemagento

<< Back

4 answers

  1. Gravatar: Haven

    Haven

    Great design and style!!! Very creative and artistic......
  2. Gravatar: Wolf

    Wolf

    Thanks a lot!
  3. Gravatar: magento theme

    magento theme

    thanks for this
  4. Gravatar: Arthur Buckley

    Arthur Buckley


    Thank you for your usefull information.I like this kind of post which tell us much wonderfull massage.

Your comment

Notify me when someone adds another comment to this post