Shopify App Bridge Does not show anything in my App Page

Solved

Shopify App Bridge Does not show anything in my App Page

LawrenceAtBold
Shopify Partner
9 1 1

I have a PHP script that uses EASDK. I converted them to Shopify App Bridge but for some odd reason, I can't get anything displayed.

Below is the in-line script I have and it does not render anything but it shows the object is being instanstiated.

 

 

<script src="https://unpkg.com/@shopify/[email protected]/umd/index.development.js"></script>
<script type="text/javascript">

    let AppBridge = window['app-bridge'];
    let actions = window['app-bridge'].actions;
    let createApp = AppBridge.default;

    let app = createApp({
        apiKey: '<?php echo API_KEY ?>',
        shopOrigin: 'https://<?php echo $shop_url ?>',
    });

    debugger;
    let titleBar = actions.TitleBar;
    const titleBarOptions = {
        title: 'My TITLE WORLD',
    };
    const myTitleBar = titleBar.create(app, titleBarOptions);
    myTitleBar.set({
        title: 'Hello Shopify App Bridge v2.0.3',
    });

    debugger;
    let loadingBar = actions.Loading;
    const loading = loadingBar.create(app);
    loading.subscribe(loadingBar.Action.START, () => {
        alert("hello Loading Bar");
    });
    loading.dispatch(loadingBar.Action.START);
    loading.dispatch(loadingBar.Action.STOP);

    const toastOptions = {
        message: 'Product saved',
        duration: 5000,
    };
    let Toast = actions.Toast;
    const toastNotice = Toast.create(app, toastOptions);
    toastNotice.dispatch(Toast.Action.SHOW);

    debugger;
    let Modal = actions.Modal;
    const modalOptions = {
        title: 'My Hello Modal',
        message: 'Hello Modal POC!',
        size: Modal.Size.Large,
    };
    const myModal = Modal.create(app, modalOptions);
    myModal.dispatch(Modal.Action.OPEN);
    myModal.dispatch(Modal.Action.CLOSE);
</script>
<?php endif; ?>

 


Could you please be able to help me identify what is wrong with this sample script? I have a valid shopify api token and and Shop Origin URL but not sure what else is missing? Thanks in advance. 

Accepted Solution (1)
LawrenceAtBold
Shopify Partner
9 1 1

This is an accepted solution.

The issue ended up being my setup in my Partner Dashboard and it is now resolved.

View solution in original post

Replies 13 (13)

LawrenceAtBold
Shopify Partner
9 1 1

Further to this, my app is embedded inside the Shopify Admin (App Bridge) so wondering if this will work using the script above. Please advice.

Filljoy
Shopify Partner
211 10 67

I don't know php, but it should work using just html and js. Can you try just hard-coding your php variables and remove all of the php tags / debugger and see if that works? I would do that and then systematically start re-adding the php code. Please also check the Chrome console for any error messages.

LawrenceAtBold
Shopify Partner
9 1 1

Hi there, 

I have changed them to use the actual variables instead of php and I still have the same issue: The code below does not render the changes I need on my browser nor showing any changes in my redux tool.

<script src="https://unpkg.com/@shopify/[email protected]/umd/index.development.js"></script>
<script type="text/javascript">

    let AppBridge = window['app-bridge'];
    let actions = window['app-bridge'].actions;
    let createApp = AppBridge.default;

    let app = createApp({
        apiKey: 'api token nnnn',
        shopOrigin: 'https://lawrence-test.myshopify.com',
    });

    debugger;
    let TitleBar = actions.TitleBar;
    let titleBarOptions = {
        title: 'My TITLE WORLD',
    };
    let myTitleBar = TitleBar.create(app, titleBarOptions);
    myTitleBar.set({
        title: 'Hello Shopify App Bridge v2.0.3',
    });

    debugger;
    let loadingBar = actions.Loading;
    let loading = loadingBar.create(app);
    loading.subscribe(loadingBar.Action.START, () => {
        alert("hello Loading Bar");
    });
    loading.dispatch(loadingBar.Action.START);
    loading.dispatch(loadingBar.Action.STOP);

    let toastOptions = {
        message: 'Product saved',
        duration: 5000,
    };
    let Toast = actions.Toast;
    let toastNotice = Toast.create(app, toastOptions);
    toastNotice.dispatch(Toast.Action.SHOW);

    debugger;
    let Modal = actions.Modal;
    let modalOptions = {
        title: 'My Hello Modal',
        message: 'Hello Modal POC!',
        size: Modal.Size.Large,
    };
    let myModal = Modal.create(app, modalOptions);
    myModal.dispatch(Modal.Action.OPEN);
    myModal.dispatch(Modal.Action.CLOSE);
</script>


I've attached  a sample screenshot:
sampleResults.png


Let me know if you need further details. Thanks in advance.


Filljoy
Shopify Partner
211 10 67

Remove the https:// from your shopOrigin and it should work. I don't know how your php code is getting the shop url, but in the actual shop URL parameter that Shopify provides, it never contains http:// so if you just grab it using URL parameters each time you will have no issue. See below.

 

Screen Shot 2021-06-16 at 7.20.55 AM.png

LawrenceAtBold
Shopify Partner
9 1 1

Hi there,

I've removed the `https://` and only include the Shop Origin on my app (development) and  I still have the same issue. 

The URL is being pulled from the environment variables.


Is it because my shop url is a development test store with transfer disabled?  

 

Thanks

 

 

Filljoy
Shopify Partner
211 10 67

Do you actually have this app successfully installed on this development store or are you just trying to access the app directly? Do you see it installed when you go to Shopify Admin > Apps ?

LawrenceAtBold
Shopify Partner
9 1 1

Hi there,

 

Yes. The app was successfully installed in my development store and have accepted the charges( test). Though the app has not been reviewed by Shopify since it is in development. That said, it is running locally. The part that does not work is when it executes the the script inside the iframe, the app bridge does not update the title bar or any of the actions I have in the script. 

And also, yes for the second one. I have the app shown in the Store App list. 

When I go to inspect the title bar is inside Shopify Polaris and the script has no effect on this. I've attached a screen capture as an example of the current state. Thanks

ShopifyApp.png

 

ShopifyApp2.png

 

 

Filljoy
Shopify Partner
211 10 67

I'm not sure what to tell you, when I paste your code as you pasted it earlier in my .html file and change the API key to my app, everything works - the title bar shows, the toast appears. Please try just pasting the code you shared only in your .html file with nothing else.

When I inspect element for mine, I see everything within <head></head> and in your case it's in the body. Not sure if that makes a difference. 

Filljoy
Shopify Partner
211 10 67

What is your app's URL? Are you pointing directly to localhost or are you using ngrok to tunnel?

LawrenceAtBold
Shopify Partner
9 1 1

No worries. I tried several ways to render the page and have no luck.

my local is using argo tunnel via clouldflare. Hope this helps.

LawrenceAtBold
Shopify Partner
9 1 1

This is an accepted solution.

The issue ended up being my setup in my Partner Dashboard and it is now resolved.

JulioVazquezc
Visitor
1 0 0

Hi, I have the same problem, my script not working, what was the configuration you modified?

LawrenceAtBold
Shopify Partner
9 1 1

Hi Julio,

I'm pertaining to this section here. `https://shopify.dev/apps/auth/oauth#4-confirm-installation` where I need to make sure that I have the correct oauth before proceeding with AppBridge. 

Aside from this, you will need to make sure that your App has the app bridge enabled in the Partners Dashboard. 

This are important aspect of your connection.