Shopify App Bridge

Shopify Staff
Shopify Staff
176 7 38

Here's a very simple example, creating a button on the title bar and a flash notice using App Bridge from a CDN. If you're testing this with your own app, make sure to replace my API key with your own.

We'll be adding more examples like this to docs in the coming days — but I wanted to get something up now to show that you can use App Bridge in the same way that you used the EASDK.
 

<!doctype html>
<html lang="en">
  <head>
    <title>Shopify App Bridge</title>
    <script src="https://unpkg.com/@shopify/app-bridge@0.8.2/index.js"></script>
    <script src="https://unpkg.com/@shopify/app-bridge@0.8.2/actions.js"></script>
    <script>
      var createApp = window['app-bridge']['default'];
      var getShopOrigin = window['app-bridge']['getShopOrigin'];

      var app = createApp({
        apiKey: '46f2c70aa5fd848bb7c67c0fd9f6045f',
        shopOrigin: getShopOrigin(),
	  });
	</script>
  </head>
	<body>
		<script>
			var actions = window['app-bridge']['actions'];
			var TitleBar = actions.TitleBar;
			var Button = actions.Button;
			var Flash = actions.Flash;

			var button = Button.create(app, {label: 'Trigger flash'});
			var flashOptions = {
				message: 'Flash message triggered',
				duration: 5000,
				isDismissible: true,
			};
			var flash = Flash.create(app, flashOptions)

			TitleBar.create(app, {
				title: 'This is a test title bar',
				buttons: {
					primary: button,
				},
			});

			button.subscribe(Button.Action.CLICK, data => {
				flash.dispatch(Flash.Action.SHOW);
			});
			
		</script>

		<p>
			Flash and title bar test
		</p>

	</body>
</html>

 

5 Likes
Shopify Expert
49 0 17

Thank you. Examples like this are 100% appriciated. 

0 Likes
Shopify Partner
26 0 8

Yes, Thanks Shayne, this example is extremely helpful!

1 Like
Excursionist
79 0 9

So did ShopifyApp.Modal.input() get deprecated from the EASDK tools? It stopped working about the time you folks launched this and is no longer listed in any documentation either, but it definitely used to exist.

0 Likes
Shopify Partner
660 0 104

Shopify has a wonderful capability called development stores.

IMO releases that potentially break stuff should be first pushed to dev stores only, until Shopify Partners get a chance to test it out and find issues. Ideally a feature toggle button would allow us to help you by isolating bugs relating to a specific new feature.

That sounds like a good strategy. Why does Shopify insist on pushing straight to real stores?

3 Likes
Tourist
10 0 5

The new SDK is breaking my app. Pagination now only occasionally functions and certain page loads from the embedded app buttons end up pointing to the wrong location. Who do I contact to elevate this issue? This app was fully functional for 3 years prior without issues.

0 Likes
Tourist
8 0 2

We are reporting a new bug:

After opening an app that has buttons in the top bar in admin panel and then an app that doesn’t add any buttons, we can see the first app buttons in the second app.

Tested on Firefox 62, Linux in dev store

0 Likes

EDIT: Disregard this, I see it does do it correctly... just my paths were incorrect :/

Hey Shayne,

I'm setting up the new Navigation Menu for my embedded apps, and just wondering how I se the initial navigation as active when the app loads.

For example, I have 2 navigation items in the top menu:

1. Email themes (path: /templates)
2. Analytics (path: /analytics)

When people arrive into my app, they automatically come to the Email Themes (/templates) page, however the navigation item does not indicate this. How do I get Email Themes to have the active styling on load? My expectation would be that it "knows" the Email Themes item should be active automatically, based on the path of the navigation item matches the current path.

Any tips you can give would be much appreciated.

Many thanks,
Bjorn

Bjorn Forsberg | FORSBERG+two | Award-winning Shopify Apps since 2011
0 Likes
Shopify Partner
40 0 9

SUGGESTION

How about a beta testers program? 

Each development store will be able to enable a "Beta tester" section that will allow the store to get all the new beta features you are planning to rollout and test it on that store.

  1. the section will have a list of specific Beta features that can be toggled off and on to make sure issues are related specificly to one feature
  2. The section can be toggled off and on (default to off), so developers who are developing a store for a customer can continue doing the same without changing anything.
  3. The section will also contain a bug report system for each feature, this allows you to set a specific form of report to each feature, and get the exect data you need from the store owner for each report, this will reduce the amount of support emails and chats developers need to do to report a bug or get help.
  4. If the Beta tester section is on, you can't deliver the store to a customer and make it live as some beta features will not work and might break the store, this makes sure that breaking changes stays in development time and doesn't go live.

PROS:

  • You will have beta testers that can actually test new features for real life situations and report to you bugs that you might never see, without the need of them to contact a specific person inside shopify.
  • You will be able to handle the reports as you see fit inside shopify internal network, without the need of this forum or any other method you used so far.
  • This will eliminate situtations like this forum post shows.
  • This is an easy thing to build and doesn't require that much of developing (development stores have a new section in settings, when the section turned on it shows beta features including links to the docs of the feature, each feature can be toggleed (looks like it is already built by Shayne comments), each feature have a link to a bug report form that sends shopify an email with the content of it).
  • This will allow us to report bugs directly to the developers without the need for them to answer us.
  • You can contact the Beta testers directly and ask them about new features you are planning, there is nothing better then feedback from real users!
  • You can enable this section only to selected group of partners and experts, but the group need to be big enough for this to be effective.

CONS:

  • This will require some time to work on it, but the time is low compured to the benefit.
  • This will add some sort of spam, can be evoided by a bug report limits per day, or captcha, and its not any different from your apps@shopify.com emails.
  • New features will take more time to be rolledout because they will need this extra beta phase, I think a month is enough time for testing a new feature, and the feature can still be left in the Beta testers program a month after the rollout to allow us report bugs that been missed some how.

As far as I can see this suggestion have a potential to make sure that shopify won't have another case like the app bridge case, I think with the new Beta testers section this thread could be avoided.

0 Likes
Shopify Partner
2 0 0

Hi there,

I am wondering why the menu items have to be created via the app set up? With the buttons we are able to create this on the fly. I have menu items which I'd like to show and hide based upon permissions/plans so it would have been super helpful if I could have passed an array or similar to create the menu.

Do you ever see this being an option?

Thanks,

Alex

0 Likes