2.5 KiB
Frontend notices
Table of contents
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'
);