サンプルコード

    サンプルコード


    記事の要約

    • 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) {
              // You can add a new parameter to the URL of the clicked product.
              var url = payload.url + "&parameter=" +"{your_parameter}";
    
              // The product page will be opened in the current window.
              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