Home > widget-integration > FilterController > setProductImageToDefault

FilterController.setProductImageToDefault() method

Resets product images to their default state. Restores the original product images when a swatch selection is cleared or on mouse leave.

Handles both single and dual image displays (for hover effects) and includes optimizations to prevent flickering by checking if the current image differs from the target image before updating.

Signature:

setProductImageToDefault(productItem: any, images: any): void;

Parameters

Returns:

void

Remarks

Generates responsive srcset for images with widths [200, 300, 400, 500, 700]px. Only updates images when the src has actually changed to avoid unnecessary reflows.

Example

Override to add custom image transition effects:

window.boostWidgetIntegration.extend('FilterController', (FilterController) => {
  return class CustomFilterController extends FilterController {
    setProductImageToDefault(productItem, images) {
      // Add fade-out effect before changing
      const imgs = productItem.querySelectorAll('.boost-sd__product-image img');
      imgs.forEach(img => img.classList.add('fading'));

      setTimeout(() => {
        super.setProductImageToDefault(productItem, images);
        imgs.forEach(img => img.classList.remove('fading'));
      }, 150);
    }
  };
});