Home > widget-integration > CartDrawerRecommendationController > renderRecommendationWidget

CartDrawerRecommendationController.renderRecommendationWidget() method

Render the recommendation widget with new data. Override this method to customize rendering.

Returns a Promise that resolves when the DOM update is complete. The consumer listening to 'boost-sd-rcu-refetch' should dispatch 'boost-sd-rcu-render-complete' after finishing the DOM update.

Signature:

protected renderRecommendationWidget(container: HTMLElement, data: Awaited<ReturnType<CartDrawerRecommendationService["getCartDrawerRecommendationData"]>> & {
		products: Array<Record<string, unknown>>;
	}): Promise<void>;

Parameters

Parameter

Type

Description

container

HTMLElement

The container element to render into

data

Awaited<ReturnType<CartDrawerRecommendationService["getCartDrawerRecommendationData"]>> & { products: Array<Record<string, unknown>>; }

The recommendation data from CartDrawerRecommendationService

Returns:

Promise<void>

Promise that resolves when rendering is complete or timeout is reached

Remarks

A fallback timeout of 1000ms is used in case the completion event is never fired. If the consumer needs more time, override this method to adjust the timeout.

Example

Override to add a custom loading spinner during re-render:

protected async renderRecommendationWidget(container, data) {
  container.innerHTML = '<div class="custom-spinner"></div>';
  await super.renderRecommendationWidget(container, data);
  // Custom post-render logic
}