Drupal 6: On Mouse Click Swap Block Contents

Problem:

A Drupal 6 website contains a left navigation bar that is in English. The site hosts an enormous epic poem (think the Illyiad) in a foreign language (Arabic). As more international visitors hit the site it would be nice if they could choice to see menu navigation in readable Arabic.

There is an Internationalization module for Drupal 6 and 7 but those modules assume page links are generated from translated content. We will not be translating every page on the site; the site offers audio clips in Arabic and also video in Arabic. We simply want to enable site visitors to be able to understand the main site navigation area and hopefully the sub-pages will be self-explanatory.

Proposed Solution:

The site currently requires Javascript. So we can assume users have JS. What we could likely try is the following steps:

  1. We can attempt to create a JS enabled checkbox to toggle a variable to swap out the English main menu, with Arabic content.

  2. We’ll have to remember this choice of the user for the duration of the users visit, so will likely have to use Cookies or Session values to do this.

  3. Somehow we have to have store our Arabic menu somewhere in Drupal as well.

This solution is a general approach that is not necessarily Drupal specific, the same approach could work for nearly any framework or programming language.

Implementing Our Solution within Drupal

For organizational purposes we will create a custom module for a majority of our PHP code. We will also utilize a custom Drupal Theme to place some of our code primarily dealing with display logic closer to the theme layer.

In the Drupal menu system we create an Arabic menu simply pointing to our (currently) English content — but the menu items are in Arabic. Drupal will make this menu available as a Block of content:

Drupal Menu of Arabic links to existing site content.

Drupal Menu of Arabic links to existing site content.

In a custom module file:

// Implement hook_menu().
//
// Add a path for a JS callback to change a block to Arabic language via a users cookie/session value.
function mymodule_menu() {
  $items['switch-lang']=array(
    'title' => 'Language Switcher',
    'page callback' => '_mymodule_switch_language',
    'access callback' => TRUE,
    'type' => MENU_CALLBACK,
  );
  return $items;
}

// private callback method for module.
//
// this function remembers the users language selection via a Cookie value.
function _mymodule_switch_language() {
  if (empty($_GET["js"])){ die(); }
  setcookie('lang-persist', $_GET['lang'], time() + 3600 * 24 * 180);
  drupal_goto('<front>');
}

In template.php of our Drupal theme:

// A custom function to provide a language selection form for use in a drupal theme template file.
// css is included here for brevity sake.
function mytheme_lang_chooser() {
  $lang_switcher_url = '/switch-lang';
  $output = <<<EOFHTML
<style type="text/css">
  #logo {position: relative; }
  div.sbh-lang-chooser {
    position: absolute;
    top: 100px;
    left: 800px;
    width: 200px;
    font-size: 20px;
  }
</style>
<div class="sbh-lang-chooser">
  <form id="sbh-lang-form" name="sbh-lang-chooser" method="GET" action="$lang_switcher_url">
    <input type="hidden" name="l" value="en">
    <input type="hidden" name="js" value="1">
    <input id='lang-choice' type="checkbox" name="sbh-lang" value="AR">عربي
  </form>
</div>
EOFHTML;
  return $output;
}

/**
 * Override or insert variables into all templates.
 *
 * @param $vars
 *   An array of variables to pass to the theme template.
 * @param $hook
 *   The name of the template being rendered (name of the .tpl.php file.)
 */
function mytheme_preprocess(&$vars, $hook) {
  switch ($hook) {
  case 'page':
    // ... stuff
    break;
  case 'block':
    _mytheme_show_arabic_menu_if_desired_by_visitor_cookie($vars);
    break;
  }
  return $vars;
}

function _mytheme_show_arabic_menu_if_desired_by_visitor_cookie(&$vars) {
  // we want to change the "poem project" menu block which is a menu in drupal with block id == 1.
  if ($vars['block_id'] == 1 && $_COOKIE['lang-persist'] === 'AR') {
    $arabic_menu = module_invoke('menu', 'block', 'view', 'menu-poem-arabic-menu');
    $vars['block']->content = "<div class='arabic-fix'>" . $arabic_menu['content'] . '</div>';
  }
}

Lastly, we need some jQuery code, which makes use of jquery.cookie.js as well.

In a javascript file we add to our Drupal theme:

$(document).ready(function() {
  /* new code for langage selector */
  var persisted_lang = $.cookie('lang-persist');
  if (persisted_lang == 'AR') {
    $("#lang-choice").attr('checked', 'checked');
  }

  $("#lang-choice").click( function(e){
    $('#lang-choice').val( e.value ); // capture on check or uncheck
    $('#sbh-lang-form').submit();
  });

});

All the above pieces of code allow us to have a small language selector that in this case overrides a typical Drupal block. If you have any questions regarding this post please feel free to inquire in the comments!

Looking for quality Drupal Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , , , , , | Posted under Drupal | RSS 2.0

Author Spotlight

David Gurba

David Gurba

I am a web programmer currently employed at UCSB. I have been developing web applications professionally for 8+ years now. For the last 5 years I’ve been actively developing websites primarily in PHP using Drupal. I have experience using LAMP and developing data driven websites for clients in aviation, higher education and e-commerce. If you’d like to contact me I can be reached at david.gurba@arvixe.com

Leave a Reply

Your email address will not be published. Required fields are marked *


+ 8 = 14

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>