EATA Loader

On-demand loader of EATA Widget, which provides a graphical user interface that manages:

  • Session selector.
  • Graphical zone selector.
  • Seats selector.
  • Admissions selector.
  • Contact data form.
  • Event questions and questions by assistant.
  • Order summary.

Usage

  1. Include the widget script.
<script src="https://stg.entradasatualcance.com/js/apps/eata-loader.js"></script>
  1. Add the widget container (see Settings for a more detailed configuration). 
<body>
  <div id="eata-widget-container"></div>
</body>
  1. Call eata.loadWidget.
<script>
    document.addEventListener('DOMContentLoaded', function () {
        eata.loadWidget('#eata-widget-container', {
          salesChannelHost: 'demo.integrations.stg.entradasatualcance.com',
          event: eventId,
          session: sessionId,
        }).ready(function (widget) {
          // ...
        });
    });
</script>

NOTE: The script should be called after the DOM has been fully loaded (e.g. with DOMContentLoaded).

Settings

The eata.loadWidget method accepts the following parameters:

Parameter Type Description
container String | Element Valid CSS selector or DOM node.
options WidgetParameters (optional) Widget parameters.

The options parameter can contain any of the following properties:

Property Type Description
salesChannelHost String The event's sales channel.
event Number | String Event ID.
session Number | String (optional) Session ID. When omitted, the default session will be shown as long as there is only one, otherwise a session selector will be presented.

The widget options could also be set using the container’s data- attributes:

<div
  id="eata-widget-container"
  data-sales-channel-host="integrations.entradasatualcance.com"
  data-event="1"
  data-session="1"
></div>

NOTE: options parameter will always take precedence over data- attributes.

Advanced usage

By default, the resulting widget will be appended to the container. eata.initWidget offers a more fine-grained setup as it can be chained with one of these methods:

Both methods take a CSS selector or DOM element and return the same instance so the ready() method could also be chained:

document.addEventListener('DOMContentLoaded', function () {
  eata.initWidget({/* ... */})
    .appendTo('#eata-widget-container')
    .ready(function (widget) {
      // ...
    });

  eata.initWidget({/* ... */})
    .replace(document.querySelector('#eata-widget-placeholder'))
    .ready(function (widget) {
      // ...
    });
});

Events

The widget will emit events on certain user interactions, these events can be subscribed to retrieve widget information:

eata.loadWidget('#eata-widget-container', {
  // ...
}).ready(function (widget) {
  widget.addEventListener('event.name', function (e) {
    var data = e.detail;
    // ...
  });
});

These are the current widget events:

Event Parameters Description
order.created 
{
    detail: {
        order: { ... }
    }
}
 The order has been created.
order.cancelled 
{
    detail: {
        order: { ... }
    }
}
 The order has been cancelled.
order.expired 
{
    detail: {
        order: { ... }
    }
}
 The order has expired.

Sample Code

<html>

  <head>
    <title>Example</title>

    <script src="https://stg.entradasatualcance.com/js/apps/eata-loader.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        eata
          .loadWidget('#eata-widget-container', {
            salesChannelHost: 'demo.integrations.stg.entradasatualcance.com',
            event: EVENT_ID,
            session: SESSION_ID, // This is optional
          })
          .ready(function (widget) {
            widget.addEventListener('order.created', function (e) {
              var order = e.detail.order;
              console.log('Order', order, 'created!');
              // Now that the order is created you should follow the API doc
              // to confirm the order. When the order status is completed,
              // you will be able to download the tickets.
            });

            widget.addEventListener('order.expired', function (e) {
              var order = e.detail.order;
              console.log('Order', order, 'expired!');
            });

            widget.addEventListener('order.cancelled', function (e) {
              var order = e.detail.order;
              console.log('Order', order, 'cancelled!');
            });
          });
        });
    </script>
  </head>

  <body>
    <div id="eata-widget-container"></div>
  </body>

</html>