[카페24] 상품 분류, 게시판 스킨별 스크립트, CSS 다르게 적용하기

 

상품 분류마다 다르게 보여주기

상품 분류 스킨은 동일한데 특정 일부분만 다르게 보여지게 하고 싶은 경우

아래 스크립트를 상품 목록파일(/product/list.html)에 로드되는 /js/module/product/menucategory.js 파일에 추가해주면 된다.

var urll = window.location.href;
var urlParams = new URL(urll).searchParams;
var cate_no = urlParams.get('cate_no');

if(cate_no =="54") {
    //54번 카테고리 분류에 보여질 스크립트
}

 

 

[사용예시]

 

나의 경우에는 카테고리별 설명문구를 추가해주기 위해 아래와 같이 코드를 넣었다.

상품분류페이지에서 간단한 분류 설명은 넣을 수는 있지만 3~4줄 길게 넣을수는 없어서 스크립트로 직접 넣을 수 있도록 하였다.

$('#cate').hide(); 

var urll = window.location.href;
var urlParams = new URL(urll).searchParams;
var cate_no = urlParams.get('cate_no');

var dd = document.getElementById('list_description');

if(cate_no =="54") {
    dd.innerHTML = '카테고리54 설명';
}   

if(cate_no =="71") { 
    dd.innerHTML = '카테고리 71 설명';
    $('#feather_cate').show(); 
    $('#feather_cate ul li:first-child').addClass("on"); 
}

 

 

 

게시판마다 다르게 보여주기

 

카페24 게시판 스킨은 동일하게 사용하는데, 특정 게시판에서만 일부 div가 안보이게 한다던지 차이를 줄때

아래 스크립트를 사용하면 된다.

 

여기서 주의할 점은 이 스크립트는 주소창의 board_no 변수를 불러와서 구분하기 때문에

게시판 주소는 무조건 www.abc.com/board/free/list.html?board_no=1002 이런식으로 .html 뒤에 변수가 오는 형태로 사용하는 경우에만 사용 가능하다.

var getBoardNo = location.href.split('board_no=')[1]; //게시판 번호 불러오기

if(getBoardNo == 1002) {
    document.getElementById("board_cate").style.display = "none";
}