テーマ仕様書
shop
マイページ
基本情報
基本情報変更

会員情報変更画面

会員がマイページにログインした後、自身の基本情報を変更する画面です。
表示項目やフォーム項目数は「設定 > 購入/フォーム > ショップフォーム設定 (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であてたイメージになります。コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。