Actions

Shopify App Bridge introduces a new concept of actions. An action provides a way for applications and hosts to trigger events with a payload.

The code examples in this section all assume you’re using modular JavaScript patterns. If you are instead using the CDN-hosted version of Shopify App Bridge, you can achieve the same results by replacing imports with objects on the window['app-bridge'] global.

Instead of:

import { TitleBar } from '@shopify/app-bridge/actions';

Use:

var AppBridge = window['app-bridge'];
var actions = AppBridge.actions;
var TitleBar = actions.TitleBar;

All other example code should function as-is.

Simple actions

Simple actions can be dispatched by both hosts (e.g. the Shopify admin or Shopify POS) and apps. Here is an example of a simple action in an app:

import createApp from '@shopify/app-bridge';
import { Redirect } from '@shopify/app-bridge/actions';

const app = createApp({
  apiKey: '12345',
  shopOrigin: shopOrigin
});

// App dispatches a remote redirect action
app.dispatch(
  Redirect.toRemote({
    url: 'http://example.com'
  })
);

Action sets

Action sets are grouped simple actions created and used by apps. They are generated with a unique ID and provide the additional capability for apps to subscribe directly to them. They can be thought of as a persisted set of actions that can be dispatched/subscribed to at any time. Here is an example of a Toast action set:

import createApp from '@shopify/app-bridge';
import { Toast } from '@shopify/app-bridge/actions';

const app = createApp({
  apiKey: '12345',
  shopOrigin: shopOrigin
});

const toastOptions = {
  message: 'Product saved',
  duration: 5000
};

const toastNotice = Toast.create(app, toastOptions);
toastNotice.subscribe(Toast.Action.SHOW, data => {
  // Do something with the show action
});

toastNotice.subscribe(Toast.Action.CLEAR, data => {
  // Do something with the clear action
});

// Dispatch the show Toast action, using the toastOptions above
toastNotice.dispatch(Toast.Action.SHOW);