Detecting Mobile Browsers to Re-Theme Your Site
With the proliferation of Smart Phones and other non-traditional-computer ways to browse the internet, wouldn’t it be great if you could provide a custom browsing experience for different users?
You could re-template your site using the sub-sites module, but it might not be stable/functional enough for every one yet. So I’ll show you how to use Anthony Hand’s great User Agent Detection Class to re-template your site based on the User Agent of your visitor.
First things first get yourself a copy of the Class from the link above. He also has a lot of great resources on designing for mobile browsers.
Before we can actually use the calls we need to make some modification. Because of the way SilverStripe’s Manifest builder handles filenames and class names we need to change name of the file, remove the underscores from the name of the class. To sum up:
mdetect_php.txt becomes uagentinfo.php
and in the actual file (line 53):
class uagent_info becomes class uagentinfo
You now add this file to your mysite/code directory and do a dev/build.
Now that SilverStripe knows about the Class we need to call it from the init() function in your mysite/code/page.php
Lets Step through This
In the first part of the code we set variables for the themes we want to use for the three main tiers of mobile browser: iPhone, BlackBerry and Plain old WAP. Right now we’re just using tutorial but you can set these to whatever your want.
n this part we check to see if the mobilePhone session variable is already set, and if it is we use a switch function to use this variable to set the theme with the SSViewer::set_theme() function, dropping in the corresponding theme name variable in each case. If the session variable isn’t set we move on to actually detecting the user agent.
Here we create a new instance of the uagentinfo class and save it to $uagentobj. we then Take that object and run the first class detection on it, iphone. If the browser is an iPhone its saves that value to the $_SESSION[‘mobilePhone’] variable. If not it runs the next tier detection and so on.
This is great, but what if someone is using an iPhone or other similar device whose browser can support a non-mobile site with all the bells and whistles. We need to provide the user with a way to override the detection.
In you page_controller add the following function:
This function provides us a way to manually set the $_SESSION[‘mobilePhone’] variable to “None” so that the first CHECK function won’t move on to detecting the user agent. It then forces the browser to reload the current page. All we have to do is add the following to mobile phone templates:
Thats it, now all you have to do design you mobile templates and you have functioning mobile version of your site. The class is great as it contains methods for detecting many more user agent types including video game platforms and other hand held devices. You could also expand this to use sub-domains to set the $_SESSION[‘mobilePhone’] variable.
About the Author
Name: Richard Rudy