Spiff Javascript API

In order to open spiff workflows and allow your customers to customise their own versions of your products you must first interact with the Spiff Javascript API. The Spiff javascript API becomes avaiable to the pages of any shopfront that has the Spiff application installed. If you have not yet done this pelase install one of our integrations.

Spiff.Product

Constructor

new Spiff.Product(productOptions)

ProductOptions

Usage

const productOptions = {
    integrationId: "example.myshopify.com",
    productId: "1234"
};
const product = new window.Spiff.Product(productOptions);

on(eventName: string, callback: (callbackOptions: object) => void): void

Register a callback method on the product object. There are different kinds of callbacks detailed in the table below.

confirmActive(): Promise<void>

Confirm that the configured product exists and is enabled. Calling this method and waiting for the "ready" event to fire is required before a transaction amy be created.

Spiff.Transaction

When ordering product on spiff a client needs to first create a transaction. A transaction represents all of the the customer's personalisation data for a given item in a given order order. Once created the transaction is saved in the spiff platform and ready for order. If your using the Spiff shopify application this ordering process happens by attaching the spiff transactionId to a line item. Spiff will then listen for orders with spiff transaction Id's and route the order to the approate store / location. The Spiff platfrom also has solutions for many advanced routing options.

Constructor

new Transaction(transactionOptions: object)

Parameter: Transaction Options

The set of options to create the transaction with. See below table for constructing the options.

Useage

const transactionOptions = {
    presentmentCurrency: "USD",
    product: product, // See Spiff.Product
    shouldCreateDesignProduct: true,
    embedElement: document.querySelector("#spiff-workflow-container")
};
const transaction = new window.Spiff.Transaction(transactionOptions);

on(eventName: string, callback: (callbackOptions: object) => void): void

Registering callback methods with a given transaction is done via the on method. There are different kinds of callbacks detailed in the table below.

Complete Callback

When a user has completed their transaction the complete callback provided will be called with a single result parameter detailed below.

Useage example of Complete callback

// called when the user has completed their transaction
transaction.on('complete', (result) => {
    console.log(result.designMetaData);
    console.log(result.transactionId);
    console.log(result.designProductId);
    console.log(result.designProductVariantId);
    console.log(result.baseCost);
    console.log(result.optionsCost);
    console.log(result.previewImage);
});

Quit Callback

The quit callback is called if the transaction has been created with out a DOM element and the user as closed the modal before completing the transaction. In the case of quit no design will be created and the resulting transaction should be discarded. If the user wants to customise after this point a new transaction should be created.

// Called if the user quit early
transaction.on('quit', () => {
    console.log("The user exited before completing their design");
});

execute(): Promise<void>

Calling execute will trigger the created transaction to create and render the Iframe according to how the transaction has been cofigured. If no DOMElement has been prodvided setting up the transaction calling execute will open the spiff modal. If a DOM Element has been added then the spiff workflow will render in that provided element. The promise returned by this method will resolve once the transaction has been setup. Given the user might have a slow connection it might be worth displaying some sort of loading queue at this point. Once the promise resolves hide the loading state. Note as well this method will not timeout so setting a time out of perhaps 10 seconds might be a good idea.

transaction.execute();