英語ページをつくる 2

前回の「英語ページをつくる 1」からの続き。

まずは今回の仕様から。
・日本語・英語ボタンを設置して、クリックしたら表示（メニュー画像やページ丸ごと）を切り替える
・クリックの情報はCookieで記憶させて、次回以降はそれをもとにメニューを表示させる
・クリック時には、現在表示しているページによってはページ遷移する（たとえば、日本語の送料ページをみているときに、英語ボタンを押したら、英語の送料ページに飛ぶ）

1.テンプレート「共通」。jsファイルの呼び出しは先頭行。ボタン（クリックするとJavaScript関数を呼びます）とメニューは任意の位置に書きます。

<script src="http://～/jquery.js" type="text/javascript"></script>
<script src="http://～/jquery.cookie.js" type="text/javascript"></script>
（略）

//言語切り替えボタン
<a href="javascript:void(0)" onclick="set_lang_cookie(0);return false;"><img src="～/button_jp.jpg" /></a>
<a href="javascript:void(0)" onclick="set_lang_cookie(1);return false;"><img src="～/button_en.jpg" /></a>
//表示メニュー
<div id="menu">jp_menu</div>

（略）
<!-- idより下でないとNULL（エラー）になる -->
<script type="text/javascript">
<!--
  change_en_menu();
//-->
</script>

2.JavaScriptとjQuery。Cookieの操作はjQueryで行います。
f1、ｆ2が日本語、f11、f12が英語ページ、と仮定すると、以下のようにしてページ遷移させます。
もうすこし詳しく例を書くと、
f1…日本語の商品発送について（フリーページ1）
f11…英語の商品発送について（フリーページ11）
ページの対応に法則性をつけると、JavaScriptでうまいぐあいに作りこめます（今回のサンプルではそこまでやっていません）。

//クリック時に実行される関数
function set_lang_cookie(i) {
  if(i==1) {
    $.cookie('lang','en',{expires:365});//クッキー書き込み{days}
    strURL = location.href;
    if(strURL.indexOf("mode=f1")!=-1) {
      location.href="http://www.hogehoge.com/?mode=f11";//ページ遷移
    }
    else if(strURL.indexOf("mode=f2")!=-1) {
      location.href="http://www.hogehoge.com/?mode=f12";//ページ遷移
    }
    else {
      location.reload();
    }
  }
  else {
    $.cookie('lang','',{expires:-1});//クッキー削除
    strURL = location.href;
    if(strURL.indexOf("mode=f11")!=-1) {
      location.href="http://www.hogehoge.com/?mode=f1";//ページ遷移
    }
    else if(strURL.indexOf("mode=f12")!=-1) {
      location.href="http://www.hogehoge.com/?mode=f2";//ページ遷移
    }
    else {
      location.reload();
    }
  }
}

//ページ読み込み時に実行される関数
function change_en_menu() {
  if($.cookie('lang')=="en"){
    document.getElementById("menu").innerHTML="en_menu";
  }
}

jp_menu、en_menuはHTMLタグを使って、各自作りこんでください。
次回以降の訪問時には、保存されているCookieをみて、日本語／英語メニューを適宜表示してくれます。
jQueryについては機会をみて、紹介記事を書こうと思います。