모바일 쇼핑몰 메인화면에 노출되는 상품을 SNS처럼 디자인 할 수 있는 디자인 모듈 적용 방법을 확인할 수 있어요.
자세히 알아보기
스마트디자인 편집창의 '편집' 기능으로 변경하기
스마트디자인 편집창에서 메인상품 모듈 '편집' 버튼을 클릭한 후 원하는 디자인 형태를 선택하여 적용해 보세요.
디자인 소스로 편집하기
아래 안내되는 소스의 [seq]로 표시된 곳에는 모바일 쇼핑몰에 진열할 메인 분류의 모듈코드 번호를 입력해 주세요.
※ 메인 분류의 모듈 코드번호는 에 '메인 분류 관리'에서 확인할 수 있어요.
- 1번 형태 상품 디자인
- 화면 위치 : 메인화면(index.html)
아래와 같이 파란색 소스를 추가해 주세요.
## 상단 생략 ##
<div class="mPrdList typeThumb" module="product_listmain_[seq]">
<!--@css(/css/module/product/listmain_[seq].css)-->
<!--@js(/js/module/product/main_block.js)-->
<!--
$count = 6
$only_html = yes
$moreview = yes
-->
<h2>{$category_title_text}</h2>
<ul class="grid">
<li class="big">
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$image_medium}" alt=""></a></div>
</li>
<li class="item">
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$image_medium}" alt=""></a></div>
</li>
<li class="item">
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$image_medium}" alt=""></a></div>
</li>
<li class="item">
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$image_medium}" alt=""></a></div>
</li>
<li class="item">
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$image_medium}" alt=""></a></div>
</li>
<li class="item">
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$image_medium}" alt=""></a></div>
</li>
</ul>
</div>## 하단 생략 ##
- 화면 위치 : CSS > 모듈(module) > 상품(product) > listmain_[seq].css
아래와 같이 파란색 소스를 추가해 주세요.
.xans-product-listmain-[seq] { padding:0; background-color:#fff; }
.xans-product-listmain-[seq] h2 { max-height:43px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; line-height:43px; padding:0 42px 0 14px; background:url("http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/bg_title_close.gif") no-repeat right 14px top 50%; background-size:13px 8px; cursor:pointer; }
.xans-product-listmain-[seq]img { max-width:100%; }
.xans-product-listmain-[seq]li { vertical-align:top; }
.xans-product-listmain-[seq] > ul > li > ul { display:table; table-layout:fixed; width:100%; padding:0 7px; font-size:0; line-height:0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
.xans-product-listmain-[seq] > ul > li > ul > li { position:relative; display:inline-block; margin:0 0 14px; vertical-align:top; font-size:12px; line-height:1.4; }
/* swipe 기능을 사용하지않는경우 */
.xans-product-listmain-[seq]> ul[class*="grid"] { display:table; table-layout:fixed; width:100%; box-sizing:border-box; padding:0 11px; font-size:0; line-height:0; }
.xans-product-listmain-[seq] > ul[class*="grid"] > li { position:relative; display:inline-block; vertical-align:top; font-size:12px; line-height:1.4; }
.xans-product-listmain-[seq]ul { display:inline-table; width:100%; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; font-size:0; line-height:0; }
.xans-product-listmain-[seq] ul:after { content:""; display:block; clear:both; }
.xans-product-listmain-[seq] li { float:left; width:33.33%; padding:0 4px 6px 3px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
.xans-product-listmain-[seq] li.big { width:66.66%; padding:0 4px 4px 3px; }
.xans-product-listmain-[seq] li.big .thumbnail { min-height:188px; }
.xans-product-listmain-[seq].thumbnail { overflow:hidden; border:1px solid #ededed; min-height:80px; }
.xans-product-listmain-[seq] .thumbnail img { width:100%; } - js > 모듈(module) > 상품(product) > main_block.js
아래와 같이 파란색 소스를 추가해 주세요.
// 상품이미지 높이 값
$(document).ready(function() {
resizeContent();
});
$(window).resize(function() {
resizeContent();
});
function resizeContent() {
var bigHeight = $('.big > .thumbnail').height();
$('.item > .thumbnail').css({'height':(bigHeight/2)-4+'px'});
};
- 화면 위치 : 메인화면(index.html)
- 2번 형태 상품 디자인
- 화면 위치 : 메인화면(index.html)
아래와 같이 파란색 소스를 추가해 주세요.
## 상단 생략 ##
<div class="typeGallery" module="product_listmain_[seq]">
<!--@css(/css/module/product/listmain_[seq].css)-->
<!--@js(/js/module/product/main_gallery.js)-->
<!--
$count = 4
$moreview = yes
-->
<ul class="grid2">
<li>
<div class="thumbnail"><a href="#none"><img src="{$image_medium}" alt="{$seo_alt_tag}"></a></div>
<div class="information" data-url="/product/detail.html{$param}">
<a href="#none">
<p class="name {$product_name_display|display}">{$product_name}</p>
<p class="price {$product_price_display|display}">{$disp_product_price} <span class="{$product_price_ref_display|display}">{$txt_product_price_ref}</span></p>
</a>
</div>
</li>
<li>
<div class="thumbnail"><a href="#none"><img src="{$image_medium}" alt="{$seo_alt_tag}"></a></div>
<div class="information" data-url="/product/detail.html{$param}">
<a href="#none">
<p class="name {$product_name_display|display}">{$product_name}</p>
<p class="price {$product_price_display|display}">{$disp_product_price} <span class="{$product_price_ref_display|display}">{$txt_product_price_ref}</span></p>
</a>
</div>
</li>
</ul>
</div>## 하단 생략 ##
- 화면 위치 : CSS > 모듈(module) > 상품(product) > listmain_[seq].css
아래와 같이 파란색 소스를 추가해 주세요.
.xans-product-listmain-[seq] { padding:0; background-color:#fff; }
.xans-product-listmain-[seq] h2 { max-height:43px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; line-height:43px; padding:0 42px 0 14px; background:url("http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/bg_title_close.gif") no-repeat right 14px top 50%; background-size:13px 8px; cursor:pointer; }
/* 타입 : 갤러리 */
.xans-product-listmain-[seq] { margin:0; }
.xans-product-listmain-[seq] ul { display:table; table-layout:fixed; padding:0 14px 0 12px; font-size:0; line-height:0; }
.xans-product-listmain-[seq] img { max-width:100%; }
.xans-product-listmain-[seq] li { position:relative; display:inline-block; margin:0 0 2px; padding:0; vertical-align:top; overflow:hidden; font-size:13px; line-height:1.2em; }
.xans-product-listmain-[seq] .thumbnail { margin:0; padding:0 2px; }
.xans-product-listmain-[seq] .thumbnail img { width:100%; border:1px solid #ededed; }
.xans-product-listmain-[seq] .information,
.xans-product-listmain-[seq] .information a,
.xans-product-listmain-[seq] .information:before { width:100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
.xans-product-listmain-[seq] .information { position:absolute; left:0; bottom:-40px; height:40px; padding:0 1px 0 3px; }
.xans-product-listmain-[seq] .information:before { display:block; content:""; height:100%; background:#000; opacity:0.6; -moz-opacity:0.6; -webkit-opacity:0.6; }
.xans-product-listmain-[seq] .information:after { display:block; content:""; position:absolute; top:0; right:12px; width:20px; height:100%;
background:url("http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/ico_arrow_white.png") 0 center no-repeat; background-size:20px 20px;
-webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); transform: rotate(270deg); }
.xans-product-listmain-[seq] .information a { display:block; position:absolute; top:0; height:100%; overflow:hidden; padding:5px 38px 5px 5px; color:#fff; }
.xans-product-listmain-[seq] .information a p { height:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xans-product-listmain-[seq] .information a .price { margin:4px 0 0; font-weight:bold; }
.xans-product-listmain-[seq] .information a .price span { display:none; }
.xans-product-listmain-[seq] .grid1 li { width:100%; }
.xans-product-listmain-[seq] .grid1 li .name { font-size:15px; }
.xans-product-listmain-[seq] .grid2 li { width:50%; }
.xans-product-listmain-[seq] .grid2 li .name { font-size:13px; }
.xans-product-listmain-[seq] .grid3 li { width:33.333%; }
.xans-product-listmain-[seq] .grid3 li .name { font-size:11px; }
.xans-product-listmain-[seq] .grid4 li { width:25%; }
.xans-product-listmain-[seq] .grid4 li .name { font-size:11px; } - js > 모듈(module) > 상품(product) > main_block.js
아래와 같이 파란색 소스를 추가해 주세요.
$(document).ready(function(){
// 갤러리 탭 이벤트
var galleryTab = function() {
var sModule = 'xans-product-listmain';
var $gallery = $('.' + sModule);
var $galleryList = $gallery.children('ul');
$galleryList.delegate('li > div.information', 'click', function(e) {
var $information = $(this);
var height = $information.height();
$information.css({bottom: '-' + height + 'px', opacity: '0'});
e.stopPropagation();
document.location.replace($(this).data('url'));
});
$gallery.delegate('li > div.thumbnail', 'click', function(e) {
e.stopPropagation();
var $information = $(this).parent().find('div.information');
var height = $information.height();
if (typeof($information.attr('status')) === 'undefined' || $information.attr('status') == 'hide') {
$information.animate({
opacity: 1,
bottom: 1,
}, 300, function() {
$information.attr('status', 'show');
});
} else {
$information.animate({
opacity: 0,
bottom: '-' + height + 'px',
}, 300, function() {
$information.attr('status', 'hide');
});
}
});
};
galleryTab();
});
- 화면 위치 : 메인화면(index.html)