@crystaldesign/diva NPM

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 two peer dependencies, react and react-dom. 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"
  identifier="my-identifier"
  language="de"
  component="{...}"
/>

Or it can be included dynamically via JavaScript:

const diva = document.createElement('diva-framework');
diva.organizationId = 'my-organization-id';
diva.identifier = 'my-identifier';
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 and identifier 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

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.