Note: As of version 9, mobile skins are a built in feature, and this modification is no longer necessary! If you're on an earlier version, upgrade now to take advantage of this great new feature!
According to Mobile Industry News, mobile
Internet use has more than doubled in the last year, and the number is
still
growing. With statistics like that, many store owners are
interested in having 'mobile-friendly' versions of their sites to
encourage further online sales. With a very simple modification, the
AspDotNetStorefront software can allow mobile customers to see a
'slimmed-down' version of your site (which you design), hopefully
keeping them browsing longer and increasing sales.
Setup
Note: While this modification does not require the
source code to do, it should only be done by an experienced .NET
developer. Be sure you have a backup of the entire site before
attempting these changes!
This code checks the customer's user agent information from their
browser each time the site loads. If the user agent contains one of
the 90'ish strings we check for (which are common in mobile devices),
the customer is redirected to a custom skin of your creation. Note that even if
you are using template
switching, mobile customers will still only see the mobile skin you
created for them.
1 - First, add the following code to the
end of the GetTemplateName method in SkinBase.cs (located in the
{root}/App_Code folder):
//Mobile support
if (IsMobileDevice())
{
templateName = "mtemplate.ascx";
}
return templateName;
2 - Create a new method in SkinBase:
public static bool IsMobileDevice()
{
string UserAgent = HttpContext.Current.Request.UserAgent;
//Create an array containing 86 common
mobile browser user agents
string[] MobileArray = {
"w3c ", "acs-", "alav", "alca", "amoi", "audi", "avan", "benq", "bird",
"blac", "blaz", "brew", "cell", "cldc", "cmd-", "dang", "doco", "eric",
"hipt", "inno", "ipaq", "java", "jigs", "kddi", "keji", "leno", "lg-c",
"lg-d", "lg-g", "lge-", "maui", "maxo", "midp", "mini", "mits", "mmef",
"mmp", "mobi", "mot-", "moto", "mwbp", "nec-", "newt", "noki", "oper",
"palm", "pana", "pant", "pda", "phil", "phone", "play", "port", "prox",
"qwap", "sage", "sams", "sany", "sch-", "sec-", "send", "seri", "sgh-",
"shar", "sie-", "siem", "smal", "smar", "smartphone", "sony", "sph-",
"symb", "t-mo", "teli", "tim-", "tosh", "tsm-", "up.browser",
"up.link", "upg1", "upsi", "vk-v", "voda", "wap", "wap-", "wapa",
"wapi", "wapp", "wapr", "webc", "windows ce", "winw", "winw", "xda",
"xda-" };
//Check if the visitor's user agent is one
of the mobile ones listed above
foreach (string myString in
MobileArray)
{
if
(UserAgent.ToLowerInvariant().Contains(myString))
{
return true;
}
}
return false;
}
3 - Create a custom skin with the
content/layout you want your mobile customers to see. This skin should
be named 'mtemplate.ascx' and goes in the {root}/skins/skin_# folder
for the skin your are using on the site.