🌐

STOVE GNB Method

상태

시작 전

담당자

상위 항목

Web Login

하위 항목

This method is suitable when you manage one webpage for STOVE only. Make sure you have checked and prepared everything in Web Login

1. Import STOVE GNB Module

•

You can script import STOVE GNB Module

1.1. Direct CDN Method

•

You need to manually change the version info whenever the GNB is updated (current: v.6.3.27) 

<script src="//js-cdn.onstove.com/libs/common-gnb/{version info}}/cp-header.js"></script>
JSON
복사

•

Sample 

<script src="//js-cdn.onstove.com/libs/common-gnb/20231120-1415-gnb-6.3.27/cp-header.js"></script>
JSON
복사

1.2. Automatic CDN Method

•

This can keep the GNB at all times

•

CDN Request URL : {환경별 URL}/libs/common-gnb/latest/cp-header.js

•

To check the newst semantic version: https://js-cdn.onstove.com/libs/common-gnb/latest/version.txt

2. Option settings for GNB

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', // change game_no per environment (live, sb) 
            show_play_button:'Y',
        },
        redirectCurrentPage: false
    },
    onCreatedHeaderElement: function(headerElement) {
        console.log(headerElement);
    }
// gnb width, z-index css needs to be prepared separately (use .gnb-stove.gnb-default-mini)
};

var cpHeader = new window.cp.Header(options);
cpHeader.render();
JavaScript
복사

3. Use id in html to Apply GNB

<div id="stoveGnb" class="gnb-stove gnb-camp">
    ::before
    <div class="gnb-inner">
    ..........
HTML
복사