UGC Widgets
    Preparing search index...

    Interface TilesSDK

    The Tiles SDK provides methods for interacting with the widget's tiles, including searching, fetching, and managing tile states. Tiles are an essential part of the UGC platform, you will likely spend most of your time manipulating tiles and retrieving tile data with the Tiles API.

    interface TilesSDK {
        addProducts: (tile: Tile, products: TagExtended[]) => void;
        closeExpandedTiles: () => void;
        enableAutoAddNewTiles: () => void;
        fetchTiles: (page: number, limit: number) => Promise<Tile[]>;
        getContentTagsFromTile: (tile: Tile) => Content[];
        getFirstProductInTile: (tile: Tile) => Product | undefined;
        getPage: () => number;
        getProductTagById: (id: string) => Product | undefined;
        getProductTagsFromTile: (tile?: Tile) => Product[];
        getSelectedProduct: () => Product | undefined;
        getShopspotsFromTile: (tileId: string) => Promise<Hotspot[]>;
        getTile: () => Tile | undefined;
        getTileById: (id: string) => Tile | undefined;
        getTiles: () => Tile[];
        hasMoreTiles: () => boolean;
        hideTileById: (tileId: string) => Promise<void>;
        hideTilesAfterNth: (nth: number) => void;
        loadTilesUntilVisibleTilesCount: () => Promise<void>;
        openExpandedTiles: (tileId: string) => void;
        searchTiles: (query: string, replaceExisting?: boolean) => void;
        searchTilesByBrand: (brand: string, replaceExisting?: boolean) => void;
        searchTilesByCategories: (
            categories: string,
            replaceExisting?: boolean,
        ) => void;
        searchTilesByFilterId: (
            filterId: number,
            replaceExisting?: boolean,
        ) => void;
        searchTilesByTagGroup: (
            tagGroup: string,
            replaceExisting?: boolean,
        ) => void;
        searchTilesByTags: (tags: string, replaceExisting?: boolean) => void;
        setHideBrokenTiles: (hideBrokenTiles: boolean) => void;
        setMediaType: (mediaType: "image" | "video") => void;
        setPreloadImages: (preloadImages: boolean) => void;
        setRowsPerLoadCalculator: (calculator: RowsPerLoadCalculator) => void;
        setSelectedProductId: (productId: string) => void;
        setTile: (tile: Tile) => void;
        setVisibleTilesCount: (visibleTileCount: number) => void;
        waitForTile: (tileId: string) => Promise<Tile | undefined>;
    }
    Index
    addProducts closeExpandedTiles enableAutoAddNewTiles fetchTiles getContentTagsFromTile getFirstProductInTile getPage getProductTagById getProductTagsFromTile getSelectedProduct getShopspotsFromTile getTile getTileById getTiles hasMoreTiles hideTileById hideTilesAfterNth loadTilesUntilVisibleTilesCount openExpandedTiles searchTiles searchTilesByBrand searchTilesByCategories searchTilesByFilterId searchTilesByTagGroup searchTilesByTags setHideBrokenTiles setMediaType setPreloadImages setRowsPerLoadCalculator setSelectedProductId setTile setVisibleTilesCount waitForTile
    addProducts: (tile: Tile, products: TagExtended[]) => void

    Add a product to a tile

    closeExpandedTiles: () => void

    Close the expanded tile This is helpful when you want to close the expanded tile programmatically

    // Close any open expanded tile
    sdk.closeExpandedTiles();
    enableAutoAddNewTiles: () => void

    Enable or disable the auto addition of new tiles

    // Enable auto-adding of new tiles
    sdk.enableAutoAddNewTiles();
    fetchTiles: (page: number, limit: number) => Promise<Tile[]>

    Type Declaration

      • (page: number, limit: number): Promise<Tile[]>

      • Parameters

        • page: number
        • limit: number

        Returns Promise<Tile[]>

        Promise<Tile[]>

    Fetch tiles

    // Fetch 10 tiles from page 2
    const tiles = await sdk.fetchTiles(2, 10);
    getContentTagsFromTile: (tile: Tile) => Content[]

    Get content tags from a tile

    // Get all content tags for a tile
    const tags = sdk.getContentTagsFromTile(tile);
    getFirstProductInTile: (tile: Tile) => Product | undefined

    Get the first product in a tile

    // Get the first product for a tile
    const product = sdk.getFirstProductInTile(tile);
    getPage: () => number

    Type Declaration

      • (): number

      • Returns number

        number

    Get page

    // Get the current page number. When load more is clicked, the page number changes.
    const page = sdk.getPage();
    getProductTagById: (id: string) => Product | undefined

    Get product tag by id

    // Get a product tag by id
    const tag = sdk.getProductTagById('product-123');
    getProductTagsFromTile: (tile?: Tile) => Product[]

    Get product tags from a tile

    // Get product tags for a tile
    const tags = sdk.getProductTagsFromTile(tile);
    getSelectedProduct: () => Product | undefined

    Get selected product

    // Get the currently selected product
    const product = sdk.getSelectedProduct();
    getShopspotsFromTile: (tileId: string) => Promise<Hotspot[]>

    Get shopspots from a tile by id

    // Get shopspots for a tile
    const shopspots = sdk.getShopspotsFromTile('tile-123');
    getTile: () => Tile | undefined

    Get the current selected tile (expanded)

    // Get the currently expanded tile
    const expanded = sdk.getTile();
    getTileById: (id: string) => Tile | undefined

    Get a tile by its id

    // Get a tile by id
    const tile = sdk.getTileById('tile-123');
    getTiles: () => Tile[]

    Type Declaration

      • (): Tile[]

      • Returns Tile[]

        Tile[]

    Get all tiles

    // Get all tiles and log their ids
    sdk.getTiles().forEach(tile => console.log(tile.id));
    hasMoreTiles: () => boolean

    Check if more tiles are available

    // Check if there are more tiles to load
    if (sdk.hasMoreTiles()) {
      // load more
    }
    hideTileById: (tileId: string) => Promise<void>

    Hide a tile by id

    // Hide a tile with a specific id
    await sdk.hideTileById('tile-123');
    hideTilesAfterNth: (nth: number) => void

    Hides every tile at or after the nth position (0-based) without changing the per-page visible-tile count used for fetching. Use this when a widget needs to control how many tiles are shown independently of how many it loads per page - e.g. masonry's "rows" mode, where the number of visible rows grows with the load-more page but the fetch size stays constant. Tiles hidden this way are revealed again automatically on the next load-more.

    // Show only the first 8 tiles, keep the rest loaded but hidden
    sdk.hideTilesAfterNth(8);
    loadTilesUntilVisibleTilesCount: () => Promise<void>

    Load tiles until visible tile count

    // Ensure enough tiles are loaded to meet the visible count
    await sdk.loadTilesUntilVisibleTilesCount();
    openExpandedTiles: (tileId: string) => void

    Open the expanded tile This is helpful when you want to open the expanded tile programmatically

    // Open the expanded tile for a specific tile id
    sdk.openExpandedTiles('tile-123');
    searchTiles: (query: string, replaceExisting?: boolean) => void

    Type Declaration

      • (query: string, replaceExisting?: boolean): void

      • Parameters

        • query: string

          search query, i.e. dogs

        • OptionalreplaceExisting: boolean

          replace existing tiles with new search results (default: true)

        Returns void

    Search tiles

    // Search for tiles with the query 'dogs'
    sdk.searchTiles('dogs');

    // Search for tiles and append to existing
    sdk.searchTiles('cats', false);
    searchTilesByBrand: (brand: string, replaceExisting?: boolean) => void

    Type Declaration

      • (brand: string, replaceExisting?: boolean): void

      • Parameters

        • brand: string

          brand name

        • OptionalreplaceExisting: boolean

          replace existing tiles with new search results (default: true)

        Returns void

    Search tiles by brand

    // Search for tiles with a specific brand
    sdk.searchTilesByBrand('nike');

    // Search for tiles by brand and append to existing
    sdk.searchTilesByBrand('adidas', false);
    searchTilesByCategories: (categories: string, replaceExisting?: boolean) => void

    Type Declaration

      • (categories: string, replaceExisting?: boolean): void

      • Parameters

        • categories: string

          comma-separated categories or single category

        • OptionalreplaceExisting: boolean

          replace existing tiles with new search results (default: true)

        Returns void

    Search tiles by categories

    // Search for tiles with a single category
    sdk.searchTilesByCategories('sports');

    // Search for tiles with multiple categories (comma-separated)
    sdk.searchTilesByCategories('sports,outdoor');

    // Search for tiles by categories and append to existing
    sdk.searchTilesByCategories('fashion', false);
    searchTilesByFilterId: (filterId: number, replaceExisting?: boolean) => void

    Type Declaration

      • (filterId: number, replaceExisting?: boolean): void

      • Parameters

        • filterId: number

          filter ID to search by

        • OptionalreplaceExisting: boolean

          replace existing tiles with new search results (default: true)

        Returns void

    Search tiles by filter ID

    // Search for tiles with filter ID 123
    sdk.searchTilesByFilterId(123);

    // Search for tiles by filter ID and append to existing
    sdk.searchTilesByFilterId(456, false);
    searchTilesByTagGroup: (tagGroup: string, replaceExisting?: boolean) => void

    Type Declaration

      • (tagGroup: string, replaceExisting?: boolean): void

      • Parameters

        • tagGroup: string

          tag group for localization (e.g., 'au', 'nz')

        • OptionalreplaceExisting: boolean

          replace existing tiles with new search results (default: true)

        Returns void

    Search tiles by tag group

    // Search for tiles with a specific tag group for localization
    sdk.searchTilesByTagGroup('au');

    // Search for tiles by tag group and append to existing
    sdk.searchTilesByTagGroup('nz', false);
    searchTilesByTags: (tags: string, replaceExisting?: boolean) => void

    Type Declaration

      • (tags: string, replaceExisting?: boolean): void

      • Parameters

        • tags: string

          comma-separated tags or single tag

        • OptionalreplaceExisting: boolean

          replace existing tiles with new search results (default: true)

        Returns void

    Search tiles by tags

    // Search for tiles with a single tag
    sdk.searchTilesByTags('summer');

    // Search for tiles with multiple tags (comma-separated)
    sdk.searchTilesByTags('summer,vacation');

    // Search for tiles by tags and append to existing
    sdk.searchTilesByTags('winter', false);
    setHideBrokenTiles: (hideBrokenTiles: boolean) => void

    Disable or enable the removal of broken tiles This is helpful when you want to handle the removal of broken tiles yourself.

    // Enable hiding of broken tiles
    sdk.setHideBrokenTiles(true);
    setMediaType: (mediaType: "image" | "video") => void

    Set the media type for the tile search

    // Only show video tiles
    sdk.setMediaType('video');
    setPreloadImages: (preloadImages: boolean) => void

    Disable or enable preloading of images This is helpful when you want to handle the preloading yourself.

    // Disable image preloading
    sdk.setPreloadImages(false);
    setRowsPerLoadCalculator: (calculator: RowsPerLoadCalculator) => void

    Registers a widget-specific formula for how many tiles are needed to fill N rows, used when custom_tile_per_page_type is "rows". Must be called synchronously from the widget's own extension script, before its first tiles fetch (i.e. before EVENT_JS_RENDERED).

    sdk.setRowsPerLoadCalculator(({ rowsPerPage, gap }) => myTilesPerRowFormula(rowsPerPage, gap))
    setSelectedProductId: (productId: string) => void

    Set selected product in state

    setTile: (tile: Tile) => void

    Set the selected tile (expanded)

    // Set a tile as the currently expanded tile
    sdk.setTile(tile);
    setVisibleTilesCount: (visibleTileCount: number) => void

    Set visible tile count

    // Show only 5 tiles at a time
    sdk.setVisibleTilesCount(5);
    waitForTile: (tileId: string) => Promise<Tile | undefined>

    Type Declaration

      • (tileId: string): Promise<Tile | undefined>

      • Parameters

        • tileId: string

          id of the tile to wait for

        Returns Promise<Tile | undefined>

        Promise<Tile | undefined>

    Wait for a tile to be loaded

    // Wait for a tile to be available in the DOM
    const tile = await sdk.waitForTile('tile-123');

    Settings
    Member Visibility

    On This Page
    Properties