Every STOVE Webpage has to integrate STOVE GNB (Global Navigation Bar)
Below guidelines explains how you can integrate GNB, and also login through STOVE GNB
Introduction
There are 2 ways to integrate STOVE GNB
•
Specific Version Load Method : Integrate specific version of GNB
•
Auto-Update (Recommended) : Newest version of GNB is integrated
Before Integration…
Area | Explanation |
Infrastructure | |
STOVE Studio | Make sure you are aware of the GameID (in STOVE Studio) and GameNo.
GameID can be found in STOVE Studio, for GameNo, contact STOVE. |
inflow_path | inflow_path specifies from where the user has entered the page, contact STOVE for this value |
Basic Information
Host:
//js-cdn.onstove.com (LIVE)
//js-cdn.gate8.com (SB)
Plain Text
복사
Integration Sequence
1. Load STOVE GNB Module
1.1 Specific Version Load Method
•
Integrating a specific version of GNB
<!-- Path Configuration --><script src="//js-cdn.onstove.com/libs/common-gnb/{version.no}}/cp-header.js"></script>
HTML
복사
<!-- SampleCode --><script src="//js-cdn.onstove.com/libs/common-gnb/6.6.5/cp-header.js"></script>
HTML
복사
1.2. Auto-Update (Recommended)
•
By adding latest in the Path Configuration, GNB is updated automatically, the newest version is loaded.
Path Configuration & Sample
<script src="//js-cdn.onstove.com/libs/common-gnb/latest/cp-header.js"></script>
HTML
복사
How to find out the lastest version
https://js-cdn.onstove.com/libs/common-gnb/latest/version.txt
HTML
복사
2. Set-up your options (or specific Configuration)
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',// show_play_button:'Y',
},
redirectCurrentPage: false
},
onCreatedHeaderElement: function(headerElement) {
console.log(headerElement);
}
// gnb width, z-index css are needed separately (use .gnb-stove.gnb-default-mini)
};
var cpHeader = new window.cp.Header(options);
cpHeader.render();
JavaScript
복사
Advanced Options Guide
Below explains additional options - these can be skopped
•
widget.customArea
•
skin (custom)
1. customArea
❶ You can customize GNB depending on your preference
// Sample Codeconst gnbOption = {
wrapper: '.wrapper',
global: {
useGds: true,
useLanguageSelect: true,
},
widget: {
// widget - Customize your service using customArea customArea: {
// widget - customArea - use template to enter the html code 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 Go to Nver</a>
<button class="click-button">prue console</button>
</div>
`,
// widget - customArea - eventHandler controls events in the DOM in template
eventHandler: (customDom, gnbDom) => {
document.querySelector('.alert-button').addEventListener('click', () => {
alert('Click Alert');
});
document.querySelector('.click-button').addEventListener('click', () => {
console.log('Click Console');
});
},
},
},
loginMethod: {
redirectCurrentPage: true,
}
}
const header = new window.stove.Header(gnbOption);
header.render();
JavaScript
복사
2. skin(custom)
❶ GNB Option
// SampleCodevar options = {
wrapper: '.wrapper',
skin: 'gnb-camp',// if etnering custom class name in option skin, custom class is applied
.........
};
JavaScript
복사