Embedding Live Shows on Magento

1. Place the following custom script file in app/code/<Vendor>/Theme/view/frontend/web/js/ directory:

   lora-show.js

   define(["jquery", "loraPlayerSdk"], function ($, BeLivePlayerWidget) {
      "use strict";
   
      return function (config = {}, element) {
         if (!$(element).length) return;
   
         var showId = $(element).attr("id");
         var player = null;
   
         if (config.component === "displayed-directly") {
            player = BeLivePlayerWidget.initialize({
               showId,
               container: element,
            });
         } else {
            player = BeLivePlayerWidget.initialize({
               showId,
               triggerElement: element,
            });
         }
      };
   });

2. Add LORA Player SDK script and the above lora-show.js file to the requirejs-config.js file in app/code/<Vendor>/Theme/view/frontend/ directory:

   requirejs-config.js

   var config = {
      map: {
         "*": {
            ...
            loraPlayerSdk: "https://lora-sdk.belive.sg/player-widget/latest/player.min.js",
            loraShow: "Magento_Theme/js/lora-show",
         },
      },
      ...
   };

3. Place the following file lora_live_shows.phtml in app/code/<Vendor>/Theme/view/frontend/templates/js/ directory:

   lora_live_shows.phtml

   <script type="text/x-magento-init">
      {
          ".lora-live-show": {
              "loraShow": {
                  "component": "watch-button"
              }
          },
          ".lora-displayed-directly": {
              "loraShow": {
                  "component": "displayed-directly"
              }
          }
      }
   </script>

4. Add the following code to any page or block where you want to display the live shows:

   page_layout/my-layout.xml

   <referenceContainer name="before.body.end">
      <block class="Magento\Framework\View\Element\Template" name="lora-shows" as="lora-shows" template="Magento_Theme::js/lora_live_shows.phtml" />
   </referenceContainer>

5. Navigate to Magento Admin Dashboard > Content > Elements > Pages

   

6. Choose the page where you want to display the live shows, under Action column, click on Select dropdown > Edit.

   

7. Within the “Content” section, click on “Show / Hide Editor”. Paste the following code into the text editor and click Save.

   <p><button id="23481598-2da4-4cf8-a12e-ff93ea6dece6" class="lora-live-show">Watch Now</button></p>
   
   <div id="23481598-2da4-4cf8-a12e-ff93ea6dece6" class="lora-displayed-directly" style="margin-top: 24px; width: 375px;"></div>
   
   note

   • Replace the id with the actual id of the live show.
   • The class name lora-live-show defines the "Watch Now" button format, while lora-displayed-directly is used for the "Displayed Directly" format.

8. Go to your website and you should see the live shows embedded on the page.

   
   note

   If you are unable to see the live shows embedded on the page, try clearing the cache and refreshing the page.