안녕하세요, 카페24 운영도우미 입니다.
모바일 쇼핑몰 카테고리에 상품 더보기 버튼 터치 시 페이지 이동 가능하도록 개선되었습니다.
자세한 내용은 아래를 참조해 주세요.
■ 적용일자 : 2014-02-26 (수)
■ 업데이트 내용
모바일 쇼핑몰 카테고리에 상품 더보기 버튼 터치 시 페이지 이동이 가능하도록 개선되었습니다.
해당 기능은 HTML 소스 추가 및 주석변수를 추가하셔야 사용 가능합니다.
HTML 소스 추가 및 주석변수는 아래와 같습니다.
※ $moreview 변수
- 상품 더보기 버튼 터치 시 페이지 이동 기능을 사용/사용안함 할 수 있는 변수입니다.
- yes : 상품 더보기 버튼 터치시 페이지 이동이 가능합니다. (예 : $moreview = yes)
- no 또는 변수없음 : 상품 더보기 버튼 터치시 페이지 이동이 불가합니다. (예 : $moreview = no)
아래의 내용을 참고하셔서 HTML 추가 및 수정을 하시면 해당 기능을 이용하실 수 있습니다.
1. 페이지 추가
-생성위치 : 모바일쇼핑몰 > 디자인편집하기 > HTML편집 > 화면추가 > CSS > 모듈 > 상품
(상품 폴더가 없는경우 모듈 폴더 하위에 상품 폴더 추가(생성폴더명 : product))
(모듈 폴더가 없는경우 CSS 폴더 하위에 상품 폴더 추가(생성폴더명 : module))
- 생성파일명 : productMore.css
- 아래 소스를 전체추가 합니다.
@CHARSET "utf-8";
.xans-product-listmore { margin:7px 0; font-size:12px }
.xans-product-listmore a { display:block; padding:7px 0; color:#212530; font-weight:bold; text-align:center; background:#d4d4d6; }
.xans-product-listmore 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/mobileWeb/common/ico_toggle_arow_down.png") no-repeat 50% 50%; background-size:100% 100%; } |
2. 소스 추가 및 수정
1) 위치 : 모바일 쇼핑몰 > 디자인 편집하기 > 스마트디자인 편집창 > 전체화면보기 > 상품 > 상품분류(list.html)
- 파란색 소스를 추가합니다.
|
<!--@layout(/layout/basic/layout.html)-->
<div module="Product_menupackage">
<!--@css(/css/module/product/menuPackage.css)-->
<div class="titleArea" module="product_headcategory">
<h2>{$title_text}</h2>
</div>
<ul>
## 중간생략 ##
<div class="typeDesc" module="product_listnormal">
<!--@css(/css/module/product/listNormal.css)-->
<!--@js(/js/module/product/list.js)-->
<!--
$count = 4
$moreview = yes
$basket_result = /product/add_basket.html
$basket_option = /product/basket_option.html
-->
<ul>
## 중간생략 ##
<div module="product_normalpaging">
<!--@css(/css/module/product/productPaginate.css)-->
<p class="first"><a href="{$param_first}"><span>첫 페이지</span></a></p>
<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>
<p class="last"><a href="{$param_last}"><span>마지막 페이지</span></a></p>
</div>
<div module="product_listmore">
<!--@css(/css/module/product/productMore.css)-->
<a href="#none" onclick="{$more_action}">
더보기(<span id="more_current_page">{$current_page}</span>/<span id="more_total_page">{$total_page}</span>)<span class="more_down"></span>
</a>
</div> |
2) 위치 : 모바일 쇼핑몰 > 디자인 편집하기 > 스마트디자인 편집창 > 전체화면보기 > 상품 >
상품분류(썸네일)(list_thumb.html)
- 파란색 소스를 추가합니다.
|
<!--@layout(/layout/basic/layout.html)-->
<div module="Product_menupackage">
<!--@css(/css/module/product/menuPackage.css)-->
<div class="titleArea" module="product_headcategory">
<h2>{$title_text}</h2>
</div>
## 중간생략 ##
<div class="typeThumb" module="product_listnormal">
<!--@css(/css/module/product/listNormal.css)-->
<!--@js(/js/module/product/list.js)-->
<!--
$count = 4
$moreview = yes
$basket_result = /product/add_basket.html
$basket_option = /product/basket_option.html
-->
<ul class="grid3">
## 중간생략 ##
<div module="product_normalpaging">
<!--@css(/css/module/product/productPaginate.css)-->
<p class="first"><a href="{$param_first}"><span>첫 페이지</span></a></p>
<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>
<p class="last"><a href="{$param_last}"><span>마지막 페이지</span></a></p>
</div>
<div module="product_listmore">
<!--@css(/css/module/product/productMore.css)-->
<a href="#none" onclick="{$more_action}">
더보기(<span id="more_current_page">{$current_page}</span>/<span id="more_total_page">{$total_page}</span>)<span class="more_down"></span>
</a>
</div> |
▼ 카테고리 상품 더보기 페이지 이동 버튼 적용 화면 예
[리스트형]
[썸네일형]
카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.
궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]
