Help Center

카페24 소식

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

[프로모션] 추천인 아이디 홍보 기능 적용 안내

2014-05-08

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

친구초대 주소를 통하여 추천인 아이디를 홍보할 수 있는 기능이 추가되었습니다.

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


■ 적용일자 : 2014-05-08 목요일 이후 순차 적용

■ 업데이트 내용


쇼핑몰 회원이 마이페이지 내에 제공되는 친구초대 주소를 이용하여 자신의 아이디를 추천인으로 홍보할 수 있습니다.

마이 페이지에 자신의 친구 초대 주소 확인 및 복사, 혜택 등을 확인 할 수 있으며,
브라우저 주소창에 친구 초대 주소를 입력하면 회원가입 페이지로 자동 이동되고 추천인 아이디 항목에
해당 아이디가 자동으로 입력됩니다.

마이 페이지에 친구 초대 주소 표시는 [프로모션 > 리워드 프로그램 관리 > 리워드 설정 > 추천인 홍보 URL표시]
항목의 설정이 '표시함'일 때 나타나며, 아래를 참고하시어 HTML,CSS 소스를 추가 하시면 사용이 가능합니다.

▼ 추천인 홍보 URL 표시설정 예시화면



■ HTML 소스 추가

1. (구) 디자인 관리

- 위치 : 어드민 > 디자인관리 > 구디자인관리 > HTML 디자인 설정 > 마이쇼핑 > 마이쇼핑메뉴리스트(c_3) >
           회원그룹 안내(u4)
- 파란색 소스를 추가합니다.

 <table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="10" height="10"><img src="{{$img_array.c_3.9.url}}" width="10" height="10" alt=""></td>

<td height="10" background="{{$img_array.c_3.16.url}}"></td>

<td width="10" height="10"><img src="{{$img_array.c_3.10.url}}" width="10" height="10" alt=""></td>

</tr>

<tr>

<td width="10" background="{{$img_array.c_3.11.url}}"> </td>

<td bgcolor="F4F9FE"><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="105" valign="top"><img src="http://{{$image_server}}{{$group_image}}" alt=""> </td>

<td>

<table border="0" cellspacing="0" cellpadding="0" {{$display}}>

<tr>

<td height="19">저희 쇼핑몰을 이용해주셔서 감사합니다.</td>

</tr>

<tr>

<td height="19"><strong>{{$member_name}}</strong>님은 <font class="font_blue">[{{$group_name}}]</font> 회원이십니다.</td>

</tr>

{{*추가적립/추가할인*}}

{{$c_3_u4t}}

</table>

{{$c_3_u4t2}}

</td>

</tr>

</table></td>

<td width="10" background="{{$img_array.c_3.12.url}}"> </td>

</tr>

<tr>

<td height="10" width="10"><img src="{{$img_array.c_3.13.url}}" width="10" height="10" alt=""></td>

<td height="10" background="{{$img_array.c_3.14.url}}"></td>

<td height="10" width="10"><img src="{{$img_array.c_3.15.url}}" width="10" height="10" alt=""></td>

</tr>

</table>


2. 스마트 디자인

1) 마이쇼핑

- 위치 : 어드민 > 디자인관리 > 디자인 편집하기 > 전체화면보기 > 마이쇼핑(myshop) > 마이쇼핑(index.html)
- 파란색 소스를 추가합니다.

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

<div class="path">

    <h3>현재 위치</h3>

    <ol>

        <li class="first"><a href="/">홈</a></li>

        <li title="현재 위치">마이 쇼핑</li>

    </ol>

</div>

 

<div class="titleArea">

    <h2>마이 쇼핑</h2>

</div>

 

<div module="myshop_benefit">

    <!--@css(/css/module/myshop/benefit.css)-->

    <p class="myThumb"><img src="{$group_image}" alt="{$group_name}" onerror="this.src='http://img.echosting.cafe24.com/design/skin/default/member/img_member_default.gif';" /></p>

    <div class="myInfo">

        <p>저희 쇼핑몰을 이용해 주셔서 감사합니다. <strong class="name">{$member_name}</strong> 님은 <strong class="group">[{$group_name}]</strong> 회원이십니다.</p>

        <p class="{$display_no_benefit|display}"><strong>{$dc_pay} {$dc_min_price}</strong> 구매시 <strong>{$dc_price}{$dc_type}</strong>을 {$use_dc} 받으실 수 있습니다. {$dc_max_percent}</p>

        <p class="{$display_with_all|display}"><strong>{$dc_pay} {$dc_min_price_mileage}</strong> 구매시 <strong>{$dc_price_mileage}{$dc_type_mileage}</strong>을 {$use_dc_mileage} 받으실 수 있습니다. {$dc_max_mileage_percent}</p>

    </div>

<div class="invite {$display_reco|display}">

        <strong>주소를 복사하여 친구를 쇼핑몰에 초대해보세요.</strong>

        <p class="copy">

            <input type="text" id="{$reco_url}" value="http://{$shop_domain}/?reco_id={$member_id}" readonly="readonly" />

            <img src="http://img.echosting.cafe24.com/design/skin/default/myshop/btn_copy_url.gif" alt="주소복사" onclick="{$copy_func}"/>

        </p>

        <ul>

            <li>- 친구에게는 가입즉시 {$reco_mileage2}의 적립금이 지급됩니다.</li>

            <li>- {$reco_mileage}</li>

        </ul>

    </div>

(--이햐생략--)



2) CSS

- 위치 : 어드민 > 디자인관리 > 디자인 편집하기 > 전체화면보기 > css > 모듈(module) > 마이쇼핑(myshop) >
            benefit.css
- 파란색 소스를 추가합니다.

.xans-myshop-benefit { overflow:hidden; margin:0 0 10px; padding:20px; color:#878787; background:#f6f6f6; }

.xans-myshop-benefit .myThumb { float:left; width:90px; }

.xans-myshop-benefit .myThumb img { max-width:70px; border:1px solid #e5e5e5; }

.xans-myshop-benefit .myInfo { padding:5px 0 0 90px; }

.xans-myshop-benefit .myInfo p { line-height:20px; }

.xans-myshop-benefit .myInfo .name { color:#5a8fdd; font-size:14px; }

.xans-myshop-benefit .myInfo .group { color:#070705; font-size:14px; }

.xans-myshop-benefit .invite { padding:15px 0 0 90px; }

.xans-myshop-benefit .invite > strong { display:block; padding:16px 0 7px; color:#ff7108; border-top:1px solid #d9d9d9; }

.xans-myshop-benefit .invite p img { cursor:pointer; vertical-align:middle; }

.xans-myshop-benefit .invite p input { padding:1px 3px; width:370px; height:20px; border:1px solid #bcbcbc; color:#757575; }

.xans-myshop-benefit .invite ul { margin:11px 0 0; font-size:11px; line-height:18px; color:#757575; }


3. 모바일 쇼핑몰

1) 마이쇼핑

- 위치 : 어드민 > 디자인관리 > 디자인 편집하기 > 전체화면보기 > 마이쇼핑(myshop) > 마이쇼핑(index.html)
- 파란색 소스를 추가합니다.

 

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

<div class="titleArea">

    <h2>마이쇼핑</h2>

</div>

<div class="myshopMain">

    <!--@css(/css/module/myshop/myshopMain.css)-->

    <div class="info">

        <h3>나의 통장내역</h3>

        <p module="myshop_benefit">

            {$member_name} 님의 구매등급 [{$group_name}]

            <span class="{$display_no_benefit|display}">{$dc_pay} {$dc_min_price} 구매시 {$dc_price}{$dc_type}을 {$use_dc} 받으실 수 있습니다.</span>

            <span class="{$display_with_all|display}">{$dc_pay} {$dc_min_price_mileage} 구매시 {$dc_price_mileage}{$dc_type_mileage}을 {$use_dc_mileage} 받으실 수 있습니다.</span>

        </p>

        <ul module="myshop_bankbook">

            <li class="{$display_mileage|display}">

                적립금 <strong class="txtEm">{$avail_mileage}</strong>

                <a href="/myshop/mileage/historyList.html" class="btnNormal">조회</a>

            </li>

            <li class="{$display_coupon|display}">

                쿠폰 <strong class="txtEm">{$coupon_cnt}</strong>개

                <a href="/myshop/coupon/coupon.html" class="btnNormal">조회</a>

            </li>

        </ul>

    </div>

    <div module="myshop_benefit">

        <div class="invite {$display_reco|display}">

            <strong>주소를 복사하여 친구를 쇼핑몰에 초대해보세요.</strong>

            <p class="copy">

                <input type="text" id="{$reco_url}" value="http://{$shop_domain}/?reco_id={$member_id}" readonly="readonly">

                <a href="#none" class="btnNormal" onclick="{$copy_func}">주소복사</a>

            </p>

            <ul>

                <li>친구에게는 가입즉시 {$reco_mileage2}의 적립금이 지급됩니다.</li>

                <li>{$reco_mileage}</li>

            </ul>

        </div>

    </div>

    <ul class="navigation">

        <li class="order"><a href="/myshop/order/list.html">주문내역조회</a></li>

        <li class="wishlist"><a href="/myshop/wish_list.html">관심상품</a></li>

        <li class="basket"><a href="/order/basket.html">장바구니</a></li>

        <li class="save"><a href="/myshop/mileage/historyList.html">적립금</a></li>

        <li class="coupon"><a href="/myshop/coupon/coupon.html">쿠폰</a></li>

        <li class="board"><a href="/myshop/board_list.html">게시글</a></li>

        <li class="consult"><a href="/board/consult/list.html">1:1 맞춤상담</a></li>

    </ul>

</div>


2) CSS
- 위치 : 어드민 > 디자인관리 > 디자인 편집하기 > 전체화면보기 > css > 모듈(module) > 마이쇼핑(myshop) >
           myshopMain.css
- 파란색 소스를 추가합니다.

 

/*

 * 마이샵 > 메인

**/

 

.myshopMain .info { background:#f5f5f6; font-size:12px; color:#212530; border-bottom:1px solid #434447; }

.myshopMain .info h3 { padding:4px 10px; font-size:12px; border-bottom:1px dashed #a1a1a2; }

.myshopMain .info p { padding:4px 10px; }

.myshopMain .info p span { display:block; }

.myshopMain .info ul { padding:4px 10px 10px 10px; }

.myshopMain .info li { position:relative; margin:5px 0 0 0; padding:0 15px 0 8px; background:url("http://img.echosting.cafe24.com/design/skin/mobile/bg_boardwrite_th.png") 0 center no-repeat; background-size:3px 7px; }

.myshopMain .info li:first-child { margin:0; }

.myshopMain .info .btnNormal {

    position:absolute; right:0; top:0; display:inline-block; height:22px; margin:0; padding:0 6px; font-size:11px; line-height:22px; color:#666; cursor:pointer; vertical-align:middle; font-family:Verdana, Dotum; border:0; border:1px solid #bcbcbc; background-color:#f1f1f1;

    border-radius:3px;

    -moz-box-sizing:border-box; box-sizing:border-box;

}

.myshopMain .info .txtEm { color:#ff6600; }

.myshopMain .navigation { overflow:hidden; width:300px; margin:30px auto; }

.myshopMain .navigation li { float:left; width:100px; height:100px; }

.myshopMain .navigation li a { overflow:hidden; display:block; width:100%; height:20px; padding:80px 0 0; font-size:12px; line-height:20px; text-align:center; background-repeat:no-repeat; background-position:0px 0px; background-size:100% 100%; }

.myshopMain .navigation .order a { background-image:url("http://img.echosting.cafe24.com/design/skin/mobile/ico_myshop_order.png"); }

.myshopMain .navigation .wishlist a { background-image:url("http://img.echosting.cafe24.com/design/skin/mobile/ico_myshop_wishlist.png"); }

.myshopMain .navigation .basket a { background-image:url("http://img.echosting.cafe24.com/design/skin/mobile/ico_myshop_basket.png"); }

.myshopMain .navigation .save a { background-image:url("http://img.echosting.cafe24.com/design/skin/mobile/ico_myshop_save.png"); }

.myshopMain .navigation .consult a { background-image:url("http://img.echosting.cafe24.com/design/skin/mobile/ico_myshop_consult.png"); }

.myshopMain .navigation .coupon a { background-image:url("http://img.echosting.cafe24.com/design/skin/mobile/ico_myshop_coupon.png"); }

.myshopMain .navigation .board a { background-image:url("http://img.echosting.cafe24.com/design/skin/mobile/ico_myshop_board.png"); }

.xans-myshop-benefit .invite { margin:22px 0 0; padding:14px; border:1px solid #d8d8d8; }

.xans-myshop-benefit .invite > strong { display:block; padding:0 0 10px; color:#ff7108; font-size:13px; color:#444548; }

.xans-myshop-benefit .invite p img { cursor:pointer; vertical-align:middle; }

.xans-myshop-benefit .invite p input { padding:1px 3px; width:200px; height:22px; border:1px solid #9c9db1; border-radius:3px; color:#6292db; }

.xans-myshop-benefit .invite ul { margin:5px 0 0; font-size:11px; line-height:18px; color:#62676e; }

.xans-myshop-benefit .invite .btnNormal {

    display:inline-block; height:22px; margin:0 0 0 -4px; padding:0 6px; font-size:11px; line-height:22px; color:#666; cursor:pointer; vertical-align:middle; font-family:Verdana, Dotum; border:1px solid #bcbcbc; background-color:#f1f1f1;

    border-radius:3px;

    -moz-box-sizing:border-box; box-sizing:border-box;}




▼ 마이쇼핑에 친구초대 주소 확인 예시 - (구)디자인 관리



▼ 마이쇼핑에 친구초대 주소 확인 예시 - 스마트디자인



▼ 마이쇼핑에 친구초대 주소 확인 예시 - 모바일쇼핑몰

 



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

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

이전글

[모바일쇼핑몰] 카테고리에 상품 더보기 버튼 터치 시 페이지 이동 적용 안내

2014-02-26

다음글

[고객/게시판] 마이쇼핑 내 게시물관리, 게시물 리스트 개선 안내

2014-03-05