Full function Shopify address to edit and delete addresses.liquid

Tech Easy Solutions


Full function Shopify address to edit and delete addresses.liquid

<div class="content ac-content">

<div class="row">

<div id="address_tables" class="col-md-6">

{% paginate customer.addresses by 10 %}

  {% for address in customer.addresses %}

  <div class="address_table">

    <div id="view_address_{{address.id}}" class="customer_address{% if address == customer.default_address %} default_address_container{% endif %}">

{% if address == customer.default_address %}<span class="default_address">{{ 'customer.addresses.default' | t }}</span>{% endif %}

      <h3 class="address_title">

        {{ address.street }}

      </h3>

      <div class="view_address">

        <p>{{ address.first_name }} {{address.last_name }}

        <br />{{ address.company }}

        <br />{{ address.street }}

        <br />{{ address.city }} {% if address.province_code %}, {{ address.province_code }}{% endif %}

        <br />{{ address.country }} {{ address.zip }}

        <br />{{ address.phone }}</p>

      </div>

      <div class="address_actions">

        {%comment%} 

        <a href=" #edit_address_{{address.id}}"  class="action_edit btn btn-custom" >{{ 'customer.addresses.edit' | t | edit_customer_address_link: address.id }}

      </a>

      

        <span class="action_delete btn btn-custom" >{{ 'customer.addresses.delete' | t | delete_customer_address_link: address.id }}</span>

      {%endcomment%}  

       <span class="address_act btn btn-custom"> {{ 'customer.addresses.edit' | t | edit_customer_address_link: address.id }}  </span>

        <span class="address_act action_delete btn btn-custom"> {{ 'customer.addresses.delete' | t | delete_customer_address_link: address.id }} </span>

           

      </div>

    </div>

  

    <div id="edit_address_{{address.id}}" class=" form-vertical login customer_address edit_address" style="display:none;">

      {% form 'customer_address', address %}

    <div class="title-bar {{ settings.title-bar-styling }} custom-font">

    <h2>{{ 'customer.addresses.edit_address' | t }}</h2>

    <div class="clear"></div>

    </div>

        <table class="customer_address_table">

          <tr>

            <td class="label"><label for="address_first_name_{{form.id}}">{{ 'customer.addresses.first_name' | t }}</label></td>

            <td class="value"><input type="text" id="address_first_name_{{form.id}}" class="form-control" placeholder="first name" name="address[first_name]" value="{{form.first_name}}" size="40" /></td>

          </tr>

          <tr>

            <td class="label"><label for="address_last_name_{{form.id}}">{{ 'customer.addresses.last_name' | t }}</label></td>

            <td class="value"><input type="text" id="address_last_name_{{form.id}}" class="form-control" placeholder="last name" name="address[last_name]" value="{{form.last_name}}" size="40" /></td>

          </tr>

          <tr>

            <td class="label"><label for="address_company_{{form.id}}">{{ 'customer.addresses.company' | t }}</label></td>

            <td class="value"><input type="text" id="address_company_{{form.id}}" class="form-control" placeholder="address" name="address[company]" value="{{form.company}}" size="40" /></td>

          </tr>

          <tr>

            <td class="label"><label for="address_address1_{{form.id}}">{{ 'customer.addresses.address1' | t }}</label></td>

            <td class="value"><input type="text" id="address_address1_{{form.id}}" class="form-control" placeholder="address1" name="address[address1]" value="{{form.address1}}" size="40" /></td>

          </tr>

          <tr>

            <td class="label"><label for="address_address2_{{form.id}}">{{ 'customer.addresses.address2' | t }}</label></td>

            <td class="value"><input type="text" id="address_address2_{{form.id}}" class="form-control" placeholder="address2" name="address[address2]" value="{{form.address2}}" size="40" /></td>

          </tr>

          <tr>

            <td class="label"><label for="address_city_{{form.id}}">{{ 'customer.addresses.city' | t }}</label></td>

            <td class="value"><input type="text" id="address_city_{{form.id}}" class="form-control" placeholder="City" name="address[city]" value="{{form.city}}" size="40" /></td>

          </tr>

          <tr>

            <td class="label"><label for="address_country_{{form.id}}">{{ 'customer.addresses.country' | t }}</label></td>

            <td class="value">

              <select id="address_country_{{form.id}}" name="address[country]" data-default="{{form.country}}">{{ country_option_tags }}</select>

            </td>

          </tr>

          <tr id="address_province_container_{{form.id}}" style="display:none">

            <td class="label"><label for="address_province_{{form.id}}">{{ 'customer.addresses.province' | t }}</label></td>

            <td class="value"><select id="address_province_{{form.id}}" class="form-control" placeholder="" name="address[province]" data-default="{{form.province}}"></select></td>

          </tr>

          <tr>

            <td class="label"><label for="address_zip_{{form.id}}">{{ 'customer.addresses.zip' | t }}</label></td>

            <td class="value"><input type="text" id="address_zip_{{form.id}}" class="form-control" placeholder="Zip" name="address[zip]" value="{{form.zip}}" size="40" /></td>

          </tr>

          <tr>

            <td class="label"><label for="address_phone_{{form.id}}">{{ 'customer.addresses.phone' | t }}</label></td>

            <td class="value"><input type="text" id="address_phone_{{form.id}}" class="form-control" placeholder="Phone"  name="address[phone]" value="{{form.phone}}" size="40" /></td>

          </tr>

          <tr>

            <td class="label">{{ 'customer.addresses.set_default' | t }}</td>

            <td class="value">{{ form.set_as_default_checkbox }}</td>

          </tr>

        </table>

        <div class="action-bottom">

          <input class="btn btn-custom" type="submit" value="{{ 'customer.addresses.update' | t }}" />

            <span class="note"><a href="#" class="btn btn-danger" onclick="Shopify.CustomerAddress.toggleForm({{form.id}}); return false;">{{ 'customer.addresses.cancel' | t }}</a></span>

        </div>

      {% endform %}

    </div>

  </div><!-- end .address_table -->

  {% endfor %}

    <div id="address_pagination">{{ paginate | default_pagination }}</div>

  {% endpaginate %}

  </div><!-- end #address_tables -->

  <div id="add_address" class="login customer_address edit_address col-md-6{% if customer.addresses.size == 0 %} col-md-offset-3{% endif %}">

    {% form 'customer_address', customer.new_address %}

  <div class="title-bar {{ settings.title-bar-styling }} custom-font">

      <h2>{{ 'customer.addresses.add_new' | t }}</h2>

    <div class="clear"></div>

  </div>

      <table class="customer_address_table">

        <tr>

          <td class="label"><label for="address_first_name_new">{{ 'customer.addresses.first_name' | t }}</label></td>

          <td class="value"><input type="text" id="address_first_name_new" class="form-control" placeholder="first name"name="address[first_name]" value="{{form.first_name}}" size="40" /></td>

        </tr>

        <tr>

          <td class="label"><label for="address_last_name_new">{{ 'customer.addresses.last_name' | t }}</label></td>

          <td class="value"><input type="text" id="address_last_name_new" class="form-control " placeholder="last name"name="address[last_name]" value="{{form.last_name}}" size="40" /></td>

        </tr>

        <tr>

          <td class="label"><label for="address_company_new">{{ 'customer.addresses.company' | t }}</label></td>

          <td class="value"><input type="text" for="address_company_new" class="form-control" placeholder="company" name="address[company]" value="{{form.company}}" size="40" /></td>

        </tr>

        <tr>

          <td class="label"><label for="address_address1_new">{{ 'customer.addresses.address1' | t }}</label></td>

          <td class="value"><input type="text" id="address_address1_new" class="form-control" placeholder="address1" name="address[address1]" value="{{form.address1}}" size="40" /></td>

        </tr>

        <tr>

          <td class="label"><label for="address_address2_new">{{ 'customer.addresses.address2' | t }}</label></td>

          <td class="value"><input type="text" id="address_address2_new" class="form-control" placeholder="address2" name="address[address2]" value="{{form.address2}}" size="40" /></td>

        </tr>

        <tr>

          <td class="label"><label for="address_city_new">{{ 'customer.addresses.city' | t }}</label></td>

          <td class="value"><input type="text" id="address_city_new" class="form-control" placeholder="city" name="address[city]" value="{{form.city}}" size="40" /></td>

        </tr>

        <tr>

          <td class="label"><label for="address_country_new">{{ 'customer.addresses.country' | t }}</label></td>

          <td class="value">

            <select id="address_country_new" name="address[country]" data-default="{{form.country}}">{{ country_option_tags }}</select>

          </td>

        </tr>

        <tr id="address_province_container_new" style="display:none">

          <td class="label"><label for="address_province_new">{{ 'customer.addresses.province' | t }}</label></td>

          <td class="value">

            <select id="address_province_new" class="form-control" placeholder="" name="address[province]" data-default="{{form.province}}"></select>

          </td>

        </tr>

        <tr>

          <td class="label"><label for="address_zip_new">{{ 'customer.addresses.zip' | t }}</label></td>

          <td class="value"><input type="text" id="address_zip_new" class="form-control" placeholder="zip code" name="address[zip]" value="{{form.zip}}" size="40" /></td>

        </tr>

        <tr>

          <td class="label"><label for="address_phone_new">{{ 'customer.addresses.phone' | t }}</label></td>

          <td class="value"><input type="text" id="address_phone_new" class="form-control" placeholder="phone" name="address[phone]" value="{{form.phone}}" size="40" /></td>

        </tr>

        <tr>

      <td class="label">{{ 'customer.addresses.set_default' | t }}</td>

      <td class="value">{{ form.set_as_default_checkbox }}

          {{ 'customer.addresses.set_default' | t }}

      </td>

        </tr>

      </table>

      <div class="action-bottom">

        <input class="btn btn-custom" type="submit" value="{{ 'customer.addresses.add' | t }}" />

      </div>

    {% endform %}

  </div>

  </div>

</div><!-- /.content -->

  <script type="text/javascript" charset="utf-8">

    // initialize observers on address selectors

    document.querySelectorAll('.address-delete-form').forEach(deleteForm => {

  deleteForm.addEventListener('submit', event => {

    const confirmMessage = event.target.getAttribute('data-confirm-message');

    if (

      !window.confirm(

        confirmMessage || 'Are you sure you wish to delete this address?'

      )

    ) {

      event.preventDefault();

    }

  });

});

    // new Shopify.CountryProvinceSelector('address_country_new', 'address_province_new', {hideElement: 'address_province_container_new'});

    

     // Initialize observers on address selectors

  // new Shopify.CountryProvinceSelector('AddressCountryNew', 'AddressProvinceNew', {

  //   hideElement: 'AddressProvinceContainerNew'

  // });

  // Modified contents of customer_area.js (global asset)

  //console.log("Shopify api => ",Shopify)

  Shopify.CustomerAddress = {

    toggleForm: function(id) {

      var editEl = document.getElementById('edit_address_'+id);

      //console.log("editEl",editEl)

      editEl.style.display = editEl.style.display == 'none' ? '' : 'none';

      return false;

    },

    toggleNewForm: function() {

      var el = document.getElementById('AddAddress');

      el.style.display = el.style.display == 'none' ? '' : 'none';

      return false;

    },

    destroy: function(id, confirm_msg) {

      if (confirm(confirm_msg || "Are you sure you wish to delete this address?")) {

        Shopify.postLink('/account/addresses/'+id, {'parameters': {'_method': 'delete'}});

      }

    }

  }

  </script>