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

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, 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. 

//-------------------------------------------------------------------------------------------|
//  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.

//-------------------------------------------------------------------------------------------|
//  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

//-------------------------------------------------------------------------------------------|
//  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.

//-------------------------------------------------------------------------------------------|
//  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 :)

//-------------------------------------------------------------------------------------------|
//  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.

//-------------------------------------------------------------------------------------------|
//  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
//-------------------------------------------------------------------------------------------|