Save Bar

The Save Bar API is used to indicate that a form on the current page has unsaved information. It can be used in 2 ways:

It is automatically configured when you provide the data-save-bar attribute to a form element and will display the save bar when there are unsaved changes. The submit event fires when the form is submitted or when the Save button is pressed. The reset event fires when the form is reset or when the Discard button is pressed, which discards all unsaved changes in the form.
It can be controlled declaratively through the ui-save-bar element. For more information, refer to the ui-save-bar component.

Anchor to savebarsaveBar

The saveBar API provides a show method to display a save bar, a hide method to hide a save bar, and a toggle method to toggle the visibility of a save bar. These are used in conjunction with the ui-save-bar element. They are alternatives to the show, hide, and toggle instance methods.

Anchor to leaveConfirmation leaveConfirmation () => Promise<void> required: Show leave confirmation dialog if necessary. This promise is resolved when there is no visible save bar or user confirms to leave.
Anchor to hide hide (id: string) => Promise<void>: Hides the save bar element. An alternative to the hide instance method on the ui-save-bar element.
Anchor to show show (id: string) => Promise<void>: Shows the save bar element. An alternative to the show instance method on the ui-save-bar element.
Anchor to toggle toggle (id: string) => Promise<void>: Toggles the save bar element visibility. An alternative to the toggle instance method on the ui-save-bar element.

Was this section helpful?

Save Bar

<form

data-save-bar

onsubmit="console.log('submit', new FormData(event.target)); event.preventDefault();"

>

<label>

Name:

</label>

</form>

Examples

Save Bar

Default

<form
  data-save-bar
  onsubmit="console.log('submit', new FormData(event.target)); event.preventDefault();"
>
  <label>
    Name:
    <input name="username" />
  </label>
</form>

Preview

Anchor to examplesExamples

Save bar options, variations, and events

Anchor to example-save-bar-configured-through-the-data-save-bar-attributeSave bar configured through the data-save-bar attribute

Anchor to example-showing-the-save-bar-with-the-savebar-apiShowing the save bar with the saveBar API

Showing the save bar with the saveBar API

Was this section helpful?

Subscribe to Discard

<form

data-save-bar

onreset="console.log('discarding')"

>

<label>

Name:

</label>

</form>

Examples

Subscribe to Discard

Description

Subscribing to the [`HTMLFormElement: reset`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset_event) event

Event handler property

<form
  data-save-bar
  onreset="console.log('discarding')"
>
  <label>
    Name:
    <input name="username" />
  </label>
</form>

Event listener

<form data-save-bar>
  <label>
    Name:
    <input name="username" />
  </label>
</form>

<script>
  const form = document.querySelector('form');
  form.addEventListener('reset', (e) => {
    console.log('discarding');
  });
</script>

Subscribe to Save

Description

Subscribing to the [`HTMLFormElement: submit`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset_event) event

Event handler property

<form
  data-save-bar
  onsubmit="console.log('submitting');"
>
  <label>
    Name:
    <input name="username" />
  </label>
</form>

Event listener

<form data-save-bar>
  <label>
    Name:
    <input name="username" />
  </label>
</form>

<script>
  const form = document.querySelector('form');
  form.addEventListener('submit', (e) => {
    console.log('submitting');
  });
</script>

Showing a discard confirmation modal
Description
Provide the `data-discard-confirmation` attribute to a `form` with the `data-save-bar` attribute to show a confirmation modal after the user clicks the Discard button of the save bar
HTML
```
<form
  data-save-bar
  data-discard-confirmation
  onsubmit="console.log('submit', new FormData(event.target)); event.preventDefault();"
>
  <label>
    Name:
    <input name="username" />
  </label>
</form>
```

Showing the save bar with the saveBar API

Description

Showing the save bar with the saveBar API

Default

<ui-save-bar id="my-save-bar"></ui-save-bar>

<button onclick="shopify.saveBar.show('my-save-bar')">Show</button>
<button onclick="shopify.saveBar.hide('my-save-bar')">Hide</button>