Last active
June 17, 2022 06:01
-
-
Save habashyjr/01858b3e91aaf95209733e2f54870c47 to your computer and use it in GitHub Desktop.
Shopify Checkout Address enhancement
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script type="text/javascript"> | |
| var url = new URL(location.href); | |
| var locale = url.searchParams.get('locale') | |
| Checkout.$(document).on('page:load page:change', async function() { | |
| if(Shopify.Checkout.step == 'contact_information'){ | |
| document.getElementById("checkout_shipping_address_zip").value = "00000"; | |
| document.getElementById("checkout_shipping_address_zip").parentNode.style.display = "none"; | |
| } | |
| if(Shopify.Checkout.step == 'shipping_method'){ | |
| document.getElementsByClassName('edit_checkout')[0].submit(); | |
| } | |
| if(Shopify.Checkout.step == 'payment_method'){ | |
| document.getElementsByClassName('section--billing-address')[0].style.display = "none"; | |
| } | |
| }); | |
| function testJSON(text) { | |
| if (typeof text !== "string") { | |
| return false; | |
| } | |
| try { | |
| JSON.parse(text); | |
| return true; | |
| } catch (error) { | |
| return false; | |
| } | |
| } | |
| let regxPattern = /["{}]+/g; | |
| let allCities = { | |
| "3": "6th of October", | |
| "29": "Alexandria", | |
| "347": "AL Amriah", | |
| "348": "Borg AL Arab", | |
| "49": "Al Sharqia", | |
| "365": "Belbis", | |
| "370": "Inshas", | |
| "381": "10th of Ramadan City", | |
| "388": "Zakazik", | |
| "30": "Aswan", | |
| "31": "Asyut", | |
| "32": "Beheira", | |
| "360": "Damanhour", | |
| "378": "Al Nobariah", | |
| "389": "Wadi El Natroun", | |
| "33": "Beni Suef", | |
| "4": "Abbasiya", | |
| "5": "Agouza", | |
| "6": "Dokki", | |
| "7": "Downtown", | |
| "8": "Ghamra", | |
| "9": "Haram", | |
| "10": "Heliopolis", | |
| "12": "Katameya", | |
| "13": "Maadi", | |
| "14": "Manial", | |
| "15": "Misr El Qadeema", | |
| "16": "Mohandseen", | |
| "17": "Mokatam", | |
| "18": "Nasr City", | |
| "19": "New Cairo", | |
| "20": "New Nozha", | |
| "21": "Obour City", | |
| "22": "Rehab", | |
| "23": "Shobra", | |
| "24": "Shorouk", | |
| "25": "Tagammoa El Khames", | |
| "26": "Zamalek", | |
| "84": "Madinty", | |
| "179": "Hdayek El Kobba", | |
| "181": "Matarya", | |
| "182": "Kerdasa", | |
| "184": "Bulaq", | |
| "188": "Badr city", | |
| "190": "Ain Shams", | |
| "191": "El salam city", | |
| "344": "AL Waraq", | |
| "345": "Moustorod", | |
| "346": "Torah", | |
| "374": "15 Of May City", | |
| "386": "Tebin", | |
| "34": "Dakahlia", | |
| "366": "Belqas", | |
| "558": "Al Mansoura", | |
| "35": "Damietta", | |
| "36": "Faiyum", | |
| "37": "Gharbia", | |
| "369": "Desouk", | |
| "377": "Al Mahala", | |
| "387": "Tanta", | |
| "28": "Giza", | |
| "183": "Hawamdia", | |
| "185": "Embaba", | |
| "186": "El mounib", | |
| "187": "Badrasheen", | |
| "189": "Haday2 el ahram", | |
| "353": "Abo Rawash", | |
| "355": "El Ayat", | |
| "357": "Dahshour", | |
| "359": "El Korimat", | |
| "362": "Atfeah", | |
| "371": "Bargiel", | |
| "382": "Saqara", | |
| "11": "Helwan", | |
| "38": "Ismailia", | |
| "352": "Fayid", | |
| "39": "Kafr el-Sheikh", | |
| "52": "Luxor", | |
| "40": "Matruh", | |
| "41": "Minya", | |
| "42": "Monufia", | |
| "380": "Quesna", | |
| "383": "Sadat City", | |
| "384": "Shebin El Koum", | |
| "437": "New valley", | |
| "43": "North Sinai", | |
| "45": "Port Said", | |
| "46": "Qalyubia", | |
| "361": "Abu Zaabal", | |
| "363": "Beigam", | |
| "364": "BAHTEM", | |
| "367": "Benha", | |
| "372": "Kaha", | |
| "373": "Shubra El Kheima", | |
| "379": "Al Qanater", | |
| "385": "Khanka", | |
| "47": "Qena", | |
| "44": "Hurghada", | |
| "48": "Red Sea", | |
| "50": "Sohag", | |
| "435": "Sharm El Shikh", | |
| "436": "El Tor", | |
| "1751": "Taba", | |
| "1752": "Ras Sidr", | |
| "51": "Suez", | |
| "350": "Ein Al Sukhna" | |
| }; | |
| function createAddressNewForm() { | |
| if (Shopify.Checkout.step == 'contact_information') { | |
| if (document.querySelector('.flex_wrapper')) return; | |
| /** | |
| * Helpers | |
| */ | |
| // Select element by query | |
| function $( query, parent = document ) { | |
| return parent.querySelector( query ); | |
| } | |
| // Sort cities alphabetical | |
| function sort( governorates ) { | |
| const result = {}; | |
| for ( let governorate in governorates ) { | |
| const cities = Object.entries( governorates[ governorate ] ); | |
| const sorted = cities.sort( ( a, b ) => a[ 1 ] > b[ 1 ] ? 1 : -1 ); | |
| result[ governorate ] = {}; | |
| sorted.map( ([ code, city ]) => { | |
| const currentGovernorate = result[ governorate ]; | |
| currentGovernorate[ city ] = code; | |
| }); | |
| } | |
| return result; | |
| } | |
| try { | |
| // check if the city has error ( empty ) | |
| const oldCityField = $( '[data-address-field="city"]' ); | |
| const error = $( '[id="error-for-city"]', oldCityField ); | |
| // remove city field | |
| oldCityField.remove(); | |
| // fetch all cities | |
| // const req = await fetch( '/business/api/v1/parameter/cities/EG' ); | |
| // const data = await req.json(); | |
| // if ( data.error ) { | |
| // throw new Error( 'Request failed' ); | |
| // } | |
| // const cities = data.cities; | |
| var cities; | |
| if (locale == 'ar') { | |
| cities = { | |
| "SU": { | |
| "3": "السادس من اكتوبر" | |
| }, | |
| "ALX": { | |
| "29": "الإسكندرية", | |
| "347": "الأميرية", | |
| "348": "برج العرب" | |
| }, | |
| "SHR": { | |
| "49": "الشرقية", | |
| "365": "بلبيس", | |
| "370": "انشاس", | |
| "381": "العاشر من رمضان", | |
| "388": "الزقازيق" | |
| }, | |
| "ASN": { | |
| "30": "أسوان" | |
| }, | |
| "AST": { | |
| "31": "اسيوط" | |
| }, | |
| "BH": { | |
| "32": "البحيرة", | |
| "360": "دمنهور", | |
| "378": "النوبارية", | |
| "389": "وادي النطرون" | |
| }, | |
| "BNS": { | |
| "33": "بني سويف" | |
| }, | |
| "C": { | |
| "4": "العباسية", | |
| "5": "العجوزة", | |
| "6": "الدقي", | |
| "7": "وسط البلد", | |
| "8": "غمرة", | |
| "9": "الهرم", | |
| "10": "مصر الجديدة", | |
| "12": "القطامية", | |
| "13": "المعادي", | |
| "14": "المنيل", | |
| "15": "مصر القديمه", | |
| "16": "المهندسين", | |
| "17": "المقطم", | |
| "18": "مدينة نصر", | |
| "19": "القاهرة الجديدة", | |
| "20": "النزهة الجديدة", | |
| "21": "مدينة العبور", | |
| "22": "رحاب", | |
| "23": "شبرا", | |
| "24": "الشروق", | |
| "25": "التجمع الخامس", | |
| "26": "الزمالك", | |
| "84": "مدينتي", | |
| "179": "حدائق القبة", | |
| "181": "المطرية", | |
| "182": "كرداسة", | |
| "184": "بولاق", | |
| "188": "مدينة بدر", | |
| "190": "عين شمس", | |
| "191": "مدينة السلام", | |
| "344": "الوراق", | |
| "345": "مسطرد", | |
| "346": "التوراة", | |
| "374": "15 مايو", | |
| "386": "Tebin", | |
| }, | |
| "DK": { | |
| "34": "الدقهلية", | |
| "366": "بلقاس", | |
| "558": "المنصورة" | |
| }, | |
| "DT": { | |
| "35": "دمياط" | |
| }, | |
| "FYM": { | |
| "36": "الفيوم" | |
| }, | |
| "GH": { | |
| "37": "الغربية", | |
| "369": "دسوق", | |
| "377": "المحلة", | |
| "387": "طنطا" | |
| }, | |
| "GZ": { | |
| "28": "الجيزة", | |
| "183": "الحوامدية", | |
| "185": "أمبابة", | |
| "186": "المنيب", | |
| "187": "بدراشين", | |
| "189": "حدائق الأهرام", | |
| "353": "أبو رواش", | |
| "355": "العياط", | |
| "357": "دهشور", | |
| "359": "الكريمات", | |
| "362": "أطفيح", | |
| "371": "البرجيل", | |
| "382": "سقارة" | |
| }, | |
| "HU": { | |
| "11": "حلوان" | |
| }, | |
| "IS": { | |
| "38": "الإسماعيلية", | |
| "352": "فايد" | |
| }, | |
| "KFS": { | |
| "39": "كفر الشيخ" | |
| }, | |
| "LX": { | |
| "52": "الأقصر" | |
| }, | |
| "MT": { | |
| "40": "مطروح" | |
| }, | |
| "MN": { | |
| "41": "المنيا" | |
| }, | |
| "MNF": { | |
| "42": "مونوفيا", | |
| "380": "قويسنا", | |
| "383": "مدينة السادات", | |
| "384": "شبين الكوم" | |
| }, | |
| "WAD": { | |
| "437": "الوادي الجديد" | |
| }, | |
| "SIN": { | |
| "43": "شمال سيناء" | |
| }, | |
| "PTS": { | |
| "45": "بورسعيد" | |
| }, | |
| "KB": { | |
| "46": "القليوبية", | |
| "361": "أبو زعبل", | |
| "363": "بجيم", | |
| "364": "بهتيم", | |
| "367": "بنها", | |
| "372": "قها", | |
| "373": "شبرا الخيمة", | |
| "379": "القناطر", | |
| "385": "الخنكة" | |
| }, | |
| "KN": { | |
| "47": "قنا" | |
| }, | |
| "BA": { | |
| "44": "الغردقة", | |
| "48": "البحر الأحمر" | |
| }, | |
| "SHG": { | |
| "50": "سوهاج" | |
| }, | |
| "JS": { | |
| "435": "شرم الشيخ", | |
| "436": "الطور", | |
| "1751": "طابا", | |
| "1752": "رأس سدر" | |
| }, | |
| "SUZ": { | |
| "51": "السويس", | |
| "350": "العين السخنة" | |
| } | |
| } | |
| } else { | |
| cities = { | |
| "SU": { | |
| "3": "6th of October", | |
| }, | |
| "ALX": { | |
| "29": "Alexandria", | |
| "347": "AL Amriah", | |
| "348": "Borg AL Arab" | |
| }, | |
| "SHR": { | |
| "49": "Al Sharqia", | |
| "365": "Belbis", | |
| "370": "Inshas", | |
| "381": "10th of Ramadan City", | |
| "388": "Zakazik" | |
| }, | |
| "ASN": { | |
| "30": "Aswan" | |
| }, | |
| "AST": { | |
| "31": "Asyut" | |
| }, | |
| "BH": { | |
| "32": "Beheira", | |
| "360": "Damanhour", | |
| "378": "Al Nobariah", | |
| "389": "Wadi El Natroun" | |
| }, | |
| "BNS": { | |
| "33": "Beni Suef" | |
| }, | |
| "C": { | |
| "4": "Abbasiya", | |
| "5": "Agouza", | |
| "6": "Dokki", | |
| "7": "Downtown", | |
| "8": "Ghamra", | |
| "9": "Haram", | |
| "10": "Heliopolis", | |
| "12": "Katameya", | |
| "13": "Maadi", | |
| "14": "Manial", | |
| "15": "Misr El Qadeema", | |
| "16": "Mohandseen", | |
| "17": "Mokatam", | |
| "18": "Nasr City", | |
| "19": "New Cairo", | |
| "20": "New Nozha", | |
| "21": "Obour City", | |
| "22": "Rehab", | |
| "23": "Shobra", | |
| "24": "Shorouk", | |
| "25": "Tagammoa El Khames", | |
| "26": "Zamalek", | |
| "84": "Madinty", | |
| "179": "Hdayek El Kobba", | |
| "181": "Matarya", | |
| "182": "Kerdasa", | |
| "184": "Bulaq", | |
| "188": "Badr city", | |
| "190": "Ain Shams", | |
| "191": "El salam city", | |
| "344": "AL Waraq", | |
| "345": "Moustorod", | |
| "346": "Torah", | |
| "374": "15 Of May City", | |
| "386": "Tebin", | |
| }, | |
| "DK": { | |
| "34": "Dakahlia", | |
| "366": "Belqas", | |
| "558": "Al Mansoura" | |
| }, | |
| "DT": { | |
| "35": "Damietta" | |
| }, | |
| "FYM": { | |
| "36": "Faiyum" | |
| }, | |
| "GH": { | |
| "37": "Gharbia", | |
| "369": "Desouk", | |
| "377": "Al Mahala", | |
| "387": "Tanta" | |
| }, | |
| "GZ": { | |
| "28": "Giza", | |
| "183": "Hawamdia", | |
| "185": "Embaba", | |
| "186": "El mounib", | |
| "187": "Badrasheen", | |
| "189": "Haday2 el ahram", | |
| "353": "Abo Rawash", | |
| "355": "El Ayat", | |
| "357": "Dahshour", | |
| "359": "El Korimat", | |
| "362": "Atfeah", | |
| "371": "Bargiel", | |
| "382": "Saqara" | |
| }, | |
| "HU": { | |
| "11": "Helwan", | |
| }, | |
| "IS": { | |
| "38": "Ismailia", | |
| "352": "Fayid" | |
| }, | |
| "KFS": { | |
| "39": "Kafr el-Sheikh" | |
| }, | |
| "LX": { | |
| "52": "Luxor" | |
| }, | |
| "MT": { | |
| "40": "Matruh" | |
| }, | |
| "MN": { | |
| "41": "Minya" | |
| }, | |
| "MNF": { | |
| "42": "Monufia", | |
| "380": "Quesna", | |
| "383": "Sadat City", | |
| "384": "Shebin El Koum" | |
| }, | |
| "WAD": { | |
| "437": "New valley" | |
| }, | |
| "SIN": { | |
| "43": "North Sinai" | |
| }, | |
| "PTS": { | |
| "45": "Port Said" | |
| }, | |
| "KB": { | |
| "46": "Qalyubia", | |
| "361": "Abu Zaabal", | |
| "363": "Beigam", | |
| "364": "BAHTEM", | |
| "367": "Benha", | |
| "372": "Kaha", | |
| "373": "Shubra El Kheima", | |
| "379": "Al Qanater", | |
| "385": "Khanka" | |
| }, | |
| "KN": { | |
| "47": "Qena" | |
| }, | |
| "BA": { | |
| "44": "Hurghada", | |
| "48": "Red Sea" | |
| }, | |
| "SHG": { | |
| "50": "Sohag" | |
| }, | |
| "JS": { | |
| "435": "Sharm El Shikh", | |
| "436": "El Tor", | |
| "1751": "Taba", | |
| "1752": "Ras Sidr" | |
| }, | |
| "SUZ": { | |
| "51": "Suez", | |
| "350": "Ein Al Sukhna" | |
| } | |
| } | |
| } | |
| cities = sort( cities ); | |
| const newCityField = ` | |
| <div class="field field--required field--show-floating-label field--third ${ error ? 'field--error' : '' }" data-address-field="city" data-autocomplete-field-container="true"> | |
| <div class="field__input-wrapper field__input-wrapper--select"> | |
| <label class="field__label field__label--visible" for="checkout_shipping_address_city">City</label> | |
| <select placeholder="City" autocomplete="shipping city" autocorrect="off" data-trekkie-id="shipping_city_field" data-backup="city" class="field__input field__input--select selectCity" aria-required="true" name="checkout[shipping_address][city]" id="checkout_shipping_address_city"> | |
| <option disabled selected="true">City</option> | |
| </select> | |
| <div class="field__caret shown-if-js"> | |
| <svg class="icon-svg icon-svg--color-adaptive-lighter icon-svg--size-10 field__caret-svg" aria-hidden="true" focusable="false"> <use xlink:href="#caret-down"></use> </svg> | |
| </div> | |
| </div> | |
| ${ error ? error.outerHTML : '' } | |
| </div> | |
| `; | |
| let city = document.createElement( 'div' ); | |
| city.innerHTML = newCityField; | |
| city = city.firstElementChild; | |
| // governorate field | |
| const governorate = $( '[data-address-field="province"]' ); | |
| const selectGovernorate = $( 'select', governorate ); | |
| const selectedGovernorate = selectGovernorate.options[ selectGovernorate.selectedIndex ].value; | |
| // inject new select cities | |
| governorate.parentNode.insertBefore( city, governorate.nextSibling ); | |
| const cityCode = $( '[id="checkout_shipping_address_city"]', oldCityField ).value; | |
| // handle empty fields ( governorate, city ) | |
| if ( error && selectGovernorate.selectedIndex !== 0 || cityCode ) { | |
| appendOptions( Object.entries ( cities[ selectedGovernorate ] ) ); | |
| $( 'select', city ).value = cityCode; | |
| } | |
| function createOption([ value , code ]) { | |
| const option = document.createElement( 'option' ); | |
| option.setAttribute( 'data-code', code ); | |
| option.setAttribute( 'value', code ); | |
| option.innerText = value; | |
| return option; | |
| } | |
| function appendOptions( listOfCities ) { | |
| listOfCities.map( c => { | |
| const option = createOption( c ); | |
| $( 'select', city ).appendChild( option ); | |
| }); | |
| // if the governorate has only one city, select it automatically | |
| if ( listOfCities.length === 1 ) { | |
| $( 'select', city ).selectedIndex = 1; | |
| $( '[data-address-field="city"]' ).classList.remove( 'field--error' ); | |
| } | |
| } | |
| function handleSelectGovernorate() { | |
| let key = null; | |
| let value = null; | |
| let option = null; | |
| const country = $( '[data-address-field="country"]' ); | |
| value = selectGovernorate.value; | |
| option = $( `[value=${ value }]`, selectGovernorate ); | |
| if ( option === null ) { | |
| throw new Error( `Cannot find an option with the value "${ value }"` ); | |
| } | |
| key = option.innerText; | |
| // remove city field if country is not Egypt | |
| if ( $( 'select', country ).value !== 'Egypt' ) { | |
| city.remove(); | |
| } | |
| // remove old cities and inject cities associated with governorate | |
| if ( value in cities ) { | |
| city.querySelectorAll( 'option' ).forEach(( option ) => { | |
| // leave the disabled option ( first option ) | |
| if ( option.disabled ) { | |
| return | |
| } | |
| option.remove(); | |
| }); | |
| appendOptions( Object.entries( cities[ value ] ) ); | |
| } | |
| } | |
| // add change event on select governorate | |
| selectGovernorate.addEventListener( 'change', handleSelectGovernorate , false ); | |
| } catch( err ) { | |
| // ignore the error for now! | |
| console.log( err ); | |
| } | |
| // Validate phone number | |
| var phoneField = document.querySelectorAll('[data-address-field="phone"]')[0]; | |
| var phone = document.getElementById('checkout_shipping_address_phone'); | |
| var errorPhone = document.querySelectorAll( '[id="error-for-phone"]', phoneField )[0]; | |
| function validatePhoneNumber() { | |
| var validNum = true | |
| const pattern = /^(((\+|00)?2)?0)(10|11|12|15)(\d{8})$/; | |
| // prevent submission and show error if phone number is not valid | |
| if (!pattern.test(phone.value.replace(/ /g, ''))) { | |
| //e.preventDefault(); | |
| phoneField.classList.add('field--error'); | |
| phone.focus(); | |
| // add error msg if it does not exsit | |
| if (!errorPhone) { | |
| errorPhone = document.createElement('p'); | |
| errorPhone.setAttribute('id', 'error-for-phone'); | |
| errorPhone.setAttribute('class', 'field__message field__message--error'); | |
| errorPhone.innerText = 'Enter a valid phone number'; | |
| phoneField.appendChild(errorPhone); | |
| } | |
| validNum = false; | |
| } | |
| return validNum; | |
| } | |
| function createElement() { | |
| // create address elements | |
| let elements = document.createElement('div'); | |
| elements.className = 'flex_wrapper' | |
| let elementsFields = ` | |
| <div class="flex_item"> | |
| <!-- Building --> | |
| <div class="field field--required floating-labels field--show-floating-label field--third" data-address-field="building"> | |
| <div class="field__input-wrapper"> | |
| <label class="field__label field__label--visible" for="checkout_shipping_address_building">Building عمارة/فيلا</label> | |
| <input placeholder="Building" autocomplete="shipping given-name" data-trekkie-id="shipping_building_field" | |
| data-backup="building" class="field__input addressDetails" aria-required="true" type="text" value="" | |
| name="checkout[shipping_address][building]" id="checkout_shipping_address_building"> | |
| </div> | |
| <p class="field__message error_msg" id="error_building">Enter building number / <br /> ادخل رقم العماره - الفيـﻻ</p> | |
| </div> | |
| <!-- Street --> | |
| <div class="field field--required field--two-thirds floating-labels field--show-floating-label" data-address-field="street"> | |
| <div class="field__input-wrapper"> | |
| <label class="field__label field__label--visible" for="checkout_shipping_address_street">Street الحى/المجاورة/شارع</label> | |
| <input placeholder="Street" autocomplete="shipping given-name" data-trekkie-id="shipping_street_field" | |
| data-backup="floor" class="field__input addressDetails" aria-required="true" type="text" value="" | |
| name="checkout[shipping_address][street]" id="checkout_shipping_address_street"> | |
| </div> | |
| <p class="field__message error_msg" id="error_street">Please enter street name at least 6 characters / <br /> ادخل اسم الشارع عﻻقل 6 حروف </p> | |
| </div> | |
| </div> | |
| <div class="flex_item"> | |
| <!-- Floor --> | |
| <div class="field field--required floating-labels field--show-floating-label field--third" data-address-field="floor"> | |
| <div class="field__input-wrapper"> | |
| <label class="field__label field__label--visible" for="checkout_shipping_address_floor">Floor دور</label> | |
| <input placeholder="Floor" autocomplete="shipping given-name" data-trekkie-id="shipping_floor_field" | |
| data-backup="floor" class="field__input addressDetails" aria-required="true" type="text" value="" | |
| name="checkout[shipping_address][floor]" id="checkout_shipping_address_floor"> | |
| </div> | |
| <p class="field__message error_msg" id="error_floor">Enter only valid numbers / ادخل رقم الدور</p> | |
| </div> | |
| <!-- Apartment --> | |
| <div class="field field--required field--third floating-labels field--show-floating-label" data-address-field="apartment"> | |
| <div class="field__input-wrapper"> | |
| <label class="field__label field__label--visible" for="checkout_shipping_address_apartment">Apartment شقة</label> | |
| <input placeholder="Apartment" autocomplete="shipping given-name" data-trekkie-id="shipping_apartment_field" | |
| data-backup="apartment" class="field__input addressDetails" aria-required="true" type="text" value="" | |
| name="checkout[shipping_address][apartment]" id="checkout_shipping_address_apartment"> | |
| </div> | |
| <p class="field__message error_msg" id="error_apartment">Enter apartment number / ادخل رقم الشقة</p> | |
| </div> | |
| <!-- Landmark --> | |
| <div class="field field--required floating-labels field--show-floating-label field--third" data-address-field="landmark"> | |
| <div class="field__input-wrapper"> | |
| <label class="field__label field__label--visible" for="checkout_shipping_address_landmark">Landmark علامة مميزة</label> | |
| <input placeholder="Landmark" autocomplete="shipping given-name" data-trekkie-id="shipping_landmark_field" | |
| data-backup="landmark" class="field__input addressDetails" aria-required="true" type="text" value="" | |
| name="checkout[shipping_address][landmark]" id="checkout_shipping_address_landmark"> | |
| </div> | |
| <p class="field__message error_msg" id="error_landmark">Enter landmark /<br /> برجاء ادخال عـﻻمه مميزه</p> | |
| </div> | |
| </div>`; | |
| elements.innerHTML = elementsFields; | |
| return elements; | |
| } | |
| // appending all address elements inside the form | |
| let lastNameElement = document.querySelector('[data-address-field="last_name"]'); | |
| lastNameElement.after(createElement()); | |
| // Change shipping button text to 'Payment' | |
| let paymentBtn = document.querySelector('.step__footer__continue-btn'); | |
| paymentBtn.querySelector('span').textContent = 'Continue to payment'; | |
| let data = {}; | |
| let streetEl = document.getElementById('checkout_shipping_address_street'); | |
| let floorEl = document.getElementById('checkout_shipping_address_floor'); | |
| let buildingEl = document.getElementById('checkout_shipping_address_building'); | |
| let landmarkEl = document.getElementById('checkout_shipping_address_landmark'); | |
| let apartmentEl = document.getElementById('checkout_shipping_address_apartment'); | |
| let addressOne = document.getElementById('checkout_shipping_address_address1'); | |
| let addressTwo = document.getElementById('checkout_shipping_address_address2'); | |
| let addressDataArr = getSavedValue(); | |
| // Getting address data values from form inputs | |
| function getAddressData() { | |
| var form = document.getElementsByClassName('fieldset')[0]; | |
| var allInputs = form.getElementsByClassName('addressDetails'); | |
| for (let i = 0; i < allInputs.length; i++) { | |
| var str = allInputs[i].name; | |
| var val = allInputs[i].value; | |
| var strArr = str.slice(str.lastIndexOf('[') + 1).replace(/[^a-zA-Z0-9-. ]/g, "").split('.'); | |
| generateObj(data, strArr, val); | |
| function generateObj(obj, arr, val) { | |
| if (arr.length === 1) { | |
| obj[arr[0]] = val; | |
| return; | |
| } | |
| var restArr = arr.splice(1); | |
| if (!obj[arr[0]]) { | |
| obj[arr[0]] = {}; | |
| } | |
| generateObj(obj[arr[0]], restArr, val); | |
| } | |
| }; | |
| // object values | |
| var addressValuesArr = Object.values(data); | |
| // Combine all address values and split them to address1 and addres2 fields | |
| let dataAddressArr = []; | |
| dataAddressArr = Object.entries(data).map(([k, v]) => ({ | |
| [k]: v | |
| })) | |
| let fisrtObjAddress = Object.assign(dataAddressArr[0], dataAddressArr[1]); | |
| let secondObjAddress = Object.assign(dataAddressArr[2], dataAddressArr[3], dataAddressArr[4]); | |
| addressOne.value = `${JSON.stringify(fisrtObjAddress)}`; | |
| addressTwo.value = `${JSON.stringify(secondObjAddress)}`; | |
| // Saving data to localStorage | |
| function saveAddressValue() { | |
| localStorage.setItem('addressData', JSON.stringify(data)); | |
| } | |
| saveAddressValue(); | |
| return data; | |
| } | |
| // Get address data from localStorage | |
| function getSavedValue() { | |
| if (!localStorage.getItem('addressData')) { | |
| return null; | |
| } | |
| return JSON.parse(localStorage.getItem('addressData'));; | |
| } | |
| var floorInputVal = !localStorage.getItem('addressData') ? '' : addressDataArr["floor"] | |
| var streetInputVal = !localStorage.getItem('addressData') ? '' : addressDataArr["street"] | |
| var landmarkInputVal = !localStorage.getItem('addressData') ? '' : addressDataArr["landmark"] | |
| var buildingInputVal = !localStorage.getItem('addressData') ? '' : addressDataArr["building"] | |
| var apartmentInputVal = !localStorage.getItem('addressData') ? '' : addressDataArr["apartment"] | |
| floorEl.setAttribute('value', floorInputVal); | |
| streetEl.setAttribute('value', streetInputVal); | |
| landmarkEl.setAttribute('value', landmarkInputVal); | |
| buildingEl.setAttribute('value', buildingInputVal); | |
| apartmentEl.setAttribute('value', apartmentInputVal); | |
| var errorFloorMsg = document.getElementById('error_floor'); | |
| var errorStreetMsg = document.getElementById('error_street'); | |
| var errorLandmarkMsg = document.getElementById('error_landmark'); | |
| var errorBuildingMsg = document.getElementById('error_building'); | |
| var errorApartmentMsg = document.getElementById('error_apartment'); | |
| var firstNameEL = document.getElementById('checkout_shipping_address_first_name'); | |
| var lastNameEL = document.getElementById('checkout_shipping_address_last_name'); | |
| var cityEle = document.getElementById('checkout_shipping_address_city'); | |
| function validateFormAddInputs() { | |
| var submitted = true; | |
| validatePhoneNumber() | |
| var regexNumber = /^([0-9]+|[\u0660-\u0669]+)$/g; | |
| if(firstNameEL.value == '') { | |
| const errorFirstNAme = document.createElement('p') | |
| errorFirstNAme.setAttribute('class', 'first-name-error') | |
| errorFirstNAme.textContent = 'Enter first name.' | |
| firstNameEL.parentNode.insertBefore(errorFirstNAme, firstNameEL.nextSibling) | |
| firstNameEL.classList.add('error'); | |
| submitted = false; | |
| } else { | |
| firstNameEL.classList.remove('error'); | |
| } | |
| if(lastNameEL.value == '') { | |
| const errorLastNAme = document.createElement('p') | |
| errorLastNAme.setAttribute('class', 'last-name-error') | |
| errorLastNAme.textContent = 'Enter last name.' | |
| lastNameEL.parentNode.insertBefore(errorLastNAme, lastNameEL.nextSibling) | |
| lastNameEL.classList.add('error'); | |
| submitted = false; | |
| } else { | |
| lastNameEL.classList.remove('error'); | |
| } | |
| if (cityEle.value == '') { | |
| const errorCity = document.createElement('p') | |
| errorCity.setAttribute('class', 'city-error') | |
| errorCity.textContent = 'Enter a city.' | |
| cityEle.parentNode.insertBefore(errorCity, cityEle.nextSibling) | |
| cityEle.classList.add('error'); | |
| submitted = false; | |
| } else { | |
| cityEle.classList.remove('error'); | |
| } | |
| if (!floorEl.value.match(regexNumber)) { | |
| errorFloorMsg.style.display = 'block'; | |
| floorEl.classList.add('error'); | |
| submitted = false | |
| } else { | |
| errorFloorMsg.style.display = 'none'; | |
| floorEl.classList.remove('error'); | |
| } | |
| if (streetEl.value == '' || streetEl.value == 0 || streetEl.value.length < 6) { | |
| errorStreetMsg.style.display = 'block'; | |
| streetEl.classList.add('error'); | |
| submitted = false | |
| } else { | |
| errorStreetMsg.style.display = 'none'; | |
| streetEl.classList.remove('error'); | |
| } | |
| if (buildingEl.value == '' || buildingEl.value == 0) { | |
| errorBuildingMsg.style.display = 'block'; | |
| buildingEl.classList.add('error'); | |
| submitted = false | |
| } else { | |
| errorBuildingMsg.style.display = 'none'; | |
| buildingEl.classList.remove('error'); | |
| } | |
| if (apartmentEl.value == '' || apartmentEl.value == 0) { | |
| errorApartmentMsg.style.display = 'block'; | |
| apartmentEl.classList.add('error'); | |
| submitted = false | |
| } else { | |
| errorApartmentMsg.style.display = 'none'; | |
| apartmentEl.classList.remove('error'); | |
| } | |
| if (landmarkEl.value == '' || landmarkEl.value == 0) { | |
| errorLandmarkMsg.style.display = 'block'; | |
| landmarkEl.classList.add('error'); | |
| submitted = false | |
| } else { | |
| errorLandmarkMsg.style.display = 'none'; | |
| landmarkEl.classList.remove('error'); | |
| } | |
| return submitted; | |
| } | |
| let continueBtn = document.getElementById('continue_button'); | |
| continueBtn.onclick = function() { | |
| if(!validateFormAddInputs() || !validatePhoneNumber()) { | |
| setTimeout(() => { | |
| this.classList.remove('btn--loading') | |
| this.removeAttribute('disabled') | |
| }, 1000) | |
| } | |
| } | |
| document.forms[0].addEventListener('submit', (e) => { | |
| if (validateFormAddInputs() && validatePhoneNumber()) { | |
| getAddressData() | |
| } else { | |
| e.preventDefault() | |
| } | |
| }); | |
| if (document.getElementById('checkout_shipping_address_id')) { | |
| // delete all special chars from option's text and replace city num with the name | |
| let selectMultipleAdd = document.getElementById('checkout_shipping_address_id'); | |
| let options = selectMultipleAdd.querySelectorAll('option'); | |
| options.forEach(item => { | |
| // Remove any options don't have new address format | |
| let parsedOption = JSON.parse(item.getAttribute('data-properties')) | |
| // Skip new address | |
| if (parsedOption == null) { | |
| return parsedOption | |
| } | |
| if (!testJSON(parsedOption.address1) && !testJSON(parsedOption.address2)) { | |
| selectMultipleAdd.remove(parsedOption) | |
| } | |
| item.text = item.text.replace(/[{}]+/g, ' ').replace(/"/g, ' ').replace(/, 00000/g, ' ').replace(/ : /g, ': ').replace(/ , /g, ', ').replace(/ /g, ' '); | |
| if (!item.value == '') { | |
| let arr = item.text.split(','); | |
| arr.splice(6, 1, ' ' + allCities[+arr[6]]) | |
| item.text = arr.toString(); | |
| } | |
| }) | |
| // Set the selected value for the default address | |
| if (localStorage.getItem('lastsSelectedAdrress')) { | |
| selectMultipleAdd.value = localStorage.getItem('lastsSelectedAdrress') | |
| let selectedOption = selectMultipleAdd.options[selectMultipleAdd.selectedIndex] | |
| var phoneEl = document.getElementById('checkout_shipping_address_phone'); | |
| var firstNameEL = document.getElementById('checkout_shipping_address_first_name'); | |
| var lastNameEL = document.getElementById('checkout_shipping_address_last_name'); | |
| var cityEl = document.getElementsByClassName('selectCity')[0]; | |
| var govEl = document.getElementById('checkout_shipping_address_province') | |
| if (!selectedOption) { | |
| buildingEl.value = ''; | |
| streetEl.value = ''; | |
| floorEl.value = ''; | |
| apartmentEl.value = ''; | |
| landmarkEl.value = ''; | |
| phoneEl.value = ''; | |
| firstNameEL.value = ''; | |
| lastNameEL.value = ''; | |
| addressOne.value = ''; | |
| addressTwo.value = ''; | |
| govEl.value = ''; | |
| handleSelectGovernorate() | |
| cityEl.value = ''; | |
| } else { | |
| var currentOption = JSON.parse(selectMultipleAdd.options[selectMultipleAdd.selectedIndex].getAttribute('data-properties')); | |
| let address1 = JSON.parse(currentOption.address1); | |
| let address2 = JSON.parse(currentOption.address2); | |
| buildingEl.value = address1.building; | |
| streetEl.value = address1.street; | |
| floorEl.value = address2.floor; | |
| apartmentEl.value = address2.apartment; | |
| landmarkEl.value = address2.landmark; | |
| phoneEl.value = currentOption.phone; | |
| firstNameEL.value = currentOption.first_name; | |
| lastNameEL.value = currentOption.last_name; | |
| addressOne.value = currentOption.address1; | |
| addressTwo.value = currentOption.address2; | |
| govEl.value = currentOption.province_code; | |
| handleSelectGovernorate() | |
| cityEl.value = currentOption.city; | |
| } | |
| } | |
| document.forms[0].addEventListener('change', (e) => { | |
| e.stopPropagation(); | |
| }) | |
| // Fill address fields on change options | |
| selectMultipleAdd.onchange = (e) => { | |
| e.stopPropagation(); | |
| let addElements = document.getElementsByClassName('addressDetails'); | |
| var streetEl = document.getElementById('checkout_shipping_address_street'); | |
| var floorEl = document.getElementById('checkout_shipping_address_floor'); | |
| var buildingEl = document.getElementById('checkout_shipping_address_building'); | |
| var landmarkEl = document.getElementById('checkout_shipping_address_landmark'); | |
| var apartmentEl = document.getElementById('checkout_shipping_address_apartment'); | |
| var phoneEl = document.getElementById('checkout_shipping_address_phone'); | |
| var firstNameEL = document.getElementById('checkout_shipping_address_first_name'); | |
| var lastNameEL = document.getElementById('checkout_shipping_address_last_name'); | |
| var addressOne = document.getElementById('checkout_shipping_address_address1'); | |
| var addressTwo = document.getElementById('checkout_shipping_address_address2'); | |
| var cityEl = document.getElementsByClassName('selectCity')[0]; | |
| var govEl = document.getElementById('checkout_shipping_address_province') | |
| let selectedOption = selectMultipleAdd.options[selectMultipleAdd.selectedIndex] | |
| let currentOption = JSON.parse(selectMultipleAdd.options[selectMultipleAdd.selectedIndex].getAttribute('data-properties')); | |
| if (currentOption == null || currentOption.address1 == null || currentOption.address2 == null) { | |
| govEl.value = 'C'; | |
| handleSelectGovernorate() | |
| cityEl.value = ''; | |
| Array.from(document.forms[0].getElementsByTagName('input')).forEach((input) => { | |
| input.value = ''; | |
| input.parentElement.parentElement.classList.remove('field--show-floating-label'); | |
| }) | |
| } else { | |
| if (testJSON(currentOption.address1) && testJSON(currentOption.address2)) { | |
| let address1 = JSON.parse(currentOption.address1); | |
| let address2 = JSON.parse(currentOption.address2); | |
| govEl.value = currentOption.province_code; | |
| handleSelectGovernorate() | |
| cityEl.value = currentOption.city; | |
| buildingEl.value = address1.building; | |
| streetEl.value = address1.street; | |
| floorEl.value = address2.floor; | |
| apartmentEl.value = address2.apartment; | |
| landmarkEl.value = address2.landmark; | |
| phoneEl.value = currentOption.phone; | |
| firstNameEL.value = currentOption.first_name; | |
| lastNameEL.value = currentOption.last_name; | |
| addressOne.value = currentOption.address1; | |
| addressTwo.value = currentOption.address2; | |
| Array.from(addElements).forEach((element) => { | |
| element.parentElement.parentElement.classList.add('field--show-floating-label'); | |
| }) | |
| } | |
| } | |
| localStorage.setItem('lastsSelectedAdrress', selectMultipleAdd.value) | |
| } | |
| } | |
| } | |
| if (Shopify.Checkout.step == 'payment_method') { | |
| let addressTxt = document.getElementsByClassName('address--tight')[0]; | |
| let txt = addressTxt.innerText.replace(regxPattern, ' '); | |
| let test = document.getElementById('checkout_shipping_address_city'); | |
| let txtArr = txt.split(","); | |
| txtArr.splice(6, 1, ' ' + allCities[+txtArr[6]]); | |
| addressTxt.innerText = txtArr.toString().replace(/, 00000/g, ' ').replace(/ : /g, ': ').replace(/ , /g, ', ').replace(/ /g, ' '); | |
| addressTxt.style.display = 'block'; | |
| } | |
| } | |
| Checkout.$(document).on('page:load page:change', async function () { | |
| createAddressNewForm() | |
| }); | |
| // Thank you page | |
| let addressTahnkEls = document.querySelectorAll('address'); | |
| addressTahnkEls.forEach(element => { | |
| let addTxt = element.innerText.replace(regxPattern, ' ').replace(/, 00000/g, '').replace(/00000/g, '').replace(/ : /g, ': ').replace(/ , /g, ', ').replace(/ /g, ' '); | |
| element.innerText = addTxt; | |
| let addTxtHTML = element.innerHTML; | |
| let txtArr = addTxtHTML.split("<br>"); | |
| txtArr.splice(4, 1, allCities[+txtArr[4]]); | |
| var filtered = txtArr.filter(Boolean); | |
| element.innerHTML = filtered.join("<br>"); | |
| }) | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment