Search Descriptions Version
 
 
This article applies to: E-Commerce Basics

Adding Support for Mobile Browsers


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.