JS

Concepts

You can add custom JavaScript to local/site/static/js/local.js to be included with your site.

Warning: Forward compatibility

How Tos

Know when the platform is ready

document.addEventListener('s72loaded', e => {
  // Do something.
});

Subscribe to platform events

Example of knowing when a user has added an item to their wishlist ("My list"):

document.addEventListener('s72loaded', e => {
  let app = e.detail.app;
  app.messagebus.subscribe('wishlist-item-added', message => {
    console.log('wishlist-item-added', message);
  });
});

Available events:

• before-play-start
• cookie-consent-set
• pricing-currency-default
• shopping-process-errored
• shopping-process-started
• shopping-session-canceled
• shopping-session-completed
• shopping-session-created
• trailer-play-started
• user-library-refreshed
• user-signed-in
• user-signed-out
• user-signed-up
• wishlist-item-added
• wishlist-item-removed

Modify dynamic DOM elements

The dynamic UI elements are added to the DOM after the page has loaded. This is a problem if you need to modify them - the only current solution is to monitor the page for DOM mutations and filter the changes for the elements you are interested in. As an example, if you wanted to change the "availability label" that overlays poster images with "coming soon"/"not available"/etc.:

// DOMContentLoaded is earlier than s72loaded.
document.addEventListener('DOMContentLoaded', function (e) {
  function watch(el) {
    // The observer config will depend on your use case.
    var config = {
      childList: true,
      subtree: true,
      characterData: true
    };

    // The function to run when the DOM has mutated.
    // In this example we are going to loop through all mutations and all
    // added nodes to look for the availability label.
    function onMutation(mutations, observer) {
      for (var i = 0; i < mutations.length; i++) {
        var mutation = mutations[i];

        for (var j = 0; j < mutation.addedNodes.length; j++) {
          var node = mutation.addedNodes[j];

          if (!(node instanceof HTMLElement))
            continue;

          if (node.classList.contains('availability-state')) {
            // Do something with the availability label.
            console.log(node);
          }
        }
      }
    };

    // Start watching the DOM.
    var mutationObserver = new MutationObserver(onMutation);
    mutationObserver.observe(el, config);
  };

  // Only watch DOM subtrees under <s72-availability-label/> elements.
  Array.from(document.querySelectorAll('s72-availability-label')).forEach(watch);
});