AppsThemesSupport

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.

Setup

Create an app at entry file.

// Embed App entry file
import { app } from 'shoplazza-app-bridge';

app.init();

Show and hide

Show or hide a contextual save bar.

import { contextualSaveBar } from 'shoplazza-app-bridge';

contextualSaveBar.show();
contextualSaveBar.hide();

Update options

You can modify the options at any time. If the contextual save bar is visible, the UI will be updated immediately.

contextualSaveBar.setSaveAction({
  type: 'primary',
  disabled: false,
  loading: false,
  text: 'Save',
  onClick: () => {
    // Do somethings
  }
});
contextualSaveBar.setDiscardAction({
  type: 'default',
  disabled: false,
  loading: false,
  text: 'Cancel',
  discardConfirmationModal: true,
  onClick: () => {
    // Do somethings
  }
});