【新・Shopify マスターへの道】#10 アカウントページを作成しよう【2024 年最新版】

  <div data-address>
    <button
      type="button"
      aria-expanded="false"
      aria-controls="AddAddress"
    >
      {{ 'customer.addresses.add_new' | t }}
    </button>
    <div id="AddAddress">
      <h2 id="AddressNewHeading">{{ 'customer.addresses.add_new' | t }}</h2>
      {%- form 'customer_address', customer.new_address, aria-labelledBy: 'AddressNewHeading' -%}
        <div class="field">
          <input
            type="text"
            id="AddressLastNameNew"
            name="address[last_name]"
            value="{{ form.last_name }}"
            autocomplete="family-name"
            placeholder="{{ 'customer.addresses.last_name' | t }}"
          >
          <label for="AddressLastNameNew">{{ 'customer.addresses.last_name' | t }}</label>
        </div>
        <div class="field">
          <input
            type="text"
            id="AddressFirstNameNew"
            name="address[first_name]"
            value="{{ form.first_name }}"
            autocomplete="given-name"
            placeholder="{{ 'customer.addresses.first_name' | t }}"
          >
          <label for="AddressFirstNameNew">{{ 'customer.addresses.first_name' | t }}</label>
        </div>
        <div class="field">
          <input
            type="tel"
            id="AddressPhoneNew"
            name="address[phone]"
            value="{{ form.phone }}"
            autocomplete="tel"
            placeholder="{{ 'customer.addresses.phone' | t }}"
          >
          <label for="AddressPhoneNew">{{ 'customer.addresses.phone' | t }}</label>
        </div>
        <div>
          <label for="AddressCountryNew">{{ 'customer.addresses.country' | t }}</label>
          <div class="select">
            <select
              id="AddressCountryNew"
              name="address[country]"
              data-default="{{ form.country }}"
              autocomplete="country"
            >
              {{ all_country_option_tags }}
            </select>
            <svg aria-hidden="true" focusable="false" viewBox="0 0 10 6">
              <use href="#icon-caret" />
            </svg>
          </div>
        </div>
        <div id="AddressProvinceContainerNew" style="display: none">
          <label for="AddressProvinceNew">{{ 'customer.addresses.province' | t }}</label>
          <div class="select">
            <select
              id="AddressProvinceNew"
              name="address[province]"
              data-default="{{ form.province }}"
              autocomplete="address-level1"
            ></select>
            <svg aria-hidden="true" focusable="false" viewBox="0 0 10 6">
              <use href="#icon-caret" />
            </svg>
          </div>
        </div>
        <div class="field">
          <input
            type="text"
            id="AddressZipNew"
            name="address[zip]"
            value="{{ form.zip }}"
            autocapitalize="characters"
            autocomplete="postal-code"
            placeholder="{{ 'customer.addresses.zip' | t }}"
          >
          <label for="AddressZipNew">{{ 'customer.addresses.zip' | t }}</label>
        </div>
        <div class="field">
          <input
            type="text"
            id="AddressCityNew"
            name="address[city]"
            value="{{ form.city }}"
            autocomplete="address-level2"
            placeholder="{{ 'customer.addresses.city' | t }}"
          >
          <label for="AddressCityNew">{{ 'customer.addresses.city' | t }}</label>
        </div>
        <div class="field">
          <input
            type="text"
            id="AddressAddress1New"
            name="address[address1]"
            value="{{ form.address1 }}"
            autocomplete="address-line1"
            placeholder="{{ 'customer.addresses.address1' | t }}"
          >
          <label for="AddressAddress1New">番地以降</label>
        </div>
        <div class="field">
          <input
            type="text"
            id="AddressAddress2New"
            name="address[address2]"
            value="{{ form.address2 }}"
            autocomplete="address-line2"
            placeholder="{{ 'customer.addresses.address2' | t }}"
          >
          <label for="AddressAddress2New">{{ 'customer.addresses.address2' | t }}</label>
        </div>
        <div>
          {{ form.set_as_default_checkbox }}
          <label for="address_default_address_new">{{ 'customer.addresses.set_default' | t }}</label>
        </div>
        <div>
          <button>{{ 'customer.addresses.add' | t }}</button>
          <button type="reset">{{ 'customer.addresses.cancel' | t }}</button>
        </div>
      {%- endform -%}
    </div>
  </div>