Home > widget-integration > RecommendationWidgetController > renderCarouselWidget

RecommendationWidgetController.renderCarouselWidget() method

Renders the carousel widget by loading dependencies and initializing the carousel.

This method handles the complete carousel rendering process: 1. Lazy loads jQuery library with noConflict mode 2. Lazy loads Slick carousel library 3. Renders widget template with product data 4. Initializes carousel with event handlers

Signature:

renderCarouselWidget(container: HTMLElement): Promise<void>;

Parameters

Returns:

Promise<void>

Exceptions

{Error} When jQuery/Slick loading fails, template rendering fails, or carousel initialization encounters errors

Remarks

Performance considerations: - jQuery (~30KB gzipped) and Slick (~15KB gzipped) are loaded on-demand only for carousel layouts - Uses noConflict mode to avoid conflicts with page's jQuery instance - Template rendering is handled by AppService for consistency - Total additional bundle size: ~45KB gzipped when carousel layout is used

Example

Override to add custom carousel initialization logic:

async renderCarouselWidget(container) {
  // Add loading indicator
  container.innerHTML = '<div class="loading">Loading carousel...</div>';

  await super.renderCarouselWidget(container);

  // Add custom post-render effects
  this.addCarouselAnimations(container);
}