Help Center

카페24 소식

공지사항업데이트스토어소식

[프로모션] 출석체크 이벤트 모바일 적용 안내

2014-04-09

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


출석체크 이벤트가 모바일 쇼핑몰에도 적용 가능하도록 개선되었습니다.


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


■ 적용일자 : 2013-04-09(수)

■ 업데이트 내용

PC 쇼핑몰에서 가능하던 출석체크 이벤트가 모바일 쇼핑몰에도 적용 가능하도록 개선되었습니다.

모바일에 적용 하려면 모바일 편집창에서 HTML 페이지 추가 및 수정,CSS 페이지가 추가되어야 합니다.

■ HTML 페이지 수정 / 신규 폴더 및 페이지 추가

1) 페이지 수정

* 파란색 소스를 추가합니다.

- 위치 : 모바일 쇼핑몰 > 디자인편집하기 >전체화면보기 > 쇼핑몰 메인(index.html)

<!--@layout(/layout/basic/layout.html)-->

 

<div module="Popup_Mobile">{$mobile}</div>

 

<div class="mainBanner">

    <a href="#none"><img src="http://img.echosting.cafe24.com/design/skin/mobile/bnr_sample.jpg" alt="" /></a>

</div>
                                            :

                                    (중간생략)
:

<div class="mPrdList typeThumb" module="product_listmain_3">

    <!--@css(/css/module/product/listmain_3.css)-->

    <!--

    $count = 3

    -->

    <h2>{$category_title_text}</h2>

    <ul class="grid3">

        <li>

            <div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$image_medium}" alt="" /></a></div>

            <div class="information">

                <p class="name"><a href="/product/detail.html{$param}">{$product_name}</a> {$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons}</p>

                <p class="price {$product_sale_strike}">{$product_price} <span class="{$product_price_ref_display|display}">{$txt_product_price_ref}</span></p>

                <p class="price {$product_sale_display|display}">{$product_sale_price}</p>

            </div>

        </li>

        <li>

            <div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$image_medium}" alt="" /></a></div>

            <div class="information">

                <p class="name"><a href="/product/detail.html{$param}">{$product_name}</a> {$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons}</p>

                <p class="price {$product_sale_strike}">{$product_price} <span class="{$product_price_ref_display|display}">{$txt_product_price_ref}</span></p>

                <p class="price {$product_sale_display|display}">{$product_sale_price}</p>

            </div>

        </li>

    </ul>

</div>

 

<p module="Layout_attendBanner">

    <!--@css(/layout/basic/css/attendBanner.css)-->

    <!--

        $stamp_type_url = /attend/stamp.html

        $comment_type_url = /attend/comment.html

    -->

    <a href="{$attend_url}"><img src="http://img.echosting.cafe24.com/design/skin/mobile/bn_attend.gif" alt="출석체크 이벤트(매일매일 출석도장 쾅쾅쾅)" /></a>

</p>

 

<p module="layout_info">

    <!--@css(/layout/basic/css/info.css)-->

    <a href="tel:{$phone}">고객센터 : {$phone}</a>

</p>



※ 아래 소스를 모두 추가합니다.

2) 폴더 및 페이지 추가

- 폴더 생성위치 : 최상위 폴더 안에 생성(최상위폴더 : mobile)

- 폴더 생성방법 : 모바일 쇼핑몰 > 디자인편집하기 > 전체화면보기 > 폴더추가 클릭

- 폴더 생성이름 : attend

- 페이지 생성위치 : attend 폴더 안에 추가

- 페이지 생성방법 : 모바일 쇼핑몰 > 디자인편집하기 > 전체화면보기 > 화면추가 클릭

- 페이지 생성이름 : comment.html

<!--@layout(/layout/basic/layout.html)-->

<div class="titleArea">

    <h2>출석체크</h2>

</div>

<div module="Attend_commentPackage">

    <!--@css(/css/module/attend/calendarPackage.css)-->

    <div module="attend_calendarhead">

        <!--

            $login_page = /member/login.html

        -->

        <div class="inner">

            <p class="prev"><a href="{$prev_month}"><img src="http://img.echosting.cafe24.com/design/skin/mobile/btn_calendar_prev.png" alt="이전 달" /></a></p>

            <p class="date">

                <span>{$year}</span>

                <span class="month">.{$month}</span>

            </p>

            <p class="next"><a href="{$next_month}"><img src="http://img.echosting.cafe24.com/design/skin/mobile/btn_calendar_next.png" alt="다음 달" /></a></p>

        </div>

    </div>

    <div module="attend_calendar">

        <table border="1" summary="">

            <!--

                $login_page = /member/login.html

            -->

            <caption>출석이벤트 달력</caption>

            <colgroup>

                <col style="width:14.3%;" />

                <col style="width:14.3%;" />

                <col style="width:14.3%;" />

                <col style="width:14.3%;" />

                <col style="width:14.3%;" />

                <col style="width:14.3%;" />

                <col style="width:14.2%;" />

            </colgroup>

            <thead>

                <tr>

                    <th scope="col">SUN</th>

                    <th scope="col">MON</th>

                    <th scope="col">TUE</th>

                    <th scope="col">WED</th>

                    <th scope="col">THU</th>

                    <th scope="col">FRI</th>

                    <th scope="col">SAT</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td><p>{$sun}</p></td>

                    <td><p>{$mon}</p></td>

                    <td><p>{$the}</p></td>

                    <td><p>{$wed}</p></td>

                    <td><p>{$thu}</p></td>

                    <td><p>{$fri}</p></td>

                    <td><p>{$sat}</p></td>

                </tr>

                <tr>

                    <td><p>{$sun}</p></td>

                    <td><p>{$mon}</p></td>

                    <td><p>{$the}</p></td>

                    <td><p>{$wed}</p></td>

                    <td><p>{$thu}</p></td>

                    <td><p>{$fri}</p></td>

                    <td><p>{$sat}</p></td>

                </tr>

            </tbody>

        </table>

    </div>

    <!--@css(/css/module/attend/commentPackage.css)-->

    <div module="attend_CommentTitle">

        <p>{$title}</p>

    </div>

    <div module="attend_commentwrite">

        <!--

            $login_page = /member/login.html

        -->

        <fieldset>

            <legend>댓글 작성</legend>

            <p class="security {$secure_display|display}">

                <img src="{$secure_img}" alt="보안문자"/>

                {$form.secure_text}

                <span class="desc">* 왼쪽의 문자를 공백없이 입력하세요.(대소문자구분)</span>

            </p>

            <p class="form">

                <span id="attendCommentInputWrap">

                    {$form.comment}

                </span>

                <span id="attendCommentBtnWrap">

                    <input type="submit" value="등록" onclick="{$action_attend}" />

                </span>

            </p>

        </fieldset>

    </div>

    <!-- 메모 반복 -->

    <ul module="attend_commentList">

        <!--

            $login_page = /member/login.html

            $only_html = no

            $count = 30

        -->

        <li>

            <span class="name">[{$no}] {$member_name} ({$member_id})</span>

            <span class="date">{$attend_date|date:Y-m-d}</span>

            <span class="memo">{$content}</span>

        </li>

        <li>

            <span class="name">[{$no}] {$member_name} ({$member_id})</span>

            <span class="date">{$attend_date|date:Y-m-d}</span>

            <span class="memo">{$content}</span>

        </li>

    </ul>

    <div module="attend_commentpaging">

        <!--

            $login_page = /member/login.html

        -->

       <!--@css(/css/module/attend/commentpaging.css)-->

        <p class="first"><a href="{$first_url}"><span>첫 페이지</span></a></p>

        <p class="prev"><a href="{$prev_url}"><span>이전 페이지</span></a></p>

        <ol>

            <li><a href="{$url_query}" class="{$param_class}">{$n}</a></li>

            <li><a href="{$url_query}" class="{$param_class}">{$n}</a></li>

            <li><a href="{$url_query}" class="{$param_class}">{$n}</a></li>

        </ol>

        <p class="next"><a href="{$next_url}"><span>다음 페이지</span></a></p>

        <p class="last"><a href="{$last_url}"><span>마지막 페이지</span></a></p>

    </div>

</div>

   - 페이지 생성위치 : attend 폴더 안에 추가

- 페이지 생성방법 : 모바일 쇼핑몰 > 디자인편집하기 > 전체화면보기 > 화면추가 클릭

- 페이지 생성이름 : stamp.html

<!--@layout(/layout/basic/layout.html)-->
<div class="titleArea">
    <h2>출석체크</h2>
</div>
<div module="Attend_calendarPackage">
    <!--@css(/css/module/attend/calendarPackage.css)-->
    <div module="attend_calendarhead">
        <!--
            $login_page = /member/login.html
        -->
        <div class="inner">
            <p class="prev"><a href="{$prev_month}"><img src="http://img.echosting.cafe24.com/design/skin/mobile/btn_calendar_prev.png" alt="이전 달" /></a></p>
            <p class="date">
                <span>{$year}</span>
                <span class="month">.{$month}</span>
            </p>
            <p class="next"><a href="{$next_month}"><img src="http://img.echosting.cafe24.com/design/skin/mobile/btn_calendar_next.png" alt="다음 달" /></a></p>
        </div>
    </div>
    <div module="attend_calendar">
        <table border="1" summary="">
            <!--
                $login_page = /member/login.html
            -->
            <caption>출석이벤트 달력</caption>
            <colgroup>
                <col style="width:14.3%;" />
                <col style="width:14.3%;" />
                <col style="width:14.3%;" />
                <col style="width:14.3%;" />
                <col style="width:14.3%;" />
                <col style="width:14.3%;" />
                <col style="width:14.2%;" />
            </colgroup>
            <thead>
                <tr>
                    <th scope="col">SUN</th>
                    <th scope="col">MON</th>
                    <th scope="col">TUE</th>
                    <th scope="col">WED</th>
                    <th scope="col">THU</th>
                    <th scope="col">FRI</th>
                    <th scope="col">SAT</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><p>{$sun}</p></td>
                    <td><p>{$mon}</p></td>
                    <td><p>{$the}</p></td>
                    <td><p>{$wed}</p></td>
                    <td><p>{$thu}</p></td>
                    <td><p>{$fri}</p></td>
                    <td><p>{$sat}</p></td>
                </tr>
                <tr>
                    <td><p>{$sun}</p></td>
                    <td><p>{$mon}</p></td>
                    <td><p>{$the}</p></td>
                    <td><p>{$wed}</p></td>
                    <td><p>{$thu}</p></td>
                    <td><p>{$fri}</p></td>
                    <td><p>{$sat}</p></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div module="attend_button">
        <!--
            $login_page = /member/login.html
        -->
        <div class="attendSecurityLayer">
            <div class="titleArea"><h2>스팸 출석체크 방지 문자 입력</h2></div>
            <fieldset>
                <legend>보안문자 입력</legend>
                <p class="form">
                    <img src="{$secure_img}" alt="보안문자" />
                    {$form.secure_text}
                    <a href="#none" class="btnOk" onclick="{$action_capcha_do}">확인</a>
                </p>
                <p class="description">* 왼쪽의 문자를 공백없이 입력하세요.(대소문자구분)</p>
            </fieldset>
            <a href="#none" class="btnClose" onclick="$('.attendSecurityLayer').hide();">레이어 닫기</a>
        </div>
        <p class="btnArea type1">
            <a href="#none" onclick="{$action_attend}" class="submit">출석체크</a>
        </p>
    </div>
</div>        


■ CSS신규 폴더 및 페이지 추가

※ 아래 소스를 모두 추가합니다.


 1) 페이지 추가

- 페이지 생성위치 : 레이아웃(layout) > 기본 레이아웃(basic) > css 폴더 안에 추가

- 페이지 생성방법 : 모바일 쇼핑몰 > 디자인편집하기 > 전체화면보기 > 화면추가 클릭

- 페이지 생성이름 : attendBanner.css

/* 출석체크 이벤트 배너 */

.xans-layout-attendbanner { display:block; margin:15px 0; border:1px solid #e0e0e0; background-color:#efefef; }

.xans-layout-attendbanner img { width:100%; }


2) 폴더 및 페이지 추가

- 폴더 생성위치 : css > 모듈(module) 안에 폴더 추가

- 폴더 생성방법 : 모바일 쇼핑몰 > 디자인편집하기 > 전체화면보기 > 폴더추가 클릭

- 폴더 생성이름 : attend

- 페이지 생성위치 : css > 모듈(module) > attend 폴더 안에 추가

- 페이지 생성방법 : 모바일 쇼핑몰 > 디자인편집하기 > 전체화면보기 > 화면추가 클릭

- 페이지 생성이름 : calendarPackage.css

/* 달력 패키지 */

.xans-attend-calendarhead { margin:15px 0 0; padding:0 0 14px; text-align:center; overflow:hidden; zoom:1; }

.xans-attend-calendarhead .inner { position:relative; }

.xans-attend-calendarhead p { display:inline-block; text-align:center; vertical-align:middle; }

.xans-attend-calendarhead p.prev img,

.xans-attend-calendarhead p.next img { width:8.5px; }

.xans-attend-calendarhead p.prev { padding:0 5px; margin:0 5px; }

.xans-attend-calendarhead p.next { padding:0 5px; margin:0 5px; }

.xans-attend-calendarhead p span { color:#63666e; font-size:19px; font-weight:bold; vertical-align:middle; }

.xans-attend-calendar { border:1px solid #e8e8e8; border-bottom:0; border-radius:3px 3px 0 0; }

.xans-attend-calendar table { table-layout:fixed; }

.xans-attend-calendar th { height:30px; font-size:11px; color:#63666e; border-top:0; vertical-align:middle; }

.xans-attend-calendar td { vertical-align:top; border:1px solid #e8e8e8; }

.xans-attend-calendar td:first-child { border-left:0; }

.xans-attend-calendar td p { position:relative; min-height:50px; padding:5px; font-size:11px; color:#9b9b9b; }

.xans-attend-calendar td p img { display:block; margin:2px auto 0; width:30px; max-width:100%;  }

.xans-attend-calendar #attStart { position:absolute; left:-10px; top:-30px; }

.xans-attend-calendar #attEnd { position:absolute; left:-10px; top:-30px; }

 

/* 스탬프형 > 보안문자 레이어 */

.xans-attend-button { position:relative; }

.xans-attend-button .attendSecurityLayer { display:none; position:absolute; left:50%; bottom:100%; width:290px; z-index:1000; margin:0 0 50px -155px; padding:10px; border:1px solid #999; background-color:#f5f5f7; border-radius:3px; }

.xans-attend-button .attendSecurityLayer .titleArea { margin-top:3px; }

.xans-attend-button .attendSecurityLayer .btnArea { overflow:hidden; margin:10px 0 0; text-align:center; }

.xans-attend-button .attendSecurityLayer .form { margin:15px 0 0; }

.xans-attend-button .attendSecurityLayer .form img,

.xans-attend-button .attendSecurityLayer .form .keyword { vertical-align:middle; }

.xans-attend-button .attendSecurityLayer .form .keyword { width:130px; height:20px; margin:0 2px; line-height:20px; border-style:solid; border-width:1px; border-color:#c5c5c5 #e9e9e9 #e9e9e9 #c5c5c5; color:#202020; }

.xans-attend-button .attendSecurityLayer .description { margin:5px 0 0; font-size:11px; color:#747474; }

.xans-attend-button .attendSecurityLayer .btnOk { display:inline-block; height:22px; margin:0; padding:0 10px; font-size:11px; line-height:22px; color:#fff; cursor:pointer; vertical-align:middle; font-family:Verdana,Dotum; letter-spacing:-1px; border:0; background-color:#434447; border-radius:3px; -moz-box-sizing:border-box; box-sizing:border-box; }

.xans-attend-button .attendSecurityLayer .btnClose { position:absolute; right:10px; top:10px; overflow:hidden; width:18px; height:18px; text-indent:-9999px; background:url("http://img.echosting.cafe24.com/design/skin/mobile/btn_close.png") no-repeat 50% 50%; background-size:9px 8px; }

- 페이지 생성위치 : css > 모듈(module) > attend 폴더 안에 추가

- 페이지 생성방법 : 모바일 쇼핑몰 > 디자인편집하기 > 전체화면보기 > 화면추가 클릭

- 페이지 생성이름 : commentPackage.css

/* 출석체크 댓글형 - 제목 */

.xans-attend-commenttitle { margin:10px 0; }

.xans-attend-commenttitle select { width:100%; }

/* 출석체크 댓글형 - 댓글작성 */

.xans-attend-commentwrite { margin:10px 0 0; }

.xans-attend-commentwrite .security .desc { display:block; margin:5px 0 0; font-size:11px; color:#63666e; }

.xans-attend-commentwrite .form { position:relative; padding-right:70px; margin:10px 0 0; }

.xans-attend-commentwrite .form span { display:block; }

.xans-attend-commentwrite .form #attendCommentInputWrap textarea { width:100%; height:57px; }

.xans-attend-commentwrite .form #attendCommentBtnWrap { position:absolute; right:0; top:0; width:65px; height:57px; }

.xans-attend-commentwrite .form #attendCommentBtnWrap input {

    display:block; width:100%; height:100%; border:0; line-height:57px; color:#fff; font-size:12px; font-weight:bold; text-align:center; border:0; cursor:pointer; background:#434447;

    border-radius:7px; -moz-box-sizing:border-box; box-sizing:border-box;

}

/* 출석체크 댓글형 - 댓글리스트 */

.xans-attend-commentlist { font-size:11px; }

.xans-attend-commentlist li { position:relative; overflow:hidden; padding:10px 0; color:#63666e; border-bottom:1px dotted #a1a1a3; }

.xans-attend-commentlist .name,

.xans-attend-commentlist .date { font-weight:bold; }

.xans-attend-commentlist .name { margin:0 10px 0 0; }

.xans-attend-commentlist .memo { display:block; margin:5px 0 0; word-wrap:break-word; }

- 페이지 생성위치 : css > 모듈(module) > attend 폴더 안에 추가

- 페이지 생성방법 : 모바일 쇼핑몰 > 디자인편집하기 > 전체화면보기 > 화면추가 클릭

- 페이지 생성이름 : commentpaging.css

  /* 출석체크 댓글 페이징 */

.xans-attend-commentpaging { margin:15px 0; text-align:center; vertical-align:top; font-weight:bold; }

.xans-attend-commentpaging a,.xans-attend-commentpaging a.this { display:block; color:#434447; font-size:11px; height:17px; padding:5px; line-height:14px; }

.xans-attend-commentpaging a { color:#a1a1a3; outline:none; -webkit-tap-highlight-color: rgba(255,255,255,0); }

.xans-attend-commentpaging ol { vertical-align:top; }

.xans-attend-commentpaging ol,.xans-attend-commentpaging li,.xans-attend-commentpaging p { display:inline-block; }

.xans-attend-commentpaging li,.xans-attend-commentpaging p { overflow:hidden; min-width:22px; height:22px; margin:0 1px; border:2px solid #a1a1a3; border-radius:3px; background:#fff; }

.xans-attend-commentpaging p { background:#a1a1a3 url("http://img.echosting.cafe24.com/design/skin/mobile/bg_paging.png") 50% 0 no-repeat; background-size:20px 60px; }

.xans-attend-commentpaging p.first { background-position:50% 2px; }

.xans-attend-commentpaging p.prev { background-position:50% -13px; }

.xans-attend-commentpaging p.next { background-position:50% -28px; }

.xans-attend-commentpaging p.last { background-position:50% -43px; }

.xans-attend-commentpaging p span { overflow:hidden; display:block; width:11px; height:19px; text-indent:100%; }


▼ 출석체크 이벤트 모바일 적용 화면
1) 메인화면 배너

2) 스탬프

3) 댓글 작성형

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

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

이전글

[통합엑셀] 주문서 추가항목 엑셀 다운로드 기능개선

2014-04-09

다음글

[상품관리] 프론트 상품별 사용후기 건수 표시 기능 안내

2014-04-09