Embedded - Programmatically

To be able to customize 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.

CODE

window.onPictofitReady = (api) => {
    api
        .forOrganisation("428ab0cd-3205-4674-a188-08d5b0355406") // Define the Customer-ID
        .asVirtualStyling() // Get a PICTOFiT Virtual Styling Component Builder
        .build() // Construct a PICTOFiT Virtual Styling Component
        .then((virtualStylingApi) => {
            virtualStylingApi
            .show(            // Show the PICTOFiT Virtual Styling Component
              collection, // A Promise that resolved to a JSON Collection
              collectionReference, // A reference to the collection
              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
              options              // optional lets on configure if the PICTOFiT Virtual Styling Component
                                   // should be fullscreen and/or closeable
            )
            console.log(`Virtual Styling ready!`);
        });
}

The Virtual Styling Builder interface is returned, to be used for the construction of a Virtual Styling Component. In such an integration only one PICTOFiT Virtual Styling Component should be build, for each call of the build function an additional component will be injected into the DOM, which will lead to performance issues. 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. For more technical details please consult the reference or our example repository.