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)})
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":"[email protected]",
        "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"