［AI Recommend Plus］レコメンド表示枠のカスタマイズについて

本機能はコマースクリエイター未利用・移行中（切替前）の店舗様はご利用いただけません。

レコメンド機能として、「future AI Recommend」「futureRecommend2」をご利用の店舗様はこちらをご覧ください。

future AI Recommend Plusのレコメンド表示枠のカスタマイズについて解説します。

レコメンド表示枠として利用可能な「表示枠」のテンプレートは、future AI Recommend Plus管理画面-テンプレート一覧／作成にて確認・作成・変更可能です。

＜ご注意事項＞

あらかじめ準備された16種類のテンプレート（プリセットテンプレート）については、変更できません。
プリセットテンプレートをカスタマイズしたい場合は、まず「複製」を行い、「複製」したテンプレートにて各種設定を変更してください。

＜目次＞

バリエーション価格ご利用時の最大価格の表示について

バリエーション価格設定をご利用の場合のカスタマイズ方法です。

future AI Recommend Plusでは、在庫があるバリエーションの最大と最小の価格を表示することが可能です。
ただし初期表示では、CSSで最大価格を非表示にしています。

最大価格も表示する場合は該当CSSを削除（もしくはコメントアウト）してください。

＜ご注意事項＞

あらかじめ準備された16種類のテンプレート（プリセットテンプレート）については、変更できません。
プリセットテンプレートをカスタマイズしたい場合は、まず「複製」を行い、「複製」したテンプレートにて各種設定を変更してください。

操作手順

（プリセットテンプレートを活用する場合のみ）プリセットされたテンプレートを「複製」する

操作画面：future AI Recommend Plus管理画面表示設定＞テンプレート一覧／作成

テンプレートを「複製」

見出しを変更したいテンプレートの［複製］を押下します。

複製を確認するモーダルが開きますので、［OK］を押下すると、表内に「-copy」と付記されたテンプレートが新たに作成されます。

テンプレート一覧から、変更したいテンプレートを表示

操作画面：future AI Recommend Plus管理画面表示設定＞テンプレート一覧／作成

テンプレート一覧／作成

該当のテンプレートの［詳細］ボタンを押下します。

テンプレート詳細画面で、テンプレートを変更

操作画面：future AI Recommend Plus管理画面表示設定＞テンプレート一覧／作成＞テンプレート詳細

テンプレート詳細

「CSS」欄の「最大金額非表示」部分のCSSを調整します。

初期値

/*　最大金額非表示*/
.fr4-rcmd-item-price-max {
    display: none;
}

最大金額を表示する場合（コメントアウト）

/*　最大金額非表示
.fr4-rcmd-item-price-max {
    display: none;
}*/

見出しの変更方法

プリセットされたテンプレートにあらかじめセットされている見出しを変更したい場合、以下の方法で対応可能です。

＜ご注意事項＞

プリセットされたテンプレートを「複製」する

操作画面：future AI Recommend Plus管理画面表示設定＞テンプレート一覧／作成

テンプレートを「複製」

見出しを変更したいテンプレートの［複製］を押下します。

複製を確認するモーダルが開きますので、［OK］を押下すると、表内に「-copy」と付記されたテンプレートが新たに作成されます。

見出し部分を変更する

操作画面：future AI Recommend Plus管理画面表示設定＞テンプレート編集

見出し部分を変更する

複製したテンプレートの［詳細］を押下し、「テンプレート編集」画面を開きます。

「HTML」欄に以下の記載があります。
こちらが「見出し」を表示している独自タグになります。

<h2>#{rcmd_title}</h2>

この部分を例えば以下のように変更します。

<h2>いまが買いのイチオシ商品</h2>

変更を確認する

※ECサイトに表示用の「表示枠用HTMLタグ」をセットしてご確認ください。

見出し部分を変更後

設定した見出しで表示されます。

＜ご注意事項＞

テンプレートを変更すると、テンプレートを利用している「表示枠」すべてが一括で即時に変更されます。変更されるテンプレートのご利用状況にご注意ください。

独自コードでのカスタマイズ

「表示枠」は、future AI Recommend Plus管理画面-テンプレート新規作成・編集にてカスタマイズが可能です。

基本的にはHTMLとCSSを利用していますが、独自コードの文法となります。

表示位置、表示内容を定義するため、独自コードが必要となりますので、独自コードを利用したカスタマイズについて解説します。
文字装飾やカラー、配置などのデザイン変更は、html＋CSSにて行ってください。

※独自コードを利用せず、html＋CSSのみでテンプレートを新規作成することはできません。

＜ご注意事項＞

アイテムループ `#{item} ･･･ #{/item}` とループ内で表示可能な項目

#{item}から#{/item}囲まれた部分を、各アイテム（商品）ごとに繰り返します。

繰り返しの回数は最大で10アイテム（商品）となります。

  #{if(total,0)}
  レコメンドアイテムはありません。  //アイテム登録がされていない場合に表示されます。
  #{else}
  <div class="recommend">
  #{item}
  <ul>
  <li>
  #{num}位<br>  //順位を表示
  <a href="#{url}">#{name}</a> <br>  //商品ページリンク付きの商品名を表示
  #{if(image)} 
  <a href="#{url}"><img src="#{image}"></a><br>  //画像がある場合は画像を表示
  #{/if}
  ￥#{comma(price)}<br>  //カンマ区切りで販売価格を表示
  ￥#{comma(memberprice)}<br>  //カンマ区切りで会員価格を表示
  在庫数：#{stock}<br>  //在庫数を表示
  #{point}pt進呈<br>   //ポイント数を表示
  ［#{code}］  //商品URLコードを表示
  </li>
  </ul>
  #{/item}
  </div>
  #{/if}

表示するレコメンド商品の順位を指定したい場合のカスタマイズ方法

  #{item(3)}
  レコメンドアイテム（商品）の3位のものが表示されます
  #{/item}

  #{item(3,6)}
  レコメンドアイテム（商品）の3位から6位までが表示されます
  #{/item}

`#{name}`のカスタマイズ方法（商品名の表示）

例）商品名の登録が「りんごの<br>ケーキ」の場合

▼#{name}を記述すると「アイテム名（商品名）」を繰り返し表示します。商品名に<br>が含まれる場合、そのまま表示されます。

  #{item}
  #{name} //リンゴの<br>ケーキ　と表示されます
  #{/item}

▼#{truncate(name,文字数)}を記述すると「アイテム名（商品名）」の文字数を指定して商品名を繰り返し表示します。

  #{item}
  #{truncate(name,文字数)}　//文字数4の場合：りんごの...　と表示されます
  #{/item}

▼#{raw(name)}を記述すると「アイテム名（商品名）」に含まれるHTMLタグは、HTMLタグとしてそのまま表されます。

  #{item}
  #{raw(name)}　//りんごの  
                  ケーキ  と表示されます
  #{/item}

サンプルテンプレート

例）商品名の登録が「りんごの<br>ケーキ」「バナナの<br>ケーキ」「いちごの<br>ケーキ」の場合

  #{if(total,0)}
  レコメンドアイテムはありません
  #{else}
  #{item(1,3)}
  <ul>
  <li>#{raw(name)}</li>
  <li>#{name}</li>
  </ul>
  #{/item}
  #{/if}

↓↓レコメンドアイテム（商品）の1位から3位のものを表示　/　表示方法は改行アリとなしの2パターン

  -   リンゴの  
       ケーキ
  -   りんごの<br>ケーキ
  -   バナナの  
       ケーキ
  -   バナナの<br>ケーキ
  -   いちごの  
       ケーキ
  -   いちごの<br>ケーキ

`#{num}`のカスタマイズ方法（レコメンド順位の表示）

#{num}を記述すると「何番目（レコメンド順位）」かを繰り返し表示します。

サンプルテンプレート

例）レコメンドアイテム（商品）が3位「りんごのケーキ」4位「バナナのケーキ」5位「いちごのケーキ」の場合

  #{if(total,0)}
  レコメンドアイテムはありません
  #{else}
  #{item(3,5)}
  <ul>
  <li>#{num}位　#{name}</li>
  </ul>
  #{/item}
  #{/if}

↓↓レコメンドアイテム（商品）の3位から5位のものを順位付きで表示

  -   3位　りんごのケーキ
  -   4位　バナナのケーキ
  -   5位　いちごのケーキ

`#{image}`のカスタマイズ方法（商品画像の表示）

#{image}を記述すると「商品画像のURL」を繰り返し表示します。

サンプルテンプレート

例）レコメンドアイテム（商品）が1位「青いアロハ」2位「黒いアロハ」3位「オレンジのアロハ」の場合

  #{if(total,0)}
  レコメンドアイテムはありません
  #{else}
  #{item(1,3)}
  <ul>
  <li><img src="#{image}"<br>#{name}</li>
  </ul>
  #{/item}
  #{/if}

↓↓レコメンドアイテム（商品）の1位から3位を画像付きで表示

`#{price}`のカスタマイズ方法（商品価格の表示）

例）販売価格が「リンゴのケーキ　1080円（税込/税率8%）」の場合

▼#{price}を記述すると「販売価格」を繰り返し表示します。なお、{price}では「通常価格(定価)」は表示できません。

  #{item}
  #{price}  //1080と表示されます
  #{/item}

▼#{comma(price)}を記述すると「販売価格」（数値）を、1,000,000のように「3桁ずつカンマ区切り」で繰り返し表示します。

  #{item}
  #{comma(price)}  //1,080と表示されます
  #{/item}

▼#{comma(price_before_tax)}(＋税：#{comma(tax)})と記述すると「税抜き価格＋税」で繰り返し表示します。

  #{item}
  #{comma(price_beforetax)}円(＋税：#{comma(tax)}円)  //1,000円（＋税：80円）と表示されます
  #{/item}

サンプルテンプレート

例）レコメンドアイテム（商品）が1位「青いアロハ　2,160円」2位「黒いアロハ　3,240円」3位「オレンジのアロハ　4,320円」の場合

  #{if(total,0)}
  レコメンドアイテムはありません
  #{else}
  #{item(1,3)}
  <ul>
  <li><#{name} #{comma(price)}円</li>
  </ul>
  #{/item}
  #{/if}

↓↓レコメンドアイテム（商品）の1位から3位をカンマ区切り販売価格で表示

  -   青いアロハ　2,160円
  -   黒いアロハ　3,240円
  -   オレンジのアロハ　4,320円

`#{url}`のカスタマイズ方法（商品ページURLの表示）

#{url}を記述すると「アイテム名（商品名）のURL」を繰り返し表示します。

サンプルテンプレート

例）レコメンドアイテム（商品）が3位「青いアロハ」4位「黒いアロハ」5位「オレンジのアロハ」の場合

  #{if(total,0)}
  レコメンドアイテムはありません
  #{else}
  #{item(3,5)}
  <ul>
  <li>#{num}位 #{name} <br>#{url}</li>
  </ul>
  #{/item}
  #{/if}

↓↓レコメンドアイテム（商品）の3位から5位をURL付きで表示

  -   3位　青いアロハ  
       http://future-shop.jp/fs/sample/blue/
  -   4位　黒いアロハ  
       http://future-shop.jp/fs/sample/black/
  -   5位　オレンジのアロハ  
       http://future-shop.jp/fs/sample/orange/

`#{code}`のカスタマイズ方法（商品URLコードの表示）

#{code}を記述すると、「アイテムコード（商品URLコード）」を繰り返し表示します。

サンプルテンプレート

例）レコメンドアイテム（商品）が3位「青いアロハ」4位「黒いアロハ」5位「オレンジのアロハ」の場合

  #{if(total,0)}
  レコメンドアイテムはありません
  #{else}
  #{item(3,5)}
  <ul>
  <li><a href="http://www.future-shop.jp/fs/items/#{code}" class="rcmdjp">#{name}</a>/li>
  </ul>
  #{/item}
  #{/if}

↓↓レコメンドアイテム（商品）の3位から5位を商品ページリンクとして表示

`#{memberprice}`のカスタマイズ方法（会員価格の表示）

※futureshopではログイン状態による「会員価格の表示/非表示」が制御できますが、各種レコメンド表示ではできませんのでご注意ください。
※レコメンドに表示できるのは「会員価格」になります。「会員ステージ価格」は表示できません。

例）レコメンド商品が「青いアロハ　会員価格2,160円（税率8%）」

▼#`を記述すると「会員価格」を繰り返し表示します。

  #{item}
  #{memberprice}  //2160と表示されます
  #{/item}

▼#{comma(memberpricebeforetax)}円(＋税：#{comma(memberpricetax)}円)と記述すると「税抜き会員価格価格＋会員価格税」で繰り返し表示します。

  #{item}
  #{comma(memberpricebeforetax)}円(＋税：#{comma(memberpricetax)}円)  //2,000円（＋税：160円）と表示されます
  #{/item}

サンプルテンプレート

例）レコメンドアイテム（商品）が1位「青いアロハ　通常価格3,240円/会員価格2,160円」2位「黒いアロハ　通常価格4,320円/会員価格3,240円」3位「オレンジのアロハ　通常価格5,400円/会員価格4,320円」の場合

  #{if(total,0)}
  レコメンドアイテムはありません
  #{else}
  #{item(1,3)}
  <ul>
  <li>#{name}<br>通常価格：#{comma(price)}円<br>会員価格：#{memberprice}円</li>
  </ul>
  #{/item}
  #{/if}

↓↓レコメンドアイテム（商品）の1位から3位をカンマ区切りの通常価格と会員価格付きで表示

  -   青いアロハ  
      通常価格：3,240円  
      会員価格：2,160円
  -   黒いアロハ  
      通常価格：4,320円  
      会員価格：3,240円
  -   オレンジのアロハ  
      通常価格：5,400円  
      会員価格：4,320円

`#{point}`のカスタマイズ方法（購入ポイントの表示）

例）レコメンド商品が「青いアロハ　ポイント数10ポイント」の場合

#{point}を記述すると「ポイント数」を繰り返し表示します。

  #{item}
  #{point}  //10  と表示されます
  #{/item}

サンプルテンプレート

例）レコメンドアイテム（商品）が1位「青いアロハ　ポイント数10ポイント」2位「黒いアロハ　ポイント数50ポイント」3位「オレンジのアロハ　ポイント数100ポイント」の場合

  #{if(total,0)}
  レコメンドアイテムはありません
  #{else}
  #{item(1,3)}
  <ul>
  <li>#{name}  [ #{point}ポイント進呈 ]</li>
  </ul>
  #{/item}
  #{/if}

↓↓レコメンドアイテム（商品）の1位から3位のものをポイント数付きで表示

  -   青いアロハ　［10ポイント進呈］
  -   黒いアロハ　［50ポイント進呈］
  -   オレンジのアロハ　［100ポイント進呈］

`#{stock}`のカスタマイズ方法（在庫数の表示）

例）レコメンドアイテム（商品）が「青いアロハ　在庫数10枚」の場合

#{stock}を記述すると「在庫数」を繰り返し表示します。

  #{item}
  #{stock}  //10  と表示されます
  #{/item}

サンプルテンプレート

例）レコメンド商品が1位「青いアロハ　在庫数10枚」2位「黒いアロハ　在庫数9枚」3位「オレンジのアロハ　在庫数8枚」の場合

  #{if(total,0)}
  レコメンドアイテムはありません
  #{else}
  #{item(1,3)}
  <ul>
  <li>#{name}  残り#{stock}個</li>
  </ul>
  #{/item}
  #{/if}

↓↓レコメンドアイテム（商品）の1位から3位を在庫数付きで表示

  -   青いアロハ　残り10枚
  -   黒いアロハ　残り9枚
  -   オレンジのアロハ　残り8枚

※#{if(stock)}{/if}を記述すると在庫登録がある場合のみ、在庫数を表示可能です。詳しくはif 制御構造についてをご覧ください。

【重要】aタグの記述について

#{url}以外の <a href> でアイテム（商品）へリンクを張る場合は、必ず「class="rcmdjp"」を付けてください。
「class="rcmdjp"」が無い場合はクリック数が取れません。

<a href="/items/#{code}" class="rcmdjp">商品ページへのリンク</a>

script javaScriptを挿入する場合

テンプレート中にJavaScriptを挿入したい場合は下記のように記述します。

※<script>タグはご利用いただけません。

  #{script}
  alert('hello!');
  #{/script}

if 制御構造について

▼「商品画像」が存在する場合のみに「画像」を表示します。

  #{item}
  #{if(image)} ... #{/if}
  #{/item}

サンプルテンプレート

例）レコメンド商品が3位「青いアロハ」4位「オレンジのアロハ」5位「黒いアロハ」で、4位の「オレンジアロハ」の画像登録がない場合

  #{if(total,0)}
  レコメンドアイテムはありません
  #{else}
  #{item(3,5)}
  <ul>
  <li>
  #{if(image)}
  #{num}位<br><img src="#{image}"><br>#{name}
  #{/if}
  </li>
  </ul>
  #{/item}
  #{/if}

↓↓レコメンドアイテム（商品）の3位から5位の画像がある商品のみを表示

▼在庫数」が存在する場合のみに「在庫数」を表示します。

※futureshop側の管理画面より設定された在庫数表示の設定に関係なく、在庫数登録がある場合表示されますのでご注意ください。

  #{item}
  #{if(stock)}・・・#{stock}
  #{/if}
  #{/item}

サンプルテンプレート

例）レコメンド商品が3位「青いアロハ在庫数10枚」4位「黒いアロハ　在庫登録なし」5位「オレンジのアロハ　在庫数0枚」の場合

  #{if(total,0)}
  レコメンドアイテムはありません
  #{else}
  #{item(3,5)}
  <ul>
  <li>
  #{name}#{if(stock)}残り#{stock}個#{/if}
  </li>
  </ul>
  #{/item}
  #{/if}

↓↓レコメンドアイテム（商品）の3位から5位の商品で、在庫登録がある場合は在庫数を表示

-   青いアロハ　残り10枚
-   黒いアロハ
-   オレンジのアロハ　残り0枚

▼第2引数を指定するとカラムの値がそれに等しいときだけ表示されます。

  #{item}
  #{if(name,青いアロハ)} ... #{/if}  //商品名が「青いアロハ」の場合のみ#{if}･･･#{/if}で囲った部分を表示
  #{/item}

  #{item}
  #{if(num,1)} ... #{/if}  //レコメンド順位が1位の場合のみ#{if}･･･#{/if}で囲った部分を表示
  #{/item}

▼#{else}を使用すると条件に合わない場合の表示を指定できます。

  #{if(image)}
  「画像があります」  //画像がある場合は「画像があります」を表示
  #{else}
  「noimageです」  //画像がない場合は「noimageです」を表示
  #{/if}

バリエーション価格ご利用時の最大価格の表示について

操作手順

見出しの変更方法

独自コードでのカスタマイズ

アイテムループ #{item} ･･･ #{/item} とループ内で表示可能な項目

表示するレコメンド商品の順位を指定したい場合のカスタマイズ方法

#{name}のカスタマイズ方法（商品名の表示）

サンプルテンプレート

#{num}のカスタマイズ方法（レコメンド順位の表示）

サンプルテンプレート

#{image}のカスタマイズ方法（商品画像の表示）

サンプルテンプレート

#{price}のカスタマイズ方法（商品価格の表示）

サンプルテンプレート

#{url}のカスタマイズ方法（商品ページURLの表示）

サンプルテンプレート

#{code}のカスタマイズ方法（商品URLコードの表示）

サンプルテンプレート

#{memberprice}のカスタマイズ方法（会員価格の表示）

サンプルテンプレート

#{point}のカスタマイズ方法（購入ポイントの表示）

サンプルテンプレート

#{stock}のカスタマイズ方法（在庫数の表示）

サンプルテンプレート

【重要】aタグの記述について

script javaScriptを挿入する場合

if 制御構造について

サンプルテンプレート

サンプルテンプレート

アイテムループ `#{item} ･･･ #{/item}` とループ内で表示可能な項目

`#{name}`のカスタマイズ方法（商品名の表示）

`#{num}`のカスタマイズ方法（レコメンド順位の表示）

`#{image}`のカスタマイズ方法（商品画像の表示）

`#{price}`のカスタマイズ方法（商品価格の表示）

`#{url}`のカスタマイズ方法（商品ページURLの表示）

`#{code}`のカスタマイズ方法（商品URLコードの表示）

`#{memberprice}`のカスタマイズ方法（会員価格の表示）

`#{point}`のカスタマイズ方法（購入ポイントの表示）

`#{stock}`のカスタマイズ方法（在庫数の表示）