[모바일쇼핑몰] 비회원 주문조회 기능 추가

2013-05-02

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

모바일쇼핑몰에서도 비회원 구매내역을 조회하실 수 있도록 기능이 추가되어 안내 드립니다.

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

■ 적용일자 : 2013-04-30 (화)

■ 업데이트 내용

모바일쇼핑몰에도 비회원 주문조회 기능이 추가되어 주문자 이름, 주문번호, 비회원 주문 비밀번호 항목
입력 후 해당하는 주문을 조회할 수 있습니다.

'쇼핑몰어드민 > 모바일쇼핑몰 > HTML디자인 > 편집창' 화면으로 이동하신 후
아래의 안내에 따라 html 및 javascript 파일을 수정하시면 정상적으로 적용되어 이용이 가능합니다.

1. 회원(member) > 로그인(login.html)
- 아래의 파란색 소스를 추가합니다.

<div class="mLogin" module="member_login">

<fieldset>
<p>
<span class="loginForm">
{$form.member_id}
{$form.member_passwd}
</span>
<a href="#" onclick="{$action_func_login}" class="tButton type3"><span>로그인</span></a>
<span class="save">{$form.check_save_id}</span>
</p>
<p class="findInfo">아이디/비밀번호 찾기는 PC버전에서 하실 수 있습니다.<input id="check_secret_connect0" name="check_secret_connect" value="T" type="checkbox" checked="checked" style="display:none;"></p>
</fieldset>
<div class="mButton">
<p><a href="/member/agreement.html" class="tSubmit2"><span>회원가입</span></a></p>
</div>
<div class="mButton {$display_nomember|display}">
<p><a href="{$returnUrl}" onclick="{$action_nomember_order}" class="tSubmit2"><span>비회원 구매</span></a></p>
</div>
</div>
<div module="MyShop_OrderHistoryNologin">


<div class="mTitle">
<h2>비회원 주문 조회</h2>
</div>
<div class="mLogin typeOrder">
<fieldset>
<p>
<span class="loginForm">
{$form.order_name}
{$form.order_id}
{$form.order_password}
</span>
<a href="#none" onclick="$('#historyNoLoginForm').submit();" class="tButton type3"><span>조회</span></a>
</p>
<p class="findInfo">비회원인 경우, 주문시 주문번호로 조회가 가능합니다.</p>
</fieldset>
</div>
</div>

2. css > common.css

[수정 전]

/* member */
.mLogin { overflow:hidden; width:240px; margin:50px auto 35px; font-size:11px; }
.mLogin p { overflow:hidden; }
.mLogin p.agree { padding:10px 0; line-height:16px; }
.mLogin .loginForm { position:relative; float:left; width:170px; height:57px; }
.mLogin .loginForm input { width:162px; }
.mLogin .loginForm input:last-child { position:absolute; left:0; bottom:0; }
.mLogin .tButton.type3 { float:right; width:65px; margin:0; border-radius:3px; }
.mLogin .save { display:block; clear:both; padding:5px 0 0; }
.mLogin .findInfo { padding:5px 0 10px; font-size:11px; color:rgb(99,102,110); }

[수정 후]

/* member */
.mLogin { overflow:hidden; width:240px; margin:50px auto 35px; font-size:11px; }
.mLogin p { overflow:hidden; }
.mLogin p.agree { padding:10px 0; line-height:16px; }
.mLogin .loginForm { position:relative; float:left; width:170px; }
.mLogin .loginForm input { width:162px; margin:0 0 8px 0; }
.mLogin .loginForm input:last-child { margin-bottom:0; }
.mLogin .tButton.type3 { float:right; width:65px; margin:0; border-radius:3px; }
.mLogin .save { float:left; padding:5px 0 0 5px; }
.mLogin .auto { float:left; padding:5px 0 0; }
.mLogin .findInfo { padding:5px 0 10px; font-size:11px; color:rgb(99,102,110); }
/* 로그인 - 비회원 주문조회 */
.mLogin.typeOrder .tButton.type3,
.mLogin.typeOrder .tButton.type3 span { height:88px; line-height:88px; }
.mLogin.typeOrder #order_id1,
.mLogin.typeOrder #order_id2 { width:69px; }
.mLogin.typeOrder #order_id1 { margin-right:5px; }
.mLogin.typeOrder #order_id2 { margin-left:5px; }

▼ 적용화면

■ 참고사항

최신소스보기로 전체 화면을 가져왔을 때, 타이틀과 페이징이 깨진다면 아래의 2가지 방법 중 편리한 방법으로
해결이 가능합니다. (css를 수정하는 방법을 추천해드립니다.)

방법 1) HTML 을 수정해서 해결하는 방법
- 마이쇼핑(myshop) > 최근본상품(recent_list.html)
- 전체 소스를 아래 코드로 교체해주세요.

<div class="mTitle">
<h2>관심상품</h2>
</div>


<div class="gTitle">
<h2>관심상품</h2>
</div>



<div class="mPagenate" module="product_recentlistpaging">
<p class="first"><a href="{$param_first}"><span>첫 페이지</span></a></p>
<p class="prev"><a href="{$param_before}"><span>이전 페이지</span></a></p>
<ol>
<li><a href="{$param}" class="{$param_class}">{$no}</a></li>
<li><a href="{$param}" class="{$param_class}">{$no}</a></li>
<li><a href="{$param}" class="{$param_class}">{$no}</a></li>
<li><a href="{$param}" class="{$param_class}">{$no}</a></li>
<li><a href="{$param}" class="{$param_class}">{$no}</a></li>
</ol>
<p class="next"><a href="{$param_next}"><span>다음 페이지</span></a></p>
<p class="last"><a href="{$param_last}"><span>마지막 페이지</span></a></p>
</div>


<div class="mPaging" module="product_recentlistpaging">

<p class="first"><a href="{$param_first}"><span>첫 페이지</span></a></p>
<p class="prev"><a href="{$param_before}"><span>이전 페이지</span></a></p>
<ol>
<li><a href="{$param}" title="페이지로 이동">{$no}</a></li>
<li><a href="{$param}" title="페이지로 이동">{$no}</a></li>
<li><a href="{$param}" title="페이지로 이동">{$no}</a></li>
<li><a href="{$param}" title="페이지로 이동">{$no}</a></li>
<li><a href="{$param}" title="페이지로 이동">{$no}</a></li>
</ol>
<p class="next"><a href="{$param_next}"><span>다음 페이지</span></a></p>
<p class="last"><a href="{$param_last}"><span>마지막 페이지</span></a></p>
</div>

방법 2) CSS를 추가해서 해결하는 방법
- css > common.css
- 아래의 코드를 추가해주세요.

.mTitle { margin:20px 0 0; overflow:hidden; }
.mTitle:first-child { margin:3px 0 0; }
.mTitle h2 { float:left; padding:0 0 3px 16px; font-size:14px; line-height:20px; }
.mTitle h2 img { vertical-align:middle; }
.mTitle p .tButton { margin:0; }
.mTitle h3 { font-size:13px; line-height:20px; }

.mPagenate { margin:15px 0; text-align:center; vertical-align:top; font-weight:bold; }
.mPagenate a,
.mPagenate a.this { display:block; color:rgb(67,68,71); font-size:11px; height:17px; padding:5px; line-height:14px; }
.mPagenate a { color:rgb(161,161,163); outline:none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
.mPagenate ol { vertical-align:top; }
.mPagenate ol, .mPagenate li, .mPagenate p { display:inline-block; }
.mPagenate li, .mPagenate p { overflow:hidden; min-width:22px; height:22px; margin:0 1px; border:2px solid rgb(161,161,163); border-radius:3px; background:rgb(255,255,255); }
.mPagenate p { background:rgb(161,161,163) url(http://img.echosting.cafe24.com/mobileWeb/common/bg_paging.png) 50% 0 no-repeat; background-size:20px 60px; }
.mPagenate p.first { background-position:50% 2px; }
.mPagenate p.prev { background-position:50% -13px; }
.mPagenate p.next { background-position:50% -28px; }
.mPagenate p.last { background-position:50% -43px; }
.mPagenate p span { overflow:hidden; display:block; width:11px; height:19px; text-indent:100%; }

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

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

2013-05-02