Embedded - Programmatically

To be able to customize as much as possible in the PICTOFiT Virtual Styling component (VSC) one should perform a programmatic integration. In this case the pictofit-api module is embedded into the website and a handler for the PICTOFiT ready callback is registered on the window object.

To get started inject the following code into your website:

HTML

<html>
    <head></head>
    <body>
      ...
        <script async type="module" src="https://cdn.pictofit.com/pictofit-web-components/master/pictofit-api.mjs">
        </script>
        <script>
            window.onPictofitReady = (api) => {
                // Start using api
                console.log(`Pictofit Ready ...`);
            }
        </script>
      ...
    </body>
</html>

With the api object (of type IPictofitBuilder) you can than make use of the different components.

JS

const collectionReference: AssetReference = {
    reference: "gid://pictofit/collection/demo/everyday-essentials-acc",
    organizationId: "9a4e90a5-2262-48ca-899e-9216a62dd52b"
}

let collection: Collection | null = null;

// We can store the PICTOFiT Virtual Styling Component construction promise
// in a scope where utility functions can access it as well.
let vsc_api_promise;
window.onPictofitReady = async (api) => {
    const vsc_builder = api
        .forOrganisation("9a4e90a5-2262-48ca-899e-9216a62dd52b") // Define the Customer-ID
        .asVirtualStyling(); // Get a PICTOFiT Virtual Styling Component Builder

    // vsc_api_promise becomes a Promise that resolves to a VirtualStylingApi 
    vsc_api_promise = vsc_builder
        .build(); // Construct a PICTOFiT Virtual Styling Component
        
    // We can use the PICTOFiT Virtual Styling Component Builder to load a collection
    // from the central asset platform
    // We load the collection based on its reference from our central asset platform
    collection = await vsc_builder.getCollection(
      collectionReference.reference,
      collectionReference.organizationId
    );

    if(collection !== null) {
      // We were successfull in loading the collection we want to show from the central asset platform
    }
}

We construct a IVirtualStylingBuilder, and request the construction of the VSC using the build function. This single instance of the VSC can be reused to open and close the VSC experience multiple times on the same website.

JS

// The PICTOFiT Virtual Styling Component as build above should only happens once.
// at some point later, the website can open a collection in the Virtual Styling Component
// this could for example happen in a click handler
async function openVirtualStyling() {
        // Only at this point we wait for the loading of the component to finish
        const { api } = await vsc_api_promise;

            api.show(               // Show the PICTOFiT Virtual Styling Component
              collection,          // A Promise that resolved to a JSON Collection
              collectionReference, // A reference to the collection
              { // The thrid optional parameter holds optional properties 
                // to customize the behaviour of the VSC
                // We just list the following options as example.
                informationProvider, // (optional) an information provider
                                     // this allows one to load name
                                     // price and garment details link based on 
                                     // the garment id during runtime
                sharedState,         // (optional) a state defining the a share result
                commerceProvider     // (optional) an commerce provider to handle
                                     // add to cart functionality if needed
              }
            );
            // This will run immediatley, but the VSC will open asynchronous
            console.log(`Virtual Styling ready!`);
}

Custom Providers

The VSC will probably use custom implementations of one or multiple providers to be tailored to the host site. This sections explains the most common providers that get an custom implementation.

Garment Information Provider

Reference: IGarmentInformationProvider

The Garment Information Provider is used to retrieve detailed information about garments, such as their name, brand, availability, and more.

To improve loading times, the preLoad function of the IGarmentInformationProvider will be called with a list of all required garments. This allows a custom implementation to fetch information for multiple garments in a single batch request from a remote system—such as a server—and cache the results for efficient reuse.

Commerce Provider

The Commerce Provider is responsible for displaying product prices (including currency formatting) and handling the "Add to Cart" functionality. To customise this behaviour, you must implement the following interface.

Reference: ICommerceProvider

Add to cart

There are two ways to enable adding garments to the cart:

Add to Cart as Bundle (default option)
This option displays an "Add to Cart" button on the collection overview page of the VSC. It allows users to add the entire outfit as a single bundle.
Add to Cart per Garment
This option adds an icon to each garment, enabling users to add individual garments to the cart instead of the full outfit.

Activating the Bundle Version

The bundle version is enabled by default. As described in the allowAddToCartBundle method, this flag is set to true by default, which activates the "Add to Cart" button on the collection overview page.

Activating Per-Garment Add to Cart

To enable individual garment add-to-cart functionality:

Implement the getSizes method of the GarmentInformationProvider interface.
If no sizes are provided for a garment, the "Add to Cart" button will not be shown.
To display the "Add to Cart" button, the allowAddToCart method must return true.

Analytics Provider

This interface defines the events that are available for analytics, each method explains, when it is called and what properties are available.

Reference: IAnalyticsProvider

For more details on tracking and analytics consult the Analytics Events page.

For more technical details please consult the reference or our example repository.