Help Center
카페24 소식
[모바일쇼핑몰] 상품 상세정보 위치변경 및 더보기 기능추가 안내
2014-06-11
안녕하세요, 카페24 운영도우미 입니다.
모바일의 상품 상세정보 표시 위치를 변경하고, 상품정보가 길어질 경우 [더보기] 버튼을 통해
표시가 제한될 수 있도록 기능이 업그레이드되었습니다.
자세한 내용은 아래를 참조해 주세요.
---------------------------------------------------------------------------------------------------
■ 적용일자 : 2014-06-11 (수)
■ 업데이트 내용
모바일 상품상세정보 화면에서 [상세정보] 버튼을 누르지 않더라도, 상품의 상세정보가 바로 표시할 수 있습니다.
또한, 상품정보가 길어질 경우 전체 상품정보중 중간까지만 표시되고 [더보기]버튼을 클릭할 경우
보여질 수 있도록 기능이 개선되었습니다.
■ 적용 방법
- 위치 : 모바일쇼핑몰 > 디자인편집하기 > 상품(product) > 상품상세(detail.html)
▼ 아래 위치에 파란색 표시 소스 추가
| ## 상단생략 ## <div module="product_additional"> <!--@css(/css/module/product/additional.css)--> <!--@js(/js/module/product/additional.js)--> <div class="prdDetailView"> {$product_detail} </div> <div class="btnMore" id="btnMore"> <a href="#none"> 더보기<span class="icoMore"></span> </a> </div> </div>
<ul class="addition"> <li class="info"><a href="/product/zoom.html?product_no={product_no}"target="_self">상세정보</a></li> <li class="review"><a hre="/board/product/list.html?board_no=4&link_product_no={$product_no}">구매후기 ({$review_count} 건)</a></li> <li class="qna"><a hre="/board/product/list.html?board_no=6&link_product_no={$product_no}">Q & A ({$qna_count} 건)</a></li>
## 하단생략 ## |
- 위치 : 모바일쇼핑몰 > 디자인편집하기 > CSS > 모듈(module) > 상품(product) > additional.css
▼ 아래 소스 추가
| ## 상단생략 ## .xans-product-detail .xans-product-additional { margin:20px 0 10px; } .xans-product-detail .xans-product-additional .prdDetailView img { width:100%; } .xans-product-detail .xans-product-additional .moreBtn { margin:7px 0; font-size:12px } .xans-product-detail .xans-product-additional .moreBtn a { display:block; padding:7px 0; color:#212530; font-weight:bold; text-align:center; background:#d4d4d6; } .xans-product-detail .xans-product-additional .moreBtn span.more_down { overflow:hidden; display:inline-block; width:8px; height:7px; margin:0 0 0 5px; vertical-align:middle; font-size:0; line-height:0; background:url("http://img.echosting.cafe24.com/design/skin/mobile/ico_toggle_arow_down.png") no-repeat 50% 50%; background-size:100% 100%; } |
- 화면추가 버튼을 클릭하여 아래 저장경로에 화면을 추가합니다.
- Js > module > product > 파일명 : additional.js
▼ 아래 소스 추가
|
/** * 모바일 상품상세 더보기 * @package app/Shop * @subpackage Front/Disp/Product * @since 2014. 5. 12. * @version 1.0 */ $(function() { var $DetailMore = { /* * current module name */ sModule : 'xans-product-additional',
/* * active div */ iActive : 0,
/** * module */ $module : null,
/** * detail */ $detail : null,
/** * more */ $more : null,
/** * real height */ realHeight : 0,
/** * fake height */ fakeHeight : 0, /** * init */ init : function() { // validate if (this.validate === false) return;
// set object this.setObject();
// set detail height this.setDetailHeight();
// set more this.setMore(); },
/** * set event */ setMore : function() { if (this.realHeight <= this.fakeHeight) { this.$more.remove(); } else { this.$more.unbind().bind('click', function() { if (this.validate === false) return; $DetailMore.load(); }); } },
/** * set detail height */ setDetailHeight : function() { this.$detail.css({'max-height' : parseInt($(window).height()*4) + 'px', overflow : 'hidden'}); this.fakeHeight = this.$detail.height(); },
/** * validate */ validate : function() { if (mobileWeb === false) return false; },
/** * set object */ setObject : function(){ try { // current module class var sActiveProduct = this.iActive > 0 ? '.' + this.sModule + '-' + this.iActive : '.' + this.sModule; // set module this.$module = $(sActiveProduct);
// set detail this.$detail = this.$module.find('div.prdDetailView');
// set more this.$more = this.$module.find('div.moreBtn');
// set real height this.realHeight = this.$detail.height(); } catch(e) { console.log(e); } },
/** * load detail */ load : function() { this.$detail.css({'max-height' : 'none'}); this.$more.remove(); } }; $DetailMore.init(); }); |
▼ 적용화면
---------------------------------------------------------------------------------------------------
카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.
궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]