Hello everyone! I'm new to Shopify app development. I'm working on building an embedded app using vanilla javascript and App Bridge. I've followed the Shopify tutorials and looked at previous topics however I can't even get a Toast or TitleBar to show up. I'm using the development version of the script and my app is installed on a test store.
Url I'm looking at: https://y****.myshopify.com/admin/apps/test-app
Code my app backend is returning to be displayed in the iframe:
<head>
<script src="https://unpkg.com/@shopify/app-bridge@1.26.2/umd/index.development.js"></script>
<script>
var AppBridge = window['app-bridge']; // Confirmed this exists
var createApp = AppBridge.createApp;
var actions = AppBridge.actions;
var Redirect = actions.Redirect;
var apiKey = '41d7********ab1d'; // apiKey in app admin
var shopOrigin = 'y*****.myshopify.com'; // domain of store where app is installed (same as the page holding the iframe)
var app = createApp({
apiKey: apiKey,
shopOrigin: shopOrigin
}); // Copnfirmed an app object is created
var TitleBar = actions.TitleBar;
var Button = actions.Button;
var Toast = actions.Toast;
var breadcrumb = Button.create(app, {label: 'My breadcrumb'});
breadcrumb.subscribe(Button.Action.CLICK, function () {
app.dispatch(Redirect.toApp({path: '/breadcrumb-link'}));
});
var titleBarOptions = {
title: 'My page title',
breadcrumbs: breadcrumb
};
var myTitleBar = TitleBar.create(app, titleBarOptions); // No errors, but nothing happens
Toast.create(app, {
duration: 1000,
message: 'Hi! (quickly)'
}); // No errors, but nothing happens
</script>
</head>
...
If I make obvious mistakes like to change the shopOrigin or put some bad parameters here and there I do see errors. However, the code above produces no errors and also no effects. I don't see errors if I change the apiKey which smells like trouble, but I can't really figure out what's wrong.
Any help appreciated!
