会員情報変更画面
会員がマイページにログインした後、自身の基本情報を変更する画面です。
表示項目やフォーム項目数は「設定 > 購入/フォーム > ショップフォーム設定 (opens in a new tab)」での設定と連動します。
退会操作について
この画面では退会ボタンを表示することができます。(「ショップ管理 > 各種設定 > マイページ設定 (opens in a new tab)」で制御可能。)
- 決済状況が「仮売上完了」「与信審査完了」「入金待ち」の注文がある場合は退会できません。
- ステータスが「有効」な定期受注がある場合は退会できません。
- 退会してしまうと全ての機能が使えなくなります(マイページログインができなくなります)
- 退会ボタンを押すとポップアップが表示され、OKを押すと退会処理されます。
- パスワードを入れさせて退会するなどの動作変更は仕様上できません。
カスタム項目 (opens in a new tab)はオプション機能です。
本画面で確認・変更させるカスタム項目は ecforce管理画面の「ショップ管理 > 各種設定 > マイページ設定 (opens in a new tab)」での設定が必要です。
ショップのパス
ドメイン/shop/customer/edit
テーマ管理のファイルパス
ec_force/shop/customer/base/edit.html.liquid
ec_force/shop/customer/base/edit.html+smartphone.liquid
JS タグ
{{ 'shop/customer/base' | javascript_include_tag }}
必要なコンポーネント
※任意とあるもの以外はシステム上必要なコンポーネントとなりますので、必ず使用するようにしてください。
{{ 'shop/customer/base' | javascript_include_tag }}
<!-- 会員情報変更コンテナ -->
<div id="customer-edit-view">
<!-- フラッシュメッセージ -->
{{ 'notice' | flash: 'alert alert-success', 'text' }}
{{ 'alert' | flash: 'alert alert-danger', 'text' }}
{{ 'error' | flash: 'alert alert-danger', 'text' }}
<!-- 会員情報変更フォーム -->
<form id="customer_form" action="/shop/customer" accept-charset="UTF-8" method="post">
<input name="_method" type="hidden" value="put">
{% if current_customer.error_messages != empty %}
{% for error_message in current_customer.error_messages %}
{{ error_message }}
{% endfor %}
{% endif %}
<!-- 会員番号 -->
<label for="customer_friendly_id">会員番号</label>
<input disabled="disabled" type="text" value="{{ current_customer.number }}" name="customer[friendly_id]" id="customer_friendly_id">
<!-- お名前 -->
<label for="customer_billing_address_attributes_name01">お名前</label>
{% if shop_form_settings['name_1_field'] %}
<input class="validate[required]" type="text" value="{{ current_customer.billing_address.full_name }}" name="customer[billing_address_attributes][name01]" autocomplete="name" id="customer_billing_address_attributes_name01">
{% else %}
<input class="validate[required]" type="text" value="{{ current_customer.billing_address.name01 }}" name="customer[billing_address_attributes][name01]" autocomplete="family-name" id="customer_billing_address_attributes_name01">
<input class="validate[required]" type="text" value="{{ current_customer.billing_address.name02 }}" name="customer[billing_address_attributes][name02]" autocomplete="given-name" id="customer_billing_address_attributes_name02">
{% endif %}
<!-- フリガナ -->
<label for="customer_billing_address_attributes_kana01">フリガナ</label>
{% if shop_form_settings['kana_1_field'] %}
<input class="validate[required,custom[katakana]]" type="text" value="{{ current_customer.billing_address.full_kana }}" name="customer[billing_address_attributes][kana01]" id="customer_billing_address_attributes_kana01">
{% else %}
<input class="validate[required,custom[katakana]]" type="text" value="{{ current_customer.billing_address.kana01 }}" name="customer[billing_address_attributes][kana01]" id="customer_billing_address_attributes_kana01">
<input class="validate[required,custom[katakana]]" type="text" value="{{ current_customer.billing_address.kana02 }}" name="customer[billing_address_attributes][kana02]" id="customer_billing_address_attributes_kana02">
{% endif %}
<!-- 郵便番号 -->
<label for="customer_billing_address_attributes_zip01">郵便番号</label>
〒
{% if shop_form_settings['zip_1_field'] %}
<input class="validate[required,custom[integer],minSize[7]]" type="tel" value="{{ current_customer.billing_address.full_zip }}" name="customer[billing_address_attributes][zip01]" autocomplete="postal-code" id="customer_billing_address_attributes_zip01" maxlength='7'>
{% else %}
<input class="validate[required,custom[integer],minSize[3]]" type="tel" value="{{ current_customer.billing_address.zip01 }}" name="customer[billing_address_attributes][zip01]" autocomplete="postal-code" id="customer_billing_address_attributes_zip01" maxlength='3'>
−
<input class="validate[required,custom[integer],minSize[4]]" type="tel" value="{{ current_customer.billing_address.zip02 }}" name="customer[billing_address_attributes][zip02]" autocomplete="none" id="customer_billing_address_attributes_zip02" maxlength='4'>
{% endif %}
<!-- 都道府県 -->
<label for="customer_billing_address_attributes_prefecture_name">都道府県</label>
<select class="validate[required]" name="customer[billing_address_attributes][prefecture_name]" id="customer_billing_address_attributes_prefecture_name">
<option value="">選択してください</option>
{% for prefecture in prefectures %}
<option value='{{ prefecture.name }}' {% if current_customer.billing_address.prefecture.name == prefecture.name %}selected{% endif %}>{{ prefecture.name }}</option>
{% endfor %}
</select>
<!-- 住所 -->
<label for="customer_billing_address_attributes_addr01">住所</label>
<input class="validate[required]" type="text" value="{{ current_customer.billing_address.addr01 }}" name="customer[billing_address_attributes][addr01]" id="customer_billing_address_attributes_addr01">
{% if shop_form_settings['addr03'] %}
<input class="validate[required]" type="text" value="{{ current_customer.billing_address.addr02 }}" name="customer[billing_address_attributes][addr02]" id="customer_billing_address_attributes_addr02">
<input type="text" value="{{ current_customer.billing_address.addr03 }}" name="customer[billing_address_attributes][addr03]" id="customer_billing_address_attributes_addr03">
{% else %}
<input class="validate[required]" type="text" value="{{ current_customer.billing_address.addr02 }}{{ current_customer.billing_address.addr03 }}" name="customer[billing_address_attributes][addr02]" id="customer_billing_address_attributes_addr02">
{% endif %}
<!-- 電話番号 -->
<label for="customer_billing_address_attributes_tel01">電話番号</label>
{% if shop_form_settings['tel_1_field'] %}
<input class="validate[required,custom[integer]]" type="tel" value="{{ current_customer.billing_address.full_tel }}" name="customer[billing_address_attributes][tel01]" autocomplete="tel" id="customer_billing_address_attributes_tel01" maxlength='12'>
{% else %}
<input class="validate[required,custom[integer]]" type="tel" value="{{ current_customer.billing_address.tel01 }}" name="customer[billing_address_attributes][tel01]" autocomplete="none" id="customer_billing_address_attributes_tel01" maxlength='5'>
−
<input class="validate[required,custom[integer]]" type="tel" value="{{ current_customer.billing_address.tel02 }}" name="customer[billing_address_attributes][tel02]" autocomplete="none" id="customer_billing_address_attributes_tel02" maxlength='4'>
−
<input class="validate[required,custom[integer]]" type="tel" value="{{ current_customer.billing_address.tel03 }}" name="customer[billing_address_attributes][tel03]" autocomplete="none" id="customer_billing_address_attributes_tel03" maxlength='4'>
{% endif %}
<!-- FAX番号 -->
{% if shop_form_settings['fax'] %}
<label for="customer_billing_address_attributes_fax01">FAX番号</label>
{% if shop_form_settings['fax_1_field'] %}
<input type="tel" value="{{ current_customer.billing_address.full_fax }}" name="customer[billing_address_attributes][fax01]" id="customer_billing_address_attributes_fax01" maxlength='12'>
{% else %}
<input type="tel" value="{{ current_customer.billing_address.fax01 }}" name="customer[billing_address_attributes][fax01]" id="customer_billing_address_attributes_fax01" maxlength='5'>
−
<input type="tel" value="{{ current_customer.billing_address.fax02 }}" name="customer[billing_address_attributes][fax02]" id="customer_billing_address_attributes_fax02" maxlength='4'>
−
<input type="tel" value="{{ current_customer.billing_address.fax03 }}" name="customer[billing_address_attributes][fax03]" id="customer_billing_address_attributes_fax03" maxlength='4'>
{% endif %}
{% endif %}
<!-- 会社名 -->
{% if shop_form_settings['company'] %}
<label for="customer_billing_address_attributes_company_name">会社名</label>
<input type="text" value="{{ current_customer.billing_address.company_name}}" name="customer[billing_address_attributes][company_name]" autocomplete="organization" id="customer_billing_address_attributes_company_name">
{% endif %}
<input type="hidden" value="{{ current_customer.billing_address.id }}" name="customer[billing_address_attributes][id]" id="customer_billing_address_attributes_id">
{% if subs_orders.size > 0 %}
<!-- 上記のお届先情報の変更を反映させる購入済定期便一覧 -->
<label for="address_customer_shipping_subs_orders">購入済の定期便に反映させる</label>
<!-- 全てに変更を反映させるチェックボックス -->
<input id="toggle_all_subs_orders" type="checkbox"{% if default_checked %} checked="checked"{% endif %}>
{% for subs_order in subs_orders %}
<!-- 変更を反映させるチェックボックス -->
<input name="subs_order_numbers[]" type="checkbox" value="{{ subs_order.number }}"{% if default_checked %} checked="checked"{% endif %}>
<!-- 定期番号 -->
{% if enabled_pre_order and subs_order.orders.first.unshipped_pre_order? %}
{{ subs_order.number }}
{% else %}
<a href="/shop/customer/subs_orders/{{ subs_order.number }}">{{ subs_order.number }}</a>
{% endif %}
<!-- ステータス(任意) -->
{{ subs_order.human_state_name }}
<!-- 小計(任意) -->
{{ subs_order.subtotal | number_to_currency: format: '%n %u' }}
<!-- 作成日(任意) -->
{{ subs_order.created_at | date: "%Y/%m/%d %H:%M" }}
<!-- 商品名(任意) -->
{{ subs_order.order_items | map: 'variant' | map: 'product' | map: 'name' | join ',' }}
<!-- お届け先(任意) -->
{{ subs_order.shipping_address.full_address }}
<!-- 次回配送予定日(任意) -->
{% if enabled_pre_order and subs_order.orders.first.unshipped_pre_order? %}
*予約中
{% else %}
{{ subs_order.scheduled_to_be_delivered_at | date: "%Y/%m/%d" }}
{% endif %}
{% endfor %}
<!-- 次回配送予定日の変更が許可されているか(任意) -->
{% if base_info.scheduled_to_be_delivered_at_changeable_on_mypage? %}
<!-- 受注変更可能日(任意) -->
{% if subs_order_settings['new_order_creation_origin?'] %}
※定期情報の変更をする場合は、次回発送予定日の{{ subs_order_settings['create_new_order_x_days_before_shipping'] | plus: '1' }}日前までに行ってください。過ぎた場合は、次々回分からの受注に対して変更が反映されます。
{% else %}
※定期情報の変更をする場合は、次回配送予定日の{{ subs_order_settings['create_new_order_x_days_before_shipping'] | plus: '1' }}日前までに行ってください。過ぎた場合は、次々回分からの受注に対して変更が反映されます。
{% endif %}
{% endif %}
{% endif %}
<!-- メールアドレス -->
{% if shop_form_settings['email'] %}
<label for="customer_email">メールアドレス</label>
<input class="validate[required,custom[email]]" type="email" value="{{ current_customer.email }}" name="customer[email]" autocomplete="email" id="customer_email">
{% endif %}
<!-- 性別 -->
{% if shop_form_settings['sex'] %}
<label for="customer_sex_id">性別</label>
<select name="customer[sex_id]" id="customer_sex_id">
<option value="">選択してください</option>
{% for sex in sexes %}
<option value='{{ sex.id }}' {% if current_customer.sex.id == sex.id %}selected{% endif %}>{{ sex.name }}</option>
{% endfor %}
</select>
{% endif %}
<!-- 職業 -->
{% if shop_form_settings['job'] %}
<label for="customer_job_id">職業</label>
<select name="customer[job_id]" id="customer_job_id">
<option value="">選択してください</option>
{% for job in jobs %}
<option value='{{ job.id }}' {% if current_customer.job.id == job.id %}selected{% endif %}>{{ job.name }}</option>
{% endfor %}
</select>
{% endif %}
<!-- 生年月日 -->
{% if shop_form_settings['birth'] %}
<label for="customer_birth">生年月日</label>
<select id="customer_birth_1i" name="customer[birth(1i)]" autocomplete="bday-year" class="validate[condRequired[customer_birth_2i,customer_birth_3i]]">
{% if birth_year_default_value == 0 %}
<option value="">----</option>
{% endif %}
{% assign now_year = "now" | date: "%Y" %}
{% assign past_100_years = "now" | date: "%Y" | minus: 100 %}
{% for y in (past_100_years..now_year) %}
{% if birth_year_default_value == y %}
{% if order.customer.birth_year == nil %}
<option value="" selected="true">----</option>
{% else %}
<option value="">----</option>
{% endif %}
{% endif %}
<option value='{{ y }}' {% if current_customer.birth_year == y %}selected{% endif %}>{{ y }}</option>
{% endfor %}
</select>
年
<select id="customer_birth_2i" name="customer[birth(2i)]" autocomplete="bday-month" class="validate[condRequired[customer_birth_1i,customer_birth_3i]]">
<option value="">-</option>
{% for m in (1..12) %}
<option value='{{ m }}' {% if current_customer.birth_month == m %}selected{% endif %}>{{ m }}</option>
{% endfor %}
</select>
月
<select id="customer_birth_3i" name="customer[birth(3i)]" autocomplete="bday-day" class="validate[condRequired[customer_birth_1i,customer_birth_2i]]">
<option value="">-</option>
{% for d in (1..31) %}
<option value='{{ d }}' {% if current_customer.birth_day == d %}selected{% endif %}>{{ d }}</option>
{% endfor %}
</select>
日
{% endif %}
<!-- メールマガジン受信 -->
{% if shop_form_settings['optin_edit'] %}
<label for="customer_optin">メールマガジン受信</label>
<select name="customer[optin]" id="customer_optin">
<option value="1" {% if current_customer.optin == true %}selected{% endif %}>受け取る</option>
<option value="0" {% if current_customer.optin == false %}selected{% endif %}>受け取らない</option>
</select>
{% endif %}
<!-- カスタム項目 -->
<!-- id,class,data属性等はJSで制御する際に必要なので変更不可 -->
<div id="view-free_columns">
{% if base_info.use_free_columns? and base_info.use_free_columns_mypage and liquid_custom_field %}
<!-- カスタム項目タイトル名 -->
{{ base_info.free_columns_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="customer_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}">
<!-- 入力項目名 -->
{{ i['label'] | escape }}
{% if i['required'] %} ※<!-- 必須。文字の変更可 --> {% endif %}
</label>
<!-- 入力項目形式 -->
{% 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="customer[free_columns][{{ custom_info_hash[0] }}][{{ seq_hash[0] }}][{{ i['free_column_id'] }}]" id="customer_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="customer[free_columns][{{ custom_info_hash[0] }}][{{ seq_hash[0] }}][{{ i['free_column_id'] }}]" id="customer_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="customer[free_columns][{{ custom_info_hash[0] }}][{{ seq_hash[0] }}][{{ i['free_column_id'] }}]" id="customer_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}" maxlength="{{ max }}" size="{{ max }}">
{% when '数字' %}
<input type="tel" 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="customer[free_columns][{{ custom_info_hash[0] }}][{{ seq_hash[0] }}][{{ i['free_column_id'] }}]" id="customer_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="customer[free_columns][{{ custom_info_hash[0] }}][{{ seq_hash[0] }}][{{ i['free_column_id'] }}]" id="customer_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' %}
<input class="free_columns" data-id="{{ i['free_column_id'] }}" data-prompt-position="topLeft" name="customer[free_columns][{{ custom_info_hash[0] }}][{{ seq_hash[0] }}][{{ i['free_column_id'] }}][]" type="hidden">
{% 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="customer[free_columns][{{ custom_info_hash[0] }}][{{ seq_hash[0] }}][{{ i['free_column_id'] }}][]" id="customer_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}_{{ option['key'] }}">
<label for="customer_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="customer[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="customer[free_columns][{{ custom_info_hash[0] }}][{{ seq_hash[0] }}][{{ i['free_column_id'] }}]" id="customer_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}_">
<label for="customer_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="customer[free_columns][{{ custom_info_hash[0] }}][{{ seq_hash[0] }}][{{ i['free_column_id'] }}]" id="customer_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}_{{ option['key'] }}">
<label for="customer_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 %}
{% if i['multiple_flag'] %}
<input class="free_columns" data-id="{{ i['free_column_id'] }}" data-prompt-position="topLeft" name="customer[free_columns][{{ custom_info_hash[0] }}][{{ seq_hash[0] }}][{{ i['free_column_id'] }}][]" type="hidden">
{% endif %}
<select {{ multiple }} class="free_columns {{ required_class }}" data-id="{{ i['free_column_id'] }}" data-prompt-position="topLeft" style="resize: vertical;" name="customer[free_columns][{{ custom_info_hash[0] }}][{{ seq_hash[0] }}][{{ i['free_column_id'] }}][]" id="customer_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}">
{% unless i['multiple_flag'] %}
<option data-default="0" value="{{ option['key'] }}">未設定</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 %}
{% if i['maxlength'] and i['type'] == 'EcForce::FreeColumn::Textarea' %}
<!-- 残り文字数 -->
残り<!-- 文字の変更可 -->
<span data-feedback-maxlength="customer_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}"></span>
文字<!-- 文字の変更可 -->
{% endif %}
</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>
<!-- 送信ボタン -->
<input type="submit" name="commit" value="保存" data-disable-with="保存中...">
<!-- 退会ボタン -->
{% if base_info.customer_cancelable? %}
<a data-confirm="一度退会すると、アカウントは復元できなくなり、同じ定期受注は再開できなくなります。本当に退会しますか?" rel="nofollow" data-method="delete" href="/shop/customer">退会</a>
{% endif %}
<!-- 戻るボタン -->
<a href="/shop/customer">戻る</a>
</form>
</div>
画面イメージ
※こちらは、上記で紹介しているコンポーネントのコードにデフォルトデザインをCSSであてたイメージになります。コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。