trillion-viewer

Trillion Viewer

This is Trillion Viewer that allow you to integrate Trillion SDK in your site. For more information please visit https://trillion.jewelry

Installing

Using npm:

npm install trillion-viewer

Using yarn:

yarn add trillion-viewer

How to use:

You need to create an empty div element for viewer initialization. For example:

 <div id="trillion-viewer"></div>

Then, in your js code:

import {TrillionViewerApp} from "trillion-viewer"

const elem = document.getElementById('trillion-viewer')
const trillionViewer = new TrillionViewerApp()
trillionViewer.init(elem)
trillionViewer.setJewelryID('demo-ring')
trillionViewer.refresh()

For typescript:

const elem = document.getElementById('trillion-viewer') as HTMLElement

Instance methods

trillionViewer#init() - Create viewer on the provided HTML element

trillionViewer#refresh() - reload viewer after changing parameters

trillionViewer#setJewelryID(sku) - Set the id(SKU) of the jewelry to load

trillionViewer#getJewelryID() - Get the id(SKU) of the uploaded jewelry

Using CDN to get Trillion Viewer

use this pattern: unpkg.com/:package@:version/:file

For example:

import {TrillionViewerApp} from "https://unpkg.com/trillion-viewer@0.2.17/build-lib/trillion-viewer.js"

React component

This library also provides the React component for widget.

How to use

import component:

import { TrillionViewer } from "trillion-viewer";

use somewhere in your React application:

function MyComponent() {
  return (
    <div className="MyComponent">
        <TrillionViewer jewelryId={'demo-ring'}/>
    </div>
  )
}