Help Center

카페24 소식

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

[모바일쇼핑몰] 사은품 기능 사용 방법 안내!

2012-10-25

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

1.9 뉴 모바일웹 사용시 사은품 기능 사용이 가능한지 궁금하실텐데요,

HTML 모드 편집을 사용하시는 고객이라면 사용이 가능합니다.^^

아래의 가이드 참고하여 이용해주세요~
--------------------------------------------------------------------------------------------

1. 제목 : 뉴모바일웹 사은품 기능 사용 가이드 안내

2. 사은품 기능 사용시 사전 체크 항목 :

   1) 사은픔 기능 사용 설정 체크

        ㄴ 어드민 > 상품관리 > 사은품관리 > 사은품정책 설정 : 사은품기능 사용여부 (사용함) 체크

        ㄴ 어드민 > 상품관리 > 사은품관리 > 사은품분류/사은품관리 : 등록된 사은품 있는지 체크

   2) 모바일쇼핑몰 디자인 모드 확인

       ㄴ 어드민 > 상단 [모바일쇼핑몰] > 디자인모드 설정 > HTML디자인 모드 사용 설정 확인


3. 사은품기능 추가 방법

   1) 꾸미기 편집창 접근

          -  어드민 > 상단 [모바일쇼핑몰] > HTML디자인 > "모바일 꾸미기 시작" 클릭

   2) 편집창 왼쪽 하단 [새 페이지 만들기] 클릭

   3) 사은품 새 페이지 만들기

          - 위치 : /order/gift_select.html

             >> 저장경로 선택 : order 클릭 > 파일명 입력에 저장경로 /order 자동 삽입됨

             >> 파일명 입력 : gift_select.html

   4) 소스 삽입하기

          - 아래의 소스를 삽입 후 "저장"합니다.

 

<!doctype html>

<html lang="ko">

<head>

    <meta charset="euc-kr">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes">

    <title></title>

    <!--@css(/css/common.css)-->

    <!--@css(/css/custom.css)-->

    <!--@js(/js/ui.js)-->

</head>

<body>

    <div id="contents" module="gift_select">

        <div class="gTitle">

            <h2>사은품 선택</h2>

        </div>

        <div class="mGift" module="gift_point">

            <p><strong class="txtEm">총합계 사은품 포인트 : {$total_point} 점</strong></p>

            <ul>

                <li>선택가능한 사은품 포인트 : <strong class="txtEm">{$able_point}</strong> 점</li>

                <li>사용 사은품 포인트 : <strong class="txtEm">{$use_point}</strong> 점</li>

            </ul>

        </div>

        <section id="myList" class="mGiftList">

        <ul>

            <li>

                <p class="prdImg"><img src="{$gift_image}" alt="" width="85" height="85"></p>

                <div class="descriptions">

                    <p class="prdName">{$product_choice} {$product_name} <a href="#none" class="tButton type2 {$display_choice_single_btn|display}" onclick="{$action_choice_single}"><span>선택</span></a></p>

                    <ul class="point">

                        <li>포인트: <strong class="txtEm">{$gift_price} 점</strong></li>

                        <li  class="{$display_amount|display}">수량: {$product_amount} <img class="QuantityUp" alt="up" src="http://img.echosting.cafe24.com/mobileWeb/common/btn_quantity_up.png" width="30" height="27" onclick="{$action_change_amount_up}"> <img class="QuantityDown" alt="down" src="http://img.echosting.cafe24.com/mobileWeb/common/btn_quantity_down.png" width="30" height="27" onclick="{$action_change_amount_down}"></li>

                        <li>{$option1}</li>

                        <li>{$option2}</li>

                    </ul>

                </div>

            </li>

            <li>

                <p class="prdImg"><img src="{$gift_image}" alt="" width="85" height="85"></p>

                <div class="descriptions">

                    <p class="prdName">{$product_choice} {$product_name} <a href="#none" class="tButton type2 {$display_choice_single_btn|display}" onclick="{$action_choice_single}"><span>선택</span></a></p>

                    <ul class="point">

                        <li>포인트: <strong class="txtEm">{$gift_price} 점</strong></li>

                        <li  class="{$display_amount|display}">수량: {$product_amount} <img class="QuantityUp" alt="up" src="http://img.echosting.cafe24.com/mobileWeb/common/btn_quantity_up.png" width="30" height="27" onclick="{$action_change_amount_up}"> <img class="QuantityDown" alt="down" src="http://img.echosting.cafe24.com/mobileWeb/common/btn_quantity_down.png" width="30" height="27" onclick="{$action_change_amount_down}"></li>

                        <li>{$option1}</li>

                        <li>{$option2}</li>

                    </ul>

                </div>

            </li>

        </ul>

        </section>

        <div class="mButton {$btn_style}">

            <p>

                <a href="#none" class="tSubmit1 {$display_choice_multi_btn|display}" onclick="{$action_gift_select}"><span>확인</span></a>

                <a href="#none" class="tSubmit2" onclick="closeGiftLayer();"><span>취소</span></a>

            </p>

        </div>

    </div>

</body>

</html>

 

   5) CSS 수정하기

          - 편집창 왼쪽에 [상세보기] > [CSS] 클릭 > common.css 파일을 클릭합니다.

          - common.css 파일 내에 중간쯤 /* order */ 찾아 order 부분 제일 하단에 아래의 소스를 입력합니다.

.mGift { background:rgb(245,245,246); font-size:12px; color:rgb(33,37,48); }

.mGift p { padding:4px 10px; }

.mGift ul { padding:4px 10px; }

.mGift ul li { padding:0 15px 0 8px; background:url(http://img.echosting.cafe24.com/mobileWeb/common/bg_rowType2Th.png) 0 center no-repeat; background-size:3px 7px; }

 

.mGiftList { font-size:12px; }

.mGiftList li { overflow:hidden; position:relative; min-height:85px; }

#myList.mGiftList .point { padding:5px 0 0; }

#myList.mGiftList .point li { padding:0; border:0 none; min-height:0; }

#myList.mGiftList .point li img { vertical-align:middle; cursor:pointer; }

#myList.mGiftList .point li input { width:50px; }

.mGiftList li .prdImg { position:absolute; left:0; top:10px; }

.mGiftList li .descriptions { padding:0 0 0 100px; min-height:85px; }

.mGiftList li .descriptions .price { display:block; color:rgb(255,102,0); }

.mGiftList li .descriptions a { color:rgb(99,102,110); }

#myList.mGiftList li .option { display:block; }

 

 

 

4. 예외 사항

    - 뉴모바일웹 HTML 모드 사용자에 한합니다. (간편설정모드사용자는 HTML 모드로 변경해야 사용가능)

5. 기타

    - 사은품 기능 설정을 먼저 꼭 체크해주세요!

 

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


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

 

이전글

[스마트디자인] 크로스브라우징 결제 UP! 올앳 추가!

2013-01-09

다음글

[모바일쇼핑몰] 갤러리 게시판 사용 방법 안내!!

2012-10-25