Skip to main content

Widget events

The widget's SDK offers several events, divided by modules. We can access onebox.widget to get the module and listen to an event or call a method.

Core module​

Listenable events​

onOrderChange

onebox.widget.getModule('core').onOrderChange(e => console.log('order', e));

This event will emit every time a change occurs in the order, in the cart (add an item, delete an item, etc.).

This event returns an Order object.

onOrderExpired

onebox.widget.getModule('core').onOrderExpired(e => console.log('order expired', e));

This event will emit, with no value, when the order expires, so that it is possible to react when the shopping cart expires.

onError

onebox.widget.getModule('core').onError(e => console.log('error', e));

This event will emit with the API errors the widget reports.

If the customer subscribes to this event, it will receive the error code, the error status and the url:

{
    error: {
        code: string;
    }
    status?: number;
    url?: string;
}

onDialogStateChange

onebox.widget.getModule('core').onDialogStateChange(e => console.log('dialog state', e));

This event will emit when a dialog opens or closes:

{ 
    isOpen: boolean 
}

Callable methods​

setLanguage

onebox.widget.getModule('core').setLanguage('es-ES');

Allows setting the language to the widget. It requires a string with a valid format (E.g. "es", "en-UK" or "ca-ES-valencia").

This method has no return value.

refreshOrder

onebox.widget.getModule('core').refreshOrder();

Calling this method refreshes the order without having to reload the whole component.

This method has no return value.

removeSeats

onebox.widget.getModule('core').removeSeats();

Calling this method removes all the seats from the order.

This method has no return value.

deleteOrder

onebox.widget.getModule('core').deleteOrder();

Calling this method deletes the current order.

This method has no return value.

Viewer module​

Listenable events​

onElementClick

onebox.widget.getModule('viewer').onElementClick(e => console.log('click', e));

This event will emit each time a click occurs on a venue viewer element.

This event returns a ViewElement object. See complete JSON at ViewElement.

onElementMouseIn

onebox.widget.getModule('viewer').onElementMouseIn(e => console.log('mousein', e));

This event will emit each time a mousein event occurs on a venue viewer element.

This event returns a ViewElement object. See complete JSON at ViewElement.

onElementMouseOut

onebox.widget.getModule('viewer').onElementMouseOut(e => console.log('mouseout'));

This event will emit, with no value, each time a mouseout event occurs on a venue viewer element.

Models​

ViewElement​

This is the JSON structure that represents a venue view element:

{
    type: 'link' | 'seat' | 'nnz' | 'area';
    element: unknown; // the element itself
    link?: ViewLink;
    seat?: ViewSeat;
    nnz?: ViewNnz;
    area?: ViewArea;
}

A view element can be of one of the following types: a link, a seat, an area or a not numbered zone. Depending on this, the element will come with the corresponding data according to the type.

ViewLink
{
    view_id: string;
    ref_id: string;
    name: string;
    code?: string;
    availability?: number;
    price?: {
        min: {
            base: number;
            basePromoted?: number;
            promoName?: string;
        };
        max?: {
            base: number;
            basePromoted?: number;
            promoName?: string;
        };
    };
    pricezones?: { id: number; name: string }[];
}
ViewSeat
{
    id: number;
    code?: string;
    status?: 'AVAILABLE' | 'OCCUPIED';
    type?: 'PRIMARY' | 'SECONDARY';
    sector_name?: string;
    row_name?: string;
    row_order?: number;
    seat_name?: string;
    seat_order?: number;
    pricezone?: {
        id: number;
        name: string;
        color: string;
        description?: string;
    };
    price?: {
        base: number;
        basePromoted?: number;
        total?: number;
        totalPromoted?: number;
        promoName?: string;
        charges?: number;
        original?: number;
    };
    visibility?: 'NORMAL' | 'REDUCED'  | 'SIDE' | 'NONE';
    accessibility?: 'NORMAL' | 'DISABILITY';
    rate?: {
        id?: number;
        name?: string;
    };
    dynamicPriceName?: string;
}
ViewNnz
{
    id: string;
    code: string;
    order?: number;
    sector_name: string;
    availability?: {
        type: 'BOUNDED' | 'UNBOUNDED';
        total: number;
        available: number;
    };
    pricezone?: {
        id: number;
        name: string;
        color: string;
        description?: string;
    };
    price?: {
        base: number;
        basePromoted?: number;
        total?: number;
        totalPromoted?: number;
        promoName?: string;
        charges?: number;
        original?: number;
    };
    visibility?: 'NORMAL' | 'REDUCED'  | 'SIDE' | 'NONE';
    accessibility?: 'NORMAL' | 'DISABILITY';
    dynamicPriceName?: string;
}
ViewArea
{
    id: string;
    code: string;
    sector_name: string;
    availability?: {
        type: 'BOUNDED' | 'UNBOUNDED';
        total: number;
        available: number;
    };
    order?: number;
    pricezone?: {
        id: number;
        name: string;
        color: string;
        description?: string;
    };
    price?: {
        base: number;
        basePromoted?: number;
        total?: number;
        totalPromoted?: number;
        promoName?: string;
        charges?: number;
        original?: number;
    };
    visibility?: 'NORMAL' | 'REDUCED'  | 'SIDE' | 'NONE';
    accessibility?: 'NORMAL' | 'DISABILITY';
}