サイト利用者が商品詳細のページを開くと該当商品の情報をクッキーに保存し表示する。
クッキーに保存するため、ブラウザを閉じた後に再アクセスした場合でも、以前の「最近チェックした商品」が表示される。
ログイン、ログアウトに関わらず、利用者すべてに表示される。
▼ここでのカスタマイズファイルをすべてダウンロードできます。
必要な箇所だけコピーしてご利用ください。
他のカスタマイズも含まれている場合がありますので、ファイルの上書きは絶対におやめください。
こちらから(facebookユーザーのみ)
サンプルはこちら
商品詳細ページをいくつか開いた後、トップページに戻ると、「最近チェックした商品」が表示されます。
パラメータでは「2」を設定しているので、上から落ちてくる感じで、3個ずつ表示されます。
◆下記により、最近チェックした商品プラグインをカスタマイズします。
次の3つの表示方法を設定し、パラメータから選択できるようにする。
1: スライド①
右から左へ、1個ずつ自動移動。ボタンをクリックすると、左右どちらにも移動する。
○ 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%; }