EC CUBEのリスト表示にウィンドウショッピング機能をつける

画像だけをリスト表示する機能が欲しい。

どうするかちょっと悩んだけど、スタイルの切り替えが一番楽かな。
ただし、スタイルを切り替えただけだとページ送りした際に元に戻ってしまうので、sessionとの併用が必要。

流れてとしては、

表示切替をクリックしたら、javascripでスタイル切り替え、Ajaxでsession処理
該当ページにアクセスしたときに、sessionチェックしてスタイル切り替える

さて、予定通りいくかな？

以下は実際に記述した内容。

HTML部分

まず、表示切替用のリンクを設ける。
テンプレートファイル
/Smarty/templates/作成したテンプレート名/products/list.tpl
を修正するして、切り替え用のリンクを設置。

表示件数の隣に

<a id="disp_switch_img" href="#disp_switch_img">画像のみ</a>
<a id="disp_switch_list" href="#disp_switch_list">リスト表示</a>

javascript部分

切り替えスイッチがクリックされたときに、該当部分のスタイル名を変更

cmn.jsを作成し、読み込むように。

$(function() {
 displayWindow();
 displayList();
});

function displayWindow(){
	$("#disp_switch_img").live('click',function(event){
		event.preventDefault();
		$(".list_area").attr('class','list_window');
	})
}

function displayList(){
	$("#disp_switch_list").live('click',function(event){
		event.preventDefault();
		$(".list_window").attr('class','list_area clearfix');
	})
}

CSS部分

画像のみ表示用のスタイルを準備。
他、微調整

common.cssに以下を追加

.list_window .listcomment,
.list_window .detail_btn,
.list_window .cart_area
{display:none;}

.list_window{
	width: 150px;
	height:250px;
	float:left;
	margin-left:20px;
}
.list_window div.listphoto {
	float:none;
}
#two_maincolumn_right .list_window div.listrightbloc ,
#two_maincolumn_left .list_window div.listrightbloc {
	float:none;
	width:100%;
}
.list_window div.listrightbloc ul.status_icon {
	margin-bottom:0;
}

contents.cssを微調整
clear:bothを追加。

.pagenumber_area {
clear:both;
padding-bottom: 10px;
background: url("../img/background/line_dot_01.gif") repeat-x bottom ;
}

これで表示の切り替えができた。
注意点としては、商品名がとても長かったりするとレイアウトが崩れる。
その場合は、.list_windowのheightを調整すると回避できる。
もっとうまくCSSを記述できればいいのだけど、今回はこのくらいで。

次はsessionを利用して、表示状態を保持できるようにする。