Home > widget-integration > RecommendationWidgetController > afterWidgetRender

RecommendationWidgetController.afterWidgetRender() method

Called after widget rendering is complete.

This lifecycle hook is executed after the widget has been fully rendered in the DOM. It triggers app integration for cart buttons, executes legacy customization hooks for backward compatibility, and other interactive elements.

Override this method to add post-render logic like analytics tracking, custom event handlers, third-party integrations, or accessibility enhancements.

Signature:

protected afterWidgetRender(): void;

Returns:

void

Remarks

The method performs the following in order: 1. Triggers app integration (cart buttons, quick view, etc.) 2. Executes legacy customization.afterRender hooks for backward compatibility - Allows existing shops with custom JS to continue working - Supports both general and recommendation-specific hooks

Example 1

Override to add analytics tracking:

protected afterWidgetRender() {
  super.afterWidgetRender(); // Important: call super to maintain integrations

  const model = this.state.value.model;
  if (model) {
    this.analytics.trackProductImpressions(
      model.properties.products.map(p => ({
        id: p.id,
        name: p.title,
        list: `Recommendations - ${model.properties.widgetId}`
      }))
    );
  }
}

Example 2

Override to add custom interactive features:

protected afterWidgetRender() {
  super.afterWidgetRender();

  // Add quick view functionality
  document.querySelectorAll('.product-quick-view').forEach(btn => {
    btn.addEventListener('click', (e) => this.handleQuickView(e));
  });
}