Editing Customer Addresses page

Highlighted
Excursionist
38 0 4

How do I edit the grid layout in code for the customer addresses page? I want to add horizontal lines to separate the addresses, and a vertical line to separate the button side from the text side. Right now, the default layout is way too cluttered and indistinct.

I'm using the brooklyn theme.

Please please help because I have no idea how to do this :( I've attached a screenshot and the code below:

 

<!-- /templates/customers/addressess.liquid -->
{% comment %}

  Template note:
    - There are instances of inline JS below. Best practices advise separating this
      into an external JS file
    - There are separate 'add new' and 'edit' address forms

{% endcomment %}

{% paginate customer.addresses by 5 %}

<header class="section-header text-center">
  <h1>{{ 'customer.account.title' | t }}</h1>
  <hr class="hr--small">
</header>

<div class="grid">

  <div class="grid__item one-third medium-down--one-whole medium-down--text-center">
    <p><a href="#" class="btn" onclick="Shopify.CustomerAddress.toggleNewForm(); return false;">{{ 'customer.addresses.add_new' | t }}</a></p>
    <hr class="hr--small hr--clear">
    <p><a href="/account" class="return-link">&larr; {{ 'customer.account.return' | t }}</a></p>
    <hr class="hr--small hr--clear">
  </div>
  <div class="grid__item two-thirds medium-down--one-whole">

    {% comment %}
      Add address form, hidden by default
    {% endcomment %}
    <div id="AddAddress" class="form-vertical" style="display: none;">
      {% form 'customer_address', customer.new_address %}

        <h2 class="h3">{{ 'customer.addresses.add_new' | t }}</h2>

      <!--=============================  Customer Name ===============================-->  
      <div class="grid grid--small">

          <div class="grid__item one-half small--one-whole">
            <label for="AddressFirstNameNew">{{ 'customer.addresses.first_name' | t }}</label>
            <input type="text" id="AddressFirstNameNew" class="input-full" name="address[first_name]" value="{{form.first_name}}" autocapitalize="words">
          </div>

          <div class="grid__item one-half small--one-whole">
            <label for="AddressLastNameNew">{{ 'customer.addresses.last_name' | t }}</label>
            <input type="text" id="AddressLastNameNew" class="input-full" name="address[last_name]" value="{{form.last_name}}" autocapitalize="words">
          </div>

      </div>

      
        <!--=============================  Customer Address/Business ===============================-->  

        <label for="AddressCompanyNew">{{ 'customer.addresses.company' | t }}</label>
        <input type="text" id="AddressCompanyNew" class="input-full" name="address[company]" value="{{form.company}}" autocapitalize="words">

        <label for="AddressAddress1New">{{ 'customer.addresses.address1' | t }}</label>
        <input type="text" id="AddressAddress1New" class="input-full" name="address[address1]" value="{{form.address1}}" autocapitalize="words">

        <label for="AddressAddress2New">{{ 'customer.addresses.address2' | t }}</label>
        <input type="text" id="AddressAddress2New" class="input-full" name="address[address2]" value="{{form.address2}}" autocapitalize="words">

        <div class="grid grid--small">
          <div class="grid__item large--one-half">
            <label for="AddressCityNew">{{ 'customer.addresses.city' | t }}</label>
            <input type="text" id="AddressCityNew" class="input-full" name="address[city]" value="{{form.city}}" autocapitalize="words">
          </div>

          <div class="grid__item large--one-half">
            <label for="AddressCountryNew">{{ 'customer.addresses.country' | t }}</label>
            <select id="AddressCountryNew" class="input-full" name="address[country]" data-default="{{form.country}}">{{ country_option_tags }}</select>
          </div>

          <div class="grid__item" id="AddressProvinceContainerNew" style="display:none">
            <label for="AddressProvinceNew">{{ 'customer.addresses.province' | t }}</label>
            <select id="AddressProvinceNew" class="input-full" name="address[province]" data-default="{{form.province}}"></select>
          </div>

          <div class="grid__item large--one-half">
            <label for="AddressZipNew">{{ 'customer.addresses.zip' | t }}</label>
            <input type="text" id="AddressZipNew" class="input-full" name="address[zip]" value="{{form.zip}}" autocapitalize="characters">
          </div>

          <div class="grid__item large--one-half">
            <label for="AddressPhoneNew">{{ 'customer.addresses.phone' | t }}</label>
            <input type="tel" id="AddressPhoneNew" class="input-full" name="address[phone]" value="{{form.phone}}">
          </div>
        </div>

        <p>
          {{ form.set_as_default_checkbox }}
          <label for="address_default_address_new" class="inline">{{ 'customer.addresses.set_default' | t }}</label>
        </p>

        <p><input type="submit" class="btn" value="{{ 'customer.addresses.add' | t }}"></p>
        <p><a href="#" onclick="Shopify.CustomerAddress.toggleNewForm(); return false;">{{ 'customer.addresses.cancel' | t }}</a></p>

        <hr>
      {% endform %}
    </div>

    <h2 class="h3">{{ 'customer.addresses.title' | t }}</h2>

    {% 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 %}

      <p class="h5">
        {{ address.first_name | capitalize }} {{address.last_name | capitalize }}
        {% if address == customer.default_address %}({{ 'customer.addresses.default' | t }}){% endif %}
      </p>

      <p>
        {{ address.company }}<br>
        {{ address.street }}<br>
        {{ address.city | capitalize }}<br>
        {% if address.province_code %}
          {{ address.province_code | upcase }}<br>
        {% endif %}
        {{ address.zip | upcase }}<br>
        {{ address.country }}<br>
        {{ address.phone }}
      </p>
      <p>
        {{ 'customer.addresses.edit' | t | edit_customer_address_link: address.id }} |
        {{ 'customer.addresses.delete' | t | delete_customer_address_link: address.id }}
      </p>

      <div id="EditAddress_{{address.id}}" class="form-vertical" style="display:none;">
        {% form 'customer_address', address %}

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

          <div class="grid grid--small">
            <div class="grid__item one-half small--one-whole">
              <label for="AddressFirstName_{{form.id}}">{{ 'customer.addresses.first_name' | t }}</label>
              <input type="text" id="AddressFirstName_{{form.id}}" class="input-full" name="address[first_name]" value="{{form.first_name}}" autocapitalize="words">
            </div>

            <div class="grid__item one-half small--one-whole">
              <label for="AddressLastName_{{form.id}}">{{ 'customer.addresses.last_name' | t }}</label>
              <input type="text" id="AddressLastName_{{form.id}}" class="input-full" name="address[last_name]" value="{{form.last_name}}" autocapitalize="words">
            </div>
          </div>

          <label for="AddressCompany_{{form.id}}">{{ 'customer.addresses.company' | t }}</label>
          <input type="text" id="AddressCompany_{{form.id}}" class="input-full" name="address[company]" value="{{form.company}}" autocapitalize="words">

          <label for="AddressAddress1_{{form.id}}">{{ 'customer.addresses.address1' | t }}</label>
          <input type="text" id="AddressAddress1_{{form.id}}" class="input-full" name="address[address1]" value="{{form.address1}}" autocapitalize="words">

          <label for="AddressAddress2_{{form.id}}">{{ 'customer.addresses.address2' | t }}</label>
          <input type="text" id="AddressAddress2_{{form.id}}" class="input-full" name="address[address2]" value="{{form.address2}}" autocapitalize="words">

          <label for="AddressCity_{{form.id}}">{{ 'customer.addresses.city' | t }}</label>
          <input type="text" id="AddressCity_{{form.id}}" class="input-full" name="address[city]" value="{{form.city}}" autocapitalize="words">

          <label for="AddressCountry_{{form.id}}">{{ 'customer.addresses.country' | t }}</label>
          <select id="AddressCountry_{{form.id}}" class="input-full" name="address[country]" data-default="{{form.country}}">{{ country_option_tags }}</select>

          <div id="AddressProvinceContainer_{{form.id}}" style="display:none">
            <label for="AddressProvince_{{form.id}}">{{ 'customer.addresses.province' | t }}</label>
            <select id="AddressProvince_{{form.id}}" class="input-full" name="address[province]" data-default="{{form.province}}"></select>
          </div>

          <div class="grid grid--small">
            <div class="grid__item one-half small--one-whole">
              <label for="AddressZip_{{form.id}}">{{ 'customer.addresses.zip' | t }}</label>
              <input type="text" id="AddressZip_{{form.id}}" class="input-full" name="address[zip]" value="{{form.zip}}" autocapitalize="characters">
            </div>

            <div class="grid__item one-half small--one-whole">
              <label for="AddressPhone_{{form.id}}">{{ 'customer.addresses.phone' | t }}</label>
              <input type="tel" id="AddressPhone_{{form.id}}" class="input-full" name="address[phone]" value="{{form.phone}}">
            </div>
          </div>

          <p>
            {{ form.set_as_default_checkbox }}
            <label for="address_default_address_{{form.id}}" class="inline">{{ 'customer.addresses.set_default' | t }}</label>
          </p>

          <p><input type="submit" class="btn" value="{{ 'customer.addresses.update' | t }}"></p>
          <p><a href="#" onclick="Shopify.CustomerAddress.toggleForm({{form.id}}); return false;">{{ 'customer.addresses.cancel' | t }}</a></p>

          <hr>
        {% endform %}
      </div>

    {% endfor %}

    {% if paginate.pages > 1 %}
      <div class="pagination">
        {{ paginate | default_pagination | replace: '&laquo; Previous', '&larr;' | replace: 'Next &raquo;', '&rarr;' }}
      </div>
    {% endif %}

  </div>

</div>

<script>
  // Initialize observers on address selectors
  new Shopify.CountryProvinceSelector('AddressCountryNew', 'AddressProvinceNew', {
    hideElement: 'AddressProvinceContainerNew'
  });

  // Setup province selector on each customer address
  {% for address in customer.addresses %}
    new Shopify.CountryProvinceSelector('AddressCountry_{{address.id}}', 'AddressProvince_{{address.id}}', {
      hideElement: 'AddressProvinceContainer_{{address.id}}'}
    );
  {% endfor %}

  // Modified contents of customer_area.js (global asset)
  Shopify.CustomerAddress = {
    toggleForm: function(id) {
      var editEl = document.getElementById('EditAddress_'+id);
      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>

{% endpaginate %}

 

0 Likes
Shopify Partner
650 0 93

Hi Steve

one way to do it.

Open the "assets/theme.scss.liquid" file and add the following snippet of code to the bottom of that file.

hr.full-width {
	width: 100%;
}

Then open the "customers/addresses.liquid" file and at around line 127 (after the edit links) add the following snippet.

<hr class="full-width">

So it should look like this.

      <p>
        {{ 'customer.addresses.edit' | t | edit_customer_address_link: address.id }} |
        {{ 'customer.addresses.delete' | t | delete_customer_address_link: address.id }}
      </p>
    
    <hr class="full-width">

 

1 Like
Excursionist
38 0 4

Hey Ricky,

I actually managed to figure out how to add horizontal lines. Could you help me in adding a vertical line between the button side of the page and the address side of the page?

Thanks very much :)

0 Likes
Shopify Partner
650 0 93

Hi Steve

add this to the bottom of the css file.

.template-customers-addresses .two-thirds {
    border-left: 1px solid black;
}

@media (max-width: 769px) {
	.template-customers-addresses .two-thirds {
	    border-left: none;
	}
}

 

1 Like
Excursionist
38 0 4

Thanks Ricky, worked fantastically! I'm also wondering, how do you edit the side margins only for the customer account/addresses pages content? I want to have less space on the sides of the content, but keep the spacing for the navigation bar.

 

0 Likes
Shopify Partner
650 0 93

Hi Steve

sorry I didn't understand clearly.

Currently it stores each address value on a separate line, which creates a long scrolling page. If you find this section of code...

      <p>
        {{ address.company }}<br>
        {{ address.street }}<br>
        {{ address.city | capitalize }}<br>
        {% if address.province_code %}
          {{ address.province_code | upcase }}<br>
        {% endif %}
        {{ address.zip | upcase }}<br>
        {{ address.country }}<br>
        {{ address.phone }}
      </p>

... you could remove some of the page breaks.

<br>
That way it will fill more of the width. For example City, Province and Zip could all go on one line.
0 Likes
Excursionist
38 0 4

Hey Ricky!

I'm actually asking how to edit the margins on the side of the customer addresses/account pages. Currently, it takes up too much of the page, so I want to make the side margins bigger

0 Likes
Shopify Partner
650 0 93

Hi Steve

can you do a mockup to explain what you mean.

1 Like
Excursionist
38 0 4

Hey Ricky,

I've attached a screenshot. I want to decrease the margins marked by the blue arrows (first screenshot)!

 

0 Likes