We specialize in custom web-based project management software, business automation, API integrations, and advanced eCommerce. This makes us an ideal fit for medium to large businesses with unique requirements underserved by off-the-shelf solutions.

# Integrating Drupal 7's Boost and Mobile Tools

## Update - Converted to Module

The method listed below has since been converted into a standalone homebrew module. [Download it here](/content/sites/default/files/wysiwyg/blog/boost_mobile/jsmobile.zip)

## Problem

Boost and Mobile Tools do not place nicely together. Mobile tools can't do device detection because boost makes pages into flat html that bypass PHP processing.

## Solution

Develop a javascript/jQuery device detection and switching tool.

We successfully used boost with mobile tools using the m. domain method and javascript device detection/switching. The device preference can be saved in a cookie, allowing the mobile user to switch to the desktop site if they need to. This provides a great benefit over the [.htaccess method](http://drupal.org/node/681396), which would never let a mobile user switch to the desktop site.

- Turn off automatic device detection and redirection in mobile tools or you'll have unexpected behavior.
- Set up switching to mobile theme based on the URL (domain). This allows boost to make 2 discreet pages since their URLs are different.
- Build some javascript functions for handling the "switch to mobile/desktop" links and automatic redirecting of the mobile user.

## Step 1: Set up your device switching links

Mobile tool's default switch to desktop/mobile links are no good. You're going to need to make your own in a block somewhere, and give them unique IDs or classes you can target with jQuery

<a href="#" class="link-switch-to-mobile">Mobile Site</a>

<a href="#" class="link-switch-to-desktop">Standard Site</a>

## Step 2: Javascript for Your Desktop Theme

The name of our theme is "spring_frontend", so replace that with the name of yours

### Behavior for redirecting the mobile user and binding the theme switching to the link.

Make sure you call this function inside your themes .attach() function or from within a $(document).ready() so it runs on load.

```javascript
//-------------------------------------------------------------------------------------------|  
//  Redirect mobile users  
//-------------------------------------------------------------------------------------------|  
Drupal.behaviors.spring_frontend.bindMobile = function(context) {  
    var mobileLocation = "http://m.bitcookie.com" + window.location.pathname;  
    //-------------------------------------------------------------------------------------------|  
    //  Bind links for switching between desktop and mobile devices  
    //-------------------------------------------------------------------------------------------|  
    $("a.link-switch-to-mobile").not(".mobile-processed").each(function(){  
        $(this).addClass("mobile-processed");  
        $(this).click(function(e){  
            e.preventDefault();  
            window.location = mobileLocation;  
        });  
    });  
    //-------------------------------------------------------------------------------------------|  
    //  End binding links for switching between desktop and mobile  
    //-------------------------------------------------------------------------------------------|  
    //-------------------------------------------------------------------------------------------|  
    //  If the user has a cookie set, act based on that  
    //-------------------------------------------------------------------------------------------|  
    var mobileCookie = Drupal.behaviors.spring_frontend.getCookie("device");  
    if(typeof mobileCookie != 'undefined'){  
        if(mobileCookie == "desktop"){  
            return true;  
        }  
    }  
    //-------------------------------------------------------------------------------------------|  
    //  End checking the user's mobile cookie  
    //-------------------------------------------------------------------------------------------|  
    if( /Android\|webOS\|iPhone\|iPod\|BlackBerry/i.test(navigator.userAgent) ) {  
        window.location = mobileLocation  
    }  
};  
//-------------------------------------------------------------------------------------------|  
// End redirecting mobile users  
//-------------------------------------------------------------------------------------------|  
```

### Function to set a domain level cookie.

Take note of the fact that we're hard coding our domain here, you're going to need to switch that.

```javascript
//-------------------------------------------------------------------------------------------|  
//  Function to set a domain cookie  
//-------------------------------------------------------------------------------------------|  
Drupal.behaviors.spring_frontend.setCookie = function(c_name,value,exdays){  
    var exdate=new Date();  
    exdate.setDate(exdate.getDate() + exdays);  
    var c_value = escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()) + "; domain=.bitcookie.com";  
    document.cookie=c_name + "=" + c_value;  
};  
//-------------------------------------------------------------------------------------------|  
//  End function to set a domain cookie  
//-------------------------------------------------------------------------------------------|  
```

### Function to retrieve a domain level cookie

```javascript
//-------------------------------------------------------------------------------------------|  
//  Function to retrieve a cookie  
//-------------------------------------------------------------------------------------------|  
Drupal.behaviors.spring_frontend.getCookie = function(c_name){  
    var i,x,y,ARRcookies=document.cookie.split(";");  
    for (i=0;i<ARRcookies.length;i++){  
        x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));  
        y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);  
        x=x.replace(/^\s+|\s+$/g,"");  
        if (x==c_name){  
            return unescape(y);  
        }  
    }  
};  
//-------------------------------------------------------------------------------------------|  
//  End function to retrieve a cookie  
//-------------------------------------------------------------------------------------------|  
```

## Step 3: Javascript for Your Mobile Theme

Again, replace the name of our theme with yours in the code below. The mobile side is a lot simpler. We don't need to do any device detection or remembering, just provide a link to switch back. Also, we set the cookie to desktop so the mobile user doesn't get redirected any more.

### Function to bind the theme switch links

Make sure this function runs in your theme's .attach() or $(document).ready() functions.

```javascript
//-------------------------------------------------------------------------------------------|  
//  Function to bind theme switch links  
//-------------------------------------------------------------------------------------------|  
Drupal.behaviors.spring_mobile.bindMobile = function(context) {  
    var desktopLocation = "http://bitcookie.com" + window.location.pathname;  
    //-------------------------------------------------------------------------------------------|  
    //  Bind links for switching between desktop and mobile devices  
    //-------------------------------------------------------------------------------------------|  
    $("a.link-switch-to-desktop").not(".mobile-processed").each(function(){  
        $(this).addClass("mobile-processed");  
        $(this).click(function(e){  
            e.preventDefault();  
            Drupal.behaviors.spring_mobile.setCookie("device","desktop",10);  
            window.location = desktopLocation;  
        });  
    });  
    //-------------------------------------------------------------------------------------------|  
    //  End binding links for switching between desktop and mobile  
    //-------------------------------------------------------------------------------------------|  
};  
//-------------------------------------------------------------------------------------------|  
// End binding theme switch links  
//-------------------------------------------------------------------------------------------|  
```

### Function to set a domain level cookie.

This is a repeat of the function above, but we need it in both themes. You know what would be cool? Making this whole thing into a smart module for mobile tools :)

```javascript
//-------------------------------------------------------------------------------------------|  
//  Function to set a domain cookie  
//-------------------------------------------------------------------------------------------|  
Drupal.behaviors.spring_mobile.setCookie = function(c_name,value,exdays){  
    var exdate=new Date();  
    exdate.setDate(exdate.getDate() + exdays);  
    var c_value = escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()) + "; domain=.bitcookie.com";  
    document.cookie=c_name + "=" + c_value;  
};  
//-------------------------------------------------------------------------------------------|  
//  End function to set a domain cookie  
//-------------------------------------------------------------------------------------------|  
```

### Function to retrieve a domain level cookie

Again, just a repeat of the same one found in the frontend theme.

```javascript
//-------------------------------------------------------------------------------------------|  
//  Function to retrieve a cookie  
//-------------------------------------------------------------------------------------------|  
Drupal.behaviors.spring_mobile.getCookie = function(c_name){  
    var i,x,y,ARRcookies=document.cookie.split(";");  
    for (i=0;i<ARRcookies.length;i++){  
        x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));  
        y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);  
        x=x.replace(/^\s+|\s+$/g,"");  
        if (x==c_name){  
            return unescape(y);  
        }  
    }  
};  
//-------------------------------------------------------------------------------------------|  
//  End function to retrieve a cookie  
//-------------------------------------------------------------------------------------------|  
```