サイト利用者が商品詳細のページを開くと該当商品の情報をクッキーに保存し表示する。
クッキーに保存するため、ブラウザを閉じた後に再アクセスした場合でも、以前の「最近チェックした商品」が表示される。
ログイン、ログアウトに関わらず、利用者すべてに表示される。
▼ここでのカスタマイズファイルをすべてダウンロードできます。
必要な箇所だけコピーしてご利用ください。
他のカスタマイズも含まれている場合がありますので、ファイルの上書きは絶対におやめください。
こちらから（facebookユーザーのみ）
サンプルはこちら
商品詳細ページをいくつか開いた後、トップページに戻ると、「最近チェックした商品」が表示されます。
パラメータでは「2」を設定しているので、上から落ちてくる感じで、3個ずつ表示されます。
◆下記により、最近チェックした商品プラグインをカスタマイズします。
次の3つの表示方法を設定し、パラメータから選択できるようにする。
1: スライド①
右から左へ、1個ずつ自動移動。ボタンをクリックすると、左右どちらにも移動する。
2: スライド②
上から落ちてくる感じで、3個ずつ表示。
3: 5列横並び
左寄せで5個並んだら、改行する。
○ 1、2を設定した場合でも、チェックした商品が5個を超えないとスライドしないようになっている。
チェック商品が6個になってはじめてスライドが機能する。
○ 2カラム、3カラムに対応し、メインカラム・サイドカラムへの配置が可能。
ただし、スライド②をサイドカラムに配置した時、すべての商品は表示されない。
○ 表示方法は、パラメータ設定のRECENT_BUY_SHOWで設定する。
1 パラメータ設定で、表示方法を切り替える。
INSERT INTO mtb_constants (id, name, rank, remarks) VALUES ('RECENT_BUY_SHOW', '1', 1431, '最近チェックした商品表示方法（1:スライド① 2:スライド② 3:5列横並び）');
★パラメーター設定を開き、「この内容で登録する」をクリック。
2 下記より、jQueryプラグイン「carouFredSel」をダウンロードし、■html/js/jquery.caroufredselフォルダに置く。
http://caroufredsel.frebsite.nl/
3 ■data/Smarty/templates/default/site_frame.tpl 追加
<!--caroufredsel-->
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.caroufredsel/jquery.carouFredSel-5.6.4.js"></script>
4 プラグインをインストール
下記からダウンロード
http://www.ec-cube.net/products/detail.php?product_id=335
*************************************
【プラグイン設定】
履歴保存日数：適宜
履歴表示個数：スライド表示を使用するためには、「6」以上の値を入力する。
*************************************
5 ファイルの修正
プラグインをインストールすると、下記ファイルが作成される。
■data/Smarty/templates/default/frontparts/bloc/plg_checkeditems.tpl
<!--{if $arrCheckItems}-->
<!--{if $smarty.const.RECENT_BUY_SHOW == "1"}-->
<script type="text/javascript">
$(function() {
$('#carousel_recent').carouFredSel({
width: '100%',
prev: '#prev_recent',
next: '#next_recent',
scroll: {
items: 1,
duration: 500
},
auto: {
pauseDuration: 5000, // ストップしている時間
pauseOnHover: true
}
});
});
</script>
<!--{/if}-->
<!--{if $smarty.const.RECENT_BUY_SHOW == "2"}-->
<script type="text/javascript">
$(function() {
var itemHeight = 250;
var delay = 150;
$('#carousel_recent').carouFredSel({
items: 3,
scroll: {
fx: 'none',
onBefore: function( oI, nI ) {
$(this).delay( delay*4 );
oI.each(function( i ) {
$(this).delay(i*delay).animate({
marginTop: itemHeight,
marginBottom: -itemHeight
}, delay*2);
});
nI.css({
marginTop: -itemHeight,
marginBottom: itemHeight
});
},
onAfter: function( oI, nI ) {
oI.css({
marginTop: 0,
marginBottom: 0
});
nI.each(function( i ) {
$(this).delay(i*delay).animate({
marginTop: 0,
marginBottom: 0
}, delay*2);
});
}
},
auto: {
pauseDuration: 5000, // ストップしている時間
pauseOnHover: true
}
});
});
</script>
<!--{/if}-->
<div class="block_outer clearfix">
<div id="recent_area">
<h2>最近チェックした商品</h2>
<!--{if $smarty.const.RECENT_BUY_SHOW == "1" && $arrCheckItems|@count > 5 || $smarty.const.RECENT_BUY_SHOW == "2" && $arrCheckItems|@count > 5}-->
<div class="block_body recent_body_<!--{$smarty.const.RECENT_BUY_SHOW}--> clearfix">
<div id="wrapper">
<div id="carousel_recent">
<!--{section name=cnt loop=$arrCheckItems}-->
<div class="product_item clearfix">
<div class="productImage">
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrCheckItems[cnt].product_id}--><!--{if $smarty.const.STATIC_URL == true}-->.html<!--{/if}-->">
<img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrCheckItems[cnt].main_list_image|sfNoImageMainList|h}-->&width=80&height=80" alt="<!--{$arrCheckItems[cnt].name|h}-->" />
</a>
</div>
<div class="productContents">
<h3>
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrCheckItems[cnt].product_id}--><!--{if $smarty.const.STATIC_URL == true}-->.html<!--{/if}-->"><!--{$arrCheckItems[cnt].name}--></a>
</h3>
<p class="sale_price">
<span class="price"><!--{if $arrCheckItems[cnt].price02_min_inctax == $arrCheckItems[cnt].price02_max_inctax}--><!--{$arrCheckItems[cnt].price02_min_inctax|number_format}--><!--{else}--><!--{$arrCheckItems[cnt].price02_min_inctax|number_format}-->〜<!--{$arrCheckItems[cnt].price02_max_inctax|number_format}--><!--{/if}-->円</span>
</p>
</div>
</div>
<!--{/section}-->
</div>
</div>
<!--{if $smarty.const.RECENT_BUY_SHOW == "1"}-->
<a id="prev_recent" href="#"></a>
<a id="next_recent" href="#"></a>
<!--{/if}-->
</div>
<!--{else}-->
<div class="block_body clearfix">
<!--{section name=cnt loop=$arrCheckItems}-->
<div class="product_item clearfix">
<div class="productImage">
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrCheckItems[cnt].product_id}--><!--{if $smarty.const.STATIC_URL == true}-->.html<!--{/if}-->">
<img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrCheckItems[cnt].main_list_image|sfNoImageMainList|h}-->&width=80&height=80" alt="<!--{$arrCheckItems[cnt].name|h}-->" /></a>
</div>
<div class="productContents">
<h3><a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrCheckItems[cnt].product_id}--><!--{if $smarty.const.STATIC_URL == true}-->.html<!--{/if}-->"><!--{$arrCheckItems[cnt].name}--></a></h3>
<p class="sale_price">
<!--{if $arrCheckItems[cnt].price02_min_inctax == $arrCheckItems[cnt].price02_max_inctax}--><!--{$arrCheckItems[cnt].price02_min_inctax|number_format}--><!--{else}--><!--{$arrCheckItems[cnt].price02_min_inctax|number_format}-->〜<!--{$arrCheckItems[cnt].price02_max_inctax|number_format}--><!--{/if}-->円
</p>
</div>
</div>
<!--{if $smarty.section.cnt.iteration % 5 === 0}-->
<div class="clear"></div>
<!--{/if}-->
<!--{/section}-->
</div>
<!--{/if}-->
</div>
</div>
<!--{/if}-->
6 画像の追加
■img/button/btn_prev_next_01.png
7 ■html/user_data/packages/default/css/bloc.cssに追加する。
/* ===============================================
▼最近チェックした商品
=============================================== */
/* 共通
----------------------------------------------- */
#recent_area h2 {
color: #E65D19;
font-size:120%;
padding:3px 8px;
border-left:10px #E65D19 solid;
border-bottom:#999 3px double;
border-right:#CCC 1px solid;
border-top:#F60 1px solid;
background-color: #FCE3A0;
background: -moz-linear-gradient(top, #FEF2DA, #F7E17E); /* Firefox用 */
background: -webkit-gradient(linear, left top, left bottom, from(#FEF2DA), to(#F7E17E)); /* Safari,Google Chrome用 */
}
.side_column #recent_area h2 {
font-size:100%;
}
#recent_area .block_body {
margin-bottom: 10px;
padding:10px 0 0 0;
border: none;
}
#recent_area .block_body img {
padding:3px;
border:#CCC 1px solid;
}
#recent_area .block_body h3 {
font-size: 100%;
font-weight: normal;
}
#recent_area .productContents p {
text-align:center;
}
/* パラメータ設定（RECENT_BUY_SHOW）で、3（5列横並び）を選択。
----------------------------------------------- */
#recent_area .product_item {
float: left;
width: 18%;
padding-right: 2%;
margin-bottom: 5px;
}
.side_column #recent_area .product_item {
float: none;
width: 100%;
padding-right:0;
margin-bottom: 10px;
}
.side_column #recent_area .productImage {
float:left;
width:50%;
}
.side_column #recent_area .productContents {
float:right;
width:45%;
}
/* パラメータ設定（RECENT_BUY_SHOW）で、1（スライド①）を選択。
----------------------------------------------- */
#recent_area .recent_body_1 {
position:relative;
padding-right:40px;
}
#recent_area .recent_body_1 #wrapper {
width:100%;
overflow: hidden;
}
#recent_area .recent_body_1 .product_item {
float: left;
width: 120px;
padding-right: 10px;
margin-bottom: 5px;
}
.side_column #recent_area .recent_body_1 {
padding-right:0;
}
.side_column #recent_area .recent_body_1 .product_item {
width: 170px;
padding-right: 0;
}
.side_column #recent_area .recent_body_1 .productImage {
width:50%;
}
.side_column #recent_area .recent_body_1 .productContents {
width:45%;
}
#recent_area #next_recent {
position: absolute;
top: 20px;
right: 10px;
width: 12px;
height: 30px;
cursor: pointer;
background: transparent url(../img/button/btn_prev_next_01.png) no-repeat -12px 0;
}
#recent_area #next_recent:hover {
background-position: -12px -30px;
}
#recent_area #prev_recent {
position: absolute;
top: 20px;
right: 23px;
width: 12px;
height: 30px;
cursor: pointer;
background: transparent url(../img/button/btn_prev_next_01.png) no-repeat 0 0;
}
#recent_area #prev_recent:hover {
background-position: 0 -30px;
}
.side_column #recent_area #next_recent {
top: 35px;
right: 0px;
}
.side_column #recent_area #prev_recent {
top: 35px;
right: 13px;
}
/* パラメータ設定（RECENT_BUY_SHOW）で、2（スライド②）を選択。
----------------------------------------------- */
#recent_area .recent_body_2 {
position:relative;
padding-right:0;
}
#recent_area .recent_body_2 #wrapper {
width:100%;
overflow: hidden;
}
#recent_area .recent_body_2 .product_item {
float: left;
width: 220px;
padding-right: 20px;
margin-bottom: 5px;
}
#recent_area .recent_body_2 .productImage {
float:left;
width:40%;
}
#recent_area .recent_body_2 .productContents {
float:right;
width:55%;
}
.side_column #recent_area .recent_body_2 .product_item {
width: 170px;
padding-right:0px;
}
.side_column #recent_area .recent_body_2 .productImage {
width:50%;
}
.side_column #recent_area .recent_body_2 .productContents {
width:45%;
}
#three_maincolumn #recent_area .recent_body_2 .product_item {
width: 170px;
}
#three_maincolumn #recent_area .recent_body_2 .productImage {
width:50%;
}
#three_maincolumn #recent_area .recent_body_2 .productContents {
width:45%;
}
