안녕하세요, 카페24 운영도우미 입니다.
PC쇼핑몰과 같이 모바일쇼핑몰에서 관련 상품을 확인 및 구매할 수 있도록 관련상품 기능을 업그레이드 하였습니다.
자세한 내용은 아래를 참조해 주세요.
■ 적용일자 : 2013-07-03 (수)■ 업데이트 내용
1. 관련상품 등록하기
'쇼핑몰어드민 > 상품관리 > 분류별 상품관리 > 사품수정 > 관련상품 탭' 페이지에서 관련상품을 등록합니다.
▼ 관련상품 등록 화면
2. 모바일쇼핑몰에 적용하기
- 간편디자인 모드 이용 중인 경우 디자인 모드를 HTML 디자인으로 변경 후 소스를 수정해주시면 적용됩니다.
- HTML 디자인 모드 이용 시에는 아래의 내용대로 HTML 소스를 수정해주시기 바랍니다.
1) 상품상세화면
- 위치 : 쇼핑몰어드민 > 모바일쇼핑몰 > 상품 > 상품상세(detail.html)
- 아래와 같이 파란색 소스를 추가해주세요.
|
<aside class="gPrdAddition">
<p class="mFeature"><a href="/product/zoom.html?product_no={$product_no}" target="_self">상세정보</a></p>
<p class="mRreview"><a href="/board/product/list.html?board_no=4&link_product_no={$product_no}">구매후기 ({$review_count} 건)</a></p>
<p class="mQnA"><a href="/board/product/list.html?board_no=6&link_product_no={$product_no}">Q & A ({$qna_count} 건)</a></p>
</aside>
<!-- 관련상품 -->
<section class="relation">
<div module="product_relation">
<div class="setPrdArea show">
<strong class="title" onclick="{$disp_rel_relation}"><span id="setTitle">관련상품</span></strong>
<div class="inlay">
<ul class="mSetPrd" module="product_relationlist">
<li>
<div class="chk">{$form.checkbox}</div>
<div class="infoBox">
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$img}" style="width:75px" alt="" /></a></div>
<div class="information">
<p class="name"><a href="/product/detail.html{$param}">{$name} {$soldout_icon} {$recommend_icon} {$new_icon} {$mileage_icon}</a> {$product_icons}</p>
<p class="price">{$price_unit_head}{$product_price}{$price_unit_tail}</p>
</div>
</div>
<div class="mBoard rowType2">
<table border="1">
<colgroup>
<col style="width:90px" />
<col />
</colgroup>
<tbody>
<tr module="Product_Option">
<th><span>{$rel_option_name}</span></th>
<td>
{$form.rel_option}
</td>
</tr>
<tr module="Product_Addoption">
<th><span>{$rel_add_option_name}</span></th>
<td>
{$form.rel_add_option}
</td>
</tr>
<tr>
<th><span>수량</span></th>
<td>
{$form.quantity}
<img width="30" height="27" src="http://img.echosting.cafe24.com/mobileWeb/common/btn_quantity_up.png" class="{$quantity_up_class}" alt="up" />
<img width="30" height="27" src="http://img.echosting.cafe24.com/mobileWeb/common/btn_quantity_down.png" class="{$quantity_down_class}" alt="down" />
</td>
</tr>
</tbody>
</table>
</div>
</li>
<li>
<div class="chk">{$form.checkbox}</div>
<div class="infoBox">
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$img}" style="width:75px" alt="" /></a></div>
<div class="information">
<p class="name"><a href="/product/detail.html{$param}">{$name} {$soldout_icon} {$recommend_icon} {$new_icon} {$mileage_icon}</a> {$product_icons}</p>
<p class="price">{$price_unit_head}{$product_price}{$price_unit_tail}</p>
</div>
</div>
<div class="mBoard rowType2">
<table border="1">
<colgroup>
<col style="width:90px" />
<col />
</colgroup>
<tbody>
<tr module="Product_Option">
<th><span>{$rel_option_name}</span></th>
<td>
{$form.rel_option}
</td>
</tr>
<tr module="Product_Addoption">
<th><span>{$rel_add_option_name}</span></th>
<td>
{$form.rel_add_option}
</td>
</tr>
<tr>
<th><span>수량</span></th>
<td>
{$form.quantity}
<img width="30" height="27" src="http://img.echosting.cafe24.com/mobileWeb/common/btn_quantity_up.png" class="{$quantity_up_class}" alt="up" />
<img width="30" height="27" src="http://img.echosting.cafe24.com/mobileWeb/common/btn_quantity_down.png" class="{$quantity_down_class}" alt="down" />
</td>
</tr>
</tbody>
</table>
</div>
</li>
</ul>
<div class="mButton" style="text-align:center !important">
<a class="tSubmit1" href="#none" onclick="{$action_basket}" alt="장바구니 담기"><span>메인+관련상품 장바구니</span></a>
</div>
</div>
</div>
</div>
</section>
<!-- //관련상품 --> |
2) CSS 추가
- 위치 : 쇼핑몰어드민 > 모바일쇼핑몰 > css > common.css
- 아래의 소스를 해당 CSS 파일에 추가합니다.
|
/* 상품상세 > 세트상품(토글) */
.setPrdArea { margin:25px 0 0; border-top:2px solid #434446; border-bottom:2px solid #434446; background-color:#f4f4f4; }
.setPrdArea .title { display:block; padding:0 7px; background:#dfdfe1; cursor:pointer; }
.setPrdArea .title h1 { display:block; padding:10px 0; font-size:12px; }
.setPrdArea .title span { display:block; padding:10px 0; font-size:12px; background: url("http://img.echosting.cafe24.com/mobileWeb/common/ico_toggle_arow_down.png") right 50% no-repeat; background-size: 10px 6px; }
.setPrdArea .title span.show { display:block; padding:10px 0; font-size:12px; background: url("http://img.echosting.cafe24.com/mobileWeb/common/ico_toggle_arow_up.png") right 50% no-repeat; background-size: 10px 6px; }
.setPrdArea.show h2 span { background-image:url("http://img.echosting.cafe24.com/mobileWeb/common/ico_toggle_arow_up.png"); }
.setPrdArea.show .inlay { display:block; }
.setPrdArea .inlay { display:none; }
.setPrdArea .mSetPrd { border-top:1px solid #cecece; }
.setPrdArea .mSetPrd > li:first-child{ border-top:1px solid #fff; }
.setPrdArea .mSetPrd > li { padding:7px 7px 7px 25px; }
.setPrdArea .mSetPrd .chk { position:absolute; left:7px; top:7px; }
/* 세트 상품 리스트 */
.mSetPrd > li { position:relative; padding:7px; border-top:1px solid #fff; border-bottom:1px solid #cecece; }
.mSetPrd > li:first-child{ border-top:0; }
.mSetPrd img { max-width:100%; vertical-align:middle; }
.mSetPrd .infoBox { overflow:hidden; padding:0 4px 0 90px; }
.mSetPrd .thumbnail,
.mSetPrd .information { position:relative; float:left; }
.mSetPrd .thumbnail { left:-90px; width:85px; margin-right:-90px; }
.mSetPrd .thumbnail img { width:100%; }
.mSetPrd .information { width:100%; }
.mSetPrd .name { margin:0 4px 0; font-size:12px; line-height:1.25; }
.mSetPrd .name a { display:block; width:100%; color:#1e222d; word-wrap:break-word; }
.mSetPrd .price,
.mSetPrd .quantity { font-size:12px; font-family:Tahoma; font-weight:bold; color:#ff6600; line-height:1.25; letter-spacing:-1px; word-wrap:break-word; }
.mSetPrd .price span,
.mSetPrd .quantity span { margin:0 2px 0 0; color:#434446; }
.mSetPrd .button { margin:5px 0 0; }
.mSetPrd .mBoard { border:0; }
.mSetPrd .mBoard th,
.mSetPrd .mBoard td { line-height:1.5; }
.mSetPrd .mBoard th { padding:10px 0; }
.mSetPrd .mBoard td { padding:2px 0; }
.mSetPrd .mBoard td .fText { padding:3px 0; }
.mSetPrd .mButton { margin:0; padding:15px 3px; border-top:1px solid #fff; }
.mSetPrd .mButton a { letter-spacing:-1px; }
.mSetPrd table tbody td input {width:45% !important}
/* for guide : 가이드를 위한 css로 화면엔 영향을 미치지 않습니다. */ |
▼ 모바일쇼핑몰 적용화면
- 관련상품 영역은 '펼침' 상태로 보여지며 타이틀 부분 터치시 해당메뉴 영역 '접기'가 가능합니다.
- 관련상품 중 원하는 상품을 체크 후 하단의 '메인+관련상품 장바구니' 버튼을 통하여 현재 보고있는 상품과
체크한 관련상품을 동시에 장바구니에 담을 수 있습니다.
■ 참고사항
쇼핑몰에 적용된 소스가 위의 제공되는 가이드 소스와 다르거나 디자인 적용이 정상적이지 않을 경우,
해당 페이지의 편집창에서 [최신소스] 적용(확인) 후 수정해 주시기 바랍니다.
(최신소스 [적용] 시, 기존에 해당 페이지 디자인을 수정하신 경우 기본 디자인으로 변경됩니다.)
▼ 최신소스 확인 화면
카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.
궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]
