目次 x
    サンプルコード
      • 印刷する
      目次

      サンプルコード

        • 印刷する
        記事の要約

        Shoplive Pluginのさまざまなオプションを使用したサンプル

        • messageCallback を使用して、DOWNLOAD_COUPON、CLICK_PRODUCT、LOGIN_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