woocommerce/plugins/woocommerce-blocks/docs/internal-developers/block-client-apis/notices.md

Frontend notices

Table of contents

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

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.

import { StoreNoticesContainer } from '@woocommerce/blocks-checkout';

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

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.

import { dispatch } from '@wordpress/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'
);

SnackbarNoticesContainer

To display snackbar notices, use the SnackbarNoticesContainer component. This component is rendered with the Cart and Checkout blocks, so there is no need to add another. The context it displays notices for is default. If, for some reason you do need to show snackbar messages for a different context, you can render this component again and pass the context as a prop to the component.

import { SnackbarNoticesContainer } from '@woocommerce/base-components/snackbar-notices-container';

const AlternativeSnackbarNotices = () => {
	return (
		<SnackbarNoticesContainer context="wc/alternative-snackbar-notices" />
	);
};