Using App Bridge with vanilla javascript

yavormilchev
Shopify Partner
3 0 0

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!

Replies 5 (5)

policenauts
Shopify Partner
206 10 65

Did you build this as a 'private app' by chance? App Bridge will only work as a custom or public app. 

You're not using Google Apps Scripts are you? I've had trouble getting App Bridge to work in that setting. 

The only other idea I have is, does anything change if you import this instead?  <script src="https://unpkg.com/@shopify/app-bridge@1.25.0"></script>

yavormilchev
Shopify Partner
3 0 0

It's a public app, but unlisted at this time since I'm in the process of developing it.

Not using Google Apps Scripts or anything else, just pasting the code from the tutorial on the page produced by the app backend.

I tried the lower version, no change. No errors, but app bridge isn't modifying the title bar, not making a toast.

CaveDiver
Shopify Partner
17 0 6

Hi ,

Did you ever find the answer to this issue.

I'm new to Shopify and had the same problem.  So I copied your code into an HTM file as the src for an iframe in a new page in my dev store.
Following is all there is in that page.

 

<iframe src="https://xxxxxxxxxxxx.ngrok.io/mytest/ShopifyAppBridgeTest.htm" title="iFrame Test" height="800px" width="1000px"></iframe>

 

Same results as you described.

Then I tried typing this in the browser address bar...
localhost/mytest/ShopifyAppBridgeTest.htm
and it worked.

Then I made an HTM file named ShopifyiFrameTest.htm with the following...

 

<!DOCTYPE html>
<html>
<body>
	<iframe src="ShopifyAppBridgeTest.htm" title="iFrame Test" height="800px" width="1000px"></iframe>
</body>
</html>

 

...and typed http://localhost/mytest/ShopifyiFrameTest.htm in the browser address bar.
It did not work.

Why does it not work in an iframe?

CaveDiver
Shopify Partner
17 0 6

Then I tried typing this in the browser address bar...
localhost/mytest/ShopifyAppBridgeTest.htm
and it worked.

Actually, this did not work as intended.
It displayed the desired effects but it did so in the store Admin page.
I need to be able to display content from our site in a shopper-facing page in an online store - NOT the Admin page.

It's starting to look like that is not possible.

Sanjay-Makwana
Shopify Partner
29 0 3

@yavormilchev   Have you find the solution.