안녕하세요, 카페24 운영도우미 입니다.
상품 상세페이지의 상품사용후기 게시판의 글이 많을때
페이징 모듈을 삽입해서 사용 할 수 있도록 기능 업그레이드 되었습니다.
또한 게시글을 수정할 수 있도록 수정버튼이 추가 되었습니다.
자세한 내용은 아래를 참조해 주세요.
1. 제목 : 상품사용후기 페이징 및 게시글 수정기능 업데이트
2. 업데이트 내용
1) HTML 수정
상세페이지 하단 게시물목록이 페이징 처리 추가 되었으며,
표준스킨에서는 아래와 같이 파란색 소스 부분을 수정해주시면 됩니다.
- 수정파일 : /product/detail.html
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-reviewpaging { clear:both; text-align:center; } .xans-product-reviewpaging { padding:13px 0; } .xans-product-reviewpaging { text-align:center; margin:20px 0 0;} .xans-product-reviewpaging p, .xans-product-reviewpaging ol, .xans-product-reviewpaging li { display:inline; } .xans-product-reviewpaging img {vertical-align:middle; } .xans-product-reviewpaging p { margin-right:-4px; } .xans-product-reviewpaging ol { margin:0 7px; } .xans-product-reviewpaging 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-reviewpaging li:first-child { background:none; } .xans-product-reviewpaging li strong { color:#f26522; } .xans-product-reviewpaging li a { color:#202020; } .xans-product-reviewpaging li a:hover { color:#f26522; text-decoration:underline; } .xans-product-reviewpaging li a.nolink { cursor:default; } |
3) JS 수정
- 수정파일 : /js/module/product/review.js
- 아래의 js소스를 편집창에서 최신소스로 업데이트 해주세요.
/**
* 상품 상세의 사용후기
*/
$(document).ready(function(){
$('.xans-product-review a').click(function(e) {
e.preventDefault();
REVIEW.getReadData($(this));
});
}); var PARENT = ''; var OPEN_REVIEW = ''; var REVIEW = {
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_REVIEW == sQueryNo[1]) {
$('#product-review-read').remove();
OPEN_REVIEW = '';
return false;
} else {
OPEN_REVIEW = sQueryNo[1];
} $.ajax({
url : '/exec/front/board/product/4?'+sQuery[1]+pass_check,
dataType: 'json',
success: function(data) {
$('#product-review-read').remove();
var aHtml = [];
if (data.is_secret == true) {
// 비밀글 비밀번호 입력 폼
aHtml.push('<form name="SecretForm_4" id="SecretForm_4">');
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=4&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_4" id="commentWriteForm_4">');
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-review-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(4);
}
});
},
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}
