JavaScript – Listen to events from the Expivi configurator

Expivi broadcasts several different events for state changes and actions, whether they are user-based or done internally (rules). This document will be expanded in time for all the different events. Here is a list of all the documented events that are currently within Expivi.

• attribute

To listen to these events, all you have to do is add this to your javascript.

window.expivi._events.onChange.subscribe(function(event){
    if(event.name === ){
      
    }
});

Replace <event_name> with the specific event name as string value such as 'attribute'.

The event parameter in the callback function has the following interface

{
  name : string = 
  payload? : any = 
}

attribute

The ‘attribute’ event is broadcasted whenever an attribute is changed. This can be done through a different selection in the options or through rules. The payload for this event has this interface

{ 
  attribute_id: number
  attribute_name: string
  attribute_slug: string
  attribute_type: string
  attribute_value: number|string|object
  attribute_value_id: number
  attribute_value_name: string
  product_id: number
  product_scene_id: number
  product_uuid: string
  rebuild: boolean
  user_data: any (not implemented)
}

window.expivi.getProductAttributes(productSceneId?: number): Promise<AttributeInterface[]>,
window.expivi.setProductAttribute(attributeId: number, value: any, productSceneId?: number): Promise,
window.expivi.setProductAttributeNamed(attributeName: string, value: any, productSceneId?: number): Promise,

The spec for AttributeInterface looks likes this:

{
    id: number;
    name: string;
    type: string;
    slug?: string;
    hash?: string;
    key?: string;
    categories?: CategoryModel[];
    description: string;
    position: number;
    thumbnail: string;
    thumbnail_url: string;
    tmpthumbid?: string;
    parent_id: number;
    ParentIndent?: number; 
    ParentAttributeId?: string; 
    meta: any;
    version: number;
    default: boolean;
    visibility: number;
    global: boolean;
    attribute_values?: AttributeValueInterface[];
    entity_properties?: EntityPropertyInterface[];
    selected_value_id?: number; 
    selected_value_value?: any; 
    visible?: boolean; 
    collapsed?: boolean; 
    selected?: boolean;
    team_id?: number;
    created_at?: string;
    updated_at?: string;
    deleted_at?: string;
    translatedName?: string;
    translations: {
        [key: string]: {
            [key: string]: string;
        };
    };
    pivot?: {
        id: number;
        attribute_id: number;
        attribute_parent_id: number;
        catalogue_id: number;
        created_at: string;
        updated_at: string;
    };

For example, use getProductAttributes to retrieve all attributes. Filter on the attribute with the key text-to-image-1 and use the id of that attribute to set the text by calling setProductAttribute(<attribute_id>, <text_to_set>).