「今までに見た商品(閲覧履歴)」を画面上に常時表示することはできますか。
- 更新日： 2022-12-12 09:31:01 UTC
コマースクリエイター未利用店舗様専用の記事です
|
本内容を設定するには、futureRecommend2オプションのご契約が必要です。 |
初回訪問時は何も表示されていませんが、商品ページを閲覧していくと、
サイトの右上に閲覧済み商品のサムネイル画像が表示される2通りの方法を本記事でご案内します。
なお閲覧履歴商品下部の「もっと見る」より、「今までに見た商品」の一覧ページも表示できます。
※閲覧履歴は最大１０件表示です。
※閲覧履歴の情報は「３６０日」保持されます。（在庫のない商品は表示されません。）
以下のいずれかをご参照ください。
ページの右上に固定表示する設定方法
１．閲覧履歴を横一列で縦並びに表示するためのレコメンドテンプレートを作成する
レコメンド管理画面＞表示設定＞テンプレート一覧／作成 にて「fs_history」をクリック。
ページ下部の「別名で保存する」をクリックすると、
テンプレート一覧に「fs_history-2」が作成されます。
「fs_history-2」の編集画面に入り、テンプレート名を「fs_history_sidebox」に変更して登録し、
「fs_history_sidebox」の編集画面内にて下記のHTMLとCSSを記述して登録します。
fs_history_sidebox 用サンプルソース
HTML
#{if(total,0)}#{else}
<div class="historysideboxborder">
<div class="historysidebox">
<p class="checkitem">今まで見た商品</p>
#{item(1,5)}#{if(image)}<a href="#{url}"><img src="#{image}" /></a><br />#{/if}#{/item}<div class="more">
<a href="閲覧履歴一覧ページのURLを入力">≫もっと見る</a></div>
</div>
</div>
#{/if}
|
HTML枠内の記述の修正箇所について <a href="閲覧履歴一覧ページのURLを入力">≫もっと見る</a></div> 上記の「閲覧履歴一覧ページのURLを入力」の箇所には、 閲覧履歴一覧ページの作成方法は、下記ページをご参照ください。 |
CSS
.historysideboxborder{
width:245px;
margin:0 auto;
position:relative;
}
.historysidebox{
width:80px; /*閲覧履歴表示枠の横幅*/
height:auto;
border:#EEE solid 1px; /*枠線の色と太さ*/
font-size:10px; /*文字の大きさ*/
text-align:center;
position:absolute;
top:0;
right:-250px; /*右にはみ出す幅（調整要）*/
}
.historysidebox p.checkitem{
margin:10px 0 10px 0;
line-height:1.2;
}
.historysidebox img {
height: 60px; /*閲覧履歴画像の縦幅*/
width: 60px; /*閲覧履歴画像の横幅*/
margin: 0 0 10px 0;
}
.historysidebox .more {
background:#EEE;
width:80px;
height:20px;
padding-top:2px;
}
.historysidebox .more a {
color:#336699;
}
|
CSS枠内の記述の修正箇所について right:-250px; /*右にはみ出す幅（調整要）*/ 上記の数値(-250px)は各ショップレイアウトに合わせて適宜ご調整ください。 |
２．デザインテンプレートに閲覧履歴タグを埋め込む
構築メニュー＞デザイン設定＞編集＞レイアウト編集 にて、
基本レイアウトの「ヘッダエリアに表示させるHTMLタグ」に、
下記の閲覧履歴タグを記述して登録します。
<script type="text/javascript"><!--
try{
_rcmdjp._displayHistory({
template:'fs_history_sidebox' // テンプレート名
});
}catch(err){}
//--></script>
以上で設置は完了です。
ショップの右上に、「今までに見た商品」が表示されるようになります。
|
レイアウトについて 今回ご紹介している方法は、ヘッダエリアに閲覧履歴タグを入れておりますので、 コンテンツエリアの右側に「今までに見た商品」を表示したい場合は、
■上部コメントの位置 ・商品グループ（カテゴリ）ページ 運用メニュー＞商品管理＞商品グループ管理＞商品グループ編集画面＞上級デザイン ・商品詳細ページ 運用メニュー＞商品管理＞商品検索＞商品基本情報編集画面＞上級デザイン （CSVでの一括登録も可能です。）
トップページなどに出力する場合 トップページ等の静的HTMLファイルへの表示は別途設定が必要です。 トップページは、FTPサーバにアップロードしているファイル内に、 詳細は下記オンラインマニュアルをご確認ください。 ■オンラインマニュアル：自動生成ページ以外（静的ページ・CMS）にレコメンドを表示する方法 |
スクロールしても常にページの右上に表示する設定方法
１．閲覧履歴を横一列で縦並びに表示するためのレコメンドテンプレートを作成する
レコメンド管理画面＞表示設定＞テンプレート一覧／作成 にて「fs_history」をクリック。
ページ下部の「別名で保存する」をクリックすると、
テンプレート一覧に「fs_history-2」が作成されます。
「fs_history-2」の編集画面に入り、テンプレート名を「fs_history_sidebox」に変更して登録し、
「fs_history_sidebox」の編集画面内にて下記のHTMLとCSSを記述して登録します。
fs_history_sidebox 用サンプルソース
HTML
#{if(total,0)}#{else}
<div class="sideRecommendContainer">
<div class="sideRecommendBox">
<div class="historysidebox">
<p class="checkitem">今まで見た商品</p>
#{item(1,5)}#{if(image)}<a href="#{url}"><img src="#{image}" /></a><br />#{/if}#{/item}<div class="more">
<a href="閲覧履歴一覧ページのURLを入力">≫もっと見る</a>
</div>
</div>
</div>
</div>
#{/if}
|
HTML枠内の記述の修正箇所について
上記記述の「閲覧履歴一覧ページのURLを入力」の箇所には、 閲覧履歴一覧ページの作成方法は、下記ページをご参照ください。 |
CSS
.sideRecommendContainer{
position:relative;
}.sideRecommendBox{
width:80px; /*閲覧履歴表示枠の横幅*/
position:absolute;
left:101%;/*横方向表示位置（適宜変更必要）*/
}.historysidebox{
width:80px; /*閲覧履歴表示枠の横幅*/
height:auto;
border:#EEE solid 1px; /*枠線の色と太さ*/
font-size:10px; /*文字の大きさ*/
text-align:center;
}.historysidebox p.checkitem{
margin:10px 0 10px 0;
line-height:1.2;
}.historysidebox img {
height: 60px; /*閲覧履歴画像の縦幅*/
width: 60px; /*閲覧履歴画像の横幅*/
margin: 0 0 10px 0;
}.historysidebox .more {
background:#EEE;
width:80px;
height:20px;
padding-top:2px;
}
.historysidebox .more a {
color:#336699;
}
２．デザインテンプレートに「閲覧履歴タグ」と「スクロール表示タグ」を埋め込む
構築メニュー＞デザイン設定＞編集＞レイアウト編集 にて、
基本レイアウトの「ヘッダエリアに表示させるHTMLタグ」に、
下記の「閲覧履歴タグ」と「スクロール表示タグ」を記入して登録します。
<script type="text/javascript"><!--
try{
_rcmdjp._displayHistory({
template:'fs_history_sidebox' // テンプレート名
});
}catch(err){}
//--></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var recommendTargetOffsetTop =$('.layout_header').offset().top;
$(window).scroll(function () {
if($(this).scrollTop()>recommendTargetOffsetTop){
$('.historysidebox').css({position:'fixed',top:'0px'});
}else{
$('.historysidebox').css({position:'relative'});
}
});
});
</script>
以上で、設置は完了です。
スクロールしてもページの右上に、「今までに見た商品」が常に表示されるようになります。
トップページなどに出力する場合トップページ等の静的HTMLファイルへの表示は別途設定が必要です。 トップページは、FTPサーバにアップロードしているファイル内に、 詳細は下記オンラインマニュアルをご確認ください。 ■オンラインマニュアル：自動生成ページ以外（静的ページ・CMS）にレコメンドを表示する方法 |