TURBO for Developers

Home > widget-integration > RecommendationWidgetController > renderWidget

RecommendationWidgetController.renderWidget() method

Renders the widget based on the model's layout configuration.

Currently handles carousel layout rendering. Override this method to add support for custom layouts, modify rendering logic, or add pre/post-render transformations.

Signature:

protected renderWidget(model: RecommendationModel, parent: HTMLElement): Promise<void>;

Parameters

Parameter	Type	Description
model	RecommendationModel	The recommendation model containing widget configuration and product data
parent	HTMLElement	The parent HTML element where the widget will be rendered

Returns:

Promise<void>

Remarks

The default implementation only renders carousel layouts. For grid or other layouts, the template rendering is handled elsewhere in the widget lifecycle.

Example

Override to add support for custom grid layout:

protected async renderWidget(model, parent) {
  const layout = model.properties.widgetDesignSettings?.layoutDisplay;

  if (layout === 'carousel') {
    await this.renderCarouselWidget(parent);
  } else if (layout === 'masonry') {
    await this.renderMasonryWidget(parent);
  } else {
    await this.renderGridWidget(parent);
  }
}