Skip to content
This repository has been archived by the owner on Aug 30, 2018. It is now read-only.

Fix broken edit/delete buttons on address template with pagination #386

Merged
merged 3 commits into from
Mar 31, 2015
Merged

Fix broken edit/delete buttons on address template with pagination #386

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f98c31f
Fix broken edit/delete buttons on address template with pagination
cshold Mar 31, 2015
4f2cdd1
Tab size in address page
cshold Mar 31, 2015
71a722c
More alignment in address template
cshold Mar 31, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
159 changes: 80 additions & 79 deletions templates/customers/addresses.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@

{% endcomment %}

{% paginate customer.addresses by 5 %}

<header class="section-header">
<h1 class="section-header__left">{{ 'customer.account.title' | t }}</h1>
<div class="section-header__right">
Expand Down Expand Up @@ -100,101 +102,98 @@
List all customer addresses with a unique edit form.
Also add pagination in case they have a large number of addresses
{% endcomment %}
{% paginate customer.addresses by 5 %}
{% for address in customer.addresses %}

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

<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">
<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>
{% for address in customer.addresses %}

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

<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">
<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>

<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">
<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="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="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="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="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="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="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="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>
<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">

<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>
<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 class="grid">
<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 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__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 class="grid">
<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>

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

<hr>
{% endform %}
</div>
<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>

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

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

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

</div>
Expand Down Expand Up @@ -233,3 +232,5 @@
}
}
</script>

{% endpaginate %}