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
}