FROM CACHE - en_header
Promotion image

Modal in shopify bridge App

Solved

Modal in shopify bridge App

Villiamjit
Shopify Partner
19 0 1
‎10-22-2019 02:52 AM

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

5,843 Views
0 Likes
Report
Accepted Solutions (2)
In response to Villiamjit

Henry_Tao
Shopify Staff
91 28 15
‎10-24-2019 09:38 AM

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

5,670 Views
0 Likes
Report
In response to Villiamjit

Henry_Tao
Shopify Staff
91 28 15
‎10-30-2019 08:29 AM

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

3,555 Views
1 Like
Report
Replies 11 (11)

Henry_Tao
Shopify Staff
91 28 15
‎10-22-2019 08:33 AM

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

5,760 Views
0 Likes
Report
In response to Henry_Tao

Villiamjit
Shopify Partner
19 0 1
‎10-23-2019 01:18 AM

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

5,729 Views
0 Likes
Report
In response to Villiamjit

Henry_Tao
Shopify Staff
91 28 15
‎10-23-2019 08:54 AM

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

5,710 Views
0 Likes
Report
In response to Henry_Tao

Villiamjit
Shopify Partner
19 0 1
‎10-24-2019 02:56 AM

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

5,674 Views
0 Likes
Report
In response to Villiamjit

Henry_Tao
Shopify Staff
91 28 15
‎10-24-2019 09:38 AM

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

5,671 Views
0 Likes
Report
In response to Henry_Tao

Villiamjit
Shopify Partner
19 0 1
‎10-25-2019 04:03 AM

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

5,639 Views
0 Likes
Report
In response to Villiamjit

Villiamjit
Shopify Partner
19 0 1
‎10-25-2019 06:57 AM

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

5,627 Views
0 Likes
Report
In response to Villiamjit

Henry_Tao
Shopify Staff
91 28 15
‎10-25-2019 10:55 AM

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

5,606 Views
0 Likes
Report
In response to Henry_Tao

Villiamjit
Shopify Partner
19 0 1
‎10-29-2019 03:46 AM

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

5,539 Views
0 Likes
Report
In response to Villiamjit

Henry_Tao
Shopify Staff
91 28 15
‎10-30-2019 08:29 AM

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

3,556 Views
1 Like
Report
In response to Villiamjit

kurveej
Shopify Partner
11 0 1
‎04-24-2021 07:33 AM

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
2,967 Views
0 Likes
Report
Terms of Service Privacy Policy