Cafe24 수동설치

Suggest Edits

🚧

본 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 코드 수정을 해봅니다.

  1. ‘디자인 관리’-> ‘쇼핑몰 디자인 수정’에 들어갑니다.
  1. ‘전체화면보기’에서 ‘레이아웃’ -> ’기본레이아웃’ -> ’공통레이아웃’을 선택합니다. 첫번째 body를 찾아 바로 밑에 채널 플러그인 코드를 붙여넣습니다.
  1. ‘전체화면보기’에서 ‘메인레이아웃’ 에도 2번과 동일한 작업을 합니다.
  2. ‘모바일 쇼핑몰’ 에서 2번과 동일한 작업을 하면 모바일 웹사이트에도 채널 플러그인이 생성됩니다.
  1. 저장 후 플러그인이 제대로 연동되었는지 확인합니다.

Updated over 1 year ago