Help Center
카페24 소식
[모바일쇼핑몰] 모바일 메인화면, 상품목록 '더보기' 버튼 개선 안내
2014-05-13
안녕하세요, 카페24 운영도우미 입니다.
기존에 모바일쇼핑몰 상품목록 화면에서만 적용 가능하였던 [더보기] 버튼이 메인상품에도 적용 가능하도록
새롭게 개선되었습니다.
자세한 내용은 아래를 참조해 주세요.
■ 적용일자 : 2014-05-13 (화)
■ 업데이트 내용
기존에 모바일쇼핑몰 카테고리만 적용 가능하였던 [더보기] 버튼이 메인 상품에도 공통으로 적용 가능하도록
새롭게 개선되었습니다.
※ 기존에 [더보기] 기능을 사용하셨던 고객님께서는 아래 ‘기존 사용자 수정’ 안내에 따라 먼저 수정해주시기 바랍니다.
( 참고 : 기존 더보기 기능 디자인가이드 보러가기 )
1. 기존 사용자 수정
1) moreView.js 화면 삭제
- 위치 : 모바일쇼핑몰 > 디자인편집하기 > Js > 모듈(module) > 상품(product) > moreView.js
2) 상품분류 화면에서 소스 삭제
- 위치 : 모바일쇼핑몰 > 디자인편집하기 > 상품(product) > 상품분류(list.html) / 상품분류(썸네일)(list_thumb.html)
▼ 아래와 같이 빨간색 소스 삭제합니다.
| ## 상단 생략 ##
<!--@js(/js/module/product/moreView.js)--> ## 하단 생략 ## |
※ 해당 소스를 삭제하지 않는 경우, 새로운 더보기 버튼의 기능이 정상적으로 동작하지 않을 수 있으니,
적용시 꼭 삭제해주시기 바랍니다.
2. 화면에 적용하기
1) 쇼핑몰 메인(index.html)
▼ 아래와 같이 파란색 소스를 추가합니다.
|
## 상단 생략 ##
<div class="mPrdList typeThumb" module="product_listmain_1"> <!--@css(/css/module/product/listmain_1.css)--> <!-- $count = 6 $moreview = yes $cache = yes $type = moreview --> ## 중간 생략 ## |
▼ 아래와 같이 파란색 소스를 수정합니다.
|
## 중간 생략 ##
<div module="product_listmore_1"> <!--@css(/css/module/product/productMore.css)--> <a href="#none" onclick="{$more_action}"> 더보기(<span id="more_current_page_{$display_group}">{$current_page}</span>/<span id="more_total_page_{$display_group}">{$total_page}</span>) <span class="more_down"></span> </a> </div> |
※ 각 상품별 모듈에 따라, 더보기 모듈이 수정되어야 합니다. 상품별 모듈은 아래 예시를 참고해주세요.
** 상품모듈 예시)
[추천상품] 일반모듈 product_listmain_1 / 더보기 모듈 product_listmore_1
[신상품] 일반모듈 product_listmain_2 / 더보기 모듈 product_listmore_2
[추가카테고리] 일반모듈 product_listmain_3 / 더보기 모듈 product_listmore_3
2) 상품분류(list.html)
▼ 아래와 같이 파란색 소스를 추가합니다.
|
## 상단 생략 ##
<div class="typeDesc" module="product_listnormal"> <!--@css(/css/module/product/listNormal.css)--> <!--@js(/js/module/product/list.js)--> <!-- $count = 5 $moreview = yes $cache = yes $basket_result = /product/add_basket.html $basket_option = /product/basket_option.html --> <ul> ## 중간 생략 ## |
▼ 아래와 같이 파란색 소스를 수정합니다.
|
## 중간 생략 ##
<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> |
■ 기타 안내
1. 더보기 이용방법
- $moreview=yes로 설정한 경우 더보기 기능이 동작하고, no로 설정한 경우에는 더보기 기능이 제공되지 않습니다.
- $cache=yes 로 설정한 경우 페이지 이전으로 돌아갔을 때 더보기 버튼을 클릭하였던 위치의 쿠키값을 저장하여 해당 위치로 바로 이동할 수 있습니다.
2. 스와이프와 더보기가 중복으로 설정된 경우
- $swipe = yes
$moreview = yes
$type = moreview
위와 같이 스와이프와 더보기 기능이 둘다 yes로 설정된 경우, 스와이프 기능이 활성화 됩니다.
단, $type 변수를 이용해서 더보기 기능을 우선하도록 설정 가능합니다.
■ 쇼핑몰 적용화면
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.
궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]