ラック
Home > CMS > 記事 > 2015年8月 > コンテンツ表示の切り替え

コンテンツ表示の切り替え

カテゴリ: MODx

テスト環境で、条件によってコンテンツの内容を切り替えるテストをしてみることにしました。

例えば、サイトの内容を日本語と英語で切り替えたい、なんてときに使うかなーというイメージです。

なお、作成に当たって色々とアドバイスを頂いたりしたので、この場を借りて感謝申し上げます。助かりました。

 

動作としては、表示を切り替えるフォームとボタンを用意し、それをクリックするとCookieにフラグを格納し、それに応じて表示を切り替える、という感じです。

プログラムはスマホ・PCの表示をボタンで切り替え(フラグはCookieに格納)を流用で。

テンプレート変数

まずはテンプレート変数を用意します。日本語タイトルはそのまま使用しますが、他はテンプレート変数を使用します。en_title(英語タイトル、入力タイプ:Text)、en_richtext(英語本文、入力タイプ:Rich Text)、ja_richtext(日本語本文、入力タイプ:Rich Text)。

入力タイプ:Rich Textは投稿画面の本文と同じようにリッチテキストエディタが使用できるので、本文入力の感覚で。

 

プラグイン:jaen_test

global $jeFlag;

if(!isset($_COOKIE["jeFlag"])) { //Cookieがセットされていない(ブラウザ開いている中での初回表示)
	$jeFlag = 0; //0:日本語、1:英語
}
else { //Cookieがセットされている場合
	if(!isset($_POST["switchJE"])) { //postパラメータなければクッキーの値をセット
		$jeFlag = intval($_COOKIE["jeFlag"]);
	}
	else { //postパラメータがあればそちらを優先
		$jeFlag = intval($_POST["switchJE"]);
	}
}

$flag = setcookie("jeFlag", $jeFlag, 0, "//", "example.com");
//jeFlagという名前に$jeFlagの値を(文字列として)セットする。有効期限は0(=ブラウザを閉じるまで)、有効なドメインはexample.comで、/path/ディレクトリ以下で有効、という設定

次にプラグイン。これでCookieがある場合など条件に応じてはそれをグローバル変数にフラグをセットして以降の処理に渡します。システムイベントは「OnLoadDocumentObject」にフック。なお、PC/スマホ表示のやつの流用です。

 

スニペット:switch_title

global $jeFlag;

if($jeFlag){ //1:英語
	$output = '[*en_title*]';
}
else { //0:日本語
	$output = '[*pagetitle*]';
}
return $output;

これはグローバル変数を受け取って表示を切り替えるパーツその1。タイトルを実際のpagetitleを表示させるか、テンプレート変数:en_titleを表示させるか切り替えています。やはり、PC/スマホ表示のやつの流用ですね。

 

スニペット:switch_content

global $jeFlag;

if($jeFlag){ //1:英語
	$output = '[*en_richtext*]';
}
else { //0:日本語
	$output = '[*ja_richtext*]';
}
return $output;

グローバル変数を受け取って表示を切り替えるパーツその2。本文の切り替えです。なお、[*content*]はスニペットコールのために使用しているので、本文は両方ともテンプレート変数です。

 

スニペット:jaen_button

global $jeFlag;

echo <<< startForm
<form action="{$_SERVER["REQUEST_URI"]}" method="post">
startForm;

if($jeFlag){ //1:英語

echo <<< jaSwitch
	<input type="hidden" name="switchJE" value="0">
	<input type="submit" name="switchjeSubmit" value="日本語サイトを表示 Japanese">
jaSwitch;

}
else{ //0:日本語

echo <<< enSwitch
	<input type="hidden" name="switchJE" value="1">
	<input type="submit" name="switchjeSubmit" value="Show English site 英語">
enSwitch;

}

echo <<< endForm
</form>
endForm;

冒頭で記述した日本語/英語の切り替え用のボタンのスニペット。これもPC/スマホ(略

 

テンプレート

<div id="mainContents">
	<h2>[!switch_title!]</h2>
	[*content*]
</div>

[!jaen_button!]

最後に専用テンプレートを用意。といっても、スニペットを呼ぶというところだけを変更しただけですが。

切替サンプル本文部分

[!switch_content!]

参考までに切替サンプルの本文。スニペットコールで使用しています。用意したテンプレート変数やタイトルに必要事項を記入しておけば、あとはボタンないしCookieで表示切替します。

 

 

P.S.さらに別の要件を追加。あるテンプレート変数(radiotest、入力タイプ:radio)が付けられた記事の一覧の表示切替

テンプレート:js:表示切替

<script type="text/javascript">
<!--
$(function(){
	$("input[name='radio_test']").click( function() {
		$(".AM").css({'display':'none'});
		$(".FM").css({'display':'none'});
		$(".foreign").css({'display':'none'});
		var radioVal = $("input[name='radio_test']:checked").val();
		if(radioVal == "AM") {
			$(".AM").css({'display':'block'});
		}
		else if(radioVal == "FM") {
			$(".FM").css({'display':'block'});
		}
		else {
			$(".foreign").css({'display':'block'});
		}
	});
});
// -->
</script>

面倒なのでテンプレートに直書きですが、jQueryでラジオボタンのチェックを拾ってチェックされたらそれに対応するclassが付与されている記事のみ表示するようにjsを追加。

 

テンプレート:ラジオボタン

<label><input type="radio" name="radio_test" value="AM" checked="checked" />AM</label>
<label><input type="radio" name="radio_test" value="FM" />FM</label>
<label><input type="radio" name="radio_test" value="foreign" />foreign</label>

jsで拾うラジオボタンを追加。

 

チャンク:radio_test(Dittoループ)

[!Ditto?
&parents = 'XX' //リソースIDがXX(ここでは「MODx」の記事一覧)を親とするリソースの中から
&hideFolders = '1' //親コンテナは表示から外す
&depth='2' //全ての階層を表示
&display = '100' //最新100件を表示
&language = 'japanese-utf8' //言語指定
&orderBy = 'createdon DESC' //作成降順
&tpl = '@CODE:
	<div class="section [+radiotest+]">
		<h2 class="title"><a href="[~[+id+]~]">[+title+]</a></h2>
		<h4 class="date">[+createdon:date=`%Y年%-m月%-d日`+]</h4>
		<div class="entry">[+content+]</div>
	<hr />
	</div>
' // 表示パターン
!]

出力パターンのdivタグのclassにテンプレート変数radiotestが付けられていることがポイント。これでテンプレート変数の入力ごとにclassが割り振られ、先のラジオボタンをチェックするたびに表示(display:noneとdipslay:block)が切り替わる、という寸法です。

このDittoループはチャンクにしてあること、そして、上記のradiotestで分かる通りテンプレート変数をプレースホルダとして使用してループ内で出力を変化させることができること。

この2点から、日本語用Dittoループ(pagetitleとja_contentを読み込む)のチャンクと英語用Dittoループ(en_title, en_contentを読み込む)のチャンクを用意して、スニペットで条件分岐させて読み込むチャンクを変えてあげれば、Dittoループの表示の中身も日英分岐が可能、ということになりますね(面倒なのでそこまでサンプルは作りませんが)。

ついでにテンプレート変数とラジオボタンの切り替えで、別の表示切替機構も融合可能、と。

タグ: テンプレート変数, スニペット, プラグイン, カスタマイズ

 



関連する記事一覧