各種マスタに自社ならではの項目を追加！自由項目のよくある使い方解説
自由項目の基本的な使い方と6大活用事例！
ebisumartでは、商品や受注、会員等の各種データで店舗様で自由に項目追加ができる「自由項目」という機能があります。
標準で用意されている項目以外の項目を使いたい場合、この自由項目を使って追加します。
このページでは、自由項目の基本的な使い方とともに、活用事例をご紹介します。
① 自由項目の基本的な使い方
② 自由項目活用事例
③ 各自由項目の関連箇所一覧
④ よくあるお問い合わせ
① 自由項目の基本的な使い方
システム設定 > 自由項目管理 > 自由項目登録・照会
追加したい項目をドロップダウンリストから選択し、「編集」画面を開き、項目の内容を編集していきます。
項目形式は下記からお選びいただけます。
・1行テキスト
・プルダウン
・チェックボックス
・ラジオボタン
・テキストエリア
・パスワード（1行テキスト）
・画像
・ラベル（表示のみ）
追加した自由項目を有効にするためには、「利用フラグ」を「使用する」にしてください。
管理画面上のどの項目（メニュー・画面）に追加されかは、こちらの一覧をご覧ください。
一覧を見る② 自由項目活用事例
各種自由項目の活用事例をご紹介します。下記目次をクリックすると、事例にリンクします。
事例1．商品詳細ページに表示する商品画像を増やしたい(画像形式)
事例2．複数ある商品シリーズの中から、選択したシリーズ名を表示したい(プルダウン)
事例3．JANコードを商品（バリエーション単位）に紐づけて管理したい(1行テキスト)
事例4．カテゴリ一覧でカテゴリ名だけでなくアイコンも表示したい(画像形式)
事例5．納品書に金額を表示するかどうかの項目を受注ヘッダに追加したい(ラジオボタン)
事例6．店舗独自で収集した会員属性情報にあわせてメルマガを送信したい(ラジオボタン／チェックボックス)
事例1．商品詳細ページに表示する商品画像を増やしたい
利用する自由項目と自由項目入力形式
商品／画像形式
追加イメージ
ソースコードサンプル
例）商品の自由項目の「FREE_ITEM5」「FREE_ITEM8」「FREE_ITEM9」を追加した場合の例
下記、標準（最新版）テンプレート「item_detail.xhtml」の90行目あたりが目安です。
<div id="targetarea">
<div id="main_box">
～省略～
<!-- 自由項目5で登録した画像 -->
<div class="img_box" id="show04" m:id='IF_FREE_VALUE' m:free_item_no='5'>
<img m:id='FREE_IMAGE_TAG' m:free_item_no='5' src="images/sample.jpg" alt="自由項目5" />
</div>
<!-- 自由項目8で登録した画像 -->
<div class="img_box" id="show05" m:id='IF_FREE_VALUE' m:free_item_no='8'>
<img m:id='FREE_IMAGE_TAG' m:free_item_no='8' src="images/sample.jpg" alt="自由項目8" />
</div>
<!-- 自由項目9で登録した画像 -->
<div class="img_box" id="show06" m:id='IF_FREE_VALUE' m:free_item_no='9'>
<img m:id='FREE_IMAGE_TAG' m:free_item_no='9' src="images/sample.jpg" alt="自由項目9" />
</div>
</div>
<ul class="thumb">
～省略～
<!-- 自由項目5で登録した画像 -->
<li m:id='IF_FREE_VALUE' m:free_item_no='5'>
<a href="javascript:void(0)" class="show04">
<img m:id='FREE_IMAGE_TAG' m:free_item_no='5' src="images/sample.jpg" alt="" title="" />
</a>
</li>
<!-- 自由項目8で登録した画像 -->
<li m:id='IF_FREE_VALUE' m:free_item_no='8'>
<a href="javascript:void(0)" class="show05">
<img m:id='FREE_IMAGE_TAG' m:free_item_no='8' src="images/sample.jpg" alt="" title="" />
</a>
</li>
<!-- 自由項目9で登録した画像 -->
<li m:id='IF_FREE_VALUE' m:free_item_no='9'>
<a href="javascript:void(0)" class="show06">
<img m:id='FREE_IMAGE_TAG' m:free_item_no='9' src="images/sample.jpg" alt="" title="" />
</a>
</li>
</ul>
</div>
事例2．複数ある商品シリーズの中から、選択したシリーズ名を表示したい
利用する自由項目／自由項目入力形式
商品／プルダウン形式
追加イメージ
ソースコードサンプル
例）商品の自由項目の「FREE_ITEM12」を追加した場合の例
<span m:id='IF_FREE_VALUE' m:free_item_no='12'>
<!-- シリーズAが選択されていた場合 -->
<span m:id='IF_FREE_ITEM_VALUE_MATCH' m:free_item_no='12' m:free_item_value='シリーズA' class="item_seriesA item_series_icon">シリーズA</span>
<!-- シリーズBが選択されていた場合 -->
<span m:id='IF_FREE_ITEM_VALUE_MATCH' m:free_item_no='12' m:free_item_value='シリーズB' class="item_seriesB item_series_icon">シリーズB</span>
<!-- シリーズCが選択されていた場合 -->
<span m:id='IF_FREE_ITEM_VALUE_MATCH' m:free_item_no='12' m:free_item_value='シリーズC' class="item_seriesC item_series_icon">シリーズC</span>
<!-- シリーズDが選択されていた場合 -->
<span m:id='IF_FREE_ITEM_VALUE_MATCH' m:free_item_no='12' m:free_item_value='シリーズD' class="item_seriesD item_series_icon">シリーズD</span>
</span>
CSSコードサンプル
.item_series_icon{color: #FFFFFF; display: inline-block; font-size: 12px; font-weight: normal; line-height: 1; padding: 8px 40px; vertical-align: text-bottom;}/*アイコン共通設定*/
.item_seriesA{background: #319EA1;}/*シリーズA*/
.item_seriesB{background: #FF945A;}/*シリーズB*/
.item_seriesC{background: #D14A89;}/*シリーズC*/
.item_seriesD{background: #81C8BF;}/*シリーズD*/
事例3．JANコードを商品（バリエーション単位）に紐づけて管理したい
利用する自由項目／自由項目入力形式
商品・バリエーション／1行テキスト形式
追加イメージ
事例4．カテゴリ一覧でカテゴリ名だけでなくアイコンも表示したい
利用する自由項目／自由項目入力形式
カテゴリ／画像形式
追加イメージ
ソースコードサンプル
例）カテゴリの自由項目の「FREE_ITEM4」を追加した場合の例
標準（最新版）テンプレートの場合「common/sidebar.xhtml」です。
<div m:id='common.IF_TOP_CATEGORY' id="category">
<h2>カテゴリ一覧</h2>
<ul>
<li m:id='common.LOOP_TOP_CATEGORY'>
<span m:id='common.IF_TOP_CATEGORY_SELECTED' m:NOT="">
<a m:id='common.TOP_CATEGORY_LINK_TAG' href="">
<!-- カテゴリアイコンが登録されている場合登録した画像を表示する -->
<span m:id='common.IF_TOP_CATEGORY_FREE_VALUE' m:free_item_no='4'>
<img m:id='common.TOP_CATEGORY_FREE_IMAGE_TAG' m:free_item_no='4' src="images/sample.jpg" alt="" />
</span>
<span m:id='common.TOP_CATEGORY_NAME_HERE'>カテゴリ名</span><span m:id='common.TOP_CATEGORY_COUNT_HERE'>(10)</span>
</a>
</span>
<span m:id='common.IF_TOP_CATEGORY_SELECTED'>
<a m:id='common.TOP_CATEGORY_LINK_TAG' href="" class="select">
<!-- カテゴリアイコンが登録されている場合登録した画像を表示する -->
<span m:id='common.IF_TOP_CATEGORY_FREE_VALUE' m:free_item_no='4'>
<img m:id='common.TOP_CATEGORY_FREE_IMAGE_TAG' m:free_item_no='4' src="images/sample.jpg" alt="" />
</span>
<span m:id='common.TOP_CATEGORY_NAME_HERE'>カテゴリ名</span><span m:id='common.TOP_CATEGORY_COUNT_HERE'>(10)</span>
</a>
</span>
</li>
</ul>
</div>
事例5．納品書に金額を表示するかどうかの項目を受注ヘッダに追加したい
利用する自由項目／自由項目入力形式
受注ヘッダ／ラジオボタン形式
「金額を表示しない」と選択された場合、自動で納品書の金額を非表示にするものではありません。ご注意ください。
追加イメージ
事例6．店舗独自で収集した会員属性情報にあわせてメルマガを送信したい
利用する自由項目／自由項目入力形式
例えば、会員の自由項目に下記のような項目を追加します。
登録すると、サイト上の新規会員登録ページに登録された項目が表示されます。
・よく行く店舗はどこですか？
項目入力形式：チェックボックス形式
項目選択肢：東京店,神奈川店,千葉店,茨城店,埼玉店,群馬店,山梨店,実店舗に行ったことがない
・あなたのご職業についてお教えください
項目入力形式：ラジオボタン形式
項目選択肢：学生,会社員,パート・アルバイト,自営業,主婦,その他
・年代（ラジオボタン形式）
項目選択肢：～20代,20～30代,30～40代,40代～50代,50～60代,60代～
メルマガ配信時、配信セグメント選択画面で対象の自由項目を選択します。
メニュー：プロモーション>メルマガ管理>予約／配信
下記イメージ図の③では、「良くいく店舗が東京」かつ「職業が会社員／パート・アルバイト／自営業」かつ「20～40代」の会員にのみ、特定のメルマガを配信できます。
追加イメージ
④ 自由項目機能 Q&A
- 自由項目はいくつまで追加できますか？
-
下記ご確認ください。
■ 50個まで追加可能
商品・会員・受注ヘッダ・受注明細・取引先・商品・商品バリエーション・カテゴリ・配送方法
■ 20個まで追加可能
上記以外の自由項目 - 自由項目を管理画面上で追加したのですが、サイトに表示されません。
-
該当するテンプレートに自由項目を表示する記述があるかどうか、まずはご確認ください。活用事例にサンプルコードを記述していますので、そちらもあわせてご覧ください。
- 自由項目マッピングとは何ですか？
-
従来、ebisumartの標準機能では自由項目同士のデータを共有することができませんでしたが、自由項目のデータを他のデータの自由項目として共有できるようになりました。 その機能が自由項目マッピングです。使い方を特集ページでご紹介しています。
特集ページはこちら - 設定した商品の自由項目を表示させたいのですが、サンプルはありますか？
-
以下サンプルソースです。その他事例は自由項目活用事例もご覧ください。
・画像の場合 <img m:id="FREE_IMAGE_TAG" src='sample.jpg free_item_no="1">商品自由項目の値をURLとする画像を表示します。</img> ・URLの場合 <a m:id="FREE_LINK_TAG" free_item_no="1">商品自由項目の値に設定されたURLにリンクします。</a> ・テキストの場合 <span m:id="FREE_VALUE_HERE" free_item_no="1">商品自由項目の値を出力します。</span> ・HTMLの場合 <span m:id="FREE_VALUE_HTML_HERE" free_item_no="1">商品自由項目の値を出力します。HTMLでの表示に対応します。</span>
