Modal in shopify bridge App

Solved
Tourist
16 0 0

Hi,

I just start creating an embedded app using the app bridge.

<script src="https://unpkg.com/@shopify/app-bridge"></script>
<script>
var AppBridge = window['app-bridge'];
var actions = AppBridge.actions;
var createApp = AppBridge.default;
var app = createApp({
apiKey: 'SHOPIFY_APP_APIKEY',
shopOrigin: 'shopdomain',
});
var TitleBar = actions.TitleBar;
var Button = actions.Button;
var Modal = actions.Modal;
var Redirect = actions.Redirect;
var redirect = Redirect.create(app);

var titleBarOptions = {
title: 'App title',
};
var modalOptions = {
title: 'My Modal',
url: 'http://google.com',
};

var myModal = Modal.create(app, modalOptions);

var myTitleBar = TitleBar.create(app, titleBarOptions);

The Title bar is generated (http://prntscr.com/pmkkob) but the modal is not showing.

 

Can anyone help what I did wrong?

 

And one more this Can I open this modal from a button that is in my embedded app not in the title bar.

 

Regards,
Villiam

0 Likes
Shopify Staff
Shopify Staff
39 18 3

Hi @Villiamjit 

 

The modal url is restricted to your app domain only. You cannot open https://google.com. Can you switch back to your app url and see how it works? 

 

Thanks, 

Henry

0 Likes
Highlighted
Tourist
16 0 0

Hi @Henry_Tao,

 

I add the app domain URL but still not get success. Not able to show the Modal Popup. Can you try my code and your end help me where I am wrong.

 

Thanks,
Villiam

0 Likes
Shopify Staff
Shopify Staff
39 18 3

Hi @Villiamjit 

 

You also need to dispatch Modal open in order to open Modal 

 

const modalOptions = {
  title: 'My Modal',
  url: 'http://example.com',
};

const myModal = Modal.create(app, modalOptions);

myModal.dispatch(Modal.Action.OPEN);

// Close modal
// myModal.dispatch(Modal.Action.CLOSE);

 

https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/modal#dispatch-actions

 

Sorry about missing that information in my previous response.

 

 

0 Likes
Tourist
16 0 0

Hi @Henry_Tao.

 

I add the Modal dispatch code as well but Modal not working for me.

 

Here is my code that I run finally.

 

<script src="https://unpkg.com/@shopify/app-bridge"></script>
<script>
var AppBridge = window['app-bridge'];
var actions = AppBridge.actions;
var createApp = AppBridge.default;
var app = createApp({
apiKey: 'SHOPIFY_APP_APIKEY',
shopOrigin: 'shopdomain',
});
var TitleBar = actions.TitleBar;
var Button = actions.Button;
var Modal = actions.Modal;
var Redirect = actions.Redirect;
var redirect = Redirect.create(app);

var titleBarOptions = {
title: 'Title',
};

var myTitleBar = TitleBar.create(app, titleBarOptions);

var modalOptions = {
title: 'My Modal',
url: 'App domain .php file path',
};

var myModal = Modal.create(app, modalOptions);
myModal.dispatch(Modal.Action.OPEN);

</script>

 

Thanks,
Villiam

0 Likes

Success.

Shopify Staff
Shopify Staff
39 18 3

Hi @Villiamjit 

 

I have tested your code and it works. Here are few notes: 

- Checkout debugging section to see what error in console https://help.shopify.com/en/api/embedded-apps/app-bridge/debugging#using-the-cdn-hosted-or-umd-versi.... It will help you figure out the problem. 

- `url: 'App domain .php file path',`. `url` origin should be the same as your app domain. You could use relative `path` instead https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/modal#create-an-iframe-modal-a-rela.... I have tried both. You could also test the modal with just title and message to narrow down the issue https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/modal#create-a-message-modal.

 

This is what I did:

 

<html>

<head>
  <script src="https://unpkg.com/@shopify/app-bridge@1.6/umd/index.development.js"></script>
</head>

<body>
  <script>
    var AppBridge = window['app-bridge'];
    var actions = AppBridge.actions;
    var createApp = AppBridge.default;
    var app = createApp({
      apiKey: 'e03f589a51b0000000000000',
      shopOrigin: 'greats-0000000.myshopify.com',
    });
    var TitleBar = actions.TitleBar;
    var Button = actions.Button;
    var Modal = actions.Modal;
    var Redirect = actions.Redirect;
    var redirect = Redirect.create(app);

    var titleBarOptions = {
      title: 'Title',
    };

    var myTitleBar = TitleBar.create(app, titleBarOptions);

    var modalOptions = {
      title: 'My Modal',
      path: '/test',
    };

    var myModal = Modal.create(app, modalOptions);
    myModal.dispatch(Modal.Action.OPEN);

  </script>
</body>

</html>

 

0 Likes
Tourist
16 0 0

Hi @Henry_Tao,

 

Thanks for your help it's now working for me as well. I have 2 more small queries.

 

1. Need to add text in the left side of the modal footer. http://prntscr.com/pnwn7a

2. If I add multi choose checkboxs options in modal body and need to check what user select on an ok button named as "Select". How can I do this.

 

thanks in advance :)

 

Regards,
Villiam

0 Likes
Tourist
16 0 0

Hi @Henry_Tao,

 

I have one more question Can I use "ResourcePicker" in the embedded app that I created with PHP and Shopify app bridge.

 

https://help.shopify.com/en/api/embedded-apps/app-bridge/react-components/resourcepicker

 

Thanks,
Villiam

0 Likes
Shopify Staff
Shopify Staff
39 18 3

Hi @Villiamjit 

 

1. Need to add text in the left side of the modal footer. http://prntscr.com/pnwn7a

 

Unfortunately, it is not supported right now in App Bridge.

 

2. If I add multi choose checkboxs options in modal body and need to check what user select on an ok button named as "Select". How can I do this.

 

In order to get modal body data when the modal is closed, you can use localStorage. For instance, you observe to all onTextChange or onCheckChange of input fields inside modal content and store them in localStorage. Then, in embedded app, you subscribe to Modal.Action.CLOSE action and retrieve data from localStorage. See https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/modal#unsubscribe

 

There is no official App Bridge API for it right now. 

 

> 3. Can I use "ResourcePicker" in the embedded app that I created with PHP and Shopify app bridge.

 

Are you using Polaris or App Bridge directly? In both cases, you should be able to use Resource Picker without any problem.

 

Thanks, 

Henry

0 Likes
Tourist
16 0 0

Hello @Henry_Tao,

 

I want to make a popup modal like this http://prntscr.com/ppi7nb. And talking about the "ResourcePicker" I want to use it with App Bridge directly. Can you please share example code how I can make this.

 

Regards,
Villiam

0 Likes