slot-fills.md

📣 Announcement: New documentation location

The documentation for WooCommerce Blocks has moved to the WooCommerce monorepo.

Please refer to the documentation in the new location as the files in this repository will no longer be updated and the repository will be archived.

---

Slot and Fill

Table of Contents

• The problem
• Solution
• Basic Usage
• registerPlugin
• Requirements

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.