slot-fills.md

Slot and Fill

The problem

You added custom data to the Store API. You changed several strings using Checkout filters. Now you want to render your own components in specific places in the Cart and Checkout.

Solution

Slot and Fill are a pair of components that add the possibility to render your own HTML in pre-defined places in the Cart and Checkout. Your component will get access to contextual data and will get re-rendered when needed.

A Slot is a place in the Cart and Checkout that can render an indefinite number of external components.

A Fill is the component provided by third-party developers to render inside a Slot.

Slot and Fill use WordPress' API, and you can learn more about how they work in the Slot and Fill documentation..

Basic Usage

ExperimentalOrderMeta is a fill that will render in a slot below the Order summary section in the Cart and Checkout blocks. The ExperimentalOrderMeta will automatically pass props to its top level child:

• cart which contains cart data
• extensions which contains data registered with ExtendSchema::class in wc/store/cart endpoint
• context, equal to the name of the Block in which the fill is rendered: woocommerce/cart or woocommerce/checkout

const { registerPlugin } = wp.plugins;
const { ExperimentalOrderMeta } = wc.blocksCheckout;

const MyCustomComponent = ( { cart, extensions } ) => {
	return <div className="my-component">Hello WooCommerce</div>;
};

const render = () => {
	return (
		<ExperimentalOrderMeta>
			<MyCustomComponent />
		</ExperimentalOrderMeta>
	);
};

registerPlugin( 'my-plugin-namespace', {
	render,
	scope: 'woocommerce-checkout',
} );

registerPlugin

In the above example, we're using registerPlugin. This plugin will take our component and render it, but it won't make it visible. The SlotFill part is the one responsible for actually having it show up in the correct place.

You use registerPlugin to feed in your plugin namespace, your component render, and the scope of your registerPlugin. The value of scope should always be woocommerce-checkout.

Requirements

For this to work, your script must be enqueued after Cart and Checkout. You can follow the IntegrationInterface documentation for enqueueing your script.

---

We're hiring! Come work with us!

🐞 Found a mistake, or have a suggestion? Leave feedback about this document here.