Listening For An Iframe To Load

Message Event

Every time an embedded Spektrix iframe loads, it will fire two messages to the parent page Window, each triggering a message event. The messages' data property will include some information on the basket, customer, login status, and other items. You can use the appearance of the messages to understand that a Spektrix iframe has loaded or to access basket contents.

To get started with this, you can add an Event Listener to the parent page set to listen for the event:

window.addEventListener('message', (event) => {console.log(event.data)})

warning

This snippet is intended to simply help familiarise yourself with functionality – to do more, you’ll need to supply your own callback.

Everytime an iframe completes loading, it will log basketContents with corresponding items and as well as information on whether or not there is a current customer logged in on the client:

basketContents:{
    "totalDiscount":0.0,
    "total":0.0,
    "customer":null,
    "tickets":[],
    "membershipSubscriptions":[],
    "giftVouchers":[],
    "merchandiseItems":[],
    "donations":[],
    "hash":"NotLoggedIn"
}

basketHash:NotLoggedIn

If you log in the customer and add some tickets, for example, you’ll get responses which looks like:

basketContents:{
    "totalDiscount":25.00,
    "total":26.00,
    "customer":{
        "age":null,
        "billingAddress":null,
        "deliveryAddress":null,
        "birthDate":null,
        "email":"john.doe@spektrix.com",
        "firstName":"John",
        "lastName":"Doe",
        "mobile":"",
        "name":"John Doe",
        "phone":"",
        "title":"",
        "passwordSet":true,
        "giftAidDeclarationRequired":false,
        "id":"I-8H22-22HV",
        "creditBalance":0.0},
    "tickets":[{
        "band":{
            "id":"201AGBHDRLQHNHPHKKMPKLGPMDRDTDMVL"},
            "event":{"id":"401ANPJQJQPQMRSBDNMVNLSPGTRBVQVRH"},
            "instance":{"id":"426ANNBCVJQNPTKKTSTRDGGPTTRSJBLSG"},
            "planId":"401ANPJQJQPQMRSBDNMVNLSPGTRBVQVRH",
            "seatName":"",
            "planName":"Demo Theatre General Admission",
            "type":{"id":"1AHGJDSMMPLMPPGNLJBQVLBRSKVDLQRPP"},
            "ticketType":{"id":"1AHGJDSMMPLMPPGNLJBQVLBRSKVDLQRPP"},
            "ticketType_Comment":"Will be removed in a future API release - Use 'Type' instead",
            "delivered":false,
            "barcode":null,
            "offer":{"id":"1AHGJDSMMPLMPPGNLJBQVLBRSKVDLQRPP"},
            "discount":25.00,
            "price":25.00,
            "total":26.00,
            "id":"159ABTGJHMDHKQTHHPJTQNLKMCJMRSBMG"}],
    "membershipSubscriptions":[],
    "giftVouchers":[],
    "merchandiseItems":[],
    "donations":[],
    "hash":"l8IJqdp0pk"
}

basketHash:l8IJqdp0pk

Use Cases

The primary reason that this feature was implemented is that the messages are used to trigger our library of basket-summary and login-status web components in order to instantly reflect changes in the session made by the customer without the parent page reloading.

That said, there is no limit on using this message as you see fit – whether to pass information to other parts of the parent page or to listen for an iframe fully loading. A couple of use cases would be if you are building a progress indicator that indicates a completed step every time an iframe loads or custom upsells without needing to wait on additional API calls.