前回の続き。
リストと画像のみの表示切替を行ったとき、sessionを使って現在の状態を記憶しておく。
と予定して途中まで作成したのだけど、書き方がまずいのかEC CUBE側のsessionとバッティングしてしまう。
あちこち弄り回すのは避けたいので、素直にsessionを諦めてcookieを使う。
それぞれのスイッチをクリックして表示の切り替えを行うと同時に、Ajaxでcookie処理を行う。
javascript部分
前回作成したcmn.jsを以下の様に変更。
sessionCtrl関数を作成し、切り替え時に呼び出されるように。
コメントアウト部分は動作確認に使用できる。
$(function() {
displayWindow();
displayList();
});
function displayWindow(){
$("#disp_switch_img").live('click',function(event){
event.preventDefault();
$(".list_area").attr('class','list_window');
cookieCtrl('window');
})
}
function displayList(){
$("#disp_switch_list").live('click',function(event){
event.preventDefault();
$(".list_window").attr('class','list_area clearfix');
cookieCtrl('list');
})
}
function cookieCtrl(disp){
$.ajax({
type: "GET",
url: "/products/disp_switch.php",
data: "disp=" + disp ,
/*
success: function(msg){
alert( msg );
}
*/
});
}
PHP部分
disp_switch.phpを作成。
html/products/にアップ。
アップ場所は他の場所でも構わないけど、変えた場合はJSから呼び出すurlも変更のこと。
if (empty($_GET['disp'])) exit();
$disp = $_GET['disp'];
$disp = htmlspecialchars(trim($disp));
if ( $disp == 'list'){
setcookie("disp", "list", time()+3600);
}else if ( $disp == 'window'){
setcookie("disp", "window", time()+3600);
}
echo $disp;
これでcookieにセットする部分はできあがり。
続いて表示処理。
ページを開く際にcookieのデータを読み込み、表示を切り替える。
表示切替を行っているのは、
data/Smarty/templates/作成したテンプレート名/products/list.tpl
の、
<div class="list_area clearfix">
のclassを切り替えることによって行っている。
なので、ページを開く際にcookieの状態によってこのテンプレートファイルのclass部分を書き分ければよい。
今回はclassファイルをいじる。
テンプレートファイルはいくつかのファイルを読み込んでいるが、ごくシンプルに書くとこんな感じ。
(これ以外にも実際はファイルを読んでいるので注意)
data/class/pages/products/LC_Page_Products_List.php
┗data/class_extends/page_extends/products/LC_Page_Products_List_Ex.php
┗data/Smarty/templates/作成したテンプレート名/products/list.tpl
┗html/products/list.php
LC_Page_Products_List_Exは、LC_Page_Products_Listを継承しているのみ。
カスタマイズを行う場合は、LC_Page_Products_List.phpを直接いじることなく、LC_Page_Products_List_Ex.phpをいじる。
LC_Page_Products_List_Ex.phpに以下を追加。
function ChkCookie(){
if(!empty($_COOKIE['disp'])){
$disp = htmlspecialchars(trim($_COOKIE['disp']));
if ($disp == 'window'){
$class_str = 'list_window';
}else{
$class_str = 'list_area clearfix';
}
}else{
$class_str = 'list_area clearfix';
}
return $class_str;
}
さらに、同じファイル内のprocess()関数に以下を追加。
$this->classStr = $this->ChkCookie();
classファイルの変更は以上。
続いて、テンプレートファイル。
data/Smarty/templates/作成したテンプレート名/products/list.tpl
内から、
<div class="list_area clearfix">
を探して、以下のように変更。
<div class="<!--{$classStr|h}-->">
これでできあがり。
後は、切り替えの際の細かい部分を直す。
次回へ。
と思ったけど、大したもんでもないので、チャチャっと実装。
切り替えの際にエフェクトを入れるのと、現在選択中の表示のリンクを消すこと。
できあがり。