https://graychic.co.kr/_sp/cafe24/src/js/category.js

1/*
2 * 모드
3 */
4'use strict';
5
6/*
7 * 클래스 선언
8 */
9class SP_CAFE24_CATEGORY {
10
11    /*
12     * 초기화
13     */
14    constructor() {
15
16        const _ = this;
17
18        /*
19        ** SPSTRAP 라이브러리 연결
20        ** 독립 수행을 목적으로 한다.
21        */
22        _.spstrap = window.SPSTRAP;
23
24        _.init();
25
26    }
27
28    /*
29    ** 최초수행
30    **/
31    init() {
32
33        const _ = this;
34
35        _.categoryMouseHover();
36
37    }
38
39    /*
40    ** 카테고리 파싱
41    **/
42    parseCategory(container, json) {
43
44        const _ = this;
45
46        let rowdata;
47        let rowobj;
48        let rowlink;
49        let mCate = [];
50
51        let scope;
52        let rowhtml;
53        let cate_no;
54        let subCategory;
55
56        /*
57        ** 메인 카테고리 배열 만들기
58        ** Html 상에 마크업이 반드시 존재해야 한다.
59        ** 기본적으로 Html 상에 대분류를 입력하므로 문제없다.
60        */
61        container.querySelectorAll(':scope > ul > li').forEach( row => {
62
63            rowdata = row.dataset;
64            rowlink = row.querySelector(':scope > a') ? row.querySelector(':scope > a').getAttribute('href') : '' ;
65            if (rowlink) {
66                rowobj = {
67                    link_product_list: rowlink,
68                    name: rowdata.name,
69                    param: rowdata.param,
70                    cate_no: Number.parseInt(rowdata.cate_no) || 0,
71					cate_origin_no: rowdata.cate_no,
72                    parent_cate_no: 1,
73                    design_page_url: rowdata.design_page_url,
74                    like_count: 0,
75                }
76                mCate.push(rowobj);
77            }
78
79        });
80
81        /*
82        ** 카테고리를 원하는 모든 컨테이너에 접근한다.
83        */
84        document.querySelectorAll('[sp--js-category]').forEach( element => {
85
86            // 카테고리 생성의 스코프
87            scope = {
88                all: element.dataset.all,               // 전체보기 버튼
89                link: element.dataset.link,             // 링크타입
90                index: element.dataset.index || 0 ,     // 부모 인덱스
91            }
92            subCategory = element.querySelectorAll(':scope > ul > li');
93
94            // 이미 대분류가 있다면
95            if (subCategory.length) {
96
97                scope.depth = 'sub';
98                subCategory.forEach( sub => {
99
100                    cate_no = sub.dataset.cate_no;
101                    rowdata = _.findMainCategory(cate_no, mCate);
102                    rowhtml = _.makeCategory(scope, rowdata, json);
103
104                    // 서브 카테고리에 넣어준다.
105                    _.spstrap.handler.append(sub, rowhtml);
106
107                });
108
109            // 전체를 집어넣을 거라면
110            } else {
111
112                /*
113                    원본 : 2021.07.08 변경                                     ↓
114                    rowdata = scope.index ? _.findMainCategory(scope.index, mCate) : mCate ;
115                */
116
117                scope.depth = 'main';
118                rowdata = scope.index ? _.findMainCategory(scope.index, json) : mCate ;
119                rowhtml = _.makeCategory(scope, rowdata, json);
120
121                // 컨테이너에 넣어준다.
122                _.spstrap.handler.append(element, rowhtml);
123
124            }
125
126            // 기 수행 체크
127            element.classList.add('sp--initialized-category');
128
129        });
130
131        // 현재 링크를 활성화
132        _.spstrap.event.currentLink();
133
134    }
135
136	/*
137	** 수동 카테고리의 하위 카테고리 가져오기
138	*/
139	getCustomCategorySubCategory(name) {
140
141		const _ = this;
142
143		let container = document.querySelector('.sp__layout_header__category [data-name="'+ name +'"] .sp--dropdown-layer');
144		if (container) {
145			return container.outerHTML;
146		} else {
147			return '';
148		}
149
150	}
151
152    /*
153    ** 카테고리 HTML 만들기
154    **/
155    makeCategory(scope, mCate, json) {
156
157        const _ = this;
158
159        let nCate = [], oCate = [], eCate = [];
160        let mCount, nCount, oCount, eCount, contents;
161
162        // 대분류 -----
163        mCount = 1;
164        contents = '';
165        mCate.forEach( mcate => {
166
167            // 중분류 -----
168            nCount = 1;
169            nCate = _.findSubCategory(mcate.cate_no, json);
170
171            // 수동 카테고리의 하위 카테고리 가져ì˜

171¤ê¸°
172			let customCategorySubCategory = '';
173            if (mcate.name && mcate.cate_no === 0) {
174                customCategorySubCategory = _.getCustomCategorySubCategory(mcate.name);
175            }
176
177            // 대메뉴부터 필요한 경우
178            if (!scope.index && scope.depth === 'main') {
179                contents += mCount === 1 ? `<ul>` : '' ;
180                contents += `<li sub="${(nCate.length || customCategorySubCategory) ? true : false}" data-cate_no="${mcate.cate_no ? mcate.cate_no : mcate.cate_origin_no}">${_.makeCategoryLink(scope, mcate)}`;
181            }
182
183			// 수동 카테고리의 하위 카테고리 있다면 추가
184			if(customCategorySubCategory){
185				contents += customCategorySubCategory;
186			}
187
188            nCate.forEach( ncate => {
189
190                // 소분류 -----
191                oCount = 1;
192                oCate = _.findSubCategory(ncate.cate_no, json);
193
194                contents += nCount === 1 ? `<div class="sp--dropdown-layer" name="${_.spstrap.regex.stripTag(mcate.name)}" depth="n"><ul>` : '' ;
195                contents += scope.all && nCount === 1 ? `<li data-cate_no="${mcate.cate_no}">${_.makeCategoryLink(scope, mcate, scope.all)}</li>` : '' ;
196                contents += `<li sub="${oCate.length ? true : false}" data-cate_no="${ncate.cate_no}">${_.makeCategoryLink(scope, ncate)}`;
197
198                oCate.forEach( ocate => {
199
200                    // 상세분류 -----
201                    eCount = 1;
202                    eCate = _.findSubCategory(ocate.cate_no, json);
203
204                    contents += oCount === 1 ? `<div class="sp--dropdown-layer" name="${_.spstrap.regex.stripTag(ncate.name)}" depth="o"><ul>` : '' ;
205                    contents += scope.all && oCount === 1 ? `<li data-cate_no="${ncate.cate_no}">${_.makeCategoryLink(scope, ncate, scope.all)}</li>` : '' ;
206                    contents += `<li sub="${eCate.length ? true : false}" data-cate_no="${ocate.cate_no}">${_.makeCategoryLink(scope, ocate)}`;
207
208                    eCate.forEach( ecate => {
209        
210                        contents += eCount === 1 ? `<div class="sp--dropdown-layer" name="${_.spstrap.regex.stripTag(ocate.name)}" depth="e"><ul>` : '' ;
211                        contents += scope.all && eCount === 1 ? `<li data-cate_no="${ocate.cate_no}">${_.makeCategoryLink(scope, ocate, scope.all)}</li>` : '' ;
212                        contents += `<li data-cate_no="${ecate.cate_no}">${_.makeCategoryLink(scope, ecate)}</li>`;
213                        contents += eCount >= eCate.length ? `</ul></div>` : '' ;
214                        eCount++;
215
216                    });
217
218                    contents += `</li>`;
219                    contents += oCount >= oCate.length ? `</ul></div>` : '' ;
220                    oCount++;
221
222                });
223
224                contents += `</li>`;
225                contents += nCount >= nCate.length ? `</ul></div>` : '' ;
226                nCount++;
227
228            });
229
230            // 대메뉴부터 필요한 경우
231            if (!scope.index && scope.depth === 'main') {
232                contents += `</li>`;
233                contents += mCount >= mCate.length ? `</ul>` : '' ;
234                mCount++;
235            }
236
237            //mCount++;
238
239        });
240
241        return contents;
242
243    }
244
245    /*
246    ** 메인 카테고리 필터
247    **/
248    findMainCategory(cate_no, json) {
249
250        return json.filter(category => category.cate_no == cate_no);
251
252    }
253
254    /*
255    ** 서브 카테고리 필터
256    **/
257    findSubCategory(cate_no, json) {
258
259        if (cate_no && json) {
260            return json.filter(category => category.parent_cate_no == cate_no);
261        } else {
262            return [];
263        }
264
265    }
266
267    /*
268    ** 카테고리 링크 만들기
269    **/
270    makeCategoryLink(scope, element, all) {
271
272        const _ = this;
273
274        if (all) {
275
276            if (scope.link === 'seo') {
277                return `<a href="${element.link_product_list}" class="sp--currentlink">${all}</a>`;
278            } else {
279                if (element.param) {
280                    return `<a href="/${element.design_page_url}${element.param}" class="sp--currentlink">${all}</a>`;
281                } else {
282                    return `<a href="${element.design_page_url}" class="sp--currentlink">${all}</a>`;
283                }
284            }
285
286        } else {
287
288            if (scope.link === 'seo') {
289                return `<a href="${element.link_product_list}" class="sp--currentlink">${element.name}</a>`;
290            } else {
291                if (element.param) {
292                    return `<a href="/${element.design_page_url}${element.param}" class="sp--currentlink">${element.name}</a>`;
293                } else {
294                    return `<a href="${element.design_page_url}" class="sp--currentlink">${element.name}</a>`;
295                }
296            }
297
298        }
299
300    }
301
302    /*
303    ** 카테고리 마우스 오버 텍스트
304    */
305    categoryMouseHover() {
306        
307        const _ = this;
308
309        let data = {
310            container: '.sp__layout_header__category',
311            input: '[sp--js-category-hover] span',
312            init: '.sp--cafe24-initialized-categoryhover'
313        }
314
315        let target;
316        let textData;
317        let textContents;
318        let container = document.querySelector(data.container);
319        let array = document.querySelectorAll(data.input +`:not(${data.init})`);
320        array.forEach( text => {
321
322            textData = text.dataset;
323            target = container.querySelector('.sp__layout_header__category li[data-cate_no="'+ textData.category +'"] > a');
324
325            if (target && typeof target === 'object') {
326                textContents = `
327                    <i class="xans-layout-category--hover">
328                        ${text.innerHTML}
329                    </i>
330                `;
331                _.spstrap.handler.append(target, textContents);
332            }
333
334            // 기 수행 체크
335            text.classList.add(_.spstrap.var.trim(data.init));
336
337        });
338
339    }
340
341}
342
343/*
344 * 생성하기
345 */
346const SP_CAFE24_CATEGORY_NEW = new SP_CAFE24_CATEGORY();
347
348/*
349 * 내보내기
350 */
351export {
352    SP_CAFE24_CATEGORY_NEW as SP_CAFE24_CATEGORY
353}