Tech Easy Solutions
Full function Shopify address to edit and delete addresses.liquid
Full function Shopify address to edit and delete addresses.liquid
<div class="content ac-content">
<div class="row">
<div id="address_tables" class="col-md-6">
{% paginate customer.addresses by 10 %}
{% for address in customer.addresses %}
<div class="address_table">
<div id="view_address_{{address.id}}" class="customer_address{% if address == customer.default_address %} default_address_container{% endif %}">
{% if address == customer.default_address %}<span class="default_address">{{ 'customer.addresses.default' | t }}</span>{% endif %}
<h3 class="address_title">
{{ address.street }}
</h3>
<div class="view_address">
<p>{{ address.first_name }} {{address.last_name }}
<br />{{ address.company }}
<br />{{ address.street }}
<br />{{ address.city }} {% if address.province_code %}, {{ address.province_code }}{% endif %}
<br />{{ address.country }} {{ address.zip }}
<br />{{ address.phone }}</p>
</div>
<div class="address_actions">
{%comment%}
<a href=" #edit_address_{{address.id}}" class="action_edit btn btn-custom" >{{ 'customer.addresses.edit' | t | edit_customer_address_link: address.id }}
</a>
<span class="action_delete btn btn-custom" >{{ 'customer.addresses.delete' | t | delete_customer_address_link: address.id }}</span>
{%endcomment%}
<span class="address_act btn btn-custom"> {{ 'customer.addresses.edit' | t | edit_customer_address_link: address.id }} </span>
<span class="address_act action_delete btn btn-custom"> {{ 'customer.addresses.delete' | t | delete_customer_address_link: address.id }} </span>
</div>
</div>
<div id="edit_address_{{address.id}}" class=" form-vertical login customer_address edit_address" style="display:none;">
{% form 'customer_address', address %}
<div class="title-bar {{ settings.title-bar-styling }} custom-font">
<h2>{{ 'customer.addresses.edit_address' | t }}</h2>
<div class="clear"></div>
</div>
<table class="customer_address_table">
<tr>
<td class="label"><label for="address_first_name_{{form.id}}">{{ 'customer.addresses.first_name' | t }}</label></td>
<td class="value"><input type="text" id="address_first_name_{{form.id}}" class="form-control" placeholder="first name" name="address[first_name]" value="{{form.first_name}}" size="40" /></td>
</tr>
<tr>
<td class="label"><label for="address_last_name_{{form.id}}">{{ 'customer.addresses.last_name' | t }}</label></td>
<td class="value"><input type="text" id="address_last_name_{{form.id}}" class="form-control" placeholder="last name" name="address[last_name]" value="{{form.last_name}}" size="40" /></td>
</tr>
<tr>
<td class="label"><label for="address_company_{{form.id}}">{{ 'customer.addresses.company' | t }}</label></td>
<td class="value"><input type="text" id="address_company_{{form.id}}" class="form-control" placeholder="address" name="address[company]" value="{{form.company}}" size="40" /></td>
</tr>
<tr>
<td class="label"><label for="address_address1_{{form.id}}">{{ 'customer.addresses.address1' | t }}</label></td>
<td class="value"><input type="text" id="address_address1_{{form.id}}" class="form-control" placeholder="address1" name="address[address1]" value="{{form.address1}}" size="40" /></td>
</tr>
<tr>
<td class="label"><label for="address_address2_{{form.id}}">{{ 'customer.addresses.address2' | t }}</label></td>
<td class="value"><input type="text" id="address_address2_{{form.id}}" class="form-control" placeholder="address2" name="address[address2]" value="{{form.address2}}" size="40" /></td>
</tr>
<tr>
<td class="label"><label for="address_city_{{form.id}}">{{ 'customer.addresses.city' | t }}</label></td>
<td class="value"><input type="text" id="address_city_{{form.id}}" class="form-control" placeholder="City" name="address[city]" value="{{form.city}}" size="40" /></td>
</tr>
<tr>
<td class="label"><label for="address_country_{{form.id}}">{{ 'customer.addresses.country' | t }}</label></td>
<td class="value">
<select id="address_country_{{form.id}}" name="address[country]" data-default="{{form.country}}">{{ country_option_tags }}</select>
</td>
</tr>
<tr id="address_province_container_{{form.id}}" style="display:none">
<td class="label"><label for="address_province_{{form.id}}">{{ 'customer.addresses.province' | t }}</label></td>
<td class="value"><select id="address_province_{{form.id}}" class="form-control" placeholder="" name="address[province]" data-default="{{form.province}}"></select></td>
</tr>
<tr>
<td class="label"><label for="address_zip_{{form.id}}">{{ 'customer.addresses.zip' | t }}</label></td>
<td class="value"><input type="text" id="address_zip_{{form.id}}" class="form-control" placeholder="Zip" name="address[zip]" value="{{form.zip}}" size="40" /></td>
</tr>
<tr>
<td class="label"><label for="address_phone_{{form.id}}">{{ 'customer.addresses.phone' | t }}</label></td>
<td class="value"><input type="text" id="address_phone_{{form.id}}" class="form-control" placeholder="Phone" name="address[phone]" value="{{form.phone}}" size="40" /></td>
</tr>
<tr>
<td class="label">{{ 'customer.addresses.set_default' | t }}</td>
<td class="value">{{ form.set_as_default_checkbox }}</td>
</tr>
</table>
<div class="action-bottom">
<input class="btn btn-custom" type="submit" value="{{ 'customer.addresses.update' | t }}" />
<span class="note"><a href="#" class="btn btn-danger" onclick="Shopify.CustomerAddress.toggleForm({{form.id}}); return false;">{{ 'customer.addresses.cancel' | t }}</a></span>
</div>
{% endform %}
</div>
</div><!-- end .address_table -->
{% endfor %}
<div id="address_pagination">{{ paginate | default_pagination }}</div>
{% endpaginate %}
</div><!-- end #address_tables -->
<div id="add_address" class="login customer_address edit_address col-md-6{% if customer.addresses.size == 0 %} col-md-offset-3{% endif %}">
{% form 'customer_address', customer.new_address %}
<div class="title-bar {{ settings.title-bar-styling }} custom-font">
<h2>{{ 'customer.addresses.add_new' | t }}</h2>
<div class="clear"></div>
</div>
<table class="customer_address_table">
<tr>
<td class="label"><label for="address_first_name_new">{{ 'customer.addresses.first_name' | t }}</label></td>
<td class="value"><input type="text" id="address_first_name_new" class="form-control" placeholder="first name"name="address[first_name]" value="{{form.first_name}}" size="40" /></td>
</tr>
<tr>
<td class="label"><label for="address_last_name_new">{{ 'customer.addresses.last_name' | t }}</label></td>
<td class="value"><input type="text" id="address_last_name_new" class="form-control " placeholder="last name"name="address[last_name]" value="{{form.last_name}}" size="40" /></td>
</tr>
<tr>
<td class="label"><label for="address_company_new">{{ 'customer.addresses.company' | t }}</label></td>
<td class="value"><input type="text" for="address_company_new" class="form-control" placeholder="company" name="address[company]" value="{{form.company}}" size="40" /></td>
</tr>
<tr>
<td class="label"><label for="address_address1_new">{{ 'customer.addresses.address1' | t }}</label></td>
<td class="value"><input type="text" id="address_address1_new" class="form-control" placeholder="address1" name="address[address1]" value="{{form.address1}}" size="40" /></td>
</tr>
<tr>
<td class="label"><label for="address_address2_new">{{ 'customer.addresses.address2' | t }}</label></td>
<td class="value"><input type="text" id="address_address2_new" class="form-control" placeholder="address2" name="address[address2]" value="{{form.address2}}" size="40" /></td>
</tr>
<tr>
<td class="label"><label for="address_city_new">{{ 'customer.addresses.city' | t }}</label></td>
<td class="value"><input type="text" id="address_city_new" class="form-control" placeholder="city" name="address[city]" value="{{form.city}}" size="40" /></td>
</tr>
<tr>
<td class="label"><label for="address_country_new">{{ 'customer.addresses.country' | t }}</label></td>
<td class="value">
<select id="address_country_new" name="address[country]" data-default="{{form.country}}">{{ country_option_tags }}</select>
</td>
</tr>
<tr id="address_province_container_new" style="display:none">
<td class="label"><label for="address_province_new">{{ 'customer.addresses.province' | t }}</label></td>
<td class="value">
<select id="address_province_new" class="form-control" placeholder="" name="address[province]" data-default="{{form.province}}"></select>
</td>
</tr>
<tr>
<td class="label"><label for="address_zip_new">{{ 'customer.addresses.zip' | t }}</label></td>
<td class="value"><input type="text" id="address_zip_new" class="form-control" placeholder="zip code" name="address[zip]" value="{{form.zip}}" size="40" /></td>
</tr>
<tr>
<td class="label"><label for="address_phone_new">{{ 'customer.addresses.phone' | t }}</label></td>
<td class="value"><input type="text" id="address_phone_new" class="form-control" placeholder="phone" name="address[phone]" value="{{form.phone}}" size="40" /></td>
</tr>
<tr>
<td class="label">{{ 'customer.addresses.set_default' | t }}</td>
<td class="value">{{ form.set_as_default_checkbox }}
{{ 'customer.addresses.set_default' | t }}
</td>
</tr>
</table>
<div class="action-bottom">
<input class="btn btn-custom" type="submit" value="{{ 'customer.addresses.add' | t }}" />
</div>
{% endform %}
</div>
</div>
</div><!-- /.content -->
<script type="text/javascript" charset="utf-8">
// initialize observers on address selectors
document.querySelectorAll('.address-delete-form').forEach(deleteForm => {
deleteForm.addEventListener('submit', event => {
const confirmMessage = event.target.getAttribute('data-confirm-message');
if (
!window.confirm(
confirmMessage || 'Are you sure you wish to delete this address?'
)
) {
event.preventDefault();
}
});
});
// new Shopify.CountryProvinceSelector('address_country_new', 'address_province_new', {hideElement: 'address_province_container_new'});
// Initialize observers on address selectors
// new Shopify.CountryProvinceSelector('AddressCountryNew', 'AddressProvinceNew', {
// hideElement: 'AddressProvinceContainerNew'
// });
// Modified contents of customer_area.js (global asset)
//console.log("Shopify api => ",Shopify)
Shopify.CustomerAddress = {
toggleForm: function(id) {
var editEl = document.getElementById('edit_address_'+id);
//console.log("editEl",editEl)
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>
Comments
Post a Comment