Wishlist Slots

The Wishlist drop-in exposes 1 slot in 1 container for customizing specific UI sections. Use slots to replace or extend container components. For default properties available to all slots, see Extending drop-in components.

Version: 2.0.1

Container	Slots
Wishlist	image

Wishlist slots

interface WishlistProps

slots?: {
  image?: SlotProps<{
    defaultImageProps: ImageProps;
    item: Item;
  }>;
};

image example

This example from the Commerce Wishlist block shows how to customize the image slot:

import { render as provider } from '@dropins/storefront-wishlist/render.js';
import Wishlist from '@dropins/storefront-wishlist/containers/Wishlist.js';
import { tryRenderAemAssetsImage } from '@dropins/tools/lib/aem/assets.js';
// Note: `WISHLIST_IMAGE_DIMENSIONS` should be defined in your block context (object with `width` and `height` properties)

provider.render(Wishlist, {
  slots: {
    image: (ctx) => {
      const { item, defaultImageProps } = ctx;
      tryRenderAemAssetsImage(ctx, {
        alias: item.product.sku,
        imageProps: defaultImageProps,
        params: {
          width: defaultImageProps.width || WISHLIST_IMAGE_DIMENSIONS.width,
          height: defaultImageProps.height || WISHLIST_IMAGE_DIMENSIONS.height,
        },
      });
    }
  }
})(document.querySelector('.wishlist'));

---