Shopify App Bridge

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
0 Likes
Tourist
17 0 0

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.

0 Likes
Shopify Expert
3937 16 325

Waiting on Polaris, like waiting on Godot.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes
Shopify Staff
Shopify Staff
176 7 38

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.

0 Likes
Shopify Partner
282 1 26

+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 Migrate | https://excelify.io
0 Likes
Shopify Partner
26 0 8

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

0 Likes
Tourist
10 0 5

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.

3 Likes
Shopify Partner
44 0 5

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

0 Likes
Shopify Partner
44 0 5

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

 

0 Likes
Shopify Partner
44 0 5

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

0 Likes