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とCSSを記述し登録します。

 

fs_history_sidebox 用サンプルソース

※一部、修正箇所がありますので、下記の補足1・補足2をご確認ください

 

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)は各ショップレイアウトに合わせて適宜ご調整ください。

 

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

構築メニュー>デザイン設定>編集>レイアウト編集にて、

基本レイアウトの「ヘッダエリアに表示させるHTMLタグ」に、

下記の閲覧履歴タグを記入して登録します。

 

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

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

 

以上で、設置は完了です。 

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

 

レイアウトについて

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

ヘッダエリアの少し下・コンテンツエリアの右側に、

「今までに見た商品」が表示されている状態とは、少し表示位置が異なります。

 

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

 

■上部コメントの位置

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

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

・商品詳細ページ

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

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

 

 

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

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

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

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

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

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

 

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

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

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

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

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

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

ページ
トップへ