Contextual Save Bar
The contextual save bar tells merchants their options once they have made changes to a form on the page. This component is also shown while creating a new object like a product or customer. Merchants can use this component to save or discard their work.
Create an app and import the
ContextualSaveBar module from
@shopify/app-bridge/actions. Note that we'll be referring to this sample application throughout the examples below.
Create and show
Generate a contextual save bar and make it visible:
You can modify the options at any time. If the contextual save bar is visible, the UI will be updated immediately.
Dispatch a hide action when you want to hide the contextual save bar.
Subscribe to Discard and Save
Subscribe to the contextual save bar actions (
ContextualSaveBar.Action.SAVE) by calling
subscribe method returns a method that you can call to unsubscribe from the action.
To hide the contextual save bar, dispatch a
ContextualSaveBar.Action.HIDE action in the subscribe callback.
unsubscribe to remove all current subscriptions on the contextual save bar: