Advanced Custom Options Display

The Expivi embed application consist out of 2 separate application. The 3D viewer and the options:

On left the 3D viewer and on right the options.

The options application provides various capabilities on how an option should be represented. As such it is possible to change the display type of an option inside the attribute’s settings:

User can change the appearance of an option by changing the display function

Expivi provides the ability to create a custom display function to represent the option to the end user.

Architecture

The options application is created in Vue.js (https://vuejs.org/). The application follows an MVC like design, where each attribute has a component as a controller to handle the logic and a view component to represent the option to end-user:

Vue component design

The Base node component loads the controller node component dynamically based on the attribute’s type and the controller node loads in the view component dynamically based on the display function selected by the user in Attribute’s settings.

Since the attributes are defined hierarchically, where each attribute can contain other attributes as children and those attributes can contain other attributes as children and so forth, the Base node renders all the attribute’s children as itself in it’s content recursively until all the attributes are rendered.

Custom display functions

While some attributes such as question and material group can use the same display functions, since they can provide the same model data to their view components, some other types such as image upload have a different model data requiring their own specialized view components. As such writing a vue component for each attribute type requires providing the input & output specialized to that attribute type.

Question & Material group

The controller nodes for question and material group attributes provide the same model data to their view component.

Provided data

Data passed to the view component are as follow:

{
label: string,// The name of the attribute
value: number|string,// The current value selected
items: {
id: number|string,// Value's id
label: string,// Name
description: string,// Description
thumbnail: string|null,// Url to thumbnail
color: hexstring|null,// Preferred background color
price: number|null,// Decimal number for price
visible: boolean,// If value is visible
disabled: boolean,// If value should be disabled
filtered: boolean,// If value is filtered out
categories: string[]// Value's categories
}[],
loading: boolean,// If the controller is loading
size: 'sm'|'lg',// Preferred size by user
rounded: 'yes'|'no',// Preferred rounded corners 
node_id: Number,// The id of the attribute
}

Where the items is an array of all the possible values the customer can select from.

Returning the selected value

In order to pass the selected value by user back to the application, such that the selected values is applied on the configurator, the component should emit an event with name ‘input’ and data as the value’s id.

E.g. selecting the first value provided in items:

this.$emit('input', this.items[0].id);

Example component

In our example, the following component is expecting the attribute to contain exactly 2 values. The component will render a checkbox, where attribute’s first value is selected if the checkbox is unchecked and the attribute’s second value is selected if the checkbox is checked:

const CheckboxSelectorView = {
    template: `
<div>
    <input type="checkbox" :id="'checkbox_group_'+node_id" v-model="selected" />
    <label :for="'checkbox_group_'+node_id">{{label}}</label>
</div>
    `,
    data() {
        return {
            selected: false
        }
    },
    props: {
        label: String,
        value: {
            default: null
        },
        items: Array,
        loading: {
            default: false
        },
        size: {
            type: String,
            default: 'lg'
        },
        rounded: {
            type: String,
            default: 'no'
        },
        node_id: Number,
    },
    created () {
        this.updateCheckbox();
    },
    methods: {
        updateCheckbox(){
            this.selected = this.items.length > 0 && this.value != this.items[0].id;
        }
    },
    watch:{
        value(aNewValue){
            this.updateCheckbox();
        },
        selected(aNewValue){
            if(aNewValue && this.items.length > 1){
                this.$emit('input', this.items[1].id);
            }else if(this.items.length > 0){
                this.$emit('input', this.items[0].id);
            }
        }
    }
};

Using custom display functions

To use the display function, the component has to be registered on the option’s application as well as setting the custom display function on the attribute.

Registering custom display functions

To register the custom display function, the component has to be registered before instantiating the ExpiviComponents object (the option’s application). The component can be registered on the ExpiviOptionsVueInstance.prototype.$customViews object.

e.g. registering the CheckboxSelectorView:

ExpiviOptionsVueInstance.prototype.$customViews["Checkbox"] = CheckboxSelectorView;

In above example the CheckboxSelectorView is registered as Checkbox.

Setting the custom display function

To set the custom display function, select Custom display and enter the name of registered component in under Display name.

e.g. setting the custom display to Checkbox as e.g. provided in Registering custom display functions: