Solved

Modal in shopify bridge App

Villiamjit
Shopify Partner
19 0 1

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

Accepted Solutions (2)
Henry_Tao
Shopify Staff
91 28 15

This is an accepted solution.

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>

 

Henry | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

View solution in original post

Henry_Tao
Shopify Staff
91 28 15

This is an accepted solution.

Hi @Villiamjit 

 

In order to create ResourcePicker using App Bridge directly, this is a good docs to start https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/resourcepicker#create-a-product-pic... 

 

Let me know if you have any other questions. 

 

Cheers, 

Henry

Henry | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

View solution in original post

Replies 11 (11)

Henry_Tao
Shopify Staff
91 28 15

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

Henry | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Villiamjit
Shopify Partner
19 0 1

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

Henry_Tao
Shopify Staff
91 28 15

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.

 

 

Henry | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Villiamjit
Shopify Partner
19 0 1

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

Henry_Tao
Shopify Staff
91 28 15

This is an accepted solution.

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>

 

Henry | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Villiamjit
Shopify Partner
19 0 1

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

Villiamjit
Shopify Partner
19 0 1

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

Henry_Tao
Shopify Staff
91 28 15

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

Henry | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Villiamjit
Shopify Partner
19 0 1

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

Henry_Tao
Shopify Staff
91 28 15

This is an accepted solution.

Hi @Villiamjit 

 

In order to create ResourcePicker using App Bridge directly, this is a good docs to start https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/resourcepicker#create-a-product-pic... 

 

Let me know if you have any other questions. 

 

Cheers, 

Henry

Henry | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

kurveej
Shopify Partner
10 0 1

Hello,

did you resolve this issue, I have the same issue, can you please guide me on how I can resolve it?

 

Thanks,

Kurvi Kansagra