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