Cafe24 ์๋์ค์น
๋ณธ JavaScript ์๋์ค์น ๋ฐฉ์์ ์ฃผ๋ฌธ ์ฐ๋์ ์ง์ํ์ง ์์ต๋๋ค
์ฃผ๋ฌธ ์ฐ๋์ด ํ์ํ ๊ฒฝ์ฐ Cafe24 ์ฑ์คํ ์ด ๋ฌธ์๋ฅผ ์ฐธ์กฐํ์ฌ ์ค์น๋ฅผ ํด์ฃผ์๊ธธ ๋ฐ๋๋๋ค
๋ณธ ๋ฌธ์๋ JavaScript ์ด์ฉํด ์นดํ24์์ ํ์ ์ ๋ณด ์ฐ๋์ ์ํ ์คํฌ๋ฆฝํธ์ ๋๋ค
๊ธฐ๋ณธ ์๋ฐ์คํฌ๋ฆฝํธ ์ค์น ๋ฐฉ์์ ์ด์ฉํ ๊ฒฝ์ฐ ์ฐ๋๋์ง ์๋, ์ ๋ฆฝ๊ธ, ์ฅ๋ฐ๊ตฌ๋ ๊ฐ์, ์ฅ๋ฐ๊ตฌ๋ ์ด ๊ธ์ก, ๊ด์ฌ์ํ ์, ์ฟ ํฐ ๊ฐ์, ์์น๊ธ ์ ๋ณด๋ฅผ ์ฐ๋ํ ์ ์์ต๋๋ค.
์นดํ24๊ฐ ์ ๊ณตํ๋ ๋ณ์ ํ ํ๋ฆฟ ์นํ ๊ธฐ๋ฅ์ ์๋ฐ์คํฌ๋ฆฝํธ์์ ๋ฐ๋ก ์ฌ์ฉ์ด ๋์ง ์๊ธฐ ๋๋ฌธ์ ์๋์ ๊ฐ์ ๋ฐฉ์์ผ๋ก ์ฐ๋ํฉ๋๋ค.
๋จผ์ Plugin Key ํ์ธ์ ์ํด ์์ ํ์ ์ฑ๋์ - ์ค์ - ์ฑํ ์ค์น ๋ฐ ์ค์ - ํ๋ฌ๊ทธ์ธ ์ค์น์์ Plugin Key๋ฅผ ๋ณต์ฌํด๋ก๋๋ค.

์๋ ์ฐ๋ ์ฝ๋๋ฅผ ๋ฃ์ผ์๋ฉด ์ค์น๋ฉ๋๋ค.
๊ทธ ์ ์ ๋ฐ๋์ ์ฝ๋ ์ค์ ๐YOUR_PLUGIN_KEY ์ด ๋ถ๋ถ์ ๊ณ ๊ฐ๋์ 'Plugin Key'๋ฅผ ๋์นํ์ฌ ์
๋ ฅํด์ผ ์ ์ ์๋ํฉ๋๋ค. (๐์๊ฐ๋ฝ ๋ชจ์๋ ์ง์์ฃผ์ธ์. )
<!-- Channel Plugin Scripts -->
<div module="Layout_stateLogon" style="display: none;" id="ch-plugin-user">
<div id="ch-plugin-user-id">{$id}</div>
<div id="ch-plugin-user-name">{$name}</div>
<div id="ch-plugin-user-phone">{$phone}</div>
<div id="ch-plugin-user-email">{$email}</div>
</div>
<div module="myshop_main" style="display: none;">
<div id="ch-plugin-user-interest-prd-cnt">{$wish_count}</div>
<div id="ch-plugin-user-basket-cnt">{$basket_count}</div>
</div>
<div module="myshop_bankbook" style="display: none;">
<div id="ch-plugin-user-mileage">{$avail_mileage}</div>
<div id="ch-plugin-user-coupon-cnt">{$coupon_cnt}</div>
</div>
<script>
var getContent = function(id) {
var element = document.getElementById(id);
if (element) {
return element.textContent;
}
return null;
};
var parseNumber = function(numString) {
var num = parseInt(numString && numString.toString().replace(/\D/g, ""));
if (num) {
return num
}
return 0
};
var settings = {
"pluginKey": "๐YOUR_PLUGIN_KEY"
};
(function() {
if (window.ChannelIO) {
return (window.console.error || window.console.log || function(){})('ChannelIO script included twice.');
}
var d = window.document;
var ch = function() {
ch.c(arguments);
};
ch.q = [];
ch.c = function(args) {
ch.q.push(args);
};
window.ChannelIO = ch;
var h = function () {
if (window.ChannelIOInitialized) {
return;
}
window.ChannelIOInitialized = true;
var timer = 0;
var interverId = setInterval(function() {
timer += 500;
if (
timer >= 5000 ||
(!document.getElementById('ch-plugin-user') || document.getElementById('ch-plugin-user-id').textContent)
) {
clearInterval(interverId);
if (document.getElementById('ch-plugin-user')) {
settings.memberId = document.getElementById('ch-plugin-user-id').textContent;
settings.profile = {
"name": document.getElementById('ch-plugin-user-name').textContent,
"mobileNumber": document.getElementById('ch-plugin-user-phone').textContent,
"email": document.getElementById('ch-plugin-user-email').textContent,
"availableMileage": parseNumber(getContent('ch-plugin-user-mileage')),
"cartCount": parseNumber(getContent('ch-plugin-user-basket-cnt')),
"wishCount": parseNumber(getContent('ch-plugin-user-interest-prd-cnt')),
"couponCount": parseNumber(getContent('ch-plugin-user-coupon-cnt'))
};
}
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'https://cdn.channel.io/plugin/ch-plugin-web.js';
s.charset = 'UTF-8';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
}, 500);
}
if (document.readyState === 'complete') {
h();
} else if (window.attachEvent) {
window.attachEvent('onload', h);
} else {
window.addEventListener('DOMContentLoaded', h, false);
window.addEventListener('load', h, false);
}
})();
ChannelIO('boot', settings);
</script>
<!-- End Channel Plugin -->
์ด์ ์นดํ24 ์ฝ๋ ์์ ์ ํด๋ด ๋๋ค.
- โ๋์์ธ ๊ด๋ฆฌโ-> โ์ผํ๋ชฐ ๋์์ธ ์์ โ์ ๋ค์ด๊ฐ๋๋ค.

- โ์ ์ฒดํ๋ฉด๋ณด๊ธฐโ์์ โ๋ ์ด์์โ -> โ๊ธฐ๋ณธ๋ ์ด์์โ -> โ๊ณตํต๋ ์ด์์โ์ ์ ํํฉ๋๋ค. ์ฒซ๋ฒ์งธ body๋ฅผ ์ฐพ์ ๋ฐ๋ก ๋ฐ์ ์ฑ๋ ํ๋ฌ๊ทธ์ธ ์ฝ๋๋ฅผ ๋ถ์ฌ๋ฃ์ต๋๋ค.

- โ์ ์ฒดํ๋ฉด๋ณด๊ธฐโ์์ โ๋ฉ์ธ๋ ์ด์์โ ์๋ 2๋ฒ๊ณผ ๋์ผํ ์์ ์ ํฉ๋๋ค.
- โ๋ชจ๋ฐ์ผ ์ผํ๋ชฐโ ์์ 2๋ฒ๊ณผ ๋์ผํ ์์ ์ ํ๋ฉด ๋ชจ๋ฐ์ผ ์น์ฌ์ดํธ์๋ ์ฑ๋ ํ๋ฌ๊ทธ์ธ์ด ์์ฑ๋ฉ๋๋ค.

- ์ ์ฅ ํ ํ๋ฌ๊ทธ์ธ์ด ์ ๋๋ก ์ฐ๋๋์๋์ง ํ์ธํฉ๋๋ค.
Updated over 1 year ago