futureshop FAQ

本サイトは、弊社サービス「futureshop」ご契約店舗様用のFAQサイトです。
お困り事やご不明点等ございましたら、お気軽にフューチャーショップサポートまでご連絡ください。

  • 電話でのお問合せ番号(平日10:00~17:00)
  • メールでのお問合せ
  • 文字サイズ変更
  • S
  • M
  • L
  • カテゴリー一覧 > 「今までに見た商品(閲覧履歴)」を画面上に常時表示することはできますか。
  • No : 1999
  • 公開日時 : 2018/02/09 16:21

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

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

 

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

 

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

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

 

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

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

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

回答

【STEP01】サイド表示用のレコメンドテンプレートを作成する

ページ右上にサムネイル画像が縦に並ぶ形で閲覧履歴を表示する
レコメンドテンプレートを新規作成します。

レコメンド管理画面>表示設定>テンプレート一覧/作成 にて「fs_history」をクリック。

ページ下部の「別名で保存する」をクリックすると、
テンプレート一覧に「fs_history-2」が作成されます。

 

「fs_history-2」に入り、テンプレート名を「fs_history_sidebox」に変更。

 

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; 

 

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

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

 

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


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.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> 

※テンプレート名は、STEP01で設定したテンプレート名にしてください。

 

以上で、設置は完了です。 
スクロールしてもページの右上に、「今までに見た商品」が常に表示されるようになります。

 

 

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

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

トップページは、FTPサーバにアップロードしているファイル内に、

「基本タグ」 と 「閲覧履歴タグ」 を埋め込む必要がございます。

 

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

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

 

スムーズに解決できなかった場合、記事改善のため解決できなかった理由をお聞かせください。

ご意見・ご感想をお寄せください お問い合わせを入力されましてもご返信はいたしかねます

フューチャーショップサポート

「虎の巻」でお悩みが解決できない場合や、ご不明点等がございましたらお気軽にご連絡ください。

  • お電話でのお問い合わせ(平日10:00~17:00)お電話でのお問い合わせ(平日10:00~17:30)
  • メールフォームをご利用くださいお問い合わせフォーム

※弊社サービスと類似した名称の通販サイトとの問い合わせ先間違いが増えております。
 弊社では通販サイトの運営は一切行っておりません。

ページ
トップへ