As
we recently learned, it’s pretty straight forward to redirect
your mobile visitors to a mobile-optimized theme, the natively supplied iPhone
theme.
However, after the initial euphoria of our
success, we realize that we want to start changing some things, like the logo
and maybe have a mobile specific home page.
This tutorial* will show you how to start
customizing your mobile store theme, but first, let’s see how we’re going to
set up our testing environment.
1. Setup
We
will assume that we have a test Magento site where we have already applied the exception for redirecting mobile device browsers to the iPhone Magento theme..
To
test our mobile site, Safari makes it convenient to set the browser user agent
by going to the menu:
Develop > User Agent and setting it to iPhone.
I’m pretty sure there are ways to do this with
some Firefox extensions otherwise, just use your phone to test.
2. The Situation
We’ve set up our test site with the stock
Magento Modern theme and the stock iPhone theme. Let’s see what we have out of
the box:
The first glaring thing we’d want to change
is, yep, the Magento demo store logo. But, we know how to change that quickly.
3. The Logo
This
is no design tutorial so I just created a simple graphic logo for illustrative
purposes as logo.png so it doesn’t overwrite the original logo file.
I dropped it into:
skin/frontend/default/modern/images/logo.png and edited the config setting: Configuration
> General > Design > Header -> Logo Image Src to read images/logo.png.
Looking at the site now, we see the changed
logo.
Let’s check the mobile site.
It’s showing the same logo as the main site,
so we obviously need to sort this mess out and create a smaller, mobile
friendly logo!
To do that, it’s becoming obvious that we will start changing some files in the iPhone theme so we’re going to make a copy of it and customize that. This way we won’t impair the ability to apply Magento updates.
We have already written about how to create your own design package but in our case we will simply make a
copy in the default package under
myiphone.
We’ll
do this for both the
skin/frontend and the app/design/frontenddirectories since we’re also going to
change some layout and template files.
Don’t forget to edit the design exception and change it from
iphone to myiphone.
Then,
to fix our unfortunate logo on the mobile site, just drop a new, mobile
friendly
logo.png intoskin/frontend/default/myiphone/images/ and admire the handiwork.
I
know it looks a bit odd right now but the goal is to change the header colors
so we’ll do some stylesheet edits in the myiphone skin:
myiphone/css/iphone.css.
I settled for this look as an illustration
that the mobile iphone theme can easily be customized with a couple of images
and some CSS changes. Basically, we created a new logo and replaced the
background gradient image for the menu.
3. The Home Page
Looking
at the demo site, we see that the normal home page contains a (slightly
modified) default home page text that can be edited under
CMS >
Pages > Home Page.
However, the mobile home page just shows the
categories (blank, if you don’t have any categories set up).
We
know how to modify the normal home page but what about the mobile one? Changes
to the CMS home page don’t show up on the mobile version. And we don’t really
have a mobile “store view” to which we can apply a different home
page CMS content.
4. Changing the Design
Let’s first decide what our goal is going to
be.
Say, we want our mobile home page to show a
slogan, the latest store products and the “Catalog” link should go to our
special Mobile store category where we can
present products that would be more relevant to our mobile customers.
Let’s
see what makes the home page display the category menu on the mobile theme.
Looking at
cms.xml we see:
1
2
3
|
<cms_index_index> <block type="catalog/navigation" name="cms_page" template="catalog/navigation/top.phtml" /></cms_index_index> |
So, this is telling us that the CMS page
content is by default replaced by the top navigation block which just lists all
the store categories.
If we want to have a custom mobile home page,
different from the normal site home page, we can’t use the CMS “ Home ”
Let’s
change the XML above to load a CMS static block with id
mobile-home instead:
1
2
3
4
5
|
<cms_index_index> <block type="cms/block" name="cms_page"> <action method="setBlockId"><block_id>mobile-home</block_id></action> </block></cms_index_index> |
Create
a new CMS static block with ID
mobile-home. You can name it anything you like. The CMS
block will contain our slogan in the form of a h1 title and display a list of
new products available in our online shop:
1
2
|
<h1>Mobile
home page - Hot!</h1>{{block
type="catalog/product_new"
template="catalog/product/new.phtml"}} |
For simplicity, we’re just using the Magento
supplied new product block making sure we have a few products in our store with
the “Set Product as New from/to Date” fields set appropriately.
Our home page is looking pretty decent
already. Now we just have to create the mobile product category, put some
product in there and set the “Catalog” link to the new category.
The
“Catalog” link is set in
customer.xml, the default being:
1
2
3
|
<reference name="top.links"> <action method="addLink" translate="label
title" module="customer"><label>Catalog</label><url>{{baseUrl}}</url><title>Catalog</title><prepare/><urlParams/><position>9</position></action></reference> |
To get our link to link to the mobile
category, we’ll change it to:
1
2
3
|
<reference name="top.links"> <action method="addLink" translate="label
title" module="customer"><label>Catalog</label><url>mobile.html</url><title>Catalog</title><prepare/><urlParams/><position>9</position></action></reference> |
By
default, the main category navigation is available on all pages on the mobile
site. We need to make sure that it only shows up on the catalog pages so we
will modify
catalog.xml removing:
1
2
3
|
<reference name="top.menu"> <block type="catalog/navigation" name="catalog.topnav" template="catalog/navigation/top.phtml"/></reference> |
from
the
default element and moving it
to the catalog_category_default element:
1
2
3
4
5
6
|
<catalog_category_default> <reference name="top.menu"> <block type="catalog/navigation" name="catalog.topnav" template="catalog/navigation/top.phtml"/></reference>...</catalog_category_default> |
Now
we just edited the padding on the content div and removed the review summary
from displaying on the new products listing. This is removed in
template/catalog/product/new.phtml:
1
2
3
|
<p><a
class="product-name" href="<?php
echo $_product->getProductUrl() ?>" title="<?php
echo $this->htmlEscape($_product->getName()) ?>)"><?php echo $this->htmlEscape($_product->getName())
?></a></p><?php
// echo $this->getReviewsSummaryHtml($_product, 'short') ?><?php
echo $this->getPriceHtml($_product,
true, '-new') ?> |
You’ll no doubt continue fine-tuning the
display now that we outlined the starting points for the process.
5. Further Ideas
The above is just the beginning of customizing
your mobile site. There are many ideas that come to mind for further enhancements.
For example, you can modify the home CMS
static block to directly display the products from the mobile category or a
mobile specials category.
You can implement a mobile friendly home page
carousel showing featured products.
The list can go on.
As it stands, the iPhone theme is optimized
for vertical viewing and forces a width of 320px but you can build some more
flexibility in by editing the css and phtml files to add more mobile specific
formatting. For example, you can just change the max-width on the body to a
higher value to allow for a full width view when the phone is flipped into
landscape.
If you have implemented a mobile site, we’d
love to see it so please share it in the comments. Also, if you have any ideas
about what you’d like to see in a follow up tutorial, let us know.
Happy mobile commerce!
source: Magebase.com
No comments:
Post a Comment