The Channel Developers

Welcome to the Channel Developers. You'll find comprehensive guides and documentation to help you start working with Channel-docs as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

카페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>
  ;window.channelPluginSettings = {
    "pluginKey": "👉YOUR_PLUGIN_KEY"
  };
  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
  };
  (function() {
    var w = window;
      if (w.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);
    };
    w.ChannelIO = ch;
    var h = function () {
      if (w.ChannelIOInitialized) {
        return;
      }
      w.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')) {
            window.channelPluginSettings.userId = document.getElementById('ch-plugin-user-id').textContent;
            window.channelPluginSettings.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,
              "적립금": parseNumber(getContent('ch-plugin-user-mileage')),
              "장바구니 개수": parseNumber(getContent('ch-plugin-user-basket-cnt')),
              "관심상품 개수": parseNumber(getContent('ch-plugin-user-interest-prd-cnt')),
              "쿠폰 개수": 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);
    }
  })();
</script>
<!-- End Channel Plugin -->

이제 카페24 코드 수정을 해봅니다.

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