Application Checkout Address Korean Website
Hello !
I am currently building a website in korea, and I try to add this plugg-in options to my checkout page:
By clicken this button, we arrive to an pop-up that will look for a complete adress just by entering the postal code. It's really common in south korea but I can't find which application offer this solutions.
By any chance, any members would have a thoughts on which app to use ?
I tried to search through the code source but could find any. The website I use as references is: THISISNEVERTHAT (kor version checkout page)
And I will add the soruce code just in case for oyur references. Please let me know if you have any thoughts?
(function($) {
$(document).on("page:load page:change", function() {
$("select#checkout_shipping_address_id").find('option:selected', this).removeAttr('selected');
$("select#checkout_shipping_address_id option:first").attr('selected','selected');
$("select#checkout_shipping_address_id").trigger('change');
var provience = $("#checkout_shipping_address_province").val();
$("#checkout_shipping_address_address1").prop('readonly', true);
$("#checkout_shipping_address_zip").prop('readonly', true);
$('#checkout_shipping_address_province option:not(:selected)').prop('disabled', true)
$('<button class="btn fill_address ">주소 검색</button>').insertAfter('#checkout_shipping_address_zip');
});
jQuery(document).on('click', '#continue_button', function() {
$('#checkout_shipping_address_province option:not(:selected)').prop('disabled', false);
$('#checkout_shipping_address_province option:selected').prop('disabled', false);
});
jQuery(document).on('click', 'div[data-address-field="zip"]', function(e) {
e.preventDefault();
jQuery('.addresspopup').css('display', 'block');
jQuery('body').addClass('popup_overlay');
jQuery('.addresspopup_back').css('display', 'block');
});
jQuery(document).on('keyup', '.customer_address', function() {
var searchAdd = jQuery(this).val();
jQuery('.addr_error').html('');
if(searchAdd) {
jQuery.ajax({
url: 'https://thisisneverthat-jknd.com/app/address/address_api.php',
type: 'POST',
data: {
action : 'search_korea_address',
shop : 'thisisneverthatstore.myshopify.com',
searchAdd : searchAdd
},
success: function(result){
var array = JSON.parse(result);
if(typeof array !== 'undefined' && array.length > 0) {
jQuery('.address_suggestion').html('');
jQuery('.address_suggestion').css('display', 'grid');
jQuery('.customer_address').addClass('open');
jQuery('.addr_error').removeClass('address_error');
jQuery('.addr_error').html('');
for(var i = 0; i < array.length; i++) {
var address = array[i].fulladdress;
var address1 = array[i].address1;
var city = array[i].city;
var province = array[i].province;
var province1 = array[i].province1;
var zip = array[i].zip;
var country = array[i].country;
var fulladdress = 'address1:'+address1+';city:'+city+';province:'+province1+';zip:'+zip+';country:'+country;
var cutStart = province1.length + city.length + 2;
var address1_new = address.substring(cutStart);
var fulladdress = 'address1:'+address1_new+';city:'+city+';province:'+province1+';zip:'+zip+';country:'+country;
jQuery('.address_suggestion').append('<li value="'+address+'">'+zip+' '+address+'<p class="fulladdress">'+fulladdress+'</p></li>');
}
} else {
jQuery('.addr_error').html('');
jQuery('.address_suggestion').css('display', 'none');
jQuery('.customer_address').removeClass('open');
jQuery('.addr_error').addClass('address_error');
jQuery('.address_error').append('<span>검색 결과가 없습니다. 정확한 주소인지 확인해 주세요.</span>');
}
}
});
} else {
jQuery('.address_suggestion').css('display', 'none');
jQuery('.customer_address').removeClass('open');
jQuery('.addr_error').removeClass('address_error');
}
});
jQuery(document).on('click', '.address_suggestion li', function() {
var address = $(this).attr('value');
//console.log("address",address);
var fulladdress = jQuery(this).find('.fulladdress').text();
jQuery('.address_suggestion').css('display', 'none');
jQuery('.customer_address').removeClass('open');
jQuery('.addresspopup').css('display', 'none');
jQuery('body').removeClass('popup_overlay');
jQuery('.addresspopup_back').css('display', 'none');
var split_address = fulladdress.split(';');
var expldAdd1 = split_address[0].split('address1:');
var expldCity = split_address[1].split('city:');
var expldPrvnc = split_address[2].split('province:');
var expldZip = split_address[3].split('zip:');
var expldCntry = split_address[4].split('country:');
//console.log("split_address",split_address);
if(expldPrvnc[1] == "세종특별자치시"){
var addressdata = address.split(' ');
let address1 ='';
let i;
for (i in addressdata){
address1 = i >=1 ? address1 +' '+addressdata[i] : '';
}
jQuery('#checkout_shipping_address_address1').val(address1);
} else if(expldPrvnc[1]=="경기도" || expldPrvnc[1]=="충청북도" || expldPrvnc[1]=="충청남도" ||expldPrvnc[1]=="전라북도" ||expldPrvnc[1]=="경상북도" || expldPrvnc[1]=="경상남도"){
var addressdata = address.split(' ');
console.log(addressdata)
let address1 ='';
let i;
for (i in addressdata){
address1 = i >=2 ? address1 +' '+addressdata[i] : '';
}
jQuery('#checkout_shipping_address_address1').val(address1);
}
else{
jQuery('#checkout_shipping_address_address1').val(expldAdd1[1]);
}
jQuery('.address2').val('');
if(expldCity[1]==""){
jQuery('.city').val('세종시');
}
else if(expldPrvnc[1]=="경기도" || expldPrvnc[1]=="충청북도" || expldPrvnc[1]=="충청남도" ||expldPrvnc[1]=="전라북도" ||expldPrvnc[1]=="경상북도" || expldPrvnc[1]=="경상남도"){
var citydata = expldCity[1].split(' ');
// console.log("citydata",citydata);
jQuery('.city').val(citydata[0]);
}else{
jQuery('.city').val(expldCity[1]);
}
jQuery('#checkout_shipping_address_province option:selected').removeAttr('selected');
// console.log(expldPrvnc[1]);
// console.log(jQuery('#checkout_shipping_address_province option').val());
jQuery('#checkout_shipping_address_province option:contains('+expldPrvnc[1]+')').attr('selected', 'selected');
// jQuery('#checkout_shipping_address_province option[data-alternate-values="'+expldPrvnc[1]+'"]').attr('selected', 'selected');
jQuery('#checkout_shipping_address_zip').val(expldZip[1]);
// if(expldCity[1]==""){
if(address.indexOf("세종특별자치시") != -1){
jQuery('#checkout_shipping_address_city').val('세종시');
}else if(expldPrvnc[1]=="경기도" || expldPrvnc[1]=="충청북도" || expldPrvnc[1]=="충청남도" ||expldPrvnc[1]=="전라북도" ||expldPrvnc[1]=="경상북도" || expldPrvnc[1]=="경상남도"){
var citydata = expldCity[1].split(' ');
// console.log("citydata",citydata);
jQuery('#checkout_shipping_address_city').val(citydata[0]);
}
else{
jQuery('#checkout_shipping_address_city').val(expldCity[1]);
}
jQuery('#checkout_shipping_address_country option:selected').removeAttr('selected');
jQuery('#checkout_shipping_address_country option[value="'+expldCntry[1]+'"]').attr('selected', 'selected');
//jQuery('#checkout_shipping_address_country').val(expldCntry[1]);
jQuery('.fullAddress').val(fulladdress);
});
jQuery(document).on('click', '.addresspopup_close,.addresspopup_back', function() {
jQuery('.address_suggestion').css('display', 'none');
jQuery('.addresspopup').css('display', 'none');
jQuery('body').removeClass('popup_overlay');
jQuery('.addresspopup_back').css('display', 'none');
jQuery('.customer_address').removeClass('open');
// jQuery('html, body').animate({
// scrollTop: jQuery(".countryCheck").offset().top
// }, 2000);
});
jQuery(document).on('click', '.Cart__Checkout-copy', function(e){
e.preventDefault();
var cust_lname = jQuery('.last_name').val();
var oldcust_lname = '';
var cust_fname = jQuery('.first_name').val();
var oldcust_fname = '';
var address1 = jQuery('.address1').val();
var fulladdress = jQuery('.fullAddress').val();
var address2 = jQuery('.address2').val();
var oldAddress2 = '';
var city = jQuery('.city').val();
var zip = jQuery('.zip').val();
var country = jQuery('.country').val();
var province = jQuery('.province option:selected').val();
var oldProvince = '';
var cust_phone = jQuery('.phone').val();
var oldcust_phone = '';
var phoneno = /^\(?([0-9]{3})\)?[- ]?([0-9]{4})[- ]?([0-9]{4})$/;
var keywords = [];
$( ".cart-data" ).each(function() {
var quantity = $(this).find('.js--num').val();
var variant_id = $(this).find(".cart_prdtit").attr('data-id');
var data = variant_id+':'+quantity;
keywords.push(data);
});
if(cust_lname != '' && cust_fname != '' && address1 != '' && cust_phone != '') {
if(province != 'Select') {
if((address1 != fulladdress) || (address2 != oldAddress2) || (cust_lname != oldcust_lname) || (cust_fname != oldcust_fname) || (cust_phone != oldcust_phone) || (province != oldProvince)) {
if(cust_phone.match(phoneno)) {
var customerId = '6321267114159';
var addressId = '';
jQuery.ajax({
url: 'https://thisisneverthat-jknd.com/app/address/address_api.php',
type: 'POST',
data: {
action : 'update_address',
shop : 'thisisneverthatstore.myshopify.com',
customerId : customerId,
customrLName : cust_lname,
customrFName : cust_fname,
addressId : addressId,
address1 : address1,
address2 : address2,
city : city,
province : province,
zip : zip,
country : country,
phone : cust_phone
},
success: function(result){
// console.log(result);
var data = JSON.parse(result);
if(data.status != '주소가 업데이트 되었습니다!') {
alert(data.status);
return false;
} else {
window.location.replace('https://thisisneverthat.com/cart/'+keywords+'?checkout[shipping_address][zip]='+zip+'&checkout[shipping_address][address1]='+address1+'&checkout[shipping_address][city]='+city+'&checkout[shipping_address][last_name]='+cust_lname+'&checkout[shipping_address][first_name]='+cust_fname+'');
// jQuery('.Cart__Checkout').removeAttr('disabled');
// jQuery('.Cart__Checkout').trigger('click');
}
}
});
} else {
alert('Please enter valid Phone number!');
}
} else {
window.location.replace('https://thisisneverthat.com/cart/'+keywords+'?checkout[shipping_address][zip]='+zip+'&checkout[shipping_address][address1]='+address1+'&checkout[shipping_address][city]='+city+'&checkout[shipping_address][last_name]='+cust_lname+'&checkout[shipping_address][first_name]='+cust_fname+'');
// jQuery('.Cart__Checkout').removeAttr('disabled');
// jQuery('.Cart__Checkout').trigger('click');
}
} else {
alert('Please select valid Province!');
}
} else {
alert('Please fill the required fields.');
}
});
})(Checkout.$);
$("#customer_address").on("propertychange change keyup paste input", function() {
$('.customer_address_wrap').addClass('on');
// 현재 변경된 데이터 셋팅
var newValue = $(this).val();
if ( newValue.trim() == '') {
$('.customer_address_wrap').removeClass('on');
} else {
$('.customer_address_wrap').addClass('on')
}
});
Merci
Hello !
We are building an app for this and in the process of submitting it to the Shopify App store now, it should be avaible in the next 2 weeks
I hope you all find it useful here is a sneak peak:
I will post a link again once its live in the App store! ˆˆ
Let me know what other Korean apps you would like
Thanks
Stevie
Seoul Commerce
Community Blog Articles
Get ready for peak holiday selling season 2024
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024
Highlights | Top Contributors August '24
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024
Recap | An AMA with 2H Media: Marketing Your Shopify Store!
Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024