Optional Providers

There are several optional providers that you can implement for additional functionality. Add them to your host provider to activate the respective feature of the MDR.

Commerce & Inventory

(1) indicates the functionality of the Commerce provider. (2) shows the added functionality of the Inventory provider.

Implementing the commerce provider adds a price and currency to the garments in the dressing room. The methods simply return the respective value from your e-commerce sysem for a garment with the given ID (SKU, Product ID, …).

TYPESCRIPT

  /**
   * Provides information for commerce related fields.
   */
  export interface CommerceProvider {
    /**
     * Returns the currency for a given garment.
     * @param id Unique ID of the garment
     */
    getCurrencyForId(id: string): Awaitable<string | undefined>;
    /**
     * Returns the price of a given garment.
     * @param id Unique ID of the garment
     */
    getPriceForId(id: string): Awaitable<number | undefined>;
  }

The Inventory provider returns information about the available stock of a product in a respective size and offers functionality for adding and removing items from the shopping card. Again, all of this refers to information and functionality provided by your e-commerce system. The Inventory provider only serve as the connecting layer so that the MDR can access this information and functionality.

TYPESCRIPT

  /**
   * Provider for inventory and cart related functionality. All functionality refers to your e-commerce solution.
   * E.g. The qtyInCard method should return the quantity of a specific garment in the shopping cart or 0 if not there.
   */
  export interface InventoryProvider {
    /**
     * Returns the quantity of the garment with the given ID and size. This refers to the shopping cart 
     * @param id Unique ID of the garment
     * @param sizeId Size identifier of the garment
     */
    qtyInCard(id: string, sizeId: string): Awaitable<number>;
    /**
     * Adds a list of items to the shopping cart
     * @param items Array of CartItem objects containing the ID, size and quantity of the products
     */
    addToCart(items: Array<CartItem>): Awaitable<Cart>;
    /**
     * Removes a specific item from the shopping cart.
     * @param item Item to be removed
     */
    removeFromCart(item: CartItem): Awaitable<Cart>;

    /**
     * Returns the available sizes for a garment with the given ID.
     * @param id Unique ID of the garment
     */
    getSizes(id: string): Awaitable<Array<ItemSize>>;

    /**
     * Returns the available stock of a garment in a given size. You don't need to expose the exact stock. It is also
     * fine to return 1 if the item is in stock and 0 otherwise.
     * @param id Unique ID of the garment
     * @param sizeId Size identifier of the garment
     */
    getStock(id: string, sizeId: string): Awaitable<number>;
  }

Personalised Mannequins

Implementing a MutableAvatarProvider enables your shoppers to create a personalised avatar. The provider is responsible for storing the generated assets as well as meta information (name, gender, thumbnail) of the avatar. Where your store this data is up to you This can be for example the browsers session storage if you only want to keep the avatars temporarily or your e-commerce backend if you want users to keep them permanently.

TYPESCRIPT

  export interface MutableAvatarProvider extends Providers.AvatarProvider {
    /**
     * Deletes the avatar with the given id
     * @param id Unique ID auf the avatar
     */
    deleteById(id: string): Awaitable<void>;
    /**
     * Stores the avatar's assets persistently for the given ID. How you actually store them is up to you.
     * @param id Unique ID of the avatar
     * @param asset Asset container object
     */
    storeById(id: string, asset: Core.AssetInfo): Awaitable<void>;
    /**
     * Sets the name for the avatar with the given ID.
     * @param id Unique ID of the avatar
     * @param name Name of the avatar
     */
    setName(id: string, name: string): Awaitable<void>;
    /**
     * Sets the gender of the avatar with the given ID.
     * @param id Unique ID of the avatar
     * @param gender Genderof the avatar
     */
    setGender(id: string, gender: Core.Gender): Awaitable<void>;
    /**
     * Sets the thumbnail for the avatar encoded as base64 string.
     * @param id Unique ID of the avatar
     * @param thumbnail Thumbnail png in base64 format
     */
    setThumbnail(id: string, thumbnail: string): Awaitable<void>;
  }

Look Sharing

The MDR offers functionality to share a look via url. This allows you to generate organic growth of your site through shoppers sharing their favourite looks with friends. Your provider needs to offer functionality for serializing and deserializing the look-related information into/from a token. Furthermore, there is a resolve method where you have to extract the token form the url and a shareLook function where you have to create sharing URL for a specific token. The format is again up to you.

TYPESCRIPT

  /**
   * Provider for encoding and decoding looks into/from tokens. Option methods for storing and sharing
   */
  export interface LookProvider {
    /**
     * Serialize the provided look information as a token
     * @param look
     */
    tokenizeLook(look: SaveableLook): Awaitable<LookToken>;
    /**
     * Resolve a token and extract the serialized look information
     * @param token 
     */
    resolveToken(token: LookToken): Awaitable<LoadableLook>;

    /**
     * Optional methods if the dressing room should support sharing
     */
    sharing?: {
      /**
       * Triggered to inform the host adator that the MDR was opened
       */
      onStartup(): void;
      /**
       * Creates a sharing URL for the provided look token.
       * @param token 
       */
      shareLook(token: LookToken): Awaitable<string | boolean>;
      /**
       * Extracts a look token from the url of the website and returns it.
       */
      resolve(): Awaitable<LookToken | undefined>;
    };
  }