「今までに見た商品(閲覧履歴)」を画面上に常時表示することはできますか。

コマースクリエイター未利用店舗様専用の記事です

 

本内容を設定するには、futureRecommend2オプションのご契約が必要です。
■futureRecommend2
https://www.future-shop.jp/function/construction/recommend.html

 

初回訪問時は何も表示されていませんが、商品ページを閲覧していくと、
サイトの右上に閲覧済み商品のサムネイル画像が表示される2通りの方法を本記事でご案内します。

なお閲覧履歴商品下部の「もっと見る」より、「今までに見た商品」の一覧ページも表示できます。

※閲覧履歴は最大10件表示です。

※閲覧履歴の情報は「360日」保持されます。(在庫のない商品は表示されません。)

 

以下のいずれかをご参照ください。

 

 

ページの右上に固定表示する設定方法

1.閲覧履歴を横一列で縦並びに表示するためのレコメンドテンプレートを作成する

レコメンド管理画面>表示設定>テンプレート一覧/作成 にて「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を入力」の箇所には、
閲覧履歴一覧ページを作成し、そのページ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)は各ショップレイアウトに合わせて適宜ご調整ください。

 

2.デザインテンプレートに閲覧履歴タグを埋め込む

構築メニュー>デザイン設定>編集>レイアウト編集 にて、
基本レイアウトの「ヘッダエリアに表示させるHTMLタグ」に、
下記の閲覧履歴タグを記述して登録します。

<script type="text/javascript"><!--
try{
_rcmdjp._displayHistory({
template:'fs_history_sidebox' // テンプレート名
});
}catch(err){}
//--></script>

 

以上で設置は完了です。 

ショップの右上に、「今までに見た商品」が表示されるようになります。

 

レイアウトについて

今回ご紹介している方法は、ヘッダエリアに閲覧履歴タグを入れておりますので、
1箇所設定していただくと、画面の右上・ヘッダエリアの右側に表示される状態となります。

コンテンツエリアの右側に「今までに見た商品」を表示したい場合は、
各商品グループ・商品詳細ページの「上部コメント」に閲覧履歴タグを設置してください。

 

■上部コメントの位置

・商品グループ(カテゴリ)ページ

運用メニュー>商品管理>商品グループ管理>商品グループ編集画面>上級デザイン

・商品詳細ページ

運用メニュー>商品管理>商品検索>商品基本情報編集画面>上級デザイン

(CSVでの一括登録も可能です。)

 

トップページなどに出力する場合

トップページ等の静的HTMLファイルへの表示は別途設定が必要です。

トップページは、FTPサーバにアップロードしているファイル内に、
「基本タグ」 と 「閲覧履歴タグ」 を埋め込む必要がございます。

詳細は下記オンラインマニュアルをご確認ください。

■オンラインマニュアル:自動生成ページ以外(静的ページ・CMS)にレコメンドを表示する方法

 

 

 

 

 

 

スクロールしても常にページの右上に表示する設定方法

1.閲覧履歴を横一列で縦並びに表示するためのレコメンドテンプレートを作成する

レコメンド管理画面>表示設定>テンプレート一覧/作成 にて「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枠内の記述の修正箇所について

<a href="閲覧履歴一覧ページのURLを入力">≫もっと見る</a></div>

上記記述の「閲覧履歴一覧ページのURLを入力」の箇所には、
閲覧履歴一覧ページを作成し、そのページ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; 

 

2.デザインテンプレートに「閲覧履歴タグ」と「スクロール表示タグ」を埋め込む

構築メニュー>デザイン設定>編集>レイアウト編集 にて、
基本レイアウトの「ヘッダエリアに表示させる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)にレコメンドを表示する方法

この記事は役に立ちましたか?