portfolio
주문서 페이지에서 개인통관부호 입력하기
0
공유하기
고도몰에서 제공하는 주문서 추가 정보 기능을 활용하면 상품별로 필요한 데이터를 수집할 수 있지만, 단순한 입력 필드이다 보니 개인통관고유부호(P + 숫자 12자리)와 같은 정교한 형식 검증에는 한계가 있었습니다.
이를 해결하기 위해 고도몰 튜닝을 진행하였습니다.
'P' 자동 고정으로 사용자는 입력란에 단순히 숫자 12자리만 입력하면 끝입니다.
입력란에서 커서를 떼서 포커스를 이동하면 입력란에 테두리 색상과 하단 문구로 빠르고 직관적인 유효성 검사를 실시합니다.
또한 관세청 링크 버튼을 가까이 배치하여 사용자가 주문서 페이지를 이탈하는 것을 방지하였습니다.
※ 고도몰의 추가정보 기능을 활용하여 튜닝하였습니다.
1. 관리자페이지 주문서 추가정보 설정 페이지에서 텍스트박스 형태의 개인통관부호 입력란을 생성합니다.
2. 쇼핑몰 주문서 페이지에서 관리자가 위에서 설정한 주문서 추가 정보 영역이 생성됩니다.
관리자가 개인통관부호를 입력하면 입력란에 자동으로 검증 프로그램이 진행됩니다.
개인통관번호를 제대로 입력하지 않은 상태에서 결제하기 버튼을 누르면 숫자 12자리를 정확히 입력해주세요라는 팝업창을 띄워 사용자에게 알려줍니다.
3. 사용자가 12자리 숫자를 정확하게 입력한 경우에는 녹색 테두리와 글자로 형식이 올바르게 입력되었습니다. 라는 안내문구를 하단에 보여줍니다.
4. 주문이 완료되면 관리자 주문 상세정보 페이지에서 사용자가 추가로 입력한 추가 정보가 관리자에게 보여집니다.
댓글 0개
댓글을 불러오는 중입니다.
친절한 개발자에게
무엇이든 물어보세요
1
주문서 페이지에서 개인통관부호 입력하기