고도몰5 Pro를 이용해서 스킨 작업을 하거나 튜닝을 진행할 때 게시판 말머리로 검색하는 기능을 사용하는 경우가 있습니다.
물론 일반적인 게시판 스킨에는 기본적으로 말머리를 사용하게 되면 셀렉트 박스로 선택할 수 있도록 나오기 때문에 문제가 되지 않습니다.
하지만 셀렉트 박스가 아닌 다른 방식으로 사용할 때 혹은 말머리 기능이 나오지 않는 곳에서 사용하는 방법을 알려드릴께요~
⚠️ 해당 포스팅에서 사용된 Skin은 Moment이며, 스킨에 따라 파일 위치, 스크립트 내용들이 달라질 수 있습니다.
👉 게시판에서 셀렉트 박스가 아닌 다른 방식으로 사용하는 경우
말머리를 셀렉트 박스가 아닌 페이지에 리스트로 전부 노출 시키는 경우에는 간단하게 링크에 파라미터 값을 추가해주시면 사용가능합니다.
&category=말머리이름
각 말머리에 위 처럼 링크에 category라는 파라미터를 추가해주면 말머리로 검색이 가능합니다.
/board/list.php?bdId=tip&category=말머리
위와 같이 링크를 적용해주시면 됩니다.
👉 상품 상세페이지의 리뷰 혹은 Q&A에서 말머리 기능을 사용하는 경우
위 이미지와 같이 후기와 Q&A게시판에 말머리 기능을 사용하더라도 상품 상세 페이지에는 말머리가 노출 되지 않습니다.
스킨 코드를 확인해 봐도 전혀 말머리에 대한 기능을 볼 수가 없습니다.
상품 상세 페이지에서 게시판은 Ajax를 이용해 불러오는 방식이기 때문에 말머리 기능을 사용하기 위해서는 약간의 튜닝이 필요합니다.
1. 우선 말머리 리스트를 만들어 줍니다.
bdList라는 변수를 gd_debug할 경우 cfg 안에 bdCategory라는 이름으로 말머리 리스트가 있는 것을 확인 하실 수 있습니다.
bdCategory 변수안에는 상품^|^배송^|^반품/환불 처럼 일반 텍스트로 불러오기 때문에 이걸 배열로 만들어 준 후에 반복문으로 출력을 해줍니다.
<!--{ @ explode('^|^', bdList.cfg.bdCategory) }-->
위와 같이 explode로 텍스트 값을 변수로 변경해주면서 @를 이용해서 반복문을 돌려줍니다.
각 반복문 안에 a태그를 이용해서 링크를 걸어주거나 Click 이벤트를 설정해야 하는데 상품상세페이지의 게시판들은 Ajax로 호출을 하기 때문에 스크립트를 실행해주셔야 합니다.
goGoodsAjaxPage('goodsqa','page=1&bdId=goodsqa&goodsNo={req.goodsNo}&gboard=y&category={=.value_}')
여기서도 마찬가지로 QueryString 뒤에 category파라미터를 추가해준 것 입니다.
전체적인 코드로 보면 다음과 같습니다. ( html구조는 응용하셔서 필요하신대로 구성하시면 됩니다. )
- 상품Q&A 스킨파일의 위치
/data/skin/front/스킨명/goods/goods_board_qa_list.html
<!--{ ? bdList.cfg.bdCategory }--> <!--말머리가 있을 때 출력-->
<div class="qna_cont_head">
<ul>
<li class="{ ? !req.category }is-active{ / }">
<a href="javascript:goGoodsAjaxPage('goodsqa','page=1&bdId=goodsqa&goodsNo={req.goodsNo}&gboard=y')" class="head_btn">전체</a>
</li>
<!--{ @ explode('^|^', bdList.cfg.bdCategory) }--> <!--반복문으로 말머리 리스트 출력-->
<li class="{ ? req.category == .value_}is-active{ / }">
<a href="javascript:goGoodsAjaxPage('goodsqa','page=1&bdId=goodsqa&goodsNo={req.goodsNo}&gboard=y&category={=.value_}')" data-id="data_show_{=.value_}" class="head_btn">{=.value_}</a>
</li>
<!--{ / }-->
</ul>
</div>
<!--{ / }-->
여기까지 하시면 이제 말머리 리스트를 출력하고 링크만 설정 한 것입니다.
상품 상세 페이지에서는 말머리 기능 자체를 지원하지 않기 때문에 스크립트 튜닝도 필요합니다.
- goGoodsAjaxPage 함수 파일의 위치
/data/skin/front/스킨명/js/gd_board_goods.js
//페이징
function goGoodsAjaxPage(bdId, queryStirng) {
var ajaxDataEl = '';
var page = gd_get_query_variable(queryStirng, 'page');
var goodsNo = gd_get_query_variable(queryStirng, 'goodsNo');
var category = gd_get_query_variable(queryStirng, 'category'); // 말머리 추가
if (bdId == 'goodsreview') {
ajaxDataEl = $('#ajax-goods-goodsreview-list');
}
else if (bdId == 'goodsqa') {
ajaxDataEl = $('#ajax-goods-goodsqa-list');
}
else {
alert('error illgal board id');
return;
}
$.ajax({
method: "GET",
cache: false,
url: "./goods_board_list.php",
data: {bdId: bdId, goodsNo: goodsNo, page: page, gboard: 'y', category: category}, // 말머리 추가
dataType: 'text'
}).success(function (data) {
ajaxDataEl.hide();
ajaxDataEl.fadeIn('fast');
ajaxDataEl.html(data);
}).error(function (e) {
alert(e.responseText);
});
}goodsNo변수 아래에
var category = gd_get_query_variable(queryStirng, 'category');
말머리 값을 가져올 category 변수를 추가해 주었구요.
ajax함수의 data값 맨 뒤에도 category 값을 추가해 주었습니다.
이렇게 추가해 주게 되면 Board 컴포넌트에서 category Request값을 자동으로 불러와서 검색을 해주게 됩니다.
물론 리스트 하단의 페이징도 자동으로 말머리값이 적용되어 잘 작동을 합니다.