d
Topic
Shayne Developer Experience
Posts:
137
Last edited 25 days ago
g
2
upvotes

Shopify App Bridge

App Bridge rollout meter : 100%

Revised Launch Date : Thursday, November 8th, 2018.


We’re excited to announce that we're launching a new way for apps and channels to be embedded directly into the Shopify admin, including Shopify mobile and POS. This new library is called Shopify App Bridge. This consolidated tooling brings together the functionality previously provided by the Embedded App SDK and the POS App SDK and makes building and testing embedded apps easier through:

  • Modern development workflows (npm, TypeScript support, and more!)

  • Support for Redux DevTools

  • More and better error reporting

  • Strict versioning using semver

 

This update is currently being rolled-out to all current consumers of the EASDK, and since it’s backwards compatible, no new work is needed to get it set-up. It’ll also be available as open source on GitHub soon as well.

The titlebar has had a much needed redesign, adding extra space for future features and separating primary actions from secondary (screenshot below).

Embedded apps using App Bridge will also be able to access a new navigation menu builder, available as a new app extension in the Partners dashboard.

These improvements will help cut down your development time and ensure your app renders consistently across platforms—desktop, mobile, and Shopify POS.

For more information, please check out the docs here.

EDIT: 
Some people have been emailing in asking about the why of these changes, specifically the change to the title bar structure. 

We're working towards a future that includes more titlebar actions, with deeper, more extensible connections into the product. Offering support, leaving reviews, and a ton of other ideas are on the table. The old title bar just didn't give enough space to offer the kind of improvements that we're working on, so it made sense to release it with App Bridge.

The only method that was removed was ShopifyApp.Modal.input, due to it's exceptionally low use (only 77 total clients). In it's place, iFrame Modals can be used,

We're always looking for feedback; post it in the forums, or email us and we can set up a call — we're happy to talk about the future of the platform and want to make sure your voice is heard.

i
Replies
Posts:
31
about 1 month ago

Hi Shayne,

Is it possible that this change is causing some issues for EASDK users?

Our app was working fine until this was rolled out and now every page seems to be loaded twice. The user experience is really horrible.

Also I read other app developers are reporting issues with query parameters not being passed correctly (see https://ecommerce.shopify.com/c/shopify-apis-and-technology/t/embedded-app-modals-not-passing-query-strings-548093). Could this be related?

Regards,

Bart

Shayne Developer Experience
Posts:
137
about 1 month ago

Hey Bart,

The fix for query parameters is on the way.

I'm not seeing the "double loading" issue that you mentioned though, feel free to email support with a screencast if you're still seeing it, and we'll do our best to resolve the problem with you.

Posts:
3
about 1 month ago

I am also getting the same issue and caused many uninstalls from my app.

Posts:
71
about 1 month ago

I notice that as well. From my tests, it happened when clicked on buttons placed on the ShopifyApp Bar

SimplyCost - Add costs and track profit (https://apps.shopify.com/simplycost)
Posts:
6
about 1 month ago

Hi,

We are getting the double page loads too since the upgrade. As Zapfor Solutons says, it only happens on links from with the ShopifyApp Bar.

Also, I have noticed there is a deprecated warning on the EASDK page now. Is there a time frame for how long the EASDK apps will carry on working for?

Thanks

Andrew.

Shayne Developer Experience
Posts:
137
about 1 month ago

The last thing that we want to do is cause any uninstalls or negavite reviews for your apps.

That being said, we've rolled back the launch so that we can get the bugs that slipped through the cracks fixed.

Thanks for the reports, keep an eye on this thread for when we're going live again.

Posts:
3851
about 1 month ago

The big thing you did was cause a lot of your Plus Merchants to lose a lot of patience and money. If only you heard what I heard from YOUR customers, about this mistake. Since they called Shopify to complain, and Shopify Gurus has NO CLUE about this, they deferred that the problem must lie with Apps. 

And to boot, it continues. I am not seeing any fix for broken query string parameters to Apps processing tens of orders per minute.  

I do hope you are aware of this, and working on a fix. Thanks for bridge!!

 

 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Shayne Developer Experience
Posts:
137
about 1 month ago

Hey Dave,

Which change are you talking about specifically? If you're seeing any issues other than the missing query string parameters, either post it here or send us an email and we'll get it sorted ASAP.

Posts:
3851
about 1 month ago
g
1
upvotes

It is a Query String parameter problem, suspiciously starting when you released Bridge. I am seeing when you gather ID's to send to Apps, you now have them styled as parameters ids[][]=123456789 which completely trashes all previous App codes. 

Sorry for confusing issues but the timing is too coincidental. And when I read complaints about Query Parameters in EASDK, well, you know... connections are made... so ya... and if you have in fact rolled back ALL aspects of Bridge, the fact is, the transfer of ID's to Apps is still pooched and causing mucho aggressive pain for merchants.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Shayne Developer Experience
Posts:
137
about 1 month ago

It is a Query String parameter problem, suspiciously starting when you released Bridge. I am seeing when you gather ID's to send to Apps, you now have them styled as parameters ids[][]=123456789 which completely trashes all previous App codes. 

Sorry for confusing issues but the timing is too coincidental. And when I read complaints about Query Parameters in EASDK, well, you know... connections are made... so ya... and if you have in fact rolled back ALL aspects of Bridge, the fact is, the transfer of ID's to Apps is still pooched and causing mucho aggressive pain for merchants.

Believe it or not, that's an unrelated issue with unfortunate timing — we're working on it.

Posts:
2
about 1 month ago
g
4
upvotes

I'm curious if we're able to avoid implementing the changes to the navigation bar from this recent update as they make for what appears like a broken layout, pushing secondary buttons to the left with the single primary button to the right? This is not how Shopify admin pages (and most forms) work, coupling Save/Cancel buttons next to each other on the right. I'm excited for possibility of adding tabs to this new navigation bar, but want to avoid using it until it's available to us.

I'm also disappointed such a visual change like that wasn't documented anywhere; it's an unpleasant surprise.

Posts:
3851
about 1 month ago

Second that. In seeing the New Look it is an experiment run amok. Would be nice if Shopify resisted change for change sake, and spent more time working from their perspective combined with testing things from our perspective, all without changing things until we collectively hit a GO button. 

As per the new corporate Shopify, running the show, putting us in our place, it sucks to be part of corporate experiments that are half-baked, not tested, and had little or no input from us, the end users/creators/artists/developers that Shopify now seems to pretend to love. 

 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Posts:
3
about 1 month ago

I hope this will be fixed soon, I talked to developer support over email, but they are bhaving like there is nothing wrong from their side, they says you should check your app code and fix the issue.

Seller Panda Shopify Partner sellerpanda.com
Posts:
40
Last edited about 1 month ago
g
1
upvotes

I had the query issue with 2 of my apps last week, after talking with support guru they said it was rolled back 2 days after our talk, and the apps were working again, yesterday i tried to implement the new app bridge library into my test app, but for some reason nothing was working, its like the parent shopify window doesn't receive the post messages.

Any update on this? what is working or what is not?

 

https://ecommerce.shopify.com/c/partners-technical/t/app-bridge-doesn-t-work-548432

 

P.S 

Can you update the docs if something i not working? not everyone sees those forums posts, and also Shayne post said that and i almost missed that even after readying every post, the Shopify guru doesn't know anything about it (or takes few days untill they get back to you with the answer), so how can we know things like that?

Posts:
3851
Last edited about 1 month ago
g
4
upvotes

A brief test shows Shopify changed everything back to the way it was for ten years or so, in terms of links to Apps and the Query Parameters. To me the problem this issue exposed is clear:

  • No one at Shopify sent out a letter saying things are busted
  • When we pointed out things were busted, they denied for the most part
  • When they finally acknowledged things were busted, they still never clarified why, for how long or when a fix would be done
  • they fixed the bug, but again never told anyone, when, nor what happened there

So in the end, a lot of merchants got steamed, lost some time/reputation as did developers. 

Is there some kind of recognition here from Shopify that treating merchants and developers so poorly is something you are trying to improve upon? So far, no happy smiley faces can be clicked.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Seller Panda Shopify Partner sellerpanda.com
Posts:
40
Last edited about 1 month ago

BTW, the app bridge library is now partly working, and they have rolled the new style for most of my apps (3 out of 5),

With the new app bridge the TitleBar does work for me but the flash messages doesn't, I guess we have to keep our eyes on shopify new features and check daily to see if our apps are still working as expected and nothing was changed.

Posts:
6
about 1 month ago
g
1
upvotes

Hi,

The problem with the pages loading twice still happens with the updated roll out.

Only happens with the links / buttons within the title bar section.

Andrew.

Posts:
31
about 1 month ago

We're observing the same problem as Andrew.

Posts:
3851
about 1 month ago

It is a little unsettling being guinea pigs. Sometimes the canary in the coal mine died ;)

 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Shayne Developer Experience
Posts:
137
about 1 month ago

Hey everyone — thanks for sticking with us through this one. It's an incredibly complicated launch from our side. There's a ton of legacy code that we're trying to keep supporting, but everything on the backend has been rewritten from scratch.

We're back at 0% rollout for the weekend, and any further rollouts will be posted here.

I'm going to address every concern that I can. If I miss anything, reply, and I'll answer. My personal email is shayne@shopify.com if anyone wants to have a longer form discussion.

Now, onto everyone's comments.


I'm curious if we're able to avoid implementing the changes to the navigation bar from this recent update as they make for what appears like a broken layout, pushing secondary buttons to the left with the single primary button to the right? This is not how Shopify admin pages (and most forms) work, coupling Save/Cancel buttons next to each other on the right. I'm excited for possibility of adding tabs to this new navigation bar, but want to avoid using it until it's available to us.

Since we've already got a call coming up to talk about these changes Luke, I'm going to loop in a designer who worked on the change and a Senior PM so that we can work through your feedback (and suggestions) together.

 

As per the new corporate Shopify, running the show, putting us in our place, it sucks to be part of corporate experiments that are half-baked, not tested, and had little or no input from us, the end users/creators/artists/developers that Shopify now seems to pretend to love. 

I've always valued your input HunkyBill, and would love to hop on the phone or get an email thread going to make sure that we can act on your feedback. If you want, you can even swing by the office for lunch, I'd love to talk about this stuff in person. Email me if you want to set it up.

 

I hope this will be fixed soon, I talked to developer support over email, but they are bhaving like there is nothing wrong from their side, they says you should check your app code and fix the issue.

Developer Support is aware of the issues. If you're able to forward the relevant thread to me, I'll verify that you're going through the correct support channels. If somehow you ended up in general escalated support, I could see you getting a response like this.

 

I had the query issue with 2 of my apps last week, after talking with support guru they said it was rolled back 2 days after our talk, and the apps were working again, yesterday i tried to implement the new app bridge library into my test app, but for some reason nothing was working, its like the parent shopify window doesn't receive the post messages.

Any update on this? what is working or what is not?

Currently, we're rolled back to 0%. We don't want anyone to have to deal with broken apps over the weekend, and we realize that there are still a couple of bugs affecting some people. From now on, you can consider this forum post to be the source of truth for rollout. I'll edit my original post when we start pushing it out again.

 

  • No one at Shopify sent out a letter saying things are busted

As soon as we noticed that there were unaddressed bugs, we rolled back the launch. What we should have done after that was notified developers who were affected by the bug. Not doing that was a mistake. We're working to make sure this doesn't happen again.

 

  • When we pointed out things were busted, they denied for the most part

This was absolutely not our intention. If you can point out where this happened, we'll be more mindful of it in the future.

 

  • When they finally acknowledged things were busted, they still never clarified why, for how long or when a fix would be done
  • they fixed the bug, but again never told anyone, when, nor what happened there

I'm doing my best to rectify that with this thread, but I agree that there could have been more transparency. We'll work on this, we've set up a meeting internally to standardize these type of announcements and bug reports. Once App Bridge goes open source, this will be a lot easier to manage.

 

With the new app bridge the TitleBar does work for me but the flash messages doesn't, I guess we have to keep our eyes on shopify new features and check daily to see if our apps are still working as expected and nothing was changed.

If you can email me your app name and a sample shop where this is happening, we'll fix it.

 

The problem with the pages loading twice still happens with the updated roll out.

Only happens with the links / buttons within the title bar section.

If you (or Bart) can email me your app name and a sample shop, we'll work on this ASAP.

 

 

It is a little unsettling being guinea pigs. Sometimes the canary in the coal mine died ;)

Agreed, and we don't want to kill any canaries. Making the decision to make App Bridge fully backward compatible was a hard one. It took a ton of extra work, but that work was only worth it if everyone's canaries are still alive (and their apps are still working).

 

Again, I want to thank everyone for their feedback. Feel free to email me if you have any comments that you don't want to publicly post, and I'll respond right away.

Shayne Developer Experience
Posts:
137
about 1 month ago

Also — if anyone wants me to roll out the change to a specific shop for testing, email me and I'll apply a flag to the store so that you can test the new feature set.

Posts:
31
about 1 month ago

Hi Shayne,

Thanks for the update and transparency. It has been quite a struggle to get our app (Discount Ninja) to work properly in the last few days due to the issues with navigation and the changes thereof. It caused us to rework and redeploy the app three times. Not what you're looking for when your app is being featured on the homepage!

I'll be sending you a private message via email with further info.

Regards,
Bart

Posts:
226
about 1 month ago

Hey Shayne,

I've love to have this beta activated on one of my dev sites, to test and provide feedback. Could you please do it for yost-tromp6906.myshopify.com ?

Many thanks!

Bjorn

Bjorn Forsberg | FORSBERG+two | Award-winning Shopify Apps since 2011
Posts:
29
about 1 month ago

Shayne, sorry I can't find your email address to DM. Could you please add small-victories-test.myshopify.com ? Thanks.

— Guille

Posts:
7
about 1 month ago

I just wanted to add to Luke's comment about the header/navigation design. Our apps have "by [our company name]" in the title which makes the new byline completely redundant. I've seen enough partners using a similar naming convention that I think it will be a problem for a lot of app devs. It feels as though the "by company" section in the top right is there just to take up space now that the navigation has moved to the next line.

Again, it isn't clear what we will be able to edit (we're using Polaris's AppProvider and Page component in case that is of any consequence) but we would really like to be able to at least remove the byline if not move the button navigation back up to the same line as the title to save space.

Thanks for your consideration on this stuff, Shayne.

Shayne Developer Experience
Posts:
137
about 1 month ago

I've added the beta for your stores, Bjorn and Guille.

Thanks for the feedback Dan — I'll post any updates to our design decisions here as well.

Shayne Developer Experience
Posts:
137
about 1 month ago

Revised Launch Date : Thursday, November 6th, 2018.

If you want early access today or tomorrow, email me and I will enable it for your store. We're working on a self-serve beta opt-in for these types of launches in the future.

We now also have the capability to delay launch for specific apps or shops if requested. If you want to stay on the legacy EASDK (to give you more time to adapt to the changes), email me at shayne@shopify.com and we will give you what you need.

To all of those who hopped on the phone with me or started private threads, thanks so much for your input on this one. All of the bugs that were discovered during the previous rollout cycle should be resolved.

Posts:
3851
Last edited about 1 month ago

Would be nice if Shopify could spend a few minutes explaining who this Bridge is for. The only words describing it so far are

  • modern (meaning what? For developers under 20 years old?)
  • Redux (why would I care about some Javascript I never use for anything)
  • SemVer... Huh? 

For some of us out there, do we need to care about this bridge at all? Is this some sort of fancy support for the crowd writing Apps with that Polaris library as their only arrow in the quiver? 

Where is there any excitement in this whole Bridge thing you're unloading on us? 

 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
conrad.decker Shopify Expert cdevtech.com
Posts:
37
about 1 month ago

@Shayne Thanks for all of the info. Unfortunately it's really unclear who is truly being affected by this rollout (glad I'm not the only one that feels that way). Can you tell me if this rollout (on what sounds like Thursday) will affect users of the Shopify POS SDK as well? I have customers who have POS apps that are relatively critical to their daily operations. 

Thanks!

Shayne Developer Experience
Posts:
137
about 1 month ago

For some of us out there, do we need to care about this bridge at all? Is this some sort of fancy support for the crowd writing Apps with that Polaris library as their only arrow in the quiver? 

You're going to have more tools at your disposal to look and act like Shopify, with less code to write and better debugging. We added the extra bar at the top so that people can know when they're in an app view, because we're giving away all the tools to start looking pretty much exactly like us.

 

@Shayne Thanks for all of the info. Unfortunately it's really unclear who is truly being affected by this rollout (glad I'm not the only one that feels that way). Can you tell me if this rollout (on what sounds like Thursday) will affect users of the Shopify POS SDK as well? I have customers who have POS apps that are relatively critical to their daily operations. 

You won't be affected! Everything is backwards compatible, you'll just have the option to adopt the newer, better documented library whenever you like after Thursday.

conrad.decker Shopify Expert cdevtech.com
Posts:
37
about 1 month ago

@Shayne Thanks for all of the info. Unfortunately it's really unclear who is truly being affected by this rollout (glad I'm not the only one that feels that way). Can you tell me if this rollout (on what sounds like Thursday) will affect users of the Shopify POS SDK as well? I have customers who have POS apps that are relatively critical to their daily operations. 

You won't be affected! Everything is backwards compatible, you'll just have the option to adopt the newer, better documented library whenever you like after Thursday.

Okay awesome, thanks for confirming Shayne! That was my initial understanding but after reading through this thread, it didn't sound like those expectations were met when the original rollout took place. Just figured I'd ask :) Keeping my fingers crossed all goes smoothly. 

Cheers!

Marc Baumbach Member
Posts:
17
Last edited about 1 month ago
g
1
upvotes

Revised Launch Date : Thursday, November 6th, 2018

Minor suggestion: I imagine this should read Thursday, November 8th, 2018. I initially skipped reading the day of week and thought it might be shipping today. :)

The new bridge changes do sound exciting though, so we're looking forward to taking advantage of these starting Thursday!

Danijel Member
Posts:
20
about 1 month ago
g
2
upvotes

Poor shopify gurus are not equipped to handle product issues at all.

Developers need access to the developement team. 

Seller Panda Shopify Partner sellerpanda.com
Posts:
40
about 1 month ago
g
1
upvotes

I can't agree more with Danijel, I have several apps on shopify store for more then 3 years now, and I still don't know who i should contact with, Chat support gurus simply don't know anything about apps and all they can say is one of those: 

  • I'll get back to you after contacting the actual development team (several days until any response, and usually its "we didn't found any issue on our test stores", but the issue was already fixed without us touching anything)
  • Go look at our resources (which means search the forum, docs or wait for an email which might take 3 days or more)

This Bridge new feature shows perfectly what the issue is, some of my apps were not working for more then 3 days and I had nothing to do, i didn't even know what the issue is, I got an email about it only after the feature was rolled back already.

I would appreciate your comment on this one Shayne, who should developers talk with about bugs on shopify? i know we can send email to apps@shopify but it takes so much time that the issue already get fixed after they get back to us.

If we think Shopify has some kind of a bug and we can't figure out what it is, what is the fastest/best way to contact Shopify about it?

Linh Dam Member
Posts:
1
about 1 month ago

Thanks Shopify for the change, and thanks @Shayne for speaking for me really!

We would like to have more info, @Shayne, on:

  1. You say everything is backwards compatible but also say contact you if we need more time to adapt to the changes. So should we still contact you if we don't want to use the `app-bridge` SDK?
  2. Could you give more installation instructions because the docs is quite vague? We don't use `yarn` (we don't intend to use it for a foreseable future), so how else can we install it? Is there a standalone file without using Yarn (similar to app.js)?
  3. Is there any deprecation timeline for the legacy EASDK?
  4. If possible, is there any screenshot, wireframe or any visible stuff to describe the changes? Because describing UI via plain texts is hard to understand for me.
Posts:
6
about 1 month ago

@Shayne.. has the double loading issue been fixed in the new rollout?

Thanks

Andrew.

Posts:
226
about 1 month ago

Hey Shayne,

Thanks for enabling the beta on my store :) I've been using this today, and wanted to give you a heads up on a couple of issues I've seen:

1) The "Print" functionaltity of buttons added to the top bar no longer works. Examples: The Shopify Order Printer app no longer can call print with the new App Bridge.

I also ran a test on one of my apps, adding the Print button code as outlined in the EASDK documentation here: https://help.shopify.com/en/api/embedded-apps/embedded-app-sdk/features#printing

<script type="text/javascript">
  ShopifyApp.print = function(){
    console.log('Print clicked!');
    window.print();
  }

  ShopifyApp.ready(function(){
    ShopifyApp.Bar.initialize({
      buttons: {
        primary: {
          label: 'Print',
          print: true
        }
      }
    });
  });
</script>

And that does not work either.. I don't get anything logged in the console, so ShopifyApp.print is never being called. You may have a general incompatability issue on that feature.

2) The browser url does not update after the initial loading of the app. I've only tested in Chrome so far, but it seems the navigation history is not being pushed to the browser url. It loads and displays the correct url on login, but any additional page you navigate to does not update the url. No console errors or anything else.. testing with stable apps.

Hope the feedback helps :)

Bjorn

Bjorn Forsberg | FORSBERG+two | Award-winning Shopify Apps since 2011
greg Member
Posts:
2
about 1 month ago

Hi im reading documentaion, about action 'https://help.shopify.com/en/api/embedded-apps/app-bridge/actions', and i completly dont get the host part of ctions, what is host there? Could you please provide some working example? 

Shayne Developer Experience
Posts:
137
about 1 month ago
g
1
upvotes

Minor suggestion: I imagine this should read Thursday, November 8th, 2018. I initially skipped reading the day of week and thought it might be shipping today. :)

Whoops, updated.

 

Developers need access to the developement team. 

We're working on streamlining the support flow between partners and the teams that can help them best. Apps@shopify.com is still the best email to send your questions to, we've recently reallocated resources to more efficiently triage issues into the right hands.

 

  1. You say everything is backwards compatible but also say contact you if we need more time to adapt to the changes. So should we still contact you if we don't want to use the `app-bridge` SDK?
  2. Could you give more installation instructions because the docs is quite vague? We don't use `yarn` (we don't intend to use it for a foreseable future), so how else can we install it? Is there a standalone file without using Yarn (similar to app.js)?
  3. Is there any deprecation timeline for the legacy EASDK?
  4. If possible, is there any screenshot, wireframe or any visible stuff to describe the changes? Because describing UI via plain texts is hard to understand for me.

All of the JS is backwards compatible, but the locations of some buttons and things have moved (example, primary now being right justified). Some apps made really deliberate choices about the UI in their apps based on the left justified primary buttons. If you want to redesign to take advantage of App Bridge, that's when you can take advantage of the delayed launch for your app.

The legacy EASDK won't be deprecated for at least a year, we'll keep you in the loop and let you know as soon as we start moving on that.

I'll update the original post with some screenshots, and make sure that in the future screenshots are a part of any launch that includes updates to UI. Good suggestion. Thanks.

 

@Shayne.. has the double loading issue been fixed in the new rollout?

Yes!

 

Thanks for the reports of bugs Bjorn, we'll take a look ASAP and get back to you.

Posts:
226
about 1 month ago

Hey Shayne,

Found another issue on my test account. The issue is that the new button/nav bar from the previously accessed app is displayed when logging into another app, until the new app is "ready".

Steps to reproduce:

1- Login to any app that adds buttons to the top bar. Wait for the app to finish loading and make note of the buttons shown:


2- Go to Shopify Admin -> Apps
3- Login to any other embedded app
4- You'll notice that while the app is loading up, the buttons from previous app are displayed.

Hope it's useful. I have to admit, it worries me that I've found 3 issues on my beta and I'm not even looking for them.. just stuff I notice as I'm going about my normal business.. and this is rolling out to merchants already :/

Either way,  have a great Friday! :)

Bjorn Forsberg | FORSBERG+two | Award-winning Shopify Apps since 2011
Posts:
7
about 1 month ago

I never got an answer on how to remove the byline with Polaris. It doesn't make any sense in our app.

I understand that there isn't enough room for all the prospective features in one bar but it's clear that the "by Company" text is just there to take up space. It doesn't even link to anything.

If possible, I would like to opt out as well—at least until Polaris v3.0.0 comes out and the documentation is improved.

Posts:
3851
about 1 month ago

Waiting on Polaris, like waiting on Godot.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Shayne Developer Experience
Posts:
137
about 1 month ago

I understand that there isn't enough room for all the prospective features in one bar but it's clear that the "by Company" text is just there to take up space. It doesn't even link to anything.

The "by Company" text is there to clearly display to merchants that this is an experience that's not built by Shopify. This becomes increasingly important as Polaris includes more and more features.

 

If possible, I would like to opt out as well—at least until Polaris v3.0.0 comes out and the documentation is improved.

Polaris v3 was being blocked by App Bridge launch, but it's ready to go out now. If you want to opt out for the time being, send me an email with your app name and I'll get it done.

Maris Shopify Partner excelify.io
Posts:
277
about 1 month ago

+1 from me as well to be able to bring back the top bar to one row.

We don't have too many buttons there, and this additional row really takes up so valuable app screen space, with no good reason for that.

 

Just an idea to consider for a solution:

1. "by <Company" could be put right after the app title.

2. Make the buttons jump to a second row only if there is not enough space for them to fit in the first row (wrap all or none to the second row). Making this as a responsive-UI experience.

 

Really appreciate if you can consider this...

 

Excelify.io | Bulk Import Export Update with Excel | https://apps.shopify.com/excel-export-import | https://excelify.io
Posts:
21
about 1 month ago

Whatever change was rolled out recently seems to have broken to query string in a modal.open request. Can this be rolled back please?

Eduardo Member
Posts:
10
30 days ago
g
3
upvotes

As a dev Shopify Gurus complicate transmitting information on issues that need to be addressed by Shopify devs. They have zero understanding of the more technical side of Shopify. Shopify needs a line of communication between their dev team and app developers if they want to succeed. I've given up on trying to get issues resolved and instead work around the bugs knowing that hundreds of other devs will end up falling into the same pitfalls.

Posts:
16
Last edited 28 days ago

Hi All,

I've have a Modal from the old EASDK that's no longer working since App Bridge.

The code to open it is:

ShopifyApp.Modal.open({
    src: '<the_url_here>',
    title: 'The Title',
    height: 600,
    buttons: {
        primary: {
            label: 'Primary',
            message: 'importForm_submit',
            loading: false,
            callback: function (label) {
                ShopifyApp.Modal.close();
            }
        },
        secondary: {
            label: 'Secondary',
            callback: function (label) {
                ShopifyApp.Modal.close();
            }
        }
    }
});

And the form that populates the Modal is:

<form data-shopify-app-submit="exportForm_submit" class="form-horizontal" method="post">
   <input name="_token" type="hidden" value="<csrf_token>">
   <input name="shop" type="hidden" value="<shop>">
   <input name="collectionId" type="hidden" value="<collection_id>">
   <input name="type" type="hidden"  value="<type>">
   ...
</form>

There's other stuff in there but the <form> tag is the important bit.

There's two problems I'm running into:

  1. The height param is being ignored making the modal too short which creates a scroll bar
  2. When I click the Primary button, the submit is no longer being triggered so the form is never submitted. The callback fires and closes the window but nothing else happens

This has been working up until the release of App Bridge. My production app still works but App Bridge hasn't been enabled for it yet thankfully.

Any ideas?

EDIT:

After messing around a bit, I have a workaround:

  1. Use ShopifyApp.Modal.setHeight() to specify the height within the modal window
  2. Instead of relying on the postMessage, I added an ID to the form, and then I added ShopifyApp.Modal.window().document.getElementById('formId').submit(); to the callback function in the modal host window to force the submit.

Although this works, it would be nice to know why it changed. Not critical anymore but good to know all the same :)

Thanks,
Kris

Posts:
16
Last edited 29 days ago

Hi All,

One other problem I'm having is with the resource picker. The Collection picker is now returning some incorrect data for Smart collections. It also no longer returns the Smart collection "rules".

Below is the object returned for one of my Smart collections from the Collection Picker (this is a published collection in the Online Store):

body_html: "<p class="well no-product-html">No HTML available for this collection.</p>"
handle: "specific-shoes"
id: 404960718
image: {alt: null, created_at: null, height: null, src: "https://cdn.shopify.com/s/files/1/1370/5471/collec…5663-c33c-4e48-8e71-61836403ef08.jpg?v=1484187967", width: null}
published_at: null
published_scope: null
sort_order: "best-selling"
template_suffix: null
title: "New Sneakers"
type: "custom"
updated_at: "2017-11-04T20:38:36Z"
  1. The "type" is "custom" but should be "smart"
  2. There are no "rules" present in the data
  3. I'm pretty sure the "published" data (scope and date) are incorrect as well since this is a published Smart collection at the moment.

Thanks,
Kris

 

Posts:
16
29 days ago

Sorry, one more.

According to this if you don't include a "style" setting of "danger", the Confirm Modal will default to the primary color (blue). I don't set the style on any of my confirm boxes and they're all defaulting to "danger" red since the release of App Bridge. I've tried putting other styles in but it always defaults to "danger".

Thanks,
Kris

Maris Shopify Partner excelify.io
Posts:
277
Last edited 28 days ago

Hi, App Bridge developers.

Here's a weird IFrame inside the IFrame sizing issue - the outer IFrame seems to have the wrong height, causing it to become scrollable.

Here's the video where you can see that (couldn't embed, so sending the link): https://youtu.be/UCitundoRxA

Is there something I can do to fix this, or you need to fix it on your side?

Thanks!

 

Excelify.io | Bulk Import Export Update with Excel | https://apps.shopify.com/excel-export-import | https://excelify.io
SK Member
Posts:
1
28 days ago

The latest update causing our App loading twice and no longer working.

Please help!

KDeveloper Member
Posts:
1
Last edited 28 days ago
g
5

We are really dont happy with this update:

1. Two line top menu look weird - on small screens it take a lot of screen height!

2. Buttons at menu now mixed up - how to align all buttons right ?

3. Not all developers like React or Redux, but now you force to use it. React+Redux is not best js components system, we prefer other solutuions and want continue use old EASDK

4. Why do you think about drop support of EASDK ? Meny app build with this SDK, migration to App Bridge need significant changes in apps, it can be expensive for app developers.

 

Brendan Member
Posts:
10
Last edited 27 days ago
g
3
upvotes

EASDK is being deprecated in a year? I am working on a new app, and if I don't agree to fight upstream with React/Polaris/any other technical decision that Shopify decides to foist on me, I am going to see my app deprecated in a year?

If this is indeed the case, and you are actually forcing developers into long build-times and 3Mb JS bundles, not to mention the poor documentation and intellectual hurdles of learning new tech-stacks arbitrarily picked for them, then I will have to take a step back from continuing work on any of my Shopify projects.

Shopify's tech leadership appears to be lacking the maturity and perspective to make these sweaping decisions. If you can't make general, shared functionality (oh, and styles) consumable in a general, stack-independent way, than you should not be the ones creating this shared functionality. 

Oh, and if I am wrong and we CAN somehow continue to develop apps using whatever technology makes sense for our app, please feel free to correct me and invalidate the previous paragraph! Then my complaint would only be about the lack of documentation and clear communication, but at least I could continue building on Shopify.

Posts:
21
27 days ago
g
3
upvotes

I'm of the opinion that technologies shouldn't be forced upon us too, it's nice to have a common UI from a customer point of view, however forcing us onto a specific technology stack will mean your partners will be spending a lot of time on re-work rather than creating functionality to help Shopify merchants, it's just a waste of time... the documentation is also poor, for someone who doesn't use react, i have no idea what those examples mean to me in terms of what needs to change to fully comply with the new app bridge SDK. Can we have some example libraries in other languages? or perhaps lower level documentation so we can translate this to other technology stacks?

Seller Panda Shopify Partner sellerpanda.com
Posts:
40
27 days ago
g
2
upvotes

Well, just to give me 2 cents into this, I agree with "don't force tech upon us" comments above, but its not really true in this case, you are not forced to use the embedded feature of shopify, shopify built this feature to make it easier for developers, you can easily disable this feature and take full control over your app window, this is exactly what we are going to do from now on, all the small apps that doesn't require much will be left embedded, but all the larger apps will not be embedded, so we will have full control over them (They simply open in a new window, but we still have access to the auth and the billing process of shopify).

The embedded app is an optional feature that gives you a lot fo benefits and you end up with already built tools that you can use in few lines of code and you don't have to rewrite the whole thing on your own, while the idea is great, this thread shows exactly how shopify failed to execute this idea.

 

The most dangerous thing i see in this thread is the fact that many bugs were known BEFORE they rolled out this feature for the second time, you can actually see them in this thread, but for some reason shopfiy thought its a good idea to roll out the feature again without fixing those bugs, I have no idea why that happened, but I really hope Shayne can explain this to us?

Posts:
3851
26 days ago
g
1
upvotes

@SellerPanda hits the nail on the head. I cannot believe I stuck it out with EASDK as long as I did. After consulting long and hard with fellow developers, I am abandoning this failed EASDK and going solo. Too many bugs from Shopify.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Shayne Developer Experience
Posts:
137
26 days ago
g
1
upvotes

Hey everyone,

Happy to explain where we're at right now.

1) The title bar

The design team is taking everyone's opinions to heart on this. We can see how a setup with a small number of buttons can look empty, and like there is wasted space. We're working on it.

2) Support isn't responding

If you need support with this, usually emailing apps@shopify.com is the fastest way to get in touch with someone who can help. I've said that a few times on this thread, please do not go through regular merchant support channels. They are not equipped to help you. In this case, you can email me directly at shayne@shopify.com and I'll help you. A number of people in the thread have done this, and we were able to walk through their issues very quickly.

3) The buttons are mixed up

Secondary buttons are pushed to the left side now, which is how Shopify's admin is built. I can understand the frustration with buttons moving without us notifying you first. This was a mistake, and won't happen again. Even if the methods didn't break, the intent behind what the method means did.

4) It's expensive to migrate

The legacy EASDK methods will be supported for the forseeable future. We will not be adding new methods, so while you should not use the EASDK to build new products, we haven't made any decisions on when this will actually be deprecated. It will not be for at least a year, and we will give a full years notice when we make the decision.

5) You're forcing tech that we may not want to use

You don't need to use React, Redux, NPM, Yarn, or anything else if you don't want to. You can use a CDN link just like the old EASDK (through something like unpkg), and regular JS just like the old EASDK. We're working on a tutorial that will be added to docs today or tomorrow to show exactly how to do this.

6) There are still lots of bugs with App Bridge

The issues that people are running into are mostly unrelated, and are symptoms of a shift to GraphQL rather than REST for internal APIs. There are some discrepancies in the data that is returned from those resources, and we're working on a fix as we speak. There are also some issues that were related to Polaris v3.0.0 (like scrolling), that have been resolved.

7) The documentation is poor

We're working full-tilt to get it to a place that's better than the legacy EASDK. Stay tuned.


I'm still very open to any meetings via livechat, the phone, or in person (If you're in Ottawa, Toronto or Montreal) to talk to talk about the launch or issues that people may be having and walk you through a solve. Email me to set it up.

Posts:
2
26 days ago

Secondary buttons are pushed to the left side now, which is how Shopify's admin is built.

Can you elaborate here? I don't see this button layout in any of the forms I see in the Shopify Admin:

 

Screen shot 2018 11 13 at 10.59.01 am thumb
Shayne Developer Experience
Posts:
137
26 days ago
g
1
upvotes

Can you elaborate here? I don't see this button layout in any of the forms I see in the Shopify Admin:

If you take a look at the new Polaris docs for v3.0.0, you can see that this pattern is shifting to be closer to what you get for free with App Bridge, with secondary actions on the left with primary on the right.

Examples : Page ActionsPage

Changes start with Polaris and then trickle down to be adopted by consumers, both internally and externally.

Shayne Developer Experience
Posts:
137
Last edited 10 days ago
g
5

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>

 

JoshHighland Shopify Expert venntov.com
Posts:
52
26 days ago

Thank you. Examples like this are 100% appriciated. 

Posts:
21
26 days ago
g
1
upvotes

Yes, Thanks Shayne, this example is extremely helpful!

MrPunkin Member
Posts:
68
25 days ago

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.

Posts:
618
25 days ago
g
3
upvotes

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?

Eduardo Member
Posts:
10
Last edited 24 days ago

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.

Posts:
7
24 days ago

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

Posts:
226
Last edited 24 days ago

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
Seller Panda Shopify Partner sellerpanda.com
Posts:
40
22 days ago

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.

Posts:
2
19 days ago

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

Seller Panda Shopify Partner sellerpanda.com
Posts:
40
19 days ago

@AlexDover this is what the titleBar is for: https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/titlebar

 

 

Posts:
2
19 days ago

Thanks, I will take a further look. The TtitleBar just looks like it covers buttons and breadcrumbs - I was hoping to be able to control the new navigation items in code rather than via the partner dashboard (https://help.shopify.com/en/api/embedded-apps/app-extensions/navigation/create-navigation-link)

Seller Panda Shopify Partner sellerpanda.com
Posts:
40
19 days ago

Yes, the titlebar buttons ARE the navigation items, you can simply delete all button from the navigation menu and do it via the code with app bridge (if its working).

bolle Member
Posts:
27
17 days ago

My app lives at /

I want to create a navigation link via the Partner dashboard that directs the customer to /

It doesn't let me do this for whatever reason.
Is this possible to implement?

Thanks.

Posts:
226
Last edited 17 days ago

Edit: I worked out how to reproduce the bad behaviour, steps added below

Hey Shayne,

Found what I think is a bug, in the way the new navigation menu items work. The issue is that query string parameters from the initial load of the app, are sometimes passed to future navigations using the menu links.

Example: I load up my app by using an admin link on the Shopify admin -> Orders page, by selecting 50 orders and clicking "Bulk actions" -->> "Load in app xxxx".

That link points to /orders and appends the selected ids, so the final url that comes to my app is /orders?ids[]=xxxxxxx&ids[]=yyyyyy etc, all is fine with that.

However, if after arriving on the /orders?ids[]=xxxxxxx&ids[]=yyyyyy page, I reload the page (Cmd+R) and then click on another menu item, the App Bridge keeps the ids[] and anything else in the query string.. when sending the request to the new page. So I end up with /draft_orders?ids[]=xxxxxxx&ids[]=yyyyyy which of course breaks things as those are order ids and not draft order ids.

How can I make sure that the App Bridge calls the navigation item links exactly as they are setup, and does not append previous query string parameters, even if the page is reloaded? I don't think I can do anything to stop it, as the navigation items are controlled by Shopify.

Reproduction steps:

1. Load the app using a bulk action from the Shopify admin, for example from the orders page
2. Reload the full page, this brings you back to exactly the same page as before, and includes the original query string params. All ok.
3. Click another navigation item, it now has the original query string parameters. Not ok.

Any help you can give would be much appreciated!

Have a great Friday!

Bjorn

Bjorn Forsberg | FORSBERG+two | Award-winning Shopify Apps since 2011
Posts:
3851
Last edited 16 days ago

There have been URL problems forever with the way Shopify stages links. You are lucky the ids are formatted correctly as ids[]=xxxxxx as for a while there they were all formatted as ids[][]=xxxxxx which pooched any Apps dealing with that. I noticed due to using Rails too, that we had to override the EASDK URL handling in terms of browser history (seems to be your issue too), as it was never in sync with reality. Was a hack job to fix that with some Jabvascript.

So ya. Go Shopify go! It takes years to get things right in this complex domain, and that is without constantly churning through internal technology stacks and design idea changes. So far, we are getting just glimpses of what it all may end up being.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
JoshHighland Shopify Expert venntov.com
Posts:
52
11 days ago

I have a POS app in the app store. I'm migration from the POS SDK to App Bridge but I'm seeing some strange behavior. Is App Bridge designed to work on POS? I cant ge't any Flash notification/error messages to appear inside of the Shopify POS app (iOS). 

App Bridge Flash messages work on: 

  • Desktop
  • Mobile safari
  • Shopify mobile iOS app (iPhone and iPad)

Fails on:

  • Shopify POS iOS app (iPhone and iPad)

Apps running in the Shopify POS app are hard to debug due to the in app browser and no introspection tools (seperate conversation), so I dont know if any JS errors are being thrown, but having success on all the other App Bridge supported platforms leads me to believe that there is an issue with POS + App Bridge.