[/php]
6 画像の追加
■img/button/btn_prev_next_01.png
7 ■html/user_data/packages/default/css/bloc.cssに追加する。
[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%;
}
[/css]
サイト利用者が商品詳細のページを開くと該当商品の情報をクッキーに保存し表示する。
クッキーに保存するため、ブラウザを閉じた後に再アクセスした場合でも、以前の「最近チェックした商品」が表示される。
ログイン、ログアウトに関わらず、利用者すべてに表示される。
▼ここでのカスタマイズファイルをすべてダウンロードできます。
必要な箇所だけコピーしてご利用ください。
他のカスタマイズも含まれている場合がありますので、ファイルの上書きは絶対におやめください。
こちらから（facebookユーザーのみ）
サンプルはこちら
商品詳細ページをいくつか開いた後、トップページに戻ると、「最近チェックした商品」が表示されます。
パラメータでは「2」を設定しているので、上から落ちてくる感じで、3個ずつ表示されます。
◆下記により、最近チェックした商品プラグインをカスタマイズします。
次の3つの表示方法を設定し、パラメータから選択できるようにする。
1: スライド①
右から左へ、1個ずつ自動移動。ボタンをクリックすると、左右どちらにも移動する。
2: スライド②
上から落ちてくる感じで、3個ずつ表示。
3: 5列横並び
左寄せで5個並んだら、改行する。
○ 1、2を設定した場合でも、チェックした商品が5個を超えないとスライドしないようになっている。
チェック商品が6個になってはじめてスライドが機能する。
○ 2カラム、3カラムに対応し、メインカラム・サイドカラムへの配置が可能。
ただし、スライド②をサイドカラムに配置した時、すべての商品は表示されない。
○ 表示方法は、パラメータ設定のRECENT_BUY_SHOWで設定する。
1 パラメータ設定で、表示方法を切り替える。
[php]
INSERT INTO mtb_constants (id, name, rank, remarks) VALUES (‘RECENT_BUY_SHOW’, ‘1’, 1431, ‘最近チェックした商品表示方法（1:スライド① 2:スライド② 3:5列横並び）’);
[/php]
★パラメーター設定を開き、「この内容で登録する」をクリック。
2 下記より、jQueryプラグイン「carouFredSel」をダウンロードし、■html/js/jquery.caroufredselフォルダに置く。
http://caroufredsel.frebsite.nl/
3 ■data/Smarty/templates/default/site_frame.tpl 追加
[php]
[/php]
4 プラグインをインストール
下記からダウンロード
http://www.ec-cube.net/products/detail.php?product_id=335
*************************************
【プラグイン設定】
履歴保存日数：適宜
履歴表示個数：スライド表示を使用するためには、「6」以上の値を入力する。
*************************************
5 ファイルの修正
プラグインをインストールすると、下記ファイルが作成される。
■data/Smarty/templates/default/frontparts/bloc/plg_checkeditems.tpl
[php]
最近チェックした商品