Embedded - Programmatically

To be able to customise as much as possible in the PICTOFiT Virtual Styling component 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 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("428ab0cd-3205-4674-a188-08d5b0355406") // 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 PICTOFiT Virtual Styling Component Builder, and request the construction of the PICTOFiT Virtual Styling Component using the build function. This single instance of the PICTOFiT Virtual Styling Component can be reused to open and close the PICTOFiT Virtual Styling Component 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, // optionally 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!`);
}

During the opening process of the PICTOFiT Virtual Styling Component the component will collect all available information for all garments. The PICTOFiT Virtual Styling Component will probably use a custom implementation of the GarmentInformationProvider interface to access information like name, brand, availability etc.

To improve the loading time and allow a custom implementation of the GarmentInformationProvider to collect information on multiple garments in one batch request the preLoad function of this provider will be called with a list of all needed garments. This allows an application to request this data in one batch from a remote system, like a server and cache the result.

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