Wishlist Slots

The Wishlist drop-in exposes slots 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.

Container	Slots
Wishlist	image, actions
WishlistItem	actions

Wishlist slots

The slots for the Wishlist container allow you to customize its appearance and behavior.

interface WishlistProps {
  slots?: {
    image?: SlotProps<{
    defaultImageProps: ImageProps;
    item: Item;
    }>;
    actions?: SlotProps<ProductItemActionsContext>;
  };
}

image slot

The image slot allows you to customize the image section of the Wishlist container.

Example

import { render as provider } from '/@dropins/storefront-wishlist/render.js';
import { Wishlist } from '/@dropins/storefront-wishlist/containers/Wishlist.js';

await provider.render(Wishlist, {
  slots: {
    image: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom image';
      ctx.appendChild(element);
    }
  }
})(block);

actions slot

The actions slot replaces the action buttons (such as move-to-cart and remove) for each product in the Wishlist container. The slot context provides item (the wishlisted product) and the optional onMoveToCart and onRemove callbacks.

Example

import { render as provider } from '/@dropins/storefront-wishlist/render.js';
import { Wishlist } from '/@dropins/storefront-wishlist/containers/Wishlist.js';

await provider.render(Wishlist, {
  slots: {
    actions: (ctx) => {
      // Your custom implementation
      const element = document.createElement('button');
      element.innerText = 'Move to cart';
      element.addEventListener('click', () => ctx.onMoveToCart?.());
      ctx.appendChild(element);
    }
  }
})(block);

WishlistItem slots

The slots for the WishlistItem container allow you to customize a single wishlist product.

interface WishlistItemProps {
  slots?: {
    actions?: SlotProps<ProductItemActionsContext>;
  };
}

actions slot

The actions slot replaces the action buttons for a single wishlist item. The slot context provides item (the wishlisted product) and the optional onMoveToCart and onRemove callbacks.

Example

import { render as provider } from '/@dropins/storefront-wishlist/render.js';
import { WishlistItem } from '/@dropins/storefront-wishlist/containers/WishlistItem.js';

await provider.render(WishlistItem, {
  item: sampleWishlistItem,
  slots: {
    actions: (ctx) => {
      // Your custom implementation
      const element = document.createElement('button');
      element.innerText = 'Move to cart';
      element.addEventListener('click', () => ctx.onMoveToCart?.());
      ctx.appendChild(element);
    }
  }
})(block);