Home > widget-integration > FilterHelper > getTemplateByIds

FilterHelper.getTemplateByIds() method

Fetches templates from API with caching support.

Retrieves templates by their IDs from the template API, with automatic localStorage caching for performance. Checks cache first before making API calls. This method is useful for dynamically loading templates that aren't included in the initial app configuration.

Signature:

getTemplateByIds(widgets: {
		name: string;
		id: string | number;
	} | Array<{
		name: string;
		id: string | number;
	}>): Promise<{
		templates: Record<string, string>;
	}>;

Parameters

Returns:

Promise<{ templates: Record<string, string>; }>

Promise resolving to object mapping template IDs to template strings

Remarks

• Uses localStorage caching with 24-hour TTL - Checks theme updated timestamp for cache invalidation - Only fetches non-cached templates to minimize API calls - Automatically caches fetched templates

Example 1

Fetch single template:

const { templates } = await this.filterHelper.getTemplateByIds({
  name: 'collectionHeader',
  id: 'collection_header_id'
});
const template = templates['collection_header_id'];

Example 2

Fetch multiple templates:

const { templates } = await this.filterHelper.getTemplateByIds([
  { name: 'collectionHeader', id: 'header_id' },
  { name: 'recommendation', id: 'rec_id' }
]);

Example 3

Extend to add custom caching logic:

window.boostWidgetIntegration.extend('FilterHelper', (FilterHelper) => {
  return class CustomFilterHelper extends FilterHelper {
    async getTemplateByIds(widgets) {
      // Add custom pre-fetch logic
      console.log('Fetching templates:', widgets);
      const result = await super.getTemplateByIds(widgets);
      // Add custom post-fetch logic
      this.trackTemplateFetch(widgets);
      return result;
    }
  };
});