next »

[AMDbuilder]

Hello,

I am in the process of setting up a mobile website and want to do automatic redirection.  Does anyone have a suggestion on the best way to redirect mobile clients to the mobile site?  The catch is I want to allow them to still access the full site if desired and everything I have found so far is one way only.

Thanks,
AMDbuilder

[goldsky]

1. The easiest way is by making another subdomain (eg: m.yourwebsite.com).
2. You can read the browser type. But it means you should try all mobile browsers (like Opera Mini).
3. I had an experience on making a webbased mobile database interface (with PDA). The language was plain html/php. No CSS and/or JS.
4. Nowadays, mobiles get more intelligent. Especially with Windows based system. The applications become as same as desktop computer's apps. With this kind of mobile, we might not have to make different one.

So, the fastest way is by making subdomain with its own template.

[AMDbuilder]

Hello,

I am going to be using domain.com/mobile as subdomains aren't really a happening thing with Evolution and the site in question is based off Evolution (well 0.9.6.3).  I am using @DOCUMENT ## for several of the pages so I don't really want to spit the mobile site into a new location.

The main problem is how can I automatically mobile devices to the mobile site and still allow them to return to the main site (clicking a link).  Similar to with the mobile gmail interface.

Thanks,
AMDbuilder

[AMDbuilder]

Bump, Anyone?

I'm surprised nobody has already done this with the current amount of mobile devices getting online these days.

AMDbuilder

[cipa]

I would create a snippet  that will detect if the device is mobile device. The snippet has to sit at the top of your template
Usually you do that by detecting the browser version. If the browser is mobile I would redirect to /mobile

By default a mobile device will be shown the mobile version.

In order to show the normal website when a link is clicked I would create a page for that link. That page will set a session variable ($_SESSION[mobileWebsite] = true) and redirect to the full version.

I hope you got the idea

[labasus]

Some tips here http://www.google.com/support/forum/p/Webmasters/thread?tid=690224d66351a4ad&hl=en

[AMDbuilder]

I would create a snippet  that will detect if the device is mobile device. The snippet has to sit at the top of your template
Usually you do that by detecting the browser version. If the browser is mobile I would redirect to /mobile

By default a mobile device will be shown the mobile version.

In order to show the normal website when a link is clicked I would create a page for that link. That page will set a session variable ($_SESSION[mobileWebsite] = true) and redirect to the full version.

I hope you got the idea

I get the idea, but I don't know enough php to even know where to start on creating that form of functionality...  Can you give any pointers on how I would accomplish this?

Thanks,
AMDbuilder

[PMS]

Here's a recipe which will allow you to use the same address for both mobile and normal sites. If the request looks like it is coming from a mobile device then the mobile template is used, else the normal template is used. I have something similar (but not exactly the same) implemented. The following is untested, but should work.

To implement this, first you need two chunks. NormalTpl contains your normal template, and MobileTpl contains your mobile template. You should then create a real template for your page that looks like this:

Code:

{{NormalTpl}}#####{{MobileTpl}}

Next you need some php code that will analyse the HTTP headers on each page request and decide whether it's a mobile device that has requested the page or not. You could use the detect mobile browsers script for example. That code should be executed every time the page is requested, so it needs to be called on the OnWebPagePrerender event.

So, the next step is to create a new plugin. Lets call it MobileSnifferTemplateChooser. From the system events tab, select the OnWebPagePrerender event. Within the General tab you need to do three things.
1. Include your favourite php mobile detection script. Save the result in a variable, called, for example, $isMobileDevice.
2. Include some code like the following, which will analyse your document content, and pick out the two templates.

Code:

list($normalTpl,$mobileTpl) = explode('#####', $modx->documentOutput);

3. Choose the correct template

Code:

if ( $isMobileDevice )
{
  $modx->documentOutput = $mobileTpl;
}
else
{
  $modx->documentOutput = $normalTpl;
}

That should be it. I'd love to hear if you tried it and if it works for you.

[Breezer]

Completely untested, taken from the code I found here:
http://www.brainhandles.com/techno-thoughts/detecting-mobile-browsers

Create a snippet with this code, and put it in the very top of your template.

Code:

<?php
/*     Mobile browser redirect
       original code: http://www.brainhandles.com/techno-thoughts/detecting-mobile-browsers
       [!Mobile_redirect? &mID=`3`!]
*/
// set the document ID of the mobile page
$redirect_to_mID = isset($mID) ? $mID : "3";

if(isset($_SERVER["HTTP_X_WAP_PROFILE"]) || preg_match("/wap\.|\.wap/i",$_SERVER["HTTP_ACCEPT"])) {
        header("Location: [~".$redirect_to_mID."~]");
}

if(isset($_SERVER["HTTP_USER_AGENT"])){
        if(preg_match("/Creative\ AutoUpdate/i",$_SERVER["HTTP_USER_AGENT"])) { return false; }
        $uamatches = array("midp", "j2me", "avantg", "docomo", "novarra", "palmos", "palmsource", "240x320", "opwv", "chtml", "pda", "windows\ ce", "mmp\/", "blackberry", "mib\/", "symbian", "wireless", "nokia", "hand", "mobi", "phone", "cdm", "up\.b", "audio", "SIE\-", "SEC\-", "samsung", "HTC", "mot\-", "mitsu", "sagem", "sony", "alcatel", "lg", "erics", "vx", "NEC", "philips", "mmm", "xx", "panasonic", "sharp", "wap", "sch", "rover", "pocket", "benq", "java", "pt", "pg", "vox", "amoi", "bird", "compal", "kg", "voda", "sany", "kdd", "dbt", "sendo", "sgh", "gradi", "jb", "\d\d\di", "moto");
        foreach($uamatches as $uastring){
        if(preg_match("/".$uastring."/i",$_SERVER["HTTP_USER_AGENT"])) //return true;
           header("Location: [~".$redirect_to_mID."~]");
        }
}

?>

If it doesn't work, maybe at least it will give a start point

edit: typo in the last header() section fixed

[the_killer23]

Thanks Breezer, I work with AMDBuilder and I implemented your code successfully. There is only one typo in the last header statement. The only problem we have now is that we want to also allow the user the option of switching back to the Full site, but this code forces the user to the mobile site. I was thinking something with a cookie or involving the referrer, but I'm not sure where to start with either.

[the_killer23]

Well there are two reasons.
First, the mobile site is a limited site and only has about 3% of the info that the full site has.
Second, the redirection code may direct certain mobile devices incorrectly, in which case we would like to allow the user to go to the main site, since they can judge that their device can handle such.

[the_killer23]

Does anyone know how I can add a php session to Breezer's code. That way, when the user switches to the main site, it will not redirect back to the mobile site until the session for that user ends? Below is the code we are using.

Code:

<?php
session_start();
$_SESSION['classic'] = 1;
?>

Redirect Code

Code:

<?php
/*     Mobile browser redirect
       original code: http://www.brainhandles.com/techno-thoughts/detecting-mobile-browsers
       [!Mobile_redirect? &mID=`1`!]
*/
// set the document ID of the mobile page
$mid = isset($mID) ? $mID : "mobile";


 if(isset($_SESSION['views'])){
    $_SESSION['views'] == 1;
} else {
                if(isset($_SERVER["HTTP_X_WAP_PROFILE"]) || preg_match("/wap\.|\.wap/i",$_SERVER["HTTP_ACCEPT"])) {
           header("Location: ".$mid."");
                }

                if(isset($_SERVER["HTTP_USER_AGENT"])){
        if(preg_match("/Creative\ AutoUpdate/i",$_SERVER["HTTP_USER_AGENT"])) { return false; }
        $uamatches = array("midp", "j2me", "avantg", "iphone", "docomo", "novarra", "palmos", "palmsource", "240x320", "opwv", "chtml", "pda", "windows\ ce", "mmp\/", "blackberry", "mib\/", "symbian", "wireless", "nokia", "hand", "mobi", "phone", "cdm", "up\.b", "audio", "SIE\-", "SEC\-", "samsung", "HTC", "mot\-", "mitsu", "sagem", "sony", "alcatel", "lg", "erics", "vx", "NEC", "philips", "mmm", "xx", "panasonic", "sharp", "wap", "sch", "rover", "pocket", "benq", "java", "pt", "pg", "vox", "amoi", "bird", "compal", "kg", "voda", "sany", "kdd", "dbt", "sendo", "sgh", "gradi", "jb", "\d\d\di", "moto");
        foreach($uamatches as $uastring){
        if(preg_match("/".$uastring."/i",$_SERVER["HTTP_USER_AGENT"])) //return true;
           header("Location: ".$mid."");
        }
                }
}
?>

[Breezer]

Try this one, it checks for a $_GET value or a $_SESSION value first, if none found it should redirect... then a link in the mobile site back to the main with views=1 added to the url. Untested, but in theory it should work I think.

Code:

<?php
/*     Mobile browser redirect
       original code: http://www.brainhandles.com/techno-thoughts/detecting-mobile-browsers
       [!Mobile_redirect? &mID=`1`!]
       
       link back to main page:
       <a href="http://yourmainsite.com?views=1">Link Back to Main site</a>
*/
// set the document ID of the mobile page
$mid = isset($mID) ? $mID : "mobile";


 if(isset($_GET['views']) || $_SESSION['views'] =="1"){
    $_SESSION['views'] = 1;
} else {
                if(isset($_SERVER["HTTP_X_WAP_PROFILE"]) || preg_match("/wap\.|\.wap/i",$_SERVER["HTTP_ACCEPT"])) {
           header("Location: ".$mid."");
                }

                if(isset($_SERVER["HTTP_USER_AGENT"])){
        if(preg_match("/Creative\ AutoUpdate/i",$_SERVER["HTTP_USER_AGENT"])) { return false; }
        $uamatches = array("midp", "j2me", "avantg", "iphone", "docomo", "novarra", "palmos", "palmsource", "240x320", "opwv", "chtml", "pda", "windows\ ce", "mmp\/", "blackberry", "mib\/", "symbian", "wireless", "nokia", "hand", "mobi", "phone", "cdm", "up\.b", "audio", "SIE\-", "SEC\-", "samsung", "HTC", "mot\-", "mitsu", "sagem", "sony", "alcatel", "lg", "erics", "vx", "NEC", "philips", "mmm", "xx", "panasonic", "sharp", "wap", "sch", "rover", "pocket", "benq", "java", "pt", "pg", "vox", "amoi", "bird", "compal", "kg", "voda", "sany", "kdd", "dbt", "sendo", "sgh", "gradi", "jb", "\d\d\di", "moto");
        foreach($uamatches as $uastring){
        if(preg_match("/".$uastring."/i",$_SERVER["HTTP_USER_AGENT"])) //return true;
           header("Location: ".$mid."");
        }
                }
}
?>

[AMDbuilder]

Hey Breezer,

Thank you for the code it worked like a charm!  I don't know why it wasn't working before, but in any case that was just what the doctor ordered.

If you don't have any objections I will add the code to the repository later this week after I do some further testing.

Thanks again,
AMDbuilder

[Breezer]

Glad it worked, and feel free to do whatever you want with it but please leave the original code link in there, all I did was snippetize it

[addy]

Thanks all for this very helpful posting...one real newboy question.....

Where in the code snippet do i actually tell it which page to get directed to?  ie what line...

example please...say go to page "mobile.htm"  wher ein the code do i say go to that page?


many thanks for answering a most basic question.... 

addy

[AMDbuilder]

Hello,

You want to change this line here:

Code:

$mid = isset($mID) ? $mID : "mobile";

Replace mobile with the alias for your mobile page.  Originally this was setup to use the page ID (some of the first code examples), but the page ID didn't work for me so I just modified it some so it would accept the page alias.  If someone knows how to get the page ID working that would be nicer than my method.

Enjoy
AMDbuilder

[addy]

Many thanks, that helps me a great deal.....

[Breezer]

Touching base on this topic again after reading another post interested in this feature, here is another version which allows either a MODx id or a url to be passed to the snippet. Also the issue raised by AMDbuilder where an id wouldn't work has been fixed I think .

I don't have mobile web browser testing capabilities, so if someone would give this a try it would be appreciated.

Code:

<?php
/*     Mobile_redirect
       11/24/09   10:31 am est
       
       original code: http://www.brainhandles.com/techno-thoughts/detecting-mobile-browsers
       usage: call in the top of your template
       [!Mobile_redirect? &mID=`1`!]
       [!Mobile_redirect? &url=`http://redirectdomain.com`!]
       
       link back to main page:
       add &views=1 to the link
       ex: <a href="http://yourmainsite.com?views=1">Link Back to Main site</a>
*/

// set the MODx document ID of the mobile page
$mid = isset($mID) ? $mID : "1";

// set the url you want to redirect to
// http://domain.com   or   http://sub.domain.com
$url = isset($url) ? $url : '';

if(isset($_GET['views']) || $_SESSION['views'] =='1'){
    $_SESSION['views'] = 1;
    
}else{
        if(isset($_SERVER["HTTP_X_WAP_PROFILE"]) || preg_match("/wap\.|\.wap/i",$_SERVER["HTTP_ACCEPT"])) {
            if($mid =="" && $url !=""){
                header("Location: ".$url."");
            }else{
                $goto = $modx->makeUrl($mid);
                $modx->sendRedirect($goto);
            }
        }

        if(isset($_SERVER["HTTP_USER_AGENT"])){
            if(preg_match("/Creative\ AutoUpdate/i",$_SERVER["HTTP_USER_AGENT"])) { return false; }
            $uamatches = array("midp", "j2me", "avantg", "iphone", "docomo", "novarra", "palmos", "palmsource", "240x320", "opwv", "chtml", "pda", "windows\ ce", "mmp\/", "blackberry", "mib\/", "symbian", "wireless", "nokia", "hand", "mobi", "phone", "cdm", "up\.b", "audio", "SIE\-", "SEC\-", "samsung", "HTC", "mot\-", "mitsu", "sagem", "sony", "alcatel", "lg", "erics", "vx", "NEC", "philips", "mmm", "xx", "panasonic", "sharp", "wap", "sch", "rover", "pocket", "benq", "java", "pt", "pg", "vox", "amoi", "bird", "compal", "kg", "voda", "sany", "kdd", "dbt", "sendo", "sgh", "gradi", "jb", "\d\d\di", "moto");
            foreach($uamatches as $uastring){
                if(preg_match("/".$uastring."/i",$_SERVER["HTTP_USER_AGENT"])) //return true;
                    if($mid =="" && $url !=""){
                        header("Location: ".$url."");
                    }else{
                        $goto = $modx->makeUrl($mid);
                        $modx->sendRedirect($goto);
                    }
                }
        }
}
?>