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 5 months ago