Contextual Save Bar

The contextual save bar provides merchants with options to save or discard their modifications to a form on the page once they have completed the changes. Additionally, this component is displayed during the creation of new objects, such as products or customers.

Setup

Create an app at entry file.

javascript

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

app.init();

Display

Show or hide a contextual save bar.

javascript

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.

javascript

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
  }
});