# STOVE GNB 연동
STOVE GNB를 연동에 대해 방법에 대해 제공합니다.
연동은 두가지로 방법으로 제공합니다.
1. CDN으로 직접 연동하는 방법
2. CDN버전 정보를 통해 최신 버전을 유지하는 방법
# CDN 직접연동
환경별 제공 URL을 제공하며 CDN에 고정버전으로 연동 할 수 있습니다.
- [DEV] : '//static-new-dev.onstove.com'
- [QA] : '//static-new-qa.onstove.com'
- [SANDBOX] : '//static-new.gate8.com'
- [LIVE] : '//static-new.onstove.com'
// <script src="{환경별 URL}/sh-{버전}/cp-header.js"></script>
// Example (LIVE & 6.0.48 Version & CP)
<script src="//static-new.onstove.com/sh-6.0.48/cp-header.js"></script>
1
2
3
4
2
3
4
# CDN 최신버전으로 연동
최신 버전 정보를 가져와 GNB를 최신버전으로 연동 할 수 있습니다.
/*
환경별 staticUrl 변수화하여 사용
sandbox => staticUrl: https://static-new.gate8.com
stage => staticUrl: https://static-new-stage.onstove.com
live => staticUrl: https://static-new.onstove.com
Example (Live)
{환경별 URL}/static-common/version.json => //static-new.gate8.com/static-common/version.json
*/
var staticUrl = '//static-new.gate8.com'; // 위 환경별 지정해 놓은 staticUrl 값
var options = {
wrapper: '.wrapper',
skin: 'gnb-default',
widget: {
gameListAndService: false
},
global: {
useGds: true
},
loginMethod: {
params: {
inflow_path: 'tr',
redirect_url: Common.Http.Portal + "/member/simpleuserlogout.asp?u="+Base64LoginUrl.encode(location.href)+"&change_type=n",
game_no: '2', // 각환경별 game_no값으로 변경부탁드립니다.
show_play_button:'Y',
},
redirectCurrentPage: false
},
onCreatedHeaderElement: function(headerElement) {
console.log(headerElement);
}
// gnb width, z-index css 별도 필요 (.gnb-stove.gnb-default-mini 선택자 사용)
};
$.support.cors = true;
$.getJSON(staticUrl + '/static-common/version.json')
.done(function(data) {
var versionCpheader = data.library["cp-header"];
var url = staticUrl + '/sh-' + versionCpheader+'/cp-header.js';
$.getScript(url)
.done(function () {
var cpHeader = new window.cp.Header(options);
cpHeader.render();
})
.fail(function(jqxhr, textStatus, error) {
var err = textStatus + ", " + error;
console.log( "Request Failed: " + err );
});
})
.fail(function(jqxhr, textStatus, error) {
var err = textStatus + ", " + error;
console.log( "Request Failed: " + err );
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
- CDN Request URL
//static-new.gate8.com/static-common/version.json
- CDN Response json
"response data" :{
"library": {
"cp-header": "6.x.xx", // 외부서비스 사용
}
}
1
2
3
4
5
2
3
4
5
# 서비스 별 특화기능 구현 (Customizing)
# JQuery 나 프론트프레임워크(Vue.js)를 사용하지 않는 환경
const gnbOption = {
wrapper: '.wrapper',
global: {
useGds: true,
useLanguageSelect: true,
},
widget: {
// widget - customArea를 통해 서비스 영역의 커스텀
customArea: {
// widget - customArea - template 을 통해 해당 영역에 들어갈 html 코드를 옵션으로 작성
template: `
<div class="custom-area">
<button style="margin-right:20px;" class="alert-button">prue alert</button>
<a style="margin-right:20px;" href="https://www.naver.com">prue 네이버 바로가기</a>
<button class="click-button">prue console</button>
</div>
`,
// widget - customArea - eventHandler 를 통해 template에 넣은 DOM의 이벤트를 컨트롤
eventHandler: (customDom, gnbDom) => {
document.querySelector('.alert-button').addEventListener('click', () => {
alert('클릭 얼럿');
});
document.querySelector('.click-button').addEventListener('click', () => {
console.log('클릭 콘솔');
});
},
},
},
loginMethod: {
redirectCurrentPage: true,
}
}
const header = new window.stove.Header(gnbOption);
header.render();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
# Vue Framework (프론트프레임워크(Vue.js)를 사용하는 환경
<script>
import Custom from '../components/Custom.vue'
import Vue from "vue";
export default {
name: "VueTemplate",
components: {
Custom
},
created() {
const gnbOption = {
widget: {
// widget - customArea를 통해 서비스 영역의 커스텀
customArea: {
// widget - customArea - template 을 통해 해당 영역에 들어갈 vue component가 들어갈 컨테이너를 생성
template: `<div class="custom-area"></div>`,
// widget - customArea - eventHandler 를 통해 template에서 지정한 컨테이너에 추가할 컴포넌트를 mount하여 사용합니다.
eventHandler: (customDom, gnbDom) => {
(new (Vue.extend(Custom))).$mount(customDom.querySelector('.custom-area'));
}
},
}
}
this.loadHeader(gnbOption);
},
methods: {
loadHeader(option) {
let header = new window.stove.Header(option);
header.render();
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# 서비스 커스텀 테마(스킨) 작성 및 적용
GNB 생성 옵션에 테마(스킨)에 커스텀 클래스명을 추가하고, 테마 (CSS) 작성 할 수 있습니다.
- GNB 생성 옵션
var options = {
wrapper: '.wrapper',
skin: 'gnb-camp', // 옵션 skin에 원하는 커스텀 클래스명을 입력시 gnb내에 커스텀 클래스명이 적용됨
.........
};
1
2
3
4
5
2
3
4
5
- GNB 적용 html
<div id="stoveGnb" class="gnb-stove gnb-camp">
::before
<div class="gnb-inner">
..........
1
2
3
4
2
3
4
- 커스텀 테마파일 작성예시
.gnb-stove.gnb-camp {
background-color: #828282;
color: #ff7d0d;
}
.gnb-stove.gnb-camp .gnb-inner {
width:1024px;
}
.gnb-camp .gnb-title{
margin-right:30px
}
.....
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# BI로그 적용 방법
<a href="..." data-st-log="로그값">이동버튼</a> // data-st-log 어트리뷰트를 통해 로그값 적용 => 클릭시 로그발송
// GNB에서 보내는 로그는 전부 click에 대한 로그입니다.
data-st-log 어트리뷰트를 통해 로그값을 지정해놓으면 클릭시 로그가 발송됩니다.
발송형태는 아래와 같습니다.
{
click_area: `gnb.${logArea}`, // option에서 지정한 logArea값 사용
click_sarea: clickSarea // data-st-log 어트리뷰트를 통해 지정된값
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
- 적용 예시
