Shopfront Embedded Bridge Components

Button

This will create a button to display in the POS. This is only ever used when an event expects a Button as the return value.

Constructor

Field	Type	Description
label	string	The label to show on the button
icon	string?	The icon to show before the label on the button (we force a size of 40px x 40px)

import { Button } from "@shopfront/bridge";

const button = new Button(label, icon);

Methods

addEventListener

This will add an event listener to the button.

Arguments

Field	Type	Description
event	string	The event to listen for (see below)
callback	(data) => void	The callback to call when the event is fired (see below for data description)

Returns

• void

Supported Events

• click

Field	Type	Description
from	string	The location where the button was clicked (e.g. ORDER_VIEW)
user	string	The ID of the user who clicked the button
id	string?	The ID of the resource that was clicked where applicable

button.addEventListener("click", (data) => {
    if(data.user === "123456") {
        // Perform action
    }
});

removeEventListener

This will remove an event listener that was previously added to the button.

Arguments

Field	Type	Description
event	string	The event that was registered
callback	(data) => void	The function that was registered to be called

Returns

• void

const listener = () => {};
button.addEventListener("click", listener);
button.removeEventListener("click", listener);

Redirect

This will redirect the user to the provided address. This is made up of two classes, Redirect.Internal and Redirect.External, both of them accept the same arguments, however you can only use Redirect.Interal when you are redirecting to another page within Shopfront and you can only use Redirect.External when you are redirecting out of Shopfront.

Constructor

Field	Type	Description
to	string or URL	The address to redirect to. If you are using Redirect.Internal this must be a string, if you are using Redirect.External this must be a URL

import { Redirect } from "@shopfront/bridge";
const redirect = new Redirect.Internal("/products");
application.send(redirect);

Toast

This will show a temporary message at the top of the screen, normally used to indicate success or an error.

Constructor

Field	Type	Description
type	string	The type of toast to show (see below)
message	string	The message to show on the toast

type

• success
• info
• warning
• error

import { Toast } from "@shopfront/bridge";
const toast = new Toast("success", "The integration was successful");
application.send(toast);

Dialog

This will display an interactive dialog to the user. There is currently no restrictions on when a dialog can be displayed. However this may change in the future to only be on certain events or on user interaction.

Constructor

Field	Type	Description
type	string	The type of dialog to show (see below)
closable	boolean	Whether the dialog is closable by pressing the escape button on the keyboard or clicking in the background
header	string	The header of the dialog
content	string	The HTML content of the dialog
buttons	Array<Button>	The buttons to display on the dialog

type

• success
• information
• question
• danger
• warning
• error
• edit
• frame (this is a special type that is larger and hides the header and buttons)

import { Dialog } from "@shopfront/bridge";
const dialog = new Dialog("error", true, "Invalid Data", "<p>The data provided was invalid</p>", new Button("OK"));
application.send(dialog);

Methods

addEventListener

This will add an event listener to the dialog.

Arguments

Field	Type	Description
event	string	The event to listen for (see below)
callback	(data) => void	The callback to call when the event is fired (see below for data description)

Returns

• void

Supported Events

• close

Field	Type	Description
how	string	How the dialog was closed (see below)

how

• button
• escape
• background

dialog.addEventListener("close", (data) => {
    if(data.how === "button") {
        // Perform action
    }
});

removeEventListener

This will remove an event listener that was previously added to the dialog.

Arguments

Field	Type	Description
event	string	The event that was registered
callback	(data) => void	The function that was registered to be called

Returns

• void

const listener = () => {};
dialog.addEventListener("close", listener);
dialog.removeEventListener("close", listener);