Help Center

카페24 소식

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

[상품관리] 기획전 모바일 사용 기능 추가 안내

2015-06-17

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


모바일 쇼핑몰에서도 기획전을 사용할 수 있도록 업그레이드 되었습니다.


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



■ 적용일자 : 2015-06-17 (수)


■ 업그레이드 내용


- 기존 : 기획전 등록 시 PC 쇼핑몰만 가능
- 변경 : 기획전 등록 시 PC 쇼핑몰 및 모바일 쇼핑몰 모두 가능


- 위치 : 상품관리 > 기획전 관리 > 기획전 분류 관리 > 분류꾸미기


▼ 관리자 - 모바일쇼핑몰 설정 화면



■ 디자인 가이드


해당 기능은 디자인을 설정하셔야 정상적으로 사용 가능합니다.

아래 내용을 참고하셔서 디자인을 수정하시기 바랍니다.


① 위치 : 모바일쇼핑몰 > 디자인편집하기 > 상품 (/product/project.html)

▼ 아래와 같이 소스를 추가하여 html 파일을 저장합니다.

## 신규 페이지 ## 


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

<div module="Project_Package">

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

    <div id="titleArea" module="product_headcategory">

        <h2>{$title_text_or_image}</h2>

        <span module="Layout_MobileAction">

            <a href="#none" onclick="{$go_back}"><img src="http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/btn_back.gif" width="33" alt="뒤로가기"></a>

        </span>

    </div>

 

    <!-- 참고 : 뉴상품관리 전용 모듈입니다. 뉴상품관리 이외의 곳에서 사용하면 정상동작하지 않습니다. -->

    <ul class="menuCategory">

        <li module="product_projectcategory" style="display:{$display};">

            <a href="#{$cate_id}">{$category_name} <span class="count {$product_count_display|display}">({$product_count})</span></a>

        </li>

    </ul><!-- //참고 -->

 

    <p class="banner" module="product_headcategory">{$top_image_tag_mobile}</p>

 

    <!-- 참고 : 뉴상품관리 전용 변수가 포함되어 있습니다. 뉴상품관리 이외의 곳에서 사용하면 일부 변수가 정상동작하지 않을 수 있습니다. -->

    <div module="project_list">

        <!--

            $basket_result = /product/add_basket.html

            $basket_option = /product/basket_option.html

        -->

        <h3><span id="{$cate_id}">{$category_name}</span></h3>

        <div module="project_productlist">

            <ul class="grid2">

                <li>

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

                    <div class="information">

                        <p class="name {$product_name_display|display}"><a href="/product/detail.html{$param}">{$product_name}</a></p>

                        <p class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons} {$benefit_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 sale {$product_sale_display|display}">{$product_sale_price}</p>

                        <p class="summary {$summary_desc|display}">{$summary_desc}</p>

                        <div class="{$colorchip_display|display}">

                            <div class="color" module="project_Colorchip">

                                <span class="chips" style="background-color:{$color};"></span>

                                <span class="chips" style="background-color:{$color};"></span>

                            </div>

                        </div>

                        <div class="price {$product_promotion_display|display}">

                            <div class="discountPeriod {$product_promotion_display|display}">

                                <a href="#none" class="btnNormal">할인기간</a>

                                <div class="layerDiscountPeriod">

                                    <div class="inner">

                                        <h3>할인기간</h3>

                                        <p class="timeleft">{$product_promotion_date}</p>

                                        <ul>

                                            <li><span>할인금액</span>{$product_promotion_dc_price}</li>

                                            <li><span>할인기간</span>{$product_promotion_start_date} ~<br>{$product_promotion_end_date}</li>

                                        </ul>

                                        <a href="#none" class="btnClose">닫기</a>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </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 {$product_name_display|display}"><a href="/product/detail.html{$param}">{$product_name}</a></p>

                        <p class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons} {$benefit_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 sale {$product_sale_display|display}">{$product_sale_price}</p>

                        <p class="summary {$summary_desc|display}">{$summary_desc}</p>

                        <div class="{$colorchip_display|display}">

                            <div class="color" module="project_Colorchip">

                                <span class="chips" style="background-color:{$color};"></span>

                                <span class="chips" style="background-color:{$color};"></span>

                            </div>

                        </div>

                        <div class="price {$product_promotion_display|display}">

                            <div class="discountPeriod {$product_promotion_display|display}">

                                <a href="#none" class="btnNormal">할인기간</a>

                                <div class="layerDiscountPeriod">

                                    <div class="inner">

                                        <h3>할인기간</h3>

                                        <p class="timeleft">{$product_promotion_date}</p>

                                        <ul>

                                            <li><span>할인금액</span>{$product_promotion_dc_price}</li>

                                            <li><span>할인기간</span>{$product_promotion_start_date} ~<br>{$product_promotion_end_date}</li>

                                        </ul>

                                        <a href="#none" class="btnClose">닫기</a>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </li>

            </ul>

        </div>

    </div><!-- //참고 -->

</div>



② 위치 : 모바일쇼핑몰 > 디자인편집하기 >CSS > 모듈 > 상품 (/css/module/product/project_package.css)


▼ 아래와 같이 소스를 추가하여 CSS 파일을 저장합니다.

## 신규 페이지 ## 


.xans-project-package .menuCategory { margin:-1px 0 0; padding:0 14px; border-bottom:1px solid #d5d5d5; background:#fff; }

.xans-project-package .menuCategory .icoOpen { width:13px; cursor:pointer; vertical-align:top; }

.xans-project-package .menuCategory > li { padding:11px 0 10px; border-top:1px solid #ececec; }

.xans-project-package .menuCategory > li:first-child { border-top:0; }

.xans-project-package .menuCategory > li > a { display:inline-block; margin:0 14px 0 0; color:#2e2e2e; font-weight:bold; font-size:13px; vertical-align:top; }

.xans-project-package .menuCategory li.selected > a { color:#508bed; }

.xans-project-package .menuCategory li.xans-product-projectcategory { display:inline-block; border:0; }

.xans-project-package .banner { padding:10px 14px; }

 

/* 타입 : 섬네일 */

.xans-project-list { background:#fff; }

.xans-project-list h3 { margin:0; padding:14px 14px 0; font-size:14px; line-height:15px; color:#4a5164; }

.xans-project-productlist > ul { display:table; table-layout:fixed; width:100%; padding:14px 7px 0; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; font-size:0; line-height:0; letter-spacing:-4px; }

.xans-project-productlist img { max-width:100%; }

.xans-project-productlist li { display:inline-block; margin:0 0 14px; padding:0; vertical-align:top; font-size:12px; line-height:1.2em; letter-spacing:normal; }

.xans-project-productlist .thumbnail { margin:0 0 14px; padding:0 7px; }

.xans-project-productlist .thumbnail img { width:100%; border:1px solid #ededed; }

.xans-project-productlist .information { padding:0 7px; }

.xans-project-productlist .name { line-height:1.5em; word-wrap:break-word; margin:0 0 10px; }

.xans-project-productlist .name a { font-size:13px; }

.xans-project-productlist .icon { margin:0 0 10px; }

.xans-project-productlist .price { color:#494949; font-size:13px; margin:0 0 10px; }

.xans-project-productlist .price.sale { color:#000; font-size:15px; }

.xans-project-productlist .strike { text-decoration:line-through; }

.xans-project-productlist .color { overflow:hidden; margin:0 0 10px; }

.xans-project-productlist .color .chips { float:left; width:12px; height:10px; margin:0 2px 2px 0; font-size:0; line-height:0; }

.xans-project-productlist .summary { color:#757575; font-size:11px; margin:0 0 10px; }

 

.xans-project-productlist .grid1 li { width:100%; }

.xans-project-productlist .grid1 li .name a { font-size:15px; }

.xans-project-productlist .grid2 li { width:50%; }

.xans-project-productlist .grid2 li .name a { font-size:13px; }

.xans-project-productlist .grid3 li { width:33.333%; }

.xans-project-productlist .grid3 li .name a { font-size:13px; }

.xans-project-productlist .grid4 li { width:25%; }

.xans-project-productlist .grid4 li .name a { font-size:11px; }

 

.xans-project-productlist .layerDiscountPeriod { display:none; position:absolute; z-index:100; left:0; width:100%; padding:11px 7px; box-sizing:border-box; }

.xans-project-productlist .layerDiscountPeriod .inner { border:1px solid #353535; background:#f1f1f1; border-radius:4px; }

.xans-project-productlist .layerDiscountPeriod .inner h3 { padding:10px 14px; font-size:14px; background-color:#353535; color:#fff; }

.xans-project-productlist .layerDiscountPeriod .inner .timeleft { padding:14px; color:#508bed; font-size:13px; font-weight:bold; text-align:center; }

.xans-project-productlist .layerDiscountPeriod ul { margin:0 7px 14px; padding:0; border:1px solid #d5d5d5; background:#fff; }

.xans-project-productlist .layerDiscountPeriod ul li { position:relative; display:block; width:100%; margin:0; padding:14px 13px 14px 100px; color:#353535; border-top:1px solid #ececec; box-sizing:border-box; }

.xans-project-productlist .layerDiscountPeriod ul li:first-child { border-top:0; }

.xans-project-productlist .layerDiscountPeriod ul li span { position:absolute; top:14px; left:13px; color:#757575; }

.xans-project-productlist .layerDiscountPeriod .btnClose { position:absolute; top:8px; right:4px; display:block; width:40px; height:40px; text-indent:-9999px; font-size:0; background:url("http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/ico_close_white.png") center center no-repeat; background-size:50% 50%; }




③ 위치 : 모바일쇼핑몰 > 디자인편집하기 > 레이아웃 > 기본레이아웃 > 레이아웃(슬라이딩메뉴) (/layout/basic/sidebar.html)

▼ 아래와 같이 빨간색 소스 삭제, 파란색 소스를 추가합니다.

## 상단 생략 ## 


    <div id="slideCateList" class="categoryCont">

        <h2 class="selected">카테고리<button type="button" class="icoCategory">펼침</button></h2>

        <ul module="layout_category">

        <ul module="layout_category" class="categoryList">

            <li id="cate{$cate_no}">

                <a href="#none" class="cate" cate="{$param}">{$name|cut 25}</a>

                <a href="/product/list_thumb.html{$param}" class="view">상품보기</a>

                <button type="button" class="icoBookmark" id="icoBookmark">즐겨찾기 추가</button>

            </li>

            <li id="cate{$cate_no}">

                <a href="#none" class="cate" cate="{$param}">{$name|cut 25}</a>

                <a href="/product/list_thumb.html{$param}" class="view">상품보기</a>

                <button type="button" class="icoBookmark" id="icoBookmark">즐겨찾기 추가</button>

            </li>

        </ul>

 <div id="slideProjectList" module="layout_project">

            <h2 class="selected">기획전<button type="button" class="icoCategory">펼침</button></h2>

            <ul class="categoryList">

                <li id="cate{$cate_no}">

                    <a href="#none" class="cate" cate="{$param}">{$category_text|cut 25}</a>

                </li>

                <li id="cate{$cate_no}">

                    <a href="#none" class="cate" cate="{$param}">{$category_text|cut 25}</a>

                </li>

            </ul>

        </div>

        <div class="bookmarkCategory" id="bookmarkCategory">

            <h2 class="selected">즐겨찾기<button type="button" class="icoCategory">펼침</button></h2>

            <p class="bookmarkEmpty" id="bookmarkEmpty">자주쓰는 카테고리 우측에 <img src="http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/ico_bookmark_star.png" alt="즐겨찾기"> 을 눌러주세요.<br>쉽게 카테고리를 이용할 수 있습니다.</p>

            <div id="bookmartCateArea" class="bookmarkCategory"></div>

        </div>


## 하단 생략 ## 



④ 위치 : 모바일쇼핑몰 > 디자인편집하기 > 레이아웃 > 기본레이아웃 > CSS (/layout/basic/css/slideMenu.css)

▼ 아래와 같이 파란색 소스로 변경합니다.
   - 기존 : .xans-layout-category
   - 변경 : .categoryList

## 상단 생략 ## 


/* 카테고리 리스트 */

#aside .categoryList { font-size:13px; font-weight:bold; }

#aside .categoryList ul { display:none; }

#aside .categoryList li { position:relative; background-color:#f1f1f1; }

#aside .categoryList li.selected > ul { display:block; }

#aside .categoryList li.selected > a.cate { color:#508bed; }

#aside .categoryList li.noChild > a.cate { border-top:1px solid #ebebeb; background-image:none !important; }

#aside .categoryList li.noChild:first-child > a.cate { border-top:0; }

#aside .categoryList li.selected.noChild { background-color:#f1f1f1; }

#aside .categoryList > li.selected .slideSubMenu li { background-color:#ffffff; }

#aside .categoryList > li { border-bottom:1px solid #cccccc; border-top:1px solid #fff; }

#aside .categoryList > li:first-child { border-top:0; }

#aside .categoryList > li > a.cate { background:url("http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/bg_snb_1depth.gif") no-repeat 15px 50%; background-size:13px 8px; }

#aside .categoryList > li.selected > a.cate { background-image:url("http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/bg_snb_1depth_on.gif"); }

#aside .categoryList > li > ul > li > a.cate { padding-left:42px; border-top:1px solid #ebebeb; background:url("http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/bg_snb_2depth.gif") no-repeat 22px 50%; background-size:13px 13px; }

#aside .categoryList > li > ul > li.selected > a.cate { border-bottom:1px solid #ebebeb; background-image:url("http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/bg_snb_2depth_on.gif"); background-size:13px 2px; }

#aside .categoryList > li > ul > li > ul > li > a.cate { padding-left:49px; background:url("http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/bg_snb_2depth.gif") no-repeat 29px 50%; background-size:13px 13px; }

#aside .categoryList > li > ul > li > ul > li.selected > a.cate { border-bottom:1px solid #ebebeb; background-image:url("http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/bg_snb_2depth_on.gif"); background-size:13px 2px; }

#aside .categoryList > li > ul > li > ul > li > ul > li a.cate { padding-left:56px; }

#aside .categoryList a.cate { display:block; padding:12px 94px 11px 34px; word-wrap:break-word; }

#aside .categoryList a.view {

    position:absolute; right:32px; top:8px; padding:0 7px; border:1px solid #d5d5d5; line-height:24px; color:#676767; font-size:11px; font-weight:normal; background-color:#ffffff;

    -webkit-border-radius:3px;

    -moz-border-radius:3px;

    -ms-border-radius:3px;

    -o-border-radius:3px;

    border-radius:3px;

}

#aside .categoryList li.noChild > a.view { display:none; }


/* 즐겨찾기 리스트 */

## 하단 생략 ## 



⑤ 위치 : 모바일쇼핑몰 > 디자인편집하기 > 레이아웃 > 기본레이아웃 > js (/layout/basic/js/slide_menu.js)

▼ 아래와 같이 빨간색 소스 삭제, 파란색 소스를 추가합니다.

## 상단 생략 ## 


                 var iCateNo = Number(methods.getParam($(this).attr('cate'), 'cate_no'));

                 var result = methods.aSubCategory[iCateNo];

                 if (result == undefined) {

                    $(this).attr('href', '/product/list_thumb.html'+$(this).attr('cate'));

                    if ($(this).closest('#slideProjectList').length) {

                        var sHref = '/product/project.html'+$(this).attr('cate');

                    } else {

                        var sHref = '/product/list_thumb.html'+$(this).attr('cate');

                    }


                    $(this).attr('href', sHref);

                    $(this).parent().attr('class', 'noChild');

                }

            });


## 중간 생략 ## 

    $('#slideCateList h2').click(function() {

        var oParentId = $(this).parent().attr('id');

        if (oParentId == 'slideCateList' || oParentId == 'slideMultishopList') {

        if (oParentId == 'slideCateList' || oParentId == 'slideMultishopList' || oParentId == 'slideProjectList') {

            ($(this).attr('class') == 'selected') ? $(this).next().hide() : $(this).next().show();

        } else if (oParentId == 'bookmarkCategory') {

            if ($(this).attr('class') == 'selected') {

                $(this).parent().find('#bookmarkEmpty').hide();

                $(this).parent().find('#bookmartCateArea').hide();

            } else {

                chkMyCateList();

                $(this).parent().find('#bookmartCateArea').show();

            }


## 하단 생략 ## 





카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.

더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.

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

이전글

[상품관리] 상품등록 엑셀양식 품절표기 설정 항목 추가 안내

2015-06-11

다음글

[프로모션] 취소/반품/교환 접수 시 쿠폰 복원 기능 업그레이드 안내

2015-06-15