Skip to content

Instantly share code, notes, and snippets.

@DanWebb
Last active April 18, 2023 07:18
Show Gist options
  • Save DanWebb/0e32f2dc452aba06adae to your computer and use it in GitHub Desktop.
Save DanWebb/0e32f2dc452aba06adae to your computer and use it in GitHub Desktop.
Customer Addresses - Dependant on: {{ 'shopify_common.js' | shopify_asset_url | script_tag }} being included in the themes head. Not dependant on {{ 'customer_area.js' | shopify_asset_url | script_tag }} to avoid being restricted to just toggling visibility of address forms rather than opening a popup or anything else.
{% comment %}
This include requires you pass in two variables.
{{ add }}: The address being listed
{{ edit }}: Boolean value if the address can be edited on this page
Example:
{% for address in customer.addresses %}
{% include 'address_summary', add: address, edit: true %}
{% endfor %}
{% endcomment %}
<!-- Address Summary ===================== -->
<p>
{{ add.name }}<br />
{% if add.address1 > "" %}
{{ add.address1 }},
{% endif %}
{% if add.address2 > "" %}
{{ add.address2 }},
{% endif %}
{% if add.company > "" %}
<br />{{ add.company }},
{% endif %}
{% if add.city > "" %}
<br />{{ add.city }},
{% endif %}
{% if add.province > "" %}
<br />{{ add.province }},
{% endif %}
{% if add.zip > "" %}
{{ add.zip | upcase }},
{% endif %}
{% if add.country > "" %}
<br />{{ add.country }},
{% endif %}
{% if add.phone > "" %}
<br />{{ add.phone }}
{% endif %}
{% if edit == true %}
<br />
<a href="#" data-toggleaddress="{{ add.id }}">Edit</a> •
<a href="#" data-destroyaddress="{{ add.id }}">Delete</a>
{% endif %}
</p>
<!-- //Address Summary -->
{% if edit == true %}
<!-- Edit Address Form ===================== -->
<div id="EditAddress_{{ add.id }}" class="form-edit-address" style="display:none;">
{% form 'customer_address', add %}
<h4 class="section-header green">Edit Address</h4>
<input type="text" id="AddressFirstName_{{ add.id }}" name="address[first_name]" value="{{ add.first_name }}" placeholder="First Name" >
<input type="text" id="AddressLastName_{{ add.id }}" name="address[last_name]" value="{{ add.last_name }}" placeholder="Surname" >
<input type="text" id="AddressCompany_{{ add.id }}" name="address[company]" value="{{ add.company }}" placeholder="Company" >
<input type="text" id="AddressAddress1_{{ add.id }}" name="address[address1]" value="{{ add.address1 }}" placeholder="Address Line 1" >
<input type="text" id="AddressAddress2_{{ add.id }}" name="address[address2]" value="{{ add.address2 }}" placeholder="Address Line 2" >
<input type="text" id="AddressCity_{{ add.id }}" name="address[city]" value="{{ add.city }}" placeholder="City" >
<select id="AddressCountry_{{ add.id }}" name="address[country]" data-default="{{ add.country }}">{{ country_option_tags }}</select>
<div id="AddressProvinceContainer_{{ add.id }}" style="display:none">
<select id="AddressProvince_{{ add.id }}" name="address[province]" data-default="{{ form.province }}"></select>
</div>
<input type="text" id="AddressZip_{{ add.id }}" name="address[zip]" value="{{ add.zip }}" placeholder="Postcode" autocapitalize="characters">
<input type="tel" id="AddressPhone_{{ add.id }}" name="address[phone]" value="{{ add.phone }}" placeholder="Phone" >
<p>
{{ form.set_as_default_checkbox }}
<label for="address_default_address_{{ add.id }}" class="inline">Set as default address</label>
</p>
<input type="submit" class="btn btn--full btn-green" value="Confirm">
<a href="#" class="btn btn--full" data-toggleaddress="{{ add.id }}">Cancel</a>
{% endform %}
</div>
<!-- //Edit Address Form ===================== -->
<script>
// Observe changes to the country selector to show/hide the provice selector
// appropriately
new Shopify.CountryProvinceSelector(
'AddressCountry_{{ add.id }}',
'AddressProvince_{{ add.id }}',
{ hideElement: 'AddressProvinceContainer_{{ add.id }}' }
);
</script>
{% endif %}
var Addresses = (function() {
// toggle visibility of an address form, use data-toggleaddress="new" for the
// new address form, this function can be modified to work with a popup.
function toggleForm(e) {
e.preventDefault();
if($(this).data('toggleaddress') && $(this).data('toggleaddress')!=='new') {
$('#EditAddress_'+$(this).data('toggleaddress')).toggle();
} else {
// the new address form container should have id="AddAddress"
$('#AddAddress').toggle();
}
}
// delete an address
function destroy(e) {
e.preventDefault();
var addId = $(this).data('destroyaddress');
if (confirm('Are you sure you wish to delete this address?')) {
Shopify.postLink(
'/account/addresses/'+addId,
{'parameters': {'_method': 'delete'}}
);
}
}
function init() {
if(!$('[data-toggleaddress]').length) return false;
if($('#AddressCountry').length) {
// Initialize country observer on the new address form
new Shopify.CountryProvinceSelector('AddressCountry', 'AddressProvince', {
hideElement: 'AddressProvinceContainer'
});
}
$('[data-toggleaddress]').click(toggleForm);
$('[data-destroyaddress]').click(destroy);
// TIP: use this to move all the edit address forms outside their container
// may be usefull if you are not using a popup
// $('.form-edit-address').appendTo('.main-content');
}
return function() {
$(init);
}
})();
// include modules
Addresses();
<!-- Example New Address Form ===================== -->
<div id="AddAddress" class="form-new-address" style="display: none;">
{% form 'customer_address', customer.new_address %}
<h4 class="section-header green">Add Address</h4>
<input type="text" id="AddressFirstName" name="address[first_name]" value="" placeholder="First Name" >
<input type="text" id="AddressLastName" name="address[last_name]" value="" placeholder="Surname" >
<input type="text" id="AddressCompany" name="address[company]" value="" placeholder="Company" >
<input type="text" id="AddressAddress1" name="address[address1]" value="" placeholder="Address Line 1" >
<input type="text" id="AddressAddress2" name="address[address2]" value="" placeholder="Address Line 2" >
<input type="text" id="AddressCity" name="address[city]" value="" placeholder="City" >
<select id="AddressCountry" name="address[country]" data-default="">{{ country_option_tags }}</select>
<div id="AddressProvinceContainer" style="display:none">
<select id="AddressProvince" name="address[province]" data-default="{{ form.province }}"></select>
</div>
<input type="text" id="AddressZip" name="address[zip]" value="" placeholder="Postcode" autocapitalize="characters">
<input type="tel" id="AddressPhone" name="address[phone]" value="" placeholder="Phone" >
<p>
{{ form.set_as_default_checkbox }}
<label for="address_default_address" class="inline">Set as default address</label>
</p>
<input type="submit" class="btn btn--full btn-green" value="Confirm">
<a href="#" class="btn btn--full" data-toggleaddress="new">Cancel</a>
{% endform %}
</div>
<!-- //New Address Form -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment