店舗の状態にあわせて、上のボタンからいずれかを選択してください。表示される項目が変更されます。
上記のボタンは再選択できます。店舗の状態がわからない方はコマースクリエイターご利用状況の確認方法についてをご覧ください。
目次
各種レコメンド商品を表示する際のデザインテンプレートの確認とカスタマイズ、新規作成ができます。
初期登録されたテンプレート一覧が表示されます。
<表示項目>
テンプレートを作成、編集できます。デザイン確認とテンプレートカスタマイズができます。
<表示項目>
表示項目をカスタマイズするために必要な、独自コードの文法になります。
文字装飾やカラー、配置などのデザイン変更は、html+CSSにて行ってください。
#{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}
例)商品名の登録が「りんごの<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パターン
#{num}を記述すると「何番目(レコメンド順位)」かを繰り返し表示します。
例)レコメンドアイテム(商品)が3位「りんごのケーキ」4位「バナナのケーキ」5位「いちごのケーキ」の場合
#{if(total,0)} レコメンドアイテムはありません #{else} #{item(3,5)} <ul> <li>#{num}位 #{name}</li> </ul> #{/item} #{/if}
↓↓レコメンドアイテム(商品)の3位から5位のものを順位付きで表示
#{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位を画像付きで表示
例)販売価格が「リンゴのケーキ 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_before_tax)}円(+税:#{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位をカンマ区切り販売価格で表示
#{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付きで表示
#{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位を商品ページリンクとして表示
※futureshopではログイン状態による「会員価格の表示/非表示」が制御できますが、各種レコメンド表示ではできませんのでご注意ください。
※レコメンドに表示できるのは「会員価格」になります。「会員ステージ価格」は表示できません。
例)レコメンド商品が「青いアロハ 会員価格2,160円(税率8%)」
▼#{memberprice}を記述すると「会員価格」を繰り返し表示します。
#{item} #{memberprice} //2160と表示されます #{/item}
▼#{comma(memberprice_before_tax)}円(+税:#{comma(memberprice_tax)}円)と記述すると「税抜き会員価格価格+会員価格税」で繰り返し表示します。
#{item} #{comma(memberprice_before_tax)}円(+税:#{comma(memberprice_tax)}円) //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位をカンマ区切りの通常価格と会員価格付きで表示
例)レコメンド商品が「青いアロハ ポイント数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枚」の場合
#{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位を在庫数付きで表示
※#{if(stock)}{/if}を記述すると在庫登録がある場合のみ、在庫数を表示可能です。詳しくはif 制御構造についてをご覧ください。
#{url}以外の <a href> でアイテム(商品)へリンクを張る場合は、必ず「class="rcmdjp"」を付けてください。
「class="rcmdjp"」が無い場合はクリック数が取れません
<a href="/items/#{code}" class="rcmdjp">商品ページへのリンク</a>
テンプレート中にJavaScriptを挿入したい場合は下記のように記述します。
#{script} alert('hello!'); #{/script}
#{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位の商品で、在庫登録がある場合は在庫数を表示
#{item} #{if(name,青いアロハ)} ... #{/if} //商品名が「青いアロハ」の場合のみ#{if}・・・#{/if}で囲った部分を表示 #{/item}
#{item} #{if(num,1)} ... #{/if} //レコメンド順位が1位の場合のみ#{if}・・・#{/if}で囲った部分を表示 #{/item}
#{if(image)} 「画像があります」 //画像がある場合は「画像があります」を表示 #{else} 「noimageです」 //画像がない場合は「noimageです」を表示 #{/if}
各項目は以前からのECサイト用・コマースクリエイター用・共通の3種類があります。コマースクリエイター有効(切替前)は両方の項目が表示されます。
以前からのECサイト用項目で、コマースクリエイターでは使用しません。(右側にこちらの色の点線が表示されます。)
コマースクリエイター専用ECサイト用の項目です。以前からのECサイトには影響しません。(右側にこちらの色の点線が表示されます。)
上記以外は共通で使用する項目です。(何も表示されません。)