안녕하세요, 카페24 운영도우미 입니다.
상품 상세페이지의 상품Q&A 게시판의 글이 많을때
페이징 모듈을 삽입해서 사용 할 수 있도록 기능 업그레이드 되었습니다.
또한 게시글을 수정할 수 있도록 수정버튼이 추가 되었습니다.
첨부파일을 다운 받으신 후 폴더의 경로와 동일하게 FTP에 덮어쓰기 해주시거나
아래의 안내와 같이 적용화면의 예제대로 소스를 수정해주시면됩니다.
자세한 내용은 아래를 참조해 주세요.
1. 제목 : 상품Q&A 페이징 및 게시글 수정기능 업데이트
2. 업데이트 내용
1) HTML 수정
상세페이지 하단 게시물목록이 페이징 처리 추가 되었으며,
표준스킨에서는 아래와 같이 파란색 소스 부분을 수정해주시면 됩니다.
- 수정파일 : /product/detail.html
<div id="prdQnA">
<div class="link">
<ul>
<li><a href="#prdDetail">상품 상세 정보</a></li>
<li><a href="#prdPayment">상품 결제 정보</a></li>
<li><a href="#prdDelivery">배송 정보</a></li>
<li><a href="#prdChange">교환 및 반품 정보</a></li>
<li><a href="#prdService">서비스 문의</a></li>
<li><a href="#prdReview">상품 사용 후기</a></li>
<li class="on"><a href="#prdQnA">상품 Q&A</a></li>
<li class="last"><a href="#prdRelated">관련 상품</a></li>
</ul>
</div> <h3>상품 Q&A</h3> <div id="qnaArea">
<p>상품에 대해 궁금한 점을 해결해 드립니다.</p> <div module="product_qna">
<!--@js(/js/module/product/qna.js)-->
<a name='use_qna'></a>
<table border="1" summary="상품의 사용후기입니다." class="boardList">
<caption>상품의 사용후기</caption> <thead>
<tr>
<th scope="col" class="number">번호</th>
<th scope="col" class="category">카테고리</th>
<th scope="col" class="subject">제목</th>
<th scope="col" class="name">작성자</th>
<th scope="col" class="date">작성일</th>
<th scope="col" class="hit">조회</th>
</tr>
</thead> <tbody>
<tr class="first">
<td>{$no}</td>
<td class="category">{$category_name}</td>
<td class="subject">{$icon_re}{$icon_lock} <a href="/product/provider/review_read.xml{$param_read}">{$subject}</a> {$icon_new}{$icon_hit}{$icon_file}{$comment_count}</td>
<td>{$member_icon} {$writer}</td>
<td>{$write_date|date:Y-m-d}</td>
<td>{$hit_count}</td>
</tr> <tr>
<td>{$no}</td>
<td class="category">{$category_name}</td>
<td class="subject">{$icon_re}{$icon_lock} <a href="/product/provider/review_read.xml{$param_read}">{$subject}</a> {$icon_new}{$icon_hit}{$icon_file}{$comment_count}</td>
<td>{$member_icon} {$writer}</td>
<td>{$write_date|date:Y-m-d}</td>
<td>{$hit_count}</td>
</tr>
</tbody>
</table>
</div>
<div module="product_qnapaging">
<!--@js(/js/module/product/pager.js)-->
<p><a href="{$param_first}"><img src="http://img.echosting.cafe24.com/design/skin/mono/btn_pageFirst.gif" alt="첫 페이지" /></a> </p>
<p><a href="{$param_before}"><img src="http://img.echosting.cafe24.com/design/skin/mono/btn_pagePrev.gif" alt="이전 페이지" /></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>
</ol>
<p><a href="{$param_next}"><img src="http://img.echosting.cafe24.com/design/skin/mono/btn_pageNext.gif" alt="다음 페이지" /></a> </p>
<p><a href="{$param_last}"><img src="http://img.echosting.cafe24.com/design/skin/mono/btn_pageLast.gif" alt="마지막 페이지" /></a> </p>
</div> <p class="boardBtn">
<a href="{$qna_list}"><img src="http://img.echosting.cafe24.com/design/skin/mono/product/btn_prdBoardAll.gif" alt="모두 보기" /></a>
<a href="{$qna_write}"><img src="http://img.echosting.cafe24.com/design/skin/mono/product/btn_prdBoard2.gif" alt="상품 Q & A 쓰기" /></a>
</p>
</div>
</div> |
2) CSS 수정
- 수정파일 : /css/module/product/additional.css
- 상품사용후기와 상품Q&A 디자인을 동시에 컨트롤하는 css입니다.
① css파일 41줄에 아래 코드를 한번만 추가합니다.
.xans-product-additional table.boardList .count .RelationQuantityDown { position:absolute; left:32px; bottom:0; }
.xans-product-additional table.boardList td p.btnArea { padding:0 0 5px; text-align:right; } |
② 파일의 빈 곳에 아래 코드를 추가합니다.
.xans-product-qnapaging { clear:both; text-align:center; } .xans-product-qnapaging { padding:13px 0; } .xans-product-qnapaging { text-align:center; margin:20px 0 0;} .xans-product-qnapaging p, .xans-product-qnapaging ol, .xans-product-qnapaging li { display:inline; } .xans-product-qnapaging img {vertical-align:middle; } .xans-product-qnapaging p { margin-right:-4px; } .xans-product-qnapaging ol { margin:0 7px; } .xans-product-qnapaging li { margin:0 9px 0 0; padding:0 0 0 11px; font-size:.9em; background:url(http://img.echosting.cafe24.com/design/skin/mono/bg_page.gif) left center no-repeat; } .xans-product-qnapaging li:first-child { background:none; } .xans-product-qnapaging li strong { color:#f26522; } .xans-product-qnapaging li a { color:#202020; } .xans-product-qnapaging li a:hover { color:#f26522; text-decoration:underline; } .xans-product-qnapaging li a.nolink { cursor:default; } |
3) JS 수정 - 수정파일 : /js/module/product/qna.js
- 아래의 js소스를 편집창에서 최신소스로 업데이트 해주세요.
/**
* 상품 상세 Q&A
*/
$(document).ready(function(){
$('.xans-product-qna a').click(function(e) {
e.preventDefault();
QNA.getReadData($(this));
});
}); var PARENT = ''; var OPEN_QNA = ''; var QNA = {
getReadData : function(obj)
{
if (obj != undefined) {
PARENT = obj;
var sHref = obj.attr('href');
var pNode = obj.parents('tr');
var pass_check = '&pass_check=F';
} else {
var sHref = PARENT.attr('href');
var pNode = PARENT.parents('tr');
var pass_check = '&pass_check=T';
}
var sQuery = sHref.split('?');
var sQueryNo = sQuery[1].split('=');
if (OPEN_QNA == sQueryNo[1]) {
$('#product-qna-read').remove();
OPEN_QNA = '';
return false;
} else {
OPEN_QNA = sQueryNo[1];
}
$.ajax({
url : '/exec/front/board/product/6?'+sQuery[1]+pass_check,
dataType: 'json',
success: function(data) {
$('#product-qna-read').remove();
var aHtml = [];
if (data.is_secret == true) {
// 비밀글 비밀번호 입력 폼
aHtml.push('<form name="SecretForm_6" id="SecretForm_6">');
aHtml.push(' <input type="text" name="a" style="display:none;">');
aHtml.push(' <div class="contArea"><p>비밀번호 <input type="password" id="secure_password" name="secure_password" onkeydown="if (event.keyCode == 13) '+data.action_pass_submit+'"> <input type="button" value="확인" onclick="'+data.action_pass_submit+'"></p></div>');
aHtml.push('</form>');
} else {
// 글 내용
if (data.read['content_image'] != null) {
var sImg = data.read['content_image'];
} else {
var sImg = '';
} aHtml.push('<div class="contArea"><p>'+data.read['content']+'</p><p>'+sImg+'</p></div>');
aHtml.push('<p class="btnArea"><a href="/board/product/modify.html?board_act=edit&no='+data.no+'&board_no=6&link_product_no='+getQueryString('product_no')+'"><img src="http://img.echosting.cafe24.com/design/skin/mono/product/btn_boardModify.gif" alt="게시글 수정하기" /></a></p>');
// 댓글리스트
if (data.comment != undefined) {
aHtml.push('<table summary="상품의 사용후기 리플 입니다." class="boardReplyList">');
aHtml.push('<caption>상품의 사용후기 리플</caption>');
aHtml.push('<thead>');
aHtml.push('<tr>');
aHtml.push(' <th scope="col" class="name">이름</th>');
aHtml.push(' <th scope="col" class="subject">내용</th>');
aHtml.push(' <th scope="col" class="date">날짜</th>');
aHtml.push(' <th scope="col" class="grade '+data.use_point+'">평점</th>');
aHtml.push('</tr>');
aHtml.push('</thead>');
aHtml.push('<tbody>');
for (var i=0; data.comment.length > i; i++) {
aHtml.push('<tr>');
aHtml.push(' <td class="name">'+data.comment[i]['member_icon']+' '+data.comment[i]['comment_name']+'</td>');
aHtml.push(' <td class="subject">'+data.comment[i]['comment_content']+'</td>');
aHtml.push(' <td class="date">'+data.comment[i]['comment_write_date']+'</td>');
aHtml.push(' <td class="grade '+data.use_point+'"><img src="http://img.echosting.cafe24.com/design/skin/mono/ico_point'+data.comment[i]['comment_point_count']+'.gif" alt="'+data.comment[i]['comment_point_count']+'점" /></td>');
aHtml.push('</tr>');
}
aHtml.push('</table>');
}
// 댓글쓰기
if (data.comment_write != undefined) {
aHtml.push('<form name="commentWriteForm_6" id="commentWriteForm_6">');
aHtml.push(' <div class="memoCont">');
aHtml.push(' <div class="writer">');
aHtml.push(' <p class="user"><span class="nameArea">이름 '+data.comment_write['comment_name']+' 비밀번호 '+data.comment_write['comment_password']+'</span>');
aHtml.push(' '+data.comment_write['comment']+'<a href="#none" onclick="'+data.comment_write['action_comment_insert']+'"><img src="http://img.echosting.cafe24.com/design/skin/mono/board/btn_reOk.gif" alt="확인" /></a></p>');
aHtml.push(' <p class="rating '+data.comment_write['use_point']+'">'+data.comment_write['comment_point']+'</p>');
aHtml.push(' <p class="text '+data.comment_write['use_comment_size']+'">'+data.comment_write['comment_byte']+' / '+data.comment_write['comment_size']+' byte</p>');
aHtml.push(' <p class="captcha '+data.comment_write['use_captcha']+'">'+data.comment_write['captcha_image']+'<br />'+data.comment_write['captcha']+'* 왼쪽의 문자를 공백없이 입력하세요.(대소문자구분)</p>');
aHtml.push(' </div>');
aHtml.push('</div>');
aHtml.push('</form>');
}
}
$(pNode).after('<tr id="product-qna-read"><td colspan="6" align="left">'+aHtml.join('')+'</td></tr>');
if (data.comment_write != undefined && data.comment_write['use_comment_size'] == '') PRODUCT_COMMENT.comment_byte(6);
}
});
},
END : function() {}
}; |
▼ 적용화면
카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.
궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기] 3
![http://img.echosting.cafe24.com/design/skin/mono/ico_point'+data.comment[i]['comment_point_count']+'.gif](http://img.echosting.cafe24.com/design/skin/mono/ico_point'+data.comment[i]['comment_point_count']+'.gif){kind=link}
