カスタム項目（部分テンプレート）
注文情報入力画面で利用するカスタム項目用部分テンプレートです。
注文情報入力画面で include して利用します。（注文情報入力画面以外では利用できません）
カスタム項目はオプション機能 (opens in a new tab)です。詳細はFAQ記事をご確認ください。
テーマ管理のファイルパス
ec_force/shop/orders/_view_free_columns.html.liquid
ec_force/shop/orders/_view_free_columns.html+smartphone.liquid
必要なコンポーネント
任意とあるもの以外はシステム上必要なコンポーネントとなりますので、必ず使用するようにしてください。
<!-- カスタム項目 -->
<!-- id,class,data属性等はJSで制御する際に必要なので変更不可 -->
<div id="view-free_columns">
{% if base_info.use_free_columns? and shop_form_settings['free_column'] and liquid_custom_field != empty %}
<!-- カスタム項目タイトル名 -->
{{ shop_form_settings['free_column_title'] }}
{% for custom_info_hash in liquid_custom_field %}
<div id="category-{{ custom_info_hash[0] }}" class="category-wrapper">
{% for seq_hash in custom_info_hash[1] %}
{% assign info = seq_hash[1] %}
<div id="category-{{ custom_info_hash[0] }}-{{ seq_hash[0] }}" class="category-container">
{% if info['category'] %}
<!-- カテゴリ名 -->
{{ info['category'] | escape }}
{% if info['category_multiple_answer'] %}
<!-- カテゴリ削除ボタン -->
<div class="category-minus" data-id="{{ custom_info_hash[0] }}" data-seq="{{ seq_hash[0] }}" style="display: none;">
削除<!-- 文字の変更可 -->
</div>
{% endif %}
{% endif %}
{% for i_hash in info['info'] %}
{% assign i = i_hash[1] %}
{% if i['required'] %}{% assign required_class = "validate[required]" %}{% else %}{% assign required_class = "" %}{% endif %}
<!-- 入力項目 -->
<div>
<label for="order_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}">
<!-- 入力項目名 -->
{{ i['label'] | escape }}
{% if i['maxlength'] and i['type'] == 'EcForce::FreeColumn::Textarea' %}
<!-- 残り文字数 -->
（残り<!-- 文字の変更可 -->
<span data-feedback-maxlength="order_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}"></span>
文字）<!-- 文字の変更可 -->
{% endif %}
</label>
{% if i['required'] %} 必須<!-- 文字の変更可 --> {% endif %}
<!-- 入力項目形式 -->
{% if i['minlength'] %}{% assign min = i['minlength'] %}{% else %}{% assign min = '' %}{% endif %}
{% if i['maxlength'] %}{% assign max = i['maxlength'] %}{% else %}{% assign max = '' %}{% endif %}
{% case i['type'] %}
{% when 'EcForce::FreeColumn::Textarea' %}
{% for v in i['value'] %}
{% if i['is_valid_format'] == true %}{% assign value = v | escape %}{% else %}{% assign value = '' %}{% endif %}
<textarea class="free_columns validate[minSize[{{ min }}],maxSize[{{ max }}]] send_feedback_maxlength {{ required_class }}" data-id="{{ i['free_column_id'] }}" data-prompt-position="topLeft" placeholder="{{ i['placeholder'] }}" rows="5" maxlength="{{ max }}" name="order[free_columns][{{ custom_info_hash[0] }}][{{ seq_hash[0] }}][{{ i['free_column_id'] }}]" id="order_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}">{{ value }}</textarea>
{% endfor %}
{% when 'EcForce::FreeColumn::Input' %}
{% for v in i['value'] %}
{% if i['is_valid_format'] == true %}{% assign value = v | escape %}{% else %}{% assign value = '' %}{% endif %}
{% case i['input_type_name'] %}
{% when 'メール' %}
<input type="email" class="free_columns validate[custom[email],minSize[{{ min }}],maxSize[{{ max }}]] {{ required_class }}" data-id="{{ i['free_column_id'] }}" data-prompt-position="topLeft" value="{{ value }}" placeholder="{{ i['placeholder'] }}" name="order[free_columns][{{ custom_info_hash[0] }}][{{ seq_hash[0] }}][{{ i['free_column_id'] }}]" id="order_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}" maxlength="{{ max }}" size="{{ max }}">
{% when '日付' %}
<input type="text" class="free_columns datepicker validate[minSize[{{ min }}],maxSize[{{ max }}],custom[date]] {{ required_class }}" data-id="{{ i['free_column_id'] }}" data-prompt-position="topLeft" value="{{ value }}" placeholder="{{ i['placeholder'] }}" name="order[free_columns][{{ custom_info_hash[0] }}][{{ seq_hash[0] }}][{{ i['free_column_id'] }}]" id="order_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}" maxlength="{{ max }}" size="{{ max }}">
{% when '数字' %}
<input type="number" class="free_columns validate[custom[integer],min[{{ min }}],max[{{ max }}]] {{ required_class }}" data-id="{{ i['free_column_id'] }}" data-prompt-position="topLeft" value="{{ value }}" placeholder="{{ i['placeholder'] }}" name="order[free_columns][{{ custom_info_hash[0] }}][{{ seq_hash[0] }}][{{ i['free_column_id'] }}]" id="order_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}" maxlength="{{ max }}" size="{{ max }}">
{% when 'テキスト' %}
<input type="text" class="free_columns validate[minSize[{{ min }}],maxSize[{{ max }}]] {{ required_class }}" data-id="{{ i['free_column_id'] }}" data-prompt-position="topLeft" value="{{ value }}" placeholder="{{ i['placeholder'] }}" name="order[free_columns][{{ custom_info_hash[0] }}][{{ seq_hash[0] }}][{{ i['free_column_id'] }}]" id="order_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}" maxlength="{{ max }}" size="{{ max }}">
{% endcase %}
{% endfor %}
{% else %}
{% assign free_column_options = i['options'] %}
{% case i['type'] %}
{% when 'EcForce::FreeColumn::Checkbox' %}
{% for option in free_column_options %}
{% if option['default'] == true %}{% assign default = '1' %}{% else %}{% assign default = '0' %}{% endif %}
{% if i['value'] contains option['value'] %}{% assign checked = 'checked="checked"' %}{% else %}{% assign checked = "" %}{% endif %}
{% if i['value'].size == 1 and i['value'][0] == '' and option['default'] == true %}{% assign checked = 'checked="checked"' %}{% elsif i['is_valid_format'] == false and option['default'] == true %}{% assign checked = 'checked="checked"' %}{% endif %}
<input class="free_columns {{ required_class }}" data-id="{{ i['free_column_id'] }}" data-prompt-position="topLeft" data-default="{{ default }}" type="checkbox" value="{{ option['key'] }}" {{ checked }} name="order[free_columns][{{ custom_info_hash[0] }}][{{ seq_hash[0] }}][{{ i['free_column_id'] }}][]" id="order_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}_{{ option['key'] }}">
<label for="order_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}_{{ option['key'] }}">{{ option['value'] | escape }}</label>
{% endfor %}
{% when 'EcForce::FreeColumn::Radio' %}
{% if i['required'] %}
<input class="free_columns" data-id="{{ i['free_column_id'] }}" data-prompt-position="topLeft" type="hidden" name="order[free_columns][{{ custom_info_hash[0] }}][{{ seq_hash[0] }}][{{ i['free_column_id'] }}]">
{% else %}
<input class="free_columns {{ required_class }}" data-id="{{ i['free_column_id'] }}" data-prompt-position="topLeft" data-default="0" type="radio" value="" checked="checked" name="order[free_columns][{{ custom_info_hash[0] }}][{{ seq_hash[0] }}][{{ i['free_column_id'] }}]" id="order_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}_">
<label for="order_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}_">未設定</label>
{% endif %}
{% for option in free_column_options %}
{% if option['default'] == true %}{% assign default = '1' %}{% else %}{% assign default = '0' %}{% endif %}
{% if i['value'] contains option['value'] %}{% assign checked = 'checked="checked"' %}{% else %}{% assign checked = "" %}{% endif %}
{% if i['value'].size == 1 and i['value'][0] == '' and option['default'] == true %}{% assign checked = 'checked="checked"' %}{% elsif i['is_valid_format'] == false and option['default'] == true %}{% assign checked = 'checked="checked"' %}{% endif %}
<input class="free_columns {{ required_class }}" data-id="{{ i['free_column_id'] }}" data-prompt-position="topLeft" data-default="{{ default }}" type="radio" value="{{ option['key'] }}" {{ checked }} name="order[free_columns][{{ custom_info_hash[0] }}][{{ seq_hash[0] }}][{{ i['free_column_id'] }}]" id="order_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}_{{ option['key'] }}">
<label for="order_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}_{{ option['key'] }}">{{ option['value'] | escape }}</label>
{% endfor %}
{% else %}
{% if i['multiple_flag'] %}{% assign multiple = 'multiple="multiple"' %}{% else %}{% assign multiple = '' %}{% endif %}
<input class="free_columns" data-id="{{ i['free_column_id'] }}" data-prompt-position="topLeft" name="order[free_columns][{{ custom_info_hash[0] }}][{{ seq_hash[0] }}][{{ i['free_column_id'] }}][]" type="hidden" value="">
<select {{ multiple }} class="free_columns form-control input-sm {{ required_class }}" data-id="{{ i['free_column_id'] }}" data-prompt-position="topLeft" style="resize: vertical;" name="order[free_columns][{{ custom_info_hash[0] }}][{{ seq_hash[0] }}][{{ i['free_column_id'] }}][]" id="order_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}">
{% unless i['multiple_flag'] %}
<option data-default="0" value="{{ option['key'] }}" selected="selected">未設定</option>
{% endunless %}
{% for option in free_column_options %}
{% if option['default'] == true %}{% assign default = '1' %}{% else %}{% assign default = '0' %}{% endif %}
{% if i['value'] contains option['value'] %}{% assign selected = 'selected="selected"' %}{% else %}{% assign selected = "" %}{% endif %}
{% if i['value'].size == 1 and i['value'][0] == '' and option['default'] == true %}{% assign selected = 'selected="selected"' %}{% elsif i['is_valid_format'] == false and option['default'] == true %}{% assign selected = 'selected="selected"' %}{% endif %}
<option data-default="{{ default }}" value="{{ option['key'] }}" {{ selected }}>{{ option['value'] | escape }}</option>
{% endfor %}
</select>
{% endcase %}
{% endcase %}
</div>
{% endfor %}
{% if info['category'] and info['category_multiple_answer'] %}
<!-- カテゴリ追加ボタン -->
<div class="category-plus" data-id="{{ custom_info_hash[0] }}" data-seq="{{ seq_hash[0] }}" style="display: none;">
<div>入力欄追加<!-- 文字の変更可 --></div>
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% endfor %}
{% endif %}
</div>