API 적용가이드

1. 외부 스크립트를 적용하세요.

상단 공통영역

<script src="https://misong.io/api/js/misong.v1.2.gd.js?id=가맹점회원ID"></script>

하단 공통영역

<script>
$( "#misong_api1" ).misong({
       id : '가맹점회원ID',
       complete : {
               zonecode : 'input[name="zonecode"]',
               zipcode : 'input[name="zipcode"]',
               addr_01 : 'input[name="address"]',
               addr_02 : 'input[name="addressSub"]'
       }
});
$( "#misong_api" ).misong({
       id : '가맹점회원ID',
       complete : {
               zonecode : 'input[name="receiverZonecode"]',
               zipcode : 'input[name="receiverZipcode"]',
               addr_01 : 'input[name="receiverAddress"]',
               addr_02 : 'input[name="receiverAddressSub"]',
               memo : 'input[name="orderMemo"]'
       }
});
</script>

주의하세요!

PC와 모바일 모두 동일하게 상단과 하단영역 스크립트를 삽입해야 합니다.

2. 디자인 페이지에서 미송주소 버튼을 추가하세요.


주문 - 주문서 작성 (원본소스 기준 약 622번 line) 우편번호검색 버튼 옆

<a href="javascript:;" id="misong_api" class="우편번호 버튼과 동일하게" style="margin-left:5px; background:#51AF99; color:#FFF;" >미송주소검색</a>

회원 - [위젯] 회원가입/정보기본 (원본소스 기준 약 207번 line) 우편번호검색 버튼 옆

<a href="javascript:;" id="misong_api1" class="우편번호 버튼과 동일하게" style="margin-left:5px; background:#51AF99; color:#FFF;" >미송주소검색</a>



예시화면

위와 같이 미송주소 버튼은 우편번호 버튼과 동일한 크기 및 레이아웃을 지정해야 합니다.
따라서 기준이 되는 우편번호 버튼의 디자인이 변경된다면 변경한 디자인을 미송주소 버튼에도 적용하고, background:#51AF99; color:#FFF;를 스타일로 지정해야 합니다.

3. 모바일도 함께 적용하세요.

PC와 모바일 환경 모두에서 사용할 수 있는 서비스라면 어느 플랫폼에서나 미송을 이용하여 주소입력이 가능하도록 환경을 구성하여야 합니다.

고도몰의 모바일샵은 약간의 css수정이 필요합니다. 고도몰의 메뉴항목 중 모바일샵 - 디자인 스킨 리스트를 선택하세요.

스타일시트 - gd_contents.css (원본소스 기준 약 1882번 line) .input_address .post-seearch{ 아래부분에 추가

display: inline-block;

스타일시트 - gd_contents.css (원본소스 기준 약 1891번 line) .input_address .zipcode-flex{ 아래 padding 크기변경

padding-right: 140px;



이제 모바일 주문서, 회원가입에 미송주소 버튼만 삽입하면 됩니다.


주문 - 주문서 작성 (원본소스 기준 약 432번 line) 우편번호 버튼 옆

<a href="javascript:;" id="misong_api" class="우편번호 버튼과 동일하게" style="background:#51AF99; color:#FFF;" >미송주소</a>

회원 - [위젯] 회원가입/정보기본 (원본소스 기준 약 191번 line) 우편번호 버튼 옆

<a href="javascript:;" id="misong_api1" class="우편번호 버튼과 동일하게" style="background:#51AF99; color:#FFF;" >미송주소</a>

예시화면



감사합니다! 이제 적용이 완료되었습니다. 테스트 해보시고 미송에 가맹점로그인 하셔서 검수요청 버튼을 눌러주세요.