Address Page

address.liquid

{% assign account_page_title = 'Addresses' %}
{% include 'account-titles' %}

{% paginate customer.addresses by 10 %}

<section class="outer mv2 pt1">
  <div class="container--s mha">

    <div class="relative mv1 mb2">
      <button class="new-address button" onclick="barrel.toggleNewForm()">New Address +</button>
    </div>

    {% assign form_id = 'new' %}
    {% assign form_action = customer.new_address %}
    {% assign form_title = 'Add New Address' %}
    {% assign form_cta = 'Add Address' %}
    {% assign form_classes = 'mb2 pb1' %}
    {% include 'account-address-form' %}

    {% comment %}
      List all customer addresses with a unique edit form.
      Also add pagination in case they have a large number of addresses
    {% endcomment %}
    {% for address in customer.addresses %}
      <div class="address w1 mb2">
        {% assign name = address.name %}
        {% assign company = address.company %}
        {% assign street = address.street %}
        {% assign city = address.city %}
        {% assign province = address.province %}
        {% assign zip = address.zip %}
        {% assign country = address.country %}
        {% assign phone = address.phone %}
        {% if address == customer.default_address %}
          {% assign default = true %}
        {% endif %}
        {% assign edit = true %}
        {% include 'account-address' %}
      </div>

      {% assign form_id = address.id %}
      {% assign form_action = address %}
      {% assign form_title = 'Edit Address' %}
      {% assign form_cta = 'Update Address' %}
      {% assign form_classes = 'mb2' %}

      {% include 'account-address-form' %}
    {% endfor %}

    {% if customer.addresses == empty %}
      <div class="bg-cg1 pv2 ph2 align-c">You have no saved address.</div>
    {% endif %}

    {% include 'pagination' %}
  </div>
</section>

<script>
  window.barrel = {
    toggleForm: function(id) {
      var el = document.getElementById('form_'+id)
      el.style.display = el.style.display == 'none' ? '' : 'none'
    },
    toggleNewForm: function() {
      var el = document.getElementById('form_new')
      el.style.display = el.style.display == 'none' ? '' : 'none'
    },
    removeAddress: function removeAddress(id){
      if (!confirm("Are you sure you wish to delete this address?")) return

      var form = document.createElement("form")
      var input = document.createElement("input");

      form.setAttribute('method', 'post')
      form.setAttribute("action", '/account/addresses/'+id)

      input.setAttribute("type", "hidden")
      input.setAttribute("name", '_method')
      input.setAttribute("value", 'delete')

      form.appendChild(input)

      document.body.appendChild(form)
      form.submit()
      document.body.removeChild(form)
    }
  } 
</script>

{% endpaginate %}