Cookieごとに条件分岐をさせたい

Question

jQueryでcookie生成をして、渡したクッキーに応じてページ切り替えをさせたいです。

多言語サイト(wordpress)なんですが言語ごとのクッキーを用意して、
そのページにいてもサイトの読み込み時に、もしクッキーを持っていなかったら言語スイッチを出し、一度でもスイッチを選んだらそのクッキーを渡します。
現状このようなコードです。ローカルで作業しています。

header.php↓

//言語スイッチ。display:noneで隠しておく
<div class="Lang_cookie">
        <ul class="Lang_cookie_switch">
          <li class="Lang_cookie_switch_item" id="EN">English</li>
          <li class="Lang_cookie_switch_item" id="JP">Japanese</li>
        </ul>
</div>

//クッキーが取得されてるかどうかを確かめる
<?php
  echo $_COOKIE["AAA"];
?>

jquery↓

$(function(){
    var cookie_save = $.cookie('AAA');

　　 //クッキーごとに言語別に用意したサイトに移動させる
    if (cookie_save === 'EN') {
       window.location.href = "http://localhost/wp/en";
    } else if(cookie_save === 'JP'){
       window.location.href = "http://localhost/wp/";
    }else {
       $('.Lang_cookie').show();
    }

　　　//言語スイッチを押すとクッキーを保存。リロードさせる。
  $('#EN').click(function(){
    $.cookie('AAA', 'EN', { expires: 200 , path: '/' });
    location.reload();
  });
　$('#JP').click(function(){
    $.cookie('AAA', 'JP', { expires: 200 , path: '/' });
    location.reload();
  });
});

こんな具合なのですが、試しにENスイッチを押してみると、クッキーがENの値を受け取ってhttp://localhost/wp/enのURLに飛ぶまではいいんですが、そこでまた延々とリロードを連続で繰り替えしています。
cookieは取得されているので、if文が問題だと思いますが、いかんせん素人なもので原因がわかりません;;;

どこが間違っているのか、ご教授よろしくお願いいたします！

Comments

[ockeghem]

http://en/AAA.com というURLはアクセスできないと思いますが、実際はどうなのでしょうか? たとえば、http://en.AAA.com のような形ですか?

[sleeeep12]

例えとしてのURLです。すみませんでした；　現在ローカルで作業中です

[ockeghem]

クッキーの処理でドメイン名はとても重要なので、できるだけ本番に近いかたちで書いていただかないと、回答できない可能性がありますよ。http://AAA.comで設定したクッキーは http://en では読めませんし

[sleeeep12]

分かりました。質問編集します。

[defghi1977]

これって, header.phpの内容を全てのページに仕込んでいる・・・？

[sleeeep12]

はいそうしています。どのページから入っても言語スイッチを表示させたいんですが、これが問題ですか・・；

[退会済みユーザー]

それが問題ですね。

[sleeeep12]

皆様ありがとうございました。解決することができました！

Answer 1

既に/wp/enに遷移した場合でも、必ず以下により /wp/en にリダイレクトするように見えます。

 if (cookie_save === 'EN') {
       window.location.href = "http://localhost/wp/en";

したがって、「リダイレクトしなくてもよい条件」を書く必要がありそうですね。あるいは、リダイレクト先では上記判定をしないようにするか。

Comments

[sleeeep12]

ご回答ありがとうございます。
うまく動作させることができました！

Answer 2

PHPで共通ヘッダーを設定しているのと, 共通のスクリプトを読み込ませていることを踏まえると, おそらくwindow.location.hrefを書き換える条件を,

「cookieのロケールが設定済みで, その値と現在表示しているページのロケールが一致していない場合」

とすれば解決するかと.

$(function(){
    var cookie_save = $.cookie('AAA');

　　 //クッキーごとに言語別に用意したサイトに移動させる
    //移動するのはロケール設定がズレている場合に限る
    if (cookie_save === 'EN' && window.location.href != "http://localhost/wp/en") {
       window.location.href = "http://localhost/wp/en";
    } else if(cookie_save === 'JP' && window.location.href != "http://localhost/wp/"){
       window.location.href = "http://localhost/wp/";
    }else {
       $('.Lang_cookie').show();
    }

　　　//言語スイッチを押すとクッキーを保存。リロードさせる。
  $('#EN').click(function(){
    $.cookie('AAA', 'EN', { expires: 200 , path: '/' });
    location.reload();
  });
　$('#JP').click(function(){
    $.cookie('AAA', 'JP', { expires: 200 , path: '/' });
    location.reload();
  });
});

なぜ無限ループとなるのか？

1. cookie未設定→ロケール選択→リロード
2. cookie設定済み→ロケール判定→指定のURLに移動
3. 上の処理がページのリロードの都度発生するので無限ループとなる.

NOTE:
もちろんこのままではスクリプトの管理が煩雑なため, ロケール-URLの対応をオブジェクトとして一箇所にまとめる等の工夫は必要でしょう.
NOTE:
URLの判定は!=等で行うのではなく, もう少し確定的にロケールを抽出できるような仕組みとしたほうが良いかも…

window.location.href.match(//en/)

とか.

Comments

[sleeeep12]

うまく動きました。的確で分かりやすいご指示大変助かりました。
ありがとうございます。