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;}
감사합니다.
관리자에게만 댓글 작성 권한이 있습니다.