Cafe24 ์ˆ˜๋™์„ค์น˜

๐Ÿšง

๋ณธ JavaScript ์ˆ˜๋™์„ค์น˜ ๋ฐฉ์‹์€ ์ฃผ๋ฌธ ์—ฐ๋™์„ ์ง€์›ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค

์ฃผ๋ฌธ ์—ฐ๋™์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ Cafe24 ์•ฑ์Šคํ† ์–ด ๋ฌธ์„œ๋ฅผ ์ฐธ์กฐํ•˜์—ฌ ์„ค์น˜๋ฅผ ํ•ด์ฃผ์‹œ๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค

๋ณธ ๋ฌธ์„œ๋Š” JavaScript ์ด์šฉํ•ด ์นดํŽ˜24์—์„œ ํšŒ์› ์ •๋ณด ์—ฐ๋™์„ ์œ„ํ•œ ์Šคํฌ๋ฆฝํŠธ์ž…๋‹ˆ๋‹ค

๊ธฐ๋ณธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์„ค์น˜ ๋ฐฉ์‹์„ ์ด์šฉํ•  ๊ฒฝ์šฐ ์—ฐ๋™๋˜์ง€ ์•Š๋Š”, ์ ๋ฆฝ๊ธˆ, ์žฅ๋ฐ”๊ตฌ๋‹ˆ ๊ฐœ์ˆ˜, ์žฅ๋ฐ”๊ตฌ๋‹ˆ ์ด ๊ธˆ์•ก, ๊ด€์‹ฌ์ƒํ’ˆ ์ˆ˜, ์ฟ ํฐ ๊ฐœ์ˆ˜, ์˜ˆ์น˜๊ธˆ ์ •๋ณด๋ฅผ ์—ฐ๋™ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์นดํŽ˜24๊ฐ€ ์ œ๊ณตํ•˜๋Š” ๋ณ€์ˆ˜ ํ…œํ”Œ๋ฆฟ ์น˜ํ™˜ ๊ธฐ๋Šฅ์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋ฐ”๋กœ ์‚ฌ์šฉ์ด ๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์•„๋ž˜์™€ ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ์—ฐ๋™ํ•ฉ๋‹ˆ๋‹ค.

๋จผ์ € Plugin Key ํ™•์ธ์„ ์œ„ํ•ด ์†Œ์œ ํ•˜์‹  ์ฑ„๋„์— - ์„ค์ • - ์ฑ„ํŒ… ์„ค์น˜ ๋ฐ ์„ค์ • - ํ”Œ๋Ÿฌ๊ทธ์ธ ์„ค์น˜์—์„œ Plugin Key๋ฅผ ๋ณต์‚ฌํ•ด๋‘ก๋‹ˆ๋‹ค.

2406

์•„๋ž˜ ์—ฐ๋™ ์ฝ”๋“œ๋ฅผ ๋„ฃ์œผ์‹œ๋ฉด ์„ค์น˜๋ฉ๋‹ˆ๋‹ค.
๊ทธ ์ „์— ๋ฐ˜๋“œ์‹œ ์ฝ”๋“œ ์ค‘์— ๐Ÿ‘‰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. โ€˜๋””์ž์ธ ๊ด€๋ฆฌโ€™-> โ€˜์‡ผํ•‘๋ชฐ ๋””์ž์ธ ์ˆ˜์ •โ€™์— ๋“ค์–ด๊ฐ‘๋‹ˆ๋‹ค.
786
  1. โ€˜์ „์ฒดํ™”๋ฉด๋ณด๊ธฐโ€™์—์„œ โ€˜๋ ˆ์ด์•„์›ƒโ€™ -> โ€™๊ธฐ๋ณธ๋ ˆ์ด์•„์›ƒโ€™ -> โ€™๊ณตํ†ต๋ ˆ์ด์•„์›ƒโ€™์„ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. ์ฒซ๋ฒˆ์งธ body๋ฅผ ์ฐพ์•„ ๋ฐ”๋กœ ๋ฐ‘์— ์ฑ„๋„ ํ”Œ๋Ÿฌ๊ทธ์ธ ์ฝ”๋“œ๋ฅผ ๋ถ™์—ฌ๋„ฃ์Šต๋‹ˆ๋‹ค.
1024
  1. โ€˜์ „์ฒดํ™”๋ฉด๋ณด๊ธฐโ€™์—์„œ โ€˜๋ฉ”์ธ๋ ˆ์ด์•„์›ƒโ€™ ์—๋„ 2๋ฒˆ๊ณผ ๋™์ผํ•œ ์ž‘์—…์„ ํ•ฉ๋‹ˆ๋‹ค.
  2. โ€˜๋ชจ๋ฐ”์ผ ์‡ผํ•‘๋ชฐโ€™ ์—์„œ 2๋ฒˆ๊ณผ ๋™์ผํ•œ ์ž‘์—…์„ ํ•˜๋ฉด ๋ชจ๋ฐ”์ผ ์›น์‚ฌ์ดํŠธ์—๋„ ์ฑ„๋„ ํ”Œ๋Ÿฌ๊ทธ์ธ์ด ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค.
1219
  1. ์ €์žฅ ํ›„ ํ”Œ๋Ÿฌ๊ทธ์ธ์ด ์ œ๋Œ€๋กœ ์—ฐ๋™๋˜์—ˆ๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.