+ 나를 위한 코멘트 : 내가 사용하려고 수정한 category.js 파일은 category_sub.js 라는 이름으로 올려놨으니 찾으면 됨.
category.js 는 아래와 같이 load 되어 있는 파일이다.
<!--@js(/js/module/layout/category.js)-->
category.js 는 카페24 쇼핑몰 기능 중에서 사용자가 관리자 페이지에서 구성해둔 메뉴 내용에 따라 화면에 내용을 뿌려주는 부분을 컨트롤하는 파일이다. 나는 지금 처음 카페24 작업을 해 보는 거라 이것 저것 뒤져 보고 엄청 헤매고 있는데 category.js 는 그냥 두고 사용하면 되긴 하는 거 같다. 왠만하면 굳이 저 파일에 손 대지 않아도 관리자 페이지에서 메뉴 설정을 따로 하고 어쩌고 하면 원하는 메뉴 관련 기능을 사용할 수 있다.
내가 저 파일을 수정해야 겠다고 생각했던 이유는 상세 카테고리 페이지에서(ex. OUTER 메뉴를 클릭 했을 때의 상품 리스트 화면) 만약 내가 OUTER 카테고리의 하위 메뉴로 Jumper, Coat 를 만들어 뒀다고 했을 때 이 두 개의 카테고리가 보여지도록 하고 싶었다. 맨 처음 카페24 쇼핑몰 기본 스킨에서는 그런 메뉴가 보이지 않아서 따로 js 작업을 해야 된다고 생각했었다. 근데 찾아 보니까 관리자 메뉴 -> 상품 관리 -> 편의 기능 설정에 들어가서 분류 설정을 사용함으로 변경하면 된다. 그리고 해당 부분 css 만 수정해주면 된다.
그리고 해당 파일을 파악해 봤는데 다음과 같다.
일단 ajax가 사용되었다. ajax를 잘 모르다 보니 해당 스크립트의 상단 부분에 ajax 가 정의된 거만 보고 파일 전체가 ajax 를 사용하는 건 줄 알았다. 그 상태로 한참을 보다 보니 아니었다.
보면 크게 get, getParam, getParamSeo, show, close 라는 function을 methods 라는 변수 안에 정의하는 내용이다.
그리고 methods에 대한 정의가 다 끝난 끝 부분에 화면에 뿌려주는 기능을 추가했다(mouseenter, mouseleave 부분).
ajax는 get 부분에서만 사용한다. get 부분에서 각 카테고리에 부여된 번호를 가져온다. 여기에서 상단에 정의된 두 개의 빈 array, aCategory, aSubCategory 중에서 aSubCategory를 사용한다. aCategory는 왜 정의되 있는건지 모르겠음.
!!) get 에서 가져오는 데이터가 뭔지 확인하고 싶으면
for (var i=0; i<aData.length; i++)로 시작하는 ajax success 부분의 for문 내부에
console.log(aData[i]);라고 찍어볼 것. 그러면 아래처럼 aData에 뭐 들어 있는지 볼 수 있다.
{
"link_product_list": "/category/outer/24/",
"name": "OUTER",
"param": "?cate_no=24",
"cate_no": 24,
"parent_cate_no": 1,
"design_page_url": "product/list.html",
"like_count": 0
}
getParam이랑 getParamSeo는 카테고리의 주소와 관련해서 같은 목적으로 만든 function 같은데 다만 getParamSeo 의 경우 iCateNo 라는 값이 없을 때? 에 대신 getParam 역할을 하게 하는 거 같다.
show는 말그대로 각 카테고리의 서브 카테고리를 보여주기 위해 만들어진 function 이다. 카페24 쇼핑몰의 최초 베이직 스킨에서 메뉴는 카테고리에 마우스를 올리면 그 하위의 카테고리가 보여지는 형식이다. 그래서 하위 카테고리에 대한 내용을 sub-category 라는 class 명으로 싸서 addClass, removeClass 하는 방식으로 보여줬다 감췄다 한다.
close는 하위 카테고리를 숨기기 하는 function.
그리고 위의 function 을 이제 스크립트 끝 부분 중 mouseenter 가 들어간 부분을 시작으로 사용해서 화면에 보여준다. 내가 원래 사용하려던 목적대로 못해서 허무하지만 어쨌든 원하던 걸 찾아서 다행쓰. 간만에 공부하는 기분으로 작업했다.
끝
