샘플 코드

    샘플 코드


    기사 요약

    • messageCallback을 사용하여 DOWNLOAD_COUPONCLICK_PRODUCTLOGIN_REQUIRED등의 이벤트에 수행할 동작을 재정의합니다.

    • Shoplive Plugin을 사용하여 방송과 목록을 화면에 표시합니다.

    예제

    <html>
      <head>
        <title>Shoplive - Simple Shoplive Plugin example</title>
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover, shrink-to-fit=no"
        />
        <script
          type="text/javascript"
          src="https://static.shoplive.cloud/shoplive.js"
        ></script>
        <script>
          let messageCallback = {
            DOWNLOAD_COUPON: function (payload) {
              // get Current Player
              var player = cloud.shoplive.getPlayer();
              // if, ONAIR player
              if (
                player.campaignStatus === "ONAIR" &&
                player.campaignKey === payload.campaignKey
              ) {
                // copy to clipboard
                var textarea = document.createElement("textarea");
                document.body.appendChild(textarea);
                textarea.value = payload.coupon;
                textarea.select();
                document.execCommand("copy");
                document.body.removeChild(textarea);
                // Show Dialog
                player.sendMessage("showDialog", {
                  title: "Copy to clipboard completed.",
                  message: payload.coupon,
                });
              }
            },
            CLICK_PRODUCT: function (payload) {
              // 클릭한 상품 URL에 새로운 파라미터를 추가할 수 있습니다.
              var url = payload.url + "&parameter=" +"{your_parameter}";
    
              // 현재 창에서 상품 페이지로 이동합니다.
              location.href = url;
            },
            LOGIN_REQUIRED: function (payload) {
              alert("LOGIN_REQUIRED");
              location.href = "YOUR_LOGIN_PAGE_URL";
            },
          };
          cloud.shoplive.init({
            accessKey: "{YOUR_ACCESS_KEY}",
            messageCallback: messageCallback,
          });
          let userId = "USER_ID";
          let userName = "USER_NAME";
    
          if (userId) {
            cloud.shoplive.setUserObject({ userId: userId, userName: userName });
          }
        </script>
      </head>
      <body>
        <div id="shoplive-overall-area"></div>
        <script defer>
          cloud.shoplive.setOverall("shoplive-overall-area");
        </script>
      </body>
    </html>


    What's Next