notices.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.

---

Frontend notices

Table of contents

• Notices in WooCommerce Blocks
  • StoreNoticesContainer
• Snackbar notices in WooCommerce Blocks

Notices in WooCommerce Blocks

WooCommerce Blocks uses the @wordpress/notices package to display notices in the frontend. For more information on the actions and selectors available on this data store, please review the @wordpress/notices documentation

StoreNoticesContainer

To display notices of a certain context, use the StoreNoticesContainer and pass the context as a prop to it.

The below example will show all notices with type default that are in the wc/cart context. If no context prop is passed, then the default context will be used.

On the Cart Block, a StoreNoticesContainer is already rendered with the wc/cart context, and on the Checkout Block, a StoreNoticesContainer is already rendered with the wc/checkout context. To display errors from other contexts, you can use the StoreNoticesContainer component with context passed as a prop.

StoreNoticesContainer also support passing an array of context strings to it, this allows you to capture several contexts at once, while filtering out similar notices.

Single context

const { StoreNoticesContainer } = window.wc.blocksCheckout;

const PaymentErrors = () => {
	return <StoreNoticesContainer context="wc/payment" />;
};

Multiple contexts

const { StoreNoticesContainer } = window.wc.blocksCheckout;

const AddressForm = () => {
	return (
		<StoreNoticesContainer
			context={ [
				'wc/checkout/shipping-address',
				'wc/checkout/billing-address',
			] }
		/>
	);
};

Snackbar notices in WooCommerce Blocks

WooCommerce Blocks also shows snackbar notices, to add a snackbar notice you need to create a notice with type:snackbar in the options object.

const { dispatch } = window.wp.data;

dispatch( 'core/notices' ).createNotice(
	'snackbar',
	'This is a snackbar notice',
	{
		type: 'snackbar',
		actions: [
			{
				label: 'Dismiss',
				onClick: () => {
					dispatch( 'core/notices' ).removeNotice(
						'snackbar-notice-id'
					);
				},
			},
		],
	},
	'snackbar-notice-id'
);