show only last address(default) at address.liquid

Solved
Highlighted
Shopify Partner
7 1 0

I would like to show only last address(Default) in my addresses. Do you have any idea for that? I can't find solution. if you guys, could you help me plz?2020-02-20-11-49-yangoods-backup.myshopify.com.png

0 Likes
Highlighted
Trailblazer
175 26 28

We have to add condition in address loop.

{% if address == customer.default_address %}

 

Still not satisfied!!! contact me
Is it good solution? Yes, please Like.
0 Likes
Highlighted
Shopify Partner
7 1 0

that condition is already in loop. but it doesn't work. here is my code. could u plz check what am i missing?

 

{% for address in customer.addresses %}
{% if address == customer.default_address %}
<p><strong>{{ 'customer.addresses.default' | t }}</strong></p>

{% endif %}

{{ address | format_address }}

<p>
{{ 'customer.addresses.edit' | t | edit_customer_address_link: address.id }} |
{{ 'customer.addresses.delete' | t | delete_customer_address_link: address.url }}
</p>

<hr class="hr--medium hr--clear">

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

<h2 class="h4">{{ 'customer.addresses.edit_address' | t }}</h2>

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

0 Likes
Trailblazer
175 26 28

REPLACE WITH BELOW CODE:

 

{% for address in customer.addresses %}
{% if address == customer.default_address %}
<p><strong>{{ 'customer.addresses.default' | t }}</strong></p>

{{ address | format_address }}

<p>
{{ 'customer.addresses.edit' | t | edit_customer_address_link: address.id }} |
{{ 'customer.addresses.delete' | t | delete_customer_address_link: address.url }}
</p>

<hr class="hr--medium hr--clear">

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

<h2 class="h4">{{ 'customer.addresses.edit_address' | t }}</h2>

<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}}">{{ all_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>
{% endif %}
{% endfor %}

Still not satisfied!!! contact me
Is it good solution? Yes, please Like.
1 Like
Highlighted

Success.

Shopify Partner
7 1 0

default address is work now. but when i click edit button form doesn't appear. what should i fix? here is my whole code.

 

 

<!-- /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">
    
     <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 %}
    
      {% if address == customer.default_address %}
        <p><strong>{{ 'customer.addresses.default' | t }}</strong></p>
     
 
      {{ address | format_address }}
 
      <p>
        {{ 'customer.addresses.edit' | t | edit_customer_address_link: address.id }} |
        {{ 'customer.addresses.delete' | t | delete_customer_address_link: address.url }}
      </p>
{% endif %}
    
    
    
    <p><a href="{{ routes.account_url }}" class="return-link"> {{ '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>
 
        <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>
 
        <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}}">{{ all_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 %}
{% if address == customer.default_address %}
<p><strong>{{ 'customer.addresses.default' | t }}</strong></p>
 
{{ address | format_address }}
 
<p>
{{ 'customer.addresses.edit' | t | edit_customer_address_link: address.id }} |
{{ 'customer.addresses.delete' | t | delete_customer_address_link: address.url }}
</p>
 
<hr class="hr--medium hr--clear">
 
<div id="EditAddress_{{address.id}}" class="form-vertical" style="display:none;">
{% form 'customer_address', address %}
 
<h2 class="h4">{{ 'customer.addresses.edit_address' | t }}</h2>
 
<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}}">{{ all_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>
{% endif %}
{% endfor %}
 
    {% if paginate.pages > 1 %}
      {% include 'pagination' %}
    {% 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(url, confirm_msg) {
      if (confirm(confirm_msg || "Are you sure you wish to delete this address?")) {
        Shopify.postLink(url, {'parameters': {'_method': 'delete'}});
      }
    }
  }
</script>
 
{% endpaginate %}

 

0 Likes
Highlighted
Shopify Partner
7 1 0

@24by7themes i tried alot but still have no idea why edit is not working when i click. could you plz tell me what am i missing plz?

here is my link 

https://yangoods-backup.myshopify.com/account/addresses

0 Likes
Highlighted
Trailblazer
175 26 28

Please contact me on info@creatpix.com. I will solve your issue.

Still not satisfied!!! contact me
Is it good solution? Yes, please Like.
0 Likes