@crystaldesign/diva

DIVA Application Framework

The DIVA Application Framework provides a set of ready to use applications for all digital touchpoints. Establish a direct connection to customers, anywhere and anytime​.

DIVA Online Showroom
Assortment diversity & digital product exposés at all touchpoints​

DIVA Online Configurator
Guided shopping 24/7 special customer service at all touchpoints​

DIVA Online Seller
Guided selling on the sales floor and in live chat​

License

This is commercial software. To use it, you need to agree to our terms of service and purchase a commercial licence.

Please contact our sales team or request a personal webinar, in order to receive additional information on how to purchase a licence.

Installation

DIVA Framework has three peer dependencies, react, react-dom and jQuery. They have to be installed before this package can be used.

Since the DIVA Framework takes use of webcomponents make sure to provide some polyfill functionality if you want to support older browsers.

There are several options available to install the DIVA Framework:

• Install with npm:

  npm install @crystaldesign/diva

• Install via CDN:

<script src="https://unpkg.com/@crystaldesign/diva@{version}/build/diva.umd.min.js"></script>

Usage

The diva framework is packaged as a webcomponent and can be included in any webpage independently of the used tools.

It can be included statically in HTML:

<diva-framework
  organizationId="my-organization-id"
  language="de"
  component="{...}"
/>

Or it can be included dynamically via JavaScript:

const diva = document.createElement('diva-framework');
diva.organizationId = 'my-organization-id';
diva.language = 'de';
diva.component = {...};

const parent = document.getElementById('some-id');
parent.appendChild(diva);

As language currently German (de), Italian (it), French (fr) and English (en) are supported.

The property component expects a JSON Object which defines the component that should be rendered within the framework and any additional settings needed for this component. Since this highly depends on the specific components and your preferences you will receive the exact specification for this after your purchased a license for one of our products.
NOTE: Due to the limitations of webcomponents, component must be a string if it is passed as attribute.

The organizationId will be provided to you together with your license.

Events

In order for the components to communicate with their environment the framework fires different events for which the user can register, e.g.:

    (...)
    diva.addEventListener('onAddToBasket',(event) => {
        console.log("Added new product with Diva Nr: "+event.detail.DivaNr);
    });

The currently supported events are:

• onAddToBasket
• onWebPlanerClose
• onWebPlanerPrint
• onWebPlanerShare
• onWebPlanerSave
• onWebPlanerHelp
• onWebPlanerZoomClick

It is also possible to invoke events on the framework, from the integration evironment:

    diva.invokeEvent(event: string, params?: any)

For example:

    (...)
    diva.invokeEvent(event: 'addToBasket')

The currently supported events in this direction are:

• addToBasket

Contact

Our sales team will gladly provided you with additional information on the diva framework and all our products. Feel free to contact us or request a personal webinar.