쪽지 APP 디자인적용가이드
I. 쪽지 APP 소개 2
I. 쪽지 APP 소개 쪽지 APP 을통해쇼핑몰의특정회원또는특정등급의회원그룹에게 알림메시지나마케팅을위한쪽지를발송하실수있습니다. 쪽지 APP의주요기능 1. 전체회원, 특정ID, 특정회원그룹별로쪽지발송가능 2. 발송예약기능 3. 발송한쪽지에대해수신및열람내역조회가능 4. 쇼핑몰페이지에서쪽지함과쪽지알림창제공 3
II. 디자인적용하기 4
1 새쪽지알림창 회원이로그인을하면새쪽지가있는경우쇼핑몰페이지우측하단에새쪽지알림창을보여줍니다. 회원이알림창을클릭시, 새쪽지를바로확인할수있습니다. 참고화면 소스복사아래파란색소스를복사하세요. <!-- // 쪽지APP_ 새쪽지알림창 --> <div module="groupmessage_messagealarm"> {$salarmhtml} 해당소스는앱샘플소스를복사하셨다면앱 > 쪽지 > skin1 (apps/groupmessage/alarm.html) 에서도복사하실수있습니다 붙여넣기할위치 레이아웃 > 기본레이아웃 > 공통레이아웃 (/layout>basic>layout.html) 레이아웃 > 기본레이아웃 > 메인레이아웃 (/layout>basic>main.html) body 태그가닫히기전최하단에삽입하세요. 5
2 쪽지함 (1/2) 회원이받은쪽지를확인하고관리할수있는쪽지함페이지입니다. 참고화면 6
2 쪽지함 (2/2) 소스복사 아래파란색소스를복사하여, /myshop/message.html 위치에신규페이지를생성하세요. <!--@layout(/layout/basic/layout.html)--> <div module="groupmessage_messagelist"> <!--@css(/apps/groupmessage/skin1/list.css)--> <!-- $count = 10 --> <div> <div> <div class="title"> <h2> 쪽지함 </h2> <p> 쇼핑몰의새소식과혜택정보를만나보세요.</p> <div class="boardlist"> <p class="keepinfo"> 쪽지는 <strong>100 일 </strong> 간보관됩니다. </p> <table border="1" summary="" class="rowchk"> <caption> 쪽지함목록 </caption> <colgroup> <col style="width: 50px;" /> <col style="width: auto;" /> <col style="width: 150px;" /> <col style="width: 120px;" /> </colgroup> <thead> <tr> <th scope="col"><input class="allchk" value="all" type="checkbox" /></th> <th scope="col"> 제목 </th> <th scope="col"> 보낸사람 </th> <th scope="col"> 받은날짜 </th> </tr> </thead> <tbody> <tr>{$message_data}</tr> <tr>{$message_data}</tr> </tbody> </table> <div class="ctrl"> <strong> 선택한쪽지를 </strong> <a href="#" class="_bind_message_delete"><img src="http://img.echosting.cafe24.com/skin/base_ko_kr/order/btn_delete2.gif" alt=" 삭제하기 " /></a> <div module="groupmessage_messagelistpaging"> <!--@css(/apps/groupmessage/skin1/list.css)--> <p> <a href="{$param_first}"><img src="http://img.echosting.cafe24.com/skin/base_ko_kr/common/btn_page_prev.gif" alt=" 이전페이지 " /></a> </p> <ol> </ol> <p> <a href="{$param_next}"><img src="http://img.echosting.cafe24.com/skin/base_ko_kr/common/btn_page_next.gif" alt=" 다음페이지 " /></a> </p> 해당소스는앱샘플소스를복사하셨다면앱 > 쪽지 > skin1 (apps/groupmessage/list.html) 에서도복사하실수있습니다 7
3 쪽지함링크 : 상단 쇼핑몰상단우측에서쪽지함페이지로바로갈수있는쪽지아이콘및링크, 그리고새쪽지수를표시합니다. 참고화면 소스복사 아래파란색소스를복사하세요. <ul module="layout_shoppinginfo"> <!--@css(/css/module/layout/shoppinginfo.css)--> <li class="{$use_mileage display}"><a href="/myshop/mileage/historylist.html"> 적립금 <strong>{$mileage}</strong></a></li> <li class="{$use_basket_cnt display}"><a href="/order/basket.html"> 장바구니 <strong>{$basket_cnt}<span class="{$use_basket_price display}">({$basket_price})</span></strong></a></li> <li class="{$use_interest_prd display}"><a href="/myshop/wish_list.html"> 관심상품 <strong>{$interest_prd_cnt}</strong></a></li> <li class="{$use_coupon_cnt display}"><a href="/myshop/coupon/coupon.html"> 쿠폰 <strong>{$coupon_cnt}</strong></a></li> <li class="{$use_deposit display}"><a href="/myshop/deposits/historylist.html"> 예치금 <strong>{$deposit}</strong></a></li> <!-- // 쪽지APP_ 쪽지함링크상단 --> <li><div module="groupmessage_messagealarm">{$salarmhtml} <div module="groupmessage_messagemenu"><a href="/myshop/message.html"><img src="{$msg_new_icon}" /> {$msg_name} <strong>{$msg_new_count} 개 </strong></a></li> </ul> 해당소스는앱샘플소스를복사하셨다면앱 > 쪽지 > skin1 (apps/groupmessage/menu.html) 에서도복사하실수있습니다 붙여넣기할위치 레이아웃 > 기본레이아웃 > 공통레이아웃 (/layout>basic>layout.html) 레이아웃 > 기본레이아웃 > 메인레이아웃 (/layout>basic>main.html) Layout_shoppinginfo 모듈내원하는위치에삽입하세요 8
4 쪽지함링크 : 마이쇼핑내 마이쇼핑메인페이지에서쪽지함페이지로바로갈수있는링크와새쪽지수를표시합니다. 참고화면 소스복사 아래파란색소스를복사하세요. <div module="myshop_bankbook"> <!--@css(/css/module/myshop/bankbook.css)--> <ul> <li class="{$display_mileage display}"> <strong class="title"> 가용 {$mileage_name}</strong> <strong class="data use"> {$avail_mileage}</strong> <a href="/myshop/mileage/historylist.html"><img src="http://img.echosting.cafe24.com/skin/base_ko_kr/myshop/btn_result.gif" alt=" 조회 " /></a> </li> /// 중간생략 /// <li class="etc {$display_coupon display}"> <strong class="title"> 쿠폰 </strong> <strong class="data">{$coupon_cnt}<span> 개 </span></strong> <a href="/myshop/coupon/coupon.html"><img src="http://img.echosting.cafe24.com/skin/base_ko_kr/myshop/btn_result.gif" alt=" 조회 " /></a> </li> <!-- // 쪽지 APP_ 쪽지함링크마이쇼핑 --> <li class="etc"> <strong class="title"> 쪽지 </strong> <strong class="data"><div module="groupmessage_messagenewcount">{$total_new_count}<span> 개 </span></strong> <a href="/myshop/message.html"><img src="http://img.echosting.cafe24.com/skin/base_ko_kr/myshop/btn_result.gif" alt=" 조회 " /></a> </li> </ul> 해당소스는앱샘플소스를복사하셨다면앱 > 쪽지 > skin1 (apps/groupmessage/new_count.html) 에서도복사하실수있습니다 붙여넣기할위치 마이쇼핑 > 마이쇼핑메인 (/myshop/index.html) myshop_bankbook 모듈내원하는위치에삽입하세요. 9