ProgrammingModel

Date

20220302

Target

C_092

Title

plain, vanilla AJAX 로 비회원 배송비 적용하기

Contents

비회원이 주소를 적으면서 자신의 국가를 선택하면 배송비 UPS 가 상품별로 더해지도록 하기 - 배송업체 : UPS - 배송비 : UPS의 지역구분 1, 2, 3, 4, 41, 5 지역과 해당 지역의 국가들이 상품의 무게에 따라 가격이 결정된다 - 상품 : 탄쯔 상품 각각에 지역에 따른 가격을 미리 명기하였다. 이것은 사실 무식한 방법이다. 상품의 무게 컬럼이 상품 테이블에 있다면 이것을 참고해 가격이 결정되게 하는 것이 바람직할 것이다. 예를 들면 CountryOfCustomer 테이블에 지역 코드, UPSRegionCode가 있으므로 이것을 참고하고 무게를 참고해 무게별 UPS 가격 테이블에 별도로 만들어 사용하는 것이다. 그렇다면 TanzProduct테이블에 upsPriceRegion1, upsPriceRegion2.. 등과 같은 여섯개의 컬럼이 생기지는 않았을 것이다. 어쨌든 위와 같은 정보를 기반으로 비회원이 주소를 적으면서 국가를 선택하면 Delivery Price가 Final Payment Information에 더해지도록 하는 것이 현재의 목표다. 이 목표는 아래 checkDeliveryPrice.js로 정리 완료됨 [checkDeliveryPrice.js의 내용] //20220228 CheckoutNoneMember.cshtml에서 사용자가 국가를 선택하면 배송비가 결정되게 하기 // 1. Id를 가져온다 var CountryOfCustomerId = document.getElementById('CountryOfCustomerId'); // 2.option 선택으로 id 넘버와 국가명을 가져온다. 두 개의 id를 네이밍하고 변수 생성 // id number에 해당 var selectedCountryValue; // 국가명에 해당 var selectedCountryText; // 3.이것은 없어도 되는 것인데 편의상 document.getElemntById()에 해당하는 변수를 생성한 것이다. var optionSelectedCountryValue = document.getElementById('idSelectedCountryValue'); var optionSelectedCountryText = document.getElementById('idSelectedCountryText'); // var deliveryPrice = document.getElementById('idSelectedDeliveryPrice'); CountryOfCustomerId.addEventListener('click', function () { selectedCountryValue = CountryOfCustomerId.options[CountryOfCustomerId.selectedIndex].value; selectedCountryText = CountryOfCustomerId.options[CountryOfCustomerId.selectedIndex].text; optionSelectedCountryValue.textContent = selectedCountryValue; optionSelectedCountryText.textContent = selectedCountryText; //document.getElementById('idSelectedDeliveryPrice').innerHTML = 'hello 200'; // 여기서부터 plain ajax를 적용한다. 20220301 var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://www.barreinabag.com/Cart/GetUpsRegionCode/' + selectedCountryValue, true); xhr.onload = function () { if (this.status == 200) { console.log(this.responseText); //document.getElementById('idDeliveryPrice').innerHTML = this.responseText; //document.getElementById('idSelectedDeliveryPrice').innerHTML = this.responseText; //document.getElementById('idSelectedDeliveryPrice2').innerHTML = this.responseText; var words = (this.responseText).split(','); // 반환값을 ','로 나눈다. 반환값은 ups code, 배송비, 배송비를 합한 총액이다 document.getElementById('idSelectedUpsCode').innerHTML = words[0]; document.getElementById('idDeliveryTotalPriceByCountryAndSelectedProduct').innerHTML = words[1]; //배송비 document.getElementById('idNoneMemberTotalPriceWhenSelectedCountry').innerHTML = words[2]; // 배송비를 합한 총액 document.getElementById('RealPayment').value = words[2]; // 넘어가는 실제 금액 배송비를 합한 총액으로 바꾼다. document.getElementById('idSeeDollarSign').classList.remove("d-none"); document.getElementById('idSeeDollarSign2').classList.remove("d-none"); document.getElementById('idSeeDeliveryPrice').classList.remove("d-none"); document.getElementById('idDeliveryPrice2').innerHTML = words[1]; } else if (this.status == 404) { console.log('Wrong'); } } xhr.send(); // 여기까지가 ajax 실행부다 });