[주문/배송] 모바일쇼핑몰 주문서 작성 시 우편번호 검색 기능개선

2013-07-31

안녕하세요, 카페24 운영도우미 입니다.

모바일쇼핑몰에서 주문서 작성 시 우편번호 찾기를 통하여 주소를 입력하게 됩니다.
기존에 레이어 팝업 형태로 제공되어 긴 주소를 확인하는데 불편함이 있던 부분을
새 창에서 우편번호 검색이 진행되도록 개선되었습니다.

자세한 내용은 아래를 참조해 주세요.

■ 적용일자 : 2013-07-31 (수)

■ 업데이트 내용

모바일쇼핑몰에서 주문정보 작성 시 주소 입력을 위한 우편번호 찾기 화면이 레이어 팝업 형태로 제공되어
검색결과에 노출되는 긴 주소의 경우에는 주소확인 및 선택이 불편했습니다.

보다 쉽게 우편번호 찾기 기능을 이용하실 수 있도록 레이어 팝업이 아닌 새 창으로 UI를 변경하여 제공 드리오니
아래 내용을 확인하신 후 운영에 참고해주시기 바랍니다.
(템플릿 모드 이용 시에는 자동 적용되며, HTML 모드 이용 시에는 아래 내용대로 HTML 수정이 필요합니다.)

1. HTML 소스 수정

아래의 2개 페이지를 안내 소스와 같이 빨간색 소스는 삭제, 파란색 소스는 추가해주세요.

1) 쇼핑몰어드민 > 모바일쇼핑몰 > 디자인 스킨관리 > HTML편집 > 주문서작성

<td>
<input type="text" name="ozipcode1" class="fText" id="ozipcode1" readonly onclick="{{$setZipcodeOrd}}" /> -
<input type="text" name="ozipcode2" class="fText" id="ozipcode2" readonly onclick="{{$setZipcodeOrd}}" />
<a href="#none" class="tButton type2" onclick="{{$setZipcodeOrd}}"><span>우편번호</span></a>
<p style="margin:5px 0 0;"><input type="text" name="oaddr1" class="fText" id="oaddr1" readonly onclick="{{$setZipcodeOrd}}" style="width:98%" /></p>
<p style="margin:5px 0 0;"><input type="text" name="oaddr2" class="fText" id="oaddr2" style="width:98%" /></p>
</td>
<td>
<input type="text" class="fText" name="ozipcode1" id="ozipcode1" readonly maxlength="3" style="width:40px;" /> -
<input type="text" class="fText" name="ozipcode2" id="ozipcode2" readonly maxlength="3" style="width:40px;" />
<a href="javascript:ZipSearchPopOpen('order');" class="tButton type2" ><span>우편번호</span></a>
<p style="margin:5px 0 0;"><input type="text" name="oaddr1" class="fText" id="oaddr1" readonly style="width:98%" /></p>
<p style="margin:5px 0 0;"><input type="text" name="oaddr2" class="fText" id="oaddr2" style="width:98%" /></p>
</td>
## 중간생략 ##

<div class="mTitle">
<h2>배송지 정보</h2>
<div style="float:right;">
<input type="checkbox" class="abs7" name="sameaddr" id="sameaddr1" value="T" onclick="Ord.SelectSameAddress('T');Ord.CalculateTotalPrice();" /> <label for="sameaddr1">주문 고객정보와 동일</label>
</div>
## 중간생략 ##
<td>
<input type="text" class="fText" name="rzipcode1" id="rzipcode1" readonly onclick="{{$setZipcode}}" style="width:40px;" /> -
<input type="text" class="fText" name="rzipcode2" id="rzipcode2" readonly onclick="{{$setZipcode}}" style="width:40px;" />
<a href="#none" class="tButton type2" onclick="{{$setZipcode}}"><span>우편번호</span></a>
<p style="margin:5px 0 0;"><input type="text" name="raddr1" class="fText" id="raddr1" onclick="{{$setZipcode}}" readonly style="width:98%" /></p>
<p style="margin:5px 0 0;"><input type="text" name="raddr2" class="fText" id="raddr2" style="width:98%" /></p>
</td>
<td>
<input type="text" class="fText" name="rzipcode1" id="rzipcode1" readonly maxlength="3" style="width:40px;" /> -
<input type="text" class="fText" name="rzipcode2" id="rzipcode2" readonly maxlength="3" style="width:40px;" />
<a href="javascript:ZipSearchPopOpen('receiver');" class="tButton type2" ><span>우편번호</span></a>
<p style="margin:5px 0 0;"><input type="text" name="raddr1" class="fText" id="raddr1" readonly style="width:98%" /></p>
<p style="margin:5px 0 0;"><input type="text" name="raddr2" class="fText" id="raddr2" style="width:98%" /></p>
</td>
## 하단생략 ##

2) 쇼핑몰어드민 > 모바일쇼핑몰 > 디자인 스킨관리 > HTML편집 > 우편번호찾기

<body style="background-color:#{{$aSkinCfg.zip_bgcolor}};">
<div id="wrap">
<div id="container">
<div class="mTitle">
<h2 style="color:#{{$aSkinCfg.zip_title_font_color}};">우편번호찾기</h2>
</div>
## 중간생략 ##
<form name='frm' id="zipSearchForm" action='/Mobilef/Member/zipsearch.php' method='post'>
<input type="hidden" name="option" id="option" value="searchZip">
<div class="search">
<label for="zipCodeText" style="color:#{{$aSkinCfg.zip_emphatic_font_color}};">지역명</label>
<input id="zipCodeText" name="addrkey" type="text" style="{{$sZipInputStyle}}" />
{{$sSearchBtn}}
</div>
</form>
<form name='frm' id="zipSearchForm" action='/Mobilef/Member/zipsearch.php' method='post'>
<input type="hidden" name="option" id="option" value="searchZip">
<input type="hidden" name="from" id="from" value="{{$sFrom}}">
<div class="search">
<label for="zipCodeText" style="color:#{{$aSkinCfg.zip_emphatic_font_color}};">지역명</label>
<input id="zipCodeText" name="addrkey" type="text" style="{{$sZipInputStyle}}" />
{{$sSearchBtn}}
</div>
</form>
<p>아래의 검색결과 중 해당되는 주소를 클릭하세요.</p>
<ul class="result">
{{if $resultZipSearch.zipcode|@count > 0}}
{{foreach from=$resultZipSearch.zipcode key=iKey item=aItem}}
<li>{{$aItem.zipcode}}<a href="javascript:SearchZipCode('{{$aItem.zipcode}}', '{{$aItem.addr}}');" class='code'>
<a href="javascript:SearchZipCode('{{$aItem.zipcode}}', '{{$aItem.addr}}', '{{$sFrom}}');" class='code'>
## 하단생략 ##

▼ 우편번호 찾기 적용화면

- 우편번호 버튼 터치 시 우측의 지역명 검색화면이 새 창으로 보여집니다.

카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.

궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]

2013-08-13

2013-07-31