Help Center
카페24 소식
[모바일쇼핑몰] 최근본상품 기능 업그레이드
2013-04-25
안녕하세요, 카페24 운영도우미 입니다.
모바일쇼핑몰의 최근본상품 목록에서 장바구니에 담기, 구매하기, 옵션보기 기능이 업그레이드 되어
버튼노출 및 기능 적용 방법을 안내해드립니다.
자세한 내용은 아래를 참조해 주세요.
■ 적용일자 : 2013-04-25 (목)
■ 업데이트 내용
'마이페이지 > 최근본상품' 페이지에 각 상품 별 장바구니 담기, 주문하기, 옵션보기 기능이 추가되었습니다.
아래의 안내에 따라 html 및 javascript 파일을 수정하시면 정상적으로 버튼노출 및 기능 이용이 가능합니다.
▼ 적용화면
1) 마이쇼핑(myshop) > 최근본상품(recent_list.html)
① 상품을 감싸는 html 영역 수정
- 아래와 같이 빨간색 코드 삭제, 파란색 코드 추가해주세요.
|
<section id="myList" class="mPrdList" module="product_recentlist"> |
② JS 링크 추가
- 아래와 같이 JS 링크를 추가합니다.
[수정 전]
<ul module="product_listitem">
[수정 후]
<ul module="product_listitem">
<!--@js(/js/module/myshop/ui.js)-->
③ 상품 진열방법 수정
[수정 전]
<li>
<div class="thumbnail"><img src="{$image_medium}" alt="" width="85" height="85" /></div>
<div class="description">
<p class="name"><a href="/product/detail.html{$param}">{$product_name}</a></p>
<p class="price">{$price}</p>
</div>
</li>
[수정 후]
<li>
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$image_medium}" alt="" width="85" height="85"></a></div>
<div class="description">
<p class="name"><a href="/product/detail.html{$param}">{$product_name}</a></p>
<p class="price">{$price}</p>
<p class="button">
<a class="tButton type1 {$disp_basket|display}" href="#none" onclick="{$act_basket}"><span>담기</span></a>
<a class="tButton type1 {$disp_order|display}" href="#none" onclick="{$act_order}"><span>주문</span></a>
<a class="tButton type2 show_opt" href="#none"></a>
</p>
<ul class="option" module="product_mainoption">
<li>{$option_name}: {$form.option}</li>
<li>{$option_name}: {$form.option}</li>
</ul>
<ul class="option" module="product_addoption">
<li>{$add_option_name}: {$form.add_option}</li>
<li>{$add_option_name}: {$form.add_option}</li>
</ul>
</div>
</li>
2) js > 모듈(module) > 마이쇼핑(myshop) > ui.js
- 코드 전체를 아래 내용으로 교체합니다.
| /** * 관심상품 리스트 UI */ $(document).ready(function(){ $('.show_opt').each(function() { var node = $(this.parentNode.parentNode).find('ul'); if (node.attr("class") != undefined) { var sOptDisplay = 'F'; $(node).each(function(index, el) { if ($(el).html() != '') sOptDisplay = 'T'; }); if (sOptDisplay == 'T') $(this).html('<span>옵션보기</span>'); $(this).click(function() { if (node.css("display") == "block") { node.hide(); $(this).html('<span>옵션보기</span>'); }else { node.show(); $(this).html('<span>옵션닫기</span>'); } }); } }); }); |
3) css > common.css
- 아래의 소스를 추가해주시기 바랍니다.
- 이미 동일한 소스가 있다면 추가하실 필요가 없습니다.
| .mPrdList.typeDesc { margin:10px 0 0; font-size:12px; } .mPrdList.typeDesc > ul > li { overflow:hidden; position:relative; padding:10px 10px 10px 0; } .mPrdList.typeDesc .thumbnail { position:absolute; left:0; top:10px; } .mPrdList.typeDesc .description { min-height:85px; padding:0 0 0 100px; } .mPrdList.typeDesc .name a { display:block; color:#63666E; } .mPrdList.typeDesc .price { color:#FF6600; font-weight:bold; } .mPrdList.typeDesc .delete { position:absolute; top:10px; right:10px; overflow:hidden; text-indent:-999px; width:21px; height:20px; border:0; cursor:pointer; background:url("http://img.echosting.cafe24.com/mobileWeb/common/btn_delete.png") no-repeat 0 0; background-size:100% 100%; } .mPrdList.typeDesc .button { padding:5px 0; } .mPrdList.typeDesc .button:after { content:""; display:block; clear:both; } .mPrdList.typeDesc .button .tButton.type2 { float:right; } .mPrdList.typeDesc .option { display:none; } /* "이곳" */ .mPrdList.typeDesc .option li { margin:3px 0 0; padding:0 0 0 8px; font-size:11px; border-bottom:0; background:url("http://img.echosting.cafe24.com/mobileWeb/common/bg_rowType2Th.png") 0 7px no-repeat; background-size:3px 7px; } |
■ 참고사항
최신소스보기로 전체 화면을 가져왔을 때, 타이틀과 페이징이 깨진다면 아래의 2가지 방법 중 편리한 방법으로
해결이 가능합니다. (css를 수정하는 방법을 추천해드립니다.)
방법 1) HTML 을 수정해서 해결하는 방법
- 마이쇼핑(myshop) > 최근본상품(recent_list.html)
- 전체 소스를 아래 코드로 교체해주세요.
| <!-- 타이틀 --> <!-- as-is --> <div class="mTitle"> <h2>관심상품</h2> </div> <!-- to-be --> <div class="gTitle"> <h2>관심상품</h2> </div> <!-- 페이징 : class명 수정, js 불러오기 --> <!-- as-is --> <div class="mPagenate" module="product_recentlistpaging"> <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> <!-- to-be --> <div class="mPaging" module="product_recentlistpaging"> <!--@js(/js/pager.js)--> <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}" title="페이지로 이동">{$no}</a></li> <li><a href="{$param}" title="페이지로 이동">{$no}</a></li> <li><a href="{$param}" title="페이지로 이동">{$no}</a></li> <li><a href="{$param}" title="페이지로 이동">{$no}</a></li> <li><a href="{$param}" title="페이지로 이동">{$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> |
방법 2) CSS를 추가해서 해결하는 방법
- css > common.css
- 아래의 코드를 추가해주세요.
| .mTitle { margin:20px 0 0; overflow:hidden; } .mTitle:first-child { margin:3px 0 0; } .mTitle h2 { float:left; padding:0 0 3px 16px; font-size:14px; line-height:20px; } .mTitle h2 img { vertical-align:middle; } .mTitle p .tButton { margin:0; } .mTitle h3 { font-size:13px; line-height:20px; } .mPagenate { margin:15px 0; text-align:center; vertical-align:top; font-weight:bold; } .mPagenate a, .mPagenate a.this { display:block; color:rgb(67,68,71); font-size:11px; height:17px; padding:5px; line-height:14px; } .mPagenate a { color:rgb(161,161,163); outline:none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } .mPagenate ol { vertical-align:top; } .mPagenate ol, .mPagenate li, .mPagenate p { display:inline-block; } .mPagenate li, .mPagenate p { overflow:hidden; min-width:22px; height:22px; margin:0 1px; border:2px solid rgb(161,161,163); border-radius:3px; background:rgb(255,255,255); } .mPagenate p { background:rgb(161,161,163) url(http://img.echosting.cafe24.com/mobileWeb/common/bg_paging.png) 50% 0 no-repeat; background-size:20px 60px; } .mPagenate p.first { background-position:50% 2px; } .mPagenate p.prev { background-position:50% -13px; } .mPagenate p.next { background-position:50% -28px; } .mPagenate p.last { background-position:50% -43px; } .mPagenate p span { overflow:hidden; display:block; width:11px; height:19px; text-indent:100%; } |
카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.
궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]