Introduction

The Modal Dressing Room (MDR) is the quickest and easiest way to integrate a virtual dressing room into your shop. The MDR comes with all the UI/UX and logic needed and is based on the PICTOFiT Web SDK. It can be integrated in any web application through Javascript & HTML code.

As a developer, you have to provide the glue between your shop (the host) and the MDR. This glue is called the HostAdapter and provides information about content like the available garments or avatars.

Installation

At the moment, you can use the MDR through npm

npm install @reactivereality/pictofit-dressing-room

You will need a access token to install the package. Please contact support@reactivereality.com to receive your personal token.

We will soon also release the MDR als JavaScript ES6 module which you can integrate through a <script> tag in HTML directly.

Providers

The minimum you have to implement is a provider for the garments in the dressing room, the available avatars and the available scenes. The providers return a list of IDs (the list of IDs of available garments/avatars/scene) and and methods to get a display name, thumbnail and assets for the item with the respective id. The following snippet shows the interface of the GarmentProvider.

  /**
   * Provides information about the garments in the dressing room
   */
  export interface GarmentProvider extends AssetProvider {
    /**
     * Returns a list of ids for the available resources for this provider.
     * (from AssetProvider)
     */
    getIds(): Awaitable<Array<string>>;
    /**
     * Returns the asset bundle for a specific resource
     * (from AssetProvider)
     * @param id Unique ID if the garment as used in your systems
     */
    getById(id: string): Awaitable<Core.AssetInfo | undefined>;
    /**
     * Return the display name of a garment as string. This will be shown for example below 
     * the garment tile and in the details drawer.
     * @param id Unique ID if the garment as used in your systems
     */
    getName(id: string): Awaitable<string | undefined>;
    /**
     * Returns an url to the thumbnail image of a garment. This will be shown for example below 
     * the garment tile and in the details drawer.
     */
    getThumbnail(id: string): Awaitable<string | undefined>;
    /**
     * Removes the given garment from the dressing room.
     * Is called when someone clicks "Remove from dressing room" on a garment tile.
     * @param id Unique ID if the garment as used in your systems 
     */
    removeById(id: string): Awaitable<void>;
  }

Let’s have a closer look at the individual methods. The getIds() method returns a list of IDs for the garments that should be shown in the dressing room. The format of the IDs is totally up to you. Ideally, you use an ID that you already have in your systems (like the SKU). This ID is used throughout the interface to reference the garment.

getName() and getThumbnail() are rather straightforward as the return a display name and an url to a thumbnail for the garment with the respective ID. This information is then used to show the garment in the list within the dressing room. The same is true for removeById(). The actual implementation depends on how you maintain the list of garments in the dressing room.

Awaitable is a type that can either be a Promise or a value. This allows you to define the methods async or non-async, depending on your system.

export type Awaitable<T> = Promise<T> | T;

Assets

Having implemented these methods already lets the MDR display the garments in the dressing room. What’s missing now is an implementation for getById() which returns the assets for the respective garment. Assets are all the files generated by our PICTOFiT Content Service when turning your image into a virtual garment. The method returns an object which maps from file name to location:

Learn more about the PICTOFIT Content Service in the respective section.

{
"diffuse.jpg" : "https://mylocation.com/my-garment-id/diffuse.jpg",
"garment.min.garment" : "https://mylocation.com/my-garment-id/garment.min.garment",
...
}

The MDR consumes these files and provides them to the underlying PICTOFiT Web SDK to compute the virtual try-on and to render the result. Where and how you serve these files is totally up to you. You can use your own CDN or choose to use our PICTOFiT Platform.

The following section shows a complete example which fetches the data from our PICTOFiT Platform.