NOTICE

게시판 상세
제목 (필수) 모바일 카테고리 호출구조 변경
작성자

마스터스킨 (ip:) 조회수 :81

작성일 2017-03-12
평점 0점
추천 추천하기

2017년 3월 12일 이후 구매고객께서는 아래 패치가 적용되어있습니다.


본 패치는 앞으로 프리미엄 테마 확장기능 설치를 유연하게 할 수 있도록 코드가 개선되었으며,

불필요한 소스코드는 제거되어 깔끔해졌습니다.

더욱 중요한 점은 모바일 카테고리 로드는 AJAX 비동기식으로 개선하여 로딩 속도를 더욱 높였습니다.


이번 모바일 변경점에 대한 수정은 꼭~! 반드시 모바일쇼핑몰의 소스변경사항이므로

PC와 무관합니다. 절대 PC 디자인에서 편집하지 말아주세요.




아래 화면경로 소스를 변경 후 코드로 변경해주세요.

관리자페이지 -> 모바일쇼핑몰 -> 디자인편집하기(스마트디자인편집창) -> 레이아웃 -> 기본레이아웃 -> js -> slide_menu.js


slide_menu.js를 모두 아래 소스코드로 변경해주세요.

아래 소스를 전체 선택한 후 붙여 넣고 저장해주세요.


변경된 전체코드


/**
 * 모바일쇼핑몰 슬라이딩메뉴 */
var aCategory = [];
$(document).ready(function(){
    $('#header').append('<div id="dimmedSlider"></div>');
    var offCover = {
        init : function() {
            $(function() {
               $('#wrap').append('<a href="#container" id="btnFoldLayout">메뉴 토글</a>');
                offCover.resize();
                $(window).resize(function(){
                    offCover.resize();
                });
            });
        },
        layout : function(){
            if ($('html').hasClass('expand')) {
                $('#btnFoldLayout').show();
                $('#aside').css({'visibility':'visible'});

                setTimeout(function(){
                    $('#btnFoldLayout').css({'background':'rgba(0,0,0,0.7)'});
                }, 350);
            } else {
                $('#btnFoldLayout').hide();
                setTimeout(function(){
                     $('#aside').css({'visibility':'hidden'});
                    }, 300);
            }
            $('#aside').css({'visibility':'visible'});
        },
        resize : function(){
            var height = $('body').height();
            $('#container').css({'min-height':height});
        }
    };
    offCover.init();


    $('#header .fold, #aside .btnClose').click(function(e){
        $('#dimmedSlider').toggle();
        $('html').toggleClass('expand');
        offCover.layout();
        e.preventDefault();
    });

    $('#btnFoldLayout').click(function(e){
        $('#header .fold').trigger('click');
        e.preventDefault();
    });

    $('#slideCateList h2').click(function() {
        var oParentId = $(this).parent().attr('id');
        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();
            }
        }
        $(this).toggleClass('selected');
    });
});
function subMenuEvent(obj) {
    $(obj).parent().find('li').removeClass('selected');
    $(obj).parent().toggleClass('selected');
}
function setMyCateList(iCateNo, oObj) {
    $(oObj).toggleClass('selected');
    var sMyCateList = localStorage.getItem("myCateList");
    var aCateList = [];
    if (checkInArray(sMyCateList, iCateNo) == true) {
        var aTemp = sMyCateList.split("|");
        for (var i = 0 ; i < aTemp.length ; i++) {
            if (aTemp[i] != iCateNo) {
                aCateList.push(aTemp[i]);
            }
        }
        var sCateList = aCateList.join('|');
        localStorage.setItem("myCateList" , sCateList);
        $('#bookmartCateArea #bookmark'+iCateNo).remove();
        if (aCateList.length == 0) {
             $('#bookmarkCategory #bookmartCateArea').find('ul').remove();
        }
        $("#cate"+iCateNo+" > #icoBookmark").removeClass("selected");
    } else {
        var sCateName = aCategory[iCateNo].name;
        var sCateParam = aCategory[iCateNo].param;
        var sHtml = '';
        if (sMyCateList == null || sMyCateList == '') {
            sHtml = '<ul><li id="bookmark'+iCateNo+'"><a href="/product/list_thumb.html'+sCateParam+'" book_mark="'+iCateNo+'">'+sCateName+'</a><button type="button" class="icoBookmark selected" onclick="setMyCateList('+iCateNo+');">즐겨찾기 삭제</button></li></ul>'
            $('#bookmarkCategory #bookmartCateArea').append(sHtml);
        } else {
            sHtml = '<li id="bookmark'+iCateNo+'"><a href="/product/list_thumb.html'+sCateParam+'" book_mark="'+iCateNo+'">'+sCateName+'</a><button type="button" class="icoBookmark selected" onclick="setMyCateList('+iCateNo+');">즐겨찾기 삭제</button></li>'
            $('#bookmarkCategory #bookmartCateArea ul').append(sHtml);
        }
        $(this).addClass('selected');
        if (sMyCateList == null || sMyCateList == '') {
            localStorage.setItem('myCateList' , iCateNo);
        } else {
            localStorage.setItem('myCateList' , sMyCateList + '|' + iCateNo);
        }
    }
    chkMyCateList();
}
function checkInArray(sBookmarkList, iCateNo) {
    if (sBookmarkList == null) return false;
    var aBookmarkList = sBookmarkList.split("|");
    for (var i = 0; i < aBookmarkList.length; i++) {
        if (aBookmarkList[i] == iCateNo) {
            return true;
        }
    }
    return false;
}
function chkMyCateList() {
    var sMyCateList = localStorage.getItem("myCateList");
    if (sMyCateList == null || sMyCateList == '') {
        $('#bookmarkEmpty').show();
    } else {
        $('#bookmarkEmpty').hide();
    }
}





아래 화면경로 소스를 변경 후 코드로 변경해주세요.

관리자페이지 -> 모바일쇼핑몰 -> 디자인편집하기(스마트디자인편집창) -> 레이아웃 -> 기본레이아웃 -> tool -> mst_expansion -> sidebar -> sidebar.html

약 41번 라인의 소스코드를 변경합니다.



변경전


<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">+ view</a>
    </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">+ view</a>
    </li>
</ul>



변경후


<ul class="mst_menu categoryList" module="Layout_category">
    <li id="cate{$cate_no}" data-param="{$param}" class="vpe"><a href="/{$design_page_url}{$param}" class="cate" cate="{$param}">{$name_or_img_tag}</a><a href="/{$design_page_url}{$param}" class="view viewnone">+ view</a></li>
    <li id="cate{$cate_no}" data-param="{$param}" class="vpe"><a href="/{$design_page_url}{$param}" class="cate" cate="{$param}">{$name_or_img_tag}</a><a href="/{$design_page_url}{$param}" class="view viewnone">+ view</a></li>
    <li id="cate{$cate_no}" data-param="{$param}" class="vpe"><a href="/{$design_page_url}{$param}" class="cate" cate="{$param}">{$name_or_img_tag}</a><a href="/{$design_page_url}{$param}" class="view viewnone">+ view</a></li>
</ul>




아래 화면경로 소스를 변경 후 코드로 변경해주세요.

관리자페이지 -> 모바일쇼핑몰 -> 디자인편집하기(스마트디자인편집창) -> 레이아웃 -> 기본레이아웃 -> tool -> mst_expansion -> sidebar -> script.js



기존코드


jQuery_MST(function (jQuery_MST) {
   jQuery_MST(document).ready(function () {
      // Variables
      var clickedTab = jQuery_MST(".mst_side_tabs > .active");
      var tabWrapper = jQuery_MST(".tab__content");
      var activeTab = tabWrapper.find(".active");
      var activeTabHeight = activeTab.outerHeight();

      // Show tab on page load
      activeTab.show();

      // Set height of wrapper on page load
      tabWrapper.height(activeTabHeight);

      jQuery_MST(".mst_side_tabs > li").on("click", function () {

         // Remove class from active tab
         jQuery_MST(".mst_side_tabs > li").removeClass("active");

         // Add class active to clicked tab
         jQuery_MST(this).addClass("active");

         // Update clickedTab variable
         clickedTab = jQuery_MST(".mst_side_tabs .active");

         // fade out active tab
         activeTab.fadeOut(100, function () {

            // Remove active class all tabs
            jQuery_MST(".tab__content > li").removeClass("active");

            // Get index of clicked tab
            var clickedTabIndex = clickedTab.index();

            // Add class active to corresponding tab
            jQuery_MST(".tab__content > li").eq(clickedTabIndex).addClass("active");

            // update new active tab
            activeTab = jQuery_MST(".tab__content > .active");

            // Update variable
            activeTabHeight = activeTab.outerHeight();

            // Animate height of wrapper to new tab height
            tabWrapper.stop().delay(20).animate({
               height: activeTabHeight
            }, 200, function () {

               // Fade in active tab
               activeTab.delay(20).fadeIn(100);

            });
         });
      });
   });
});


변경 코드


$(document).ready(function(){var a=jQuery_MST(".mst_side_tabs > .active"),b=jQuery_MST(".tab__content"),c=b.find(".active"),d=c.outerHeight();c.show(),b.height(d),jQuery_MST(".mst_side_tabs > li").on("click",function(){jQuery_MST(".mst_side_tabs > li").removeClass("active"),jQuery_MST(this).addClass("active"),a=jQuery_MST(".mst_side_tabs .active"),c.fadeOut(100,function(){jQuery_MST(".tab__content > li").removeClass("active");var e=a.index();jQuery_MST(".tab__content > li").eq(e).addClass("active"),c=jQuery_MST(".tab__content > .active"),d=c.outerHeight(),b.stop().delay(20).animate({height:d},200,function(){c.delay(20).fadeIn(100)})})}),$.ajax({url:"/exec/front/Product/SubCategory",dataType:"json",success:function(a){null!=a&&"undefined"!=a&&$.each(a,function(a,b){$(".mst_menu .vpe").each(function(){$(this).attr("data-param").split("=")[1]==b.parent_cate_no&&($(this).hasClass("has-dropdown")||($(this).addClass("has-dropdown"),$(this).append('<a href="/'+b.design_page_url+"?cate_no="+b.parent_cate_no+'" class="view">+ view</a>'),$(this).append('<ul class="slideSubMenu"></ul>'),$(this).find(".cate").attr("href","#")),$(this).find(".slideSubMenu").append('<li class="noChild" data-param="'+b.param+'"><a href="/'+b.design_page_url+b.param+'" class="cate catesub">'+b.name+'</a><a href="/'+b.design_page_url+b.param+'" class="view">+ view</a></li>'))}),$(".slideSubMenu li").each(function(){$(this).attr("data-param").split("=")[1]==b.parent_cate_no&&($(this).hasClass("has-dropdown")||($(this).addClass("has-dropdown"),$(this).append('<ul class="vpesub2"></ul>'),$(this).find(".cate").attr("href","#"),$(this).find(".catesub").click(function(){$(this).parent("li").toggleClass("selected");var a=jQuery_MST(".tab__content li").outerHeight(!0);jQuery_MST(".tab__content").css("height",a)})),$(this).find(".vpesub2").append('<li data-param="'+b.param+'" class="noChild"><a href="/'+b.design_page_url+b.param+'" class="cate">'+b.name+"</a></li>"),$(this).find(".vpesub2").parent("li").removeClass("noChild"))})})}}),jQuery_MST(".cate").click(function(){jQuery_MST(this).parent("li").toggleClass("selected")}),jQuery_MST(this).find(".cate").click(function(){var a=jQuery_MST(".tab__content li").outerHeight(!0);jQuery_MST(".tab__content").css("height",a)})});




그리고 아래 화면경로 소스를 변경 후 코드로 변경해주세요.

관리자페이지 -> 모바일쇼핑몰 -> 디자인편집하기(스마트디자인편집창) -> 주요화면-> 상품분류


상품분류 html을 모두 아래 소스코드로 변경해주세요.

아래 소스를 전체 선택한 후 붙여 넣고 저장해주세요.


변경된 전체코드


<!--@layout(/layout/basic/layout.html)-->
<style>
   .xans-product-normalpaging {text-align: center;
   margin-bottom: 30px;
   margin-top: 0px; background: #fff;}
   .xans-product-normalpaging p, .xans-product-normalpaging ol li {
   margin: 0 5px;
   }
   .xans-product-normalpaging p, .xans-product-normalpaging ol, .xans-product-normalpaging ol li {
   display: inline-block;
   }
   .xans-product-normalpaging p, .xans-product-normalpaging ol {
   margin-bottom: 0px!important;
   }
   .xans-product-normalpaging ol li a.this {
   background-color: #232323;
   border: 1px solid #232323;
   color: #fff;
   }
   .xans-product-normalpaging ol li a {
   display: inline-block;
   border: 1px solid #ccc;
   background-color: #f4f4f4;
   font-family: 'Hind','Open Sans',sans-serif;
   font-size: 12px;
   height: 30px;
   line-height: 30px;
   width: 30px;
   color: #232323;
   }
</style>
<div module="Product_menupackage">
   <!--@css(/css/module/product/menuPackage.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 class="funcArea">
         <span class="likeButton {$disp_likecate_class}"><button type="button">{$disp_likecate_icon}<strong>{$disp_likecate_count}</strong></button></span>
      </div>
   </div>
   <ul class="menuCategory displaynone">
      <!-- 참고 : 뉴상품관리 전용 모듈입니다. 뉴상품관리 이외의 곳에서 사용하면 정상동작하지 않습니다. -->
      <li module="product_displaysubcategory" style="display:{$display};" class="{$selected}">
         <a href="/product/list_thumb.html?{$param_cate_no}">{$category_name} <span class="count {$product_count_display|display}">({$product_count})</span></a>
         <ul module="product_children">
            <li class="{$selected}">
               <a href="/product/list_thumb.html?{$param_cate_no}">{$category_name} <span class="{$product_count_display|display}">({$product_count})</span></a>
               <div class="button">
                  {$children_icon}
                  <div module="product_children" class="subCategory">
                     <ul>
                        <li class="{$selected}"><a href="/product/list_thumb.html?{$param_cate_no}">{$category_name} <span class="{$product_count_display|display}">({$product_count})</span></a></li>
                        <li class="{$selected}"><a href="/product/list_thumb.html?{$param_cate_no}">{$category_name} <span class="{$product_count_display|display}">({$product_count})</span></a></li>
                     </ul>
                     <img src="http://img.echosting.cafe24.com/skin/mobile_ko_KR/product/btn_category_close.png" alt="" class="icoClose" />
                  </div>
               </div>
            </li>
            <li class="{$selected}">
               <a href="/product/list_thumb.html?{$param_cate_no}">{$category_name} <span class="{$product_count_display|display}">({$product_count})</span></a>
               <div class="button">
                  {$children_icon}
                  <div module="product_children" class="subCategory">
                     <ul>
                        <li class="{$selected}"><a href="/product/list_thumb.html?{$param_cate_no}">{$category_name} <span class="{$product_count_display|display}">({$product_count})</span></a></li>
                        <li class="{$selected}"><a href="/product/list_thumb.html?{$param_cate_no}">{$category_name} <span class="{$product_count_display|display}">({$product_count})</span></a></li>
                     </ul>
                     <img src="http://img.echosting.cafe24.com/skin/mobile_ko_KR/product/btn_category_close.png" alt="" class="icoClose" />
                  </div>
               </div>
            </li>
         </ul>
      </li>
      <!-- //참고 -->
   </ul>
</div>
<!-- 추천상품 -->
<div module="product_listrecommend" class="ec-base-product" style="background:#fff;">
   <!--@css(/css/module/product/listrecommend_swipe.css)-->
   <!--
      $count = 8
          ※ 노출시킬 상품의 갯수를 숫자로 설정할 수 있으며, 설정하지 않을경우, 최대 200개로 자동제한됩니다.
          ※ 상품 노출갯수가 많으면 쇼핑몰에 부하가 발생할 수 있습니다.
      $line = 1
      $grid = 2
      $swipe = yes
      -->
   <div class="mst_m_title">
      <h3 class="mb0">추천 상품</h3>
   </div>
   <ul class="prdList grid2">
      <li>
         <div class="thumbnail">
            <a href="{$link_product_detail}"><img src="{$image_medium}" alt="{$seo_alt_tag}"><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span></a>
            <span class="wish">{$list_wish_icon}</span>
            <div class="mstdiscount" data-price="{$product_custom}" data-sale="{$product_price}"></div>
         </div>
         <div class="description">
            <div class="icon">{$soldout_icon} {$stock_icon} {$new_icon} {$recommend_icon} {$product_icons}</div>
            <strong class="name {$product_name_display|display}"><a href="{$link_product_detail}">{$product_name}</a></strong>
            <ul class="spec">
               <li class="custom_price {$product_custom|display}">{$disp_product_custom}</li>
               <li class="price">{$disp_product_price}</li>
               <li class="color {$colorchip_display|display}">
                  <div module="product_Colorchip">
                     <div class="chips" style="background-color:{$color};"></div>
                     <div class="chips" style="background-color:{$color};"></div>
                  </div>
               </li>
            </ul>
         </div>
      </li>
      <li>
         <div class="thumbnail">
            <a href="{$link_product_detail}"><img src="{$image_medium}" alt="{$seo_alt_tag}"><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span></a>
            <span class="wish">{$list_wish_icon}</span>
            <div class="mstdiscount" data-price="{$product_custom}" data-sale="{$product_price}"></div>
         </div>
         <div class="description">
            <div class="icon">{$soldout_icon} {$stock_icon} {$new_icon} {$recommend_icon} {$product_icons}</div>
            <strong class="name {$product_name_display|display}"><a href="{$link_product_detail}">{$product_name}</a></strong>
            <ul class="spec">
               <li class="custom_price {$product_custom|display}">{$disp_product_custom}</li>
               <li class="price">{$disp_product_price}</li>
               <li class="color {$colorchip_display|display}">
                  <div module="product_Colorchip">
                     <div class="chips" style="background-color:{$color};"></div>
                     <div class="chips" style="background-color:{$color};"></div>
                  </div>
               </li>
            </ul>
         </div>
      </li>
   </ul>
</div>
<!-- //추천상품 -->
<!-- 참고 : 뉴상품관리 전용 변수가 포함되어 있습니다. 뉴상품관리 이외의 곳에서 사용하면 일부 변수가 정상동작하지 않을 수 있습니다. -->
<div module="product_normalmenu">
   <!--@css(/css/module/product/normalmenu.css)-->
   <!--@js(/js/module/product/normalmenu.js)-->
   <div class="sort">
      <select id="selArray" name="selArray" module="product_Orderby">
         <option value="{$param}">{$sort_name}</option>
         <option value="{$param}">{$sort_name}</option>
      </select>
   </div>
</div>
<!-- //참고 -->
<!-- 참고 : 뉴상품관리 전용 변수가 포함되어 있습니다. 뉴상품관리 이외의 곳에서 사용하면 일부 변수가 정상동작하지 않을 수 있습니다. -->
<div class="ec-base-product typeThumb" module="product_listnormal">
   <!--@js(/js/module/product/listnormal.js)-->
   <!--
      $count = 10
          ※ 노출시킬 상품의 갯수를 숫자로 설정할 수 있습니다.
          ※ 상품 노출갯수가 많으면 쇼핑몰에 부하가 발생할 수 있습니다.
      $moreview = no
      $cache = yes
      $basket_result = /product/add_basket.html
      $basket_option = /product/basket_option.html
      -->
   <ul class="prdList grid2">
      <li>
         <div class="thumbnail">
            <a href="{$link_product_detail}"><img src="{$image_medium}" alt="{$seo_alt_tag}"><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span></a>
            <span class="wish">{$list_wish_icon}</span>
            <div class="mstdiscount" data-price="{$product_custom}" data-sale="{$product_price}"></div>
         </div>
         <div class="description">
            <div class="icon">{$soldout_icon} {$stock_icon} {$new_icon} {$recommend_icon} {$product_icons}</div>
            <strong class="name {$product_name_display|display}"><a href="{$link_product_detail}">{$product_name}</a></strong>
            <ul class="spec">
               <li class="custom_price {$product_custom|display}">{$disp_product_custom}</li>
               <li class="price">{$disp_product_price}</li>
               <li class="color {$colorchip_display|display}">
                  <div module="product_Colorchip">
                     <div class="chips" style="background-color:{$color};"></div>
                     <div class="chips" style="background-color:{$color};"></div>
                  </div>
               </li>
            </ul>
         </div>
      </li>
      <li>
         <div class="thumbnail">
            <a href="{$link_product_detail}"><img src="{$image_medium}" alt="{$seo_alt_tag}"><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span></a>
            <span class="wish">{$list_wish_icon}</span>
            <div class="mstdiscount" data-price="{$product_custom}" data-sale="{$product_price}"></div>
         </div>
         <div class="description">
            <div class="icon">{$soldout_icon} {$stock_icon} {$new_icon} {$recommend_icon} {$product_icons}</div>
            <strong class="name {$product_name_display|display}"><a href="{$link_product_detail}">{$product_name}</a></strong>
            <ul class="spec">
               <li class="custom_price {$product_custom|display}">{$disp_product_custom}</li>
               <li class="price">{$disp_product_price}</li>
               <li class="color {$colorchip_display|display}">
                  <div module="product_Colorchip">
                     <div class="chips" style="background-color:{$color};"></div>
                     <div class="chips" style="background-color:{$color};"></div>
                  </div>
               </li>
            </ul>
         </div>
      </li>
   </ul>
</div>
<!-- //참고 -->
<div module="product_normalpaging">
   <p class="prev"><a href="{$param_before}"><span>‹</span></a></p>
   <ol>
      <li><a href="{$param}" class="{$param_class}">{$no}</a></li>
      <li><a href="{$param}" class="{$param_class}">{$no}</a></li>
      <li><a href="{$param}" class="{$param_class}">{$no}</a></li>
      <li><a href="{$param}" class="{$param_class}">{$no}</a></li>
      <li><a href="{$param}" class="{$param_class}">{$no}</a></li>
   </ol>
   <p class="next"><a href="{$param_next}"><span>›</span></a></p>
</div>





아래 파일을 오픈해주세요.

관리자페이지 -> 모바일쇼핑몰 -> 디자인편집하기(스마트디자인편집창) -> 전체화면 탭 -> tool -> mst_expansion -> sidebar -> style.css


제일 하단 라인에 아래 코드를 추가해줍니다.


/*NAV UPDATE*/
.viewnone { display: none;}



감사합니다.

첨부파일 mobile.jpg
비밀번호 수정 및 삭제하려면 비밀번호를 입력하세요.
목록 수정 답변
댓글 수정 비밀번호 :
0 / 200 byte

비밀번호 :

댓글 입력 댓글달기 이름 :비밀번호 : / 평점
/ byte 왼쪽의 문자를 공백없이 입력하세요.(대소문자구분)

관리자에게만 댓글 작성 권한이 있습니다.