Hi,
I just start creating an embedded app using the app bridge.
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](http://google.com)',
};
var myModal = Modal.create(app, modalOptions);
var myTitleBar = TitleBar.create(app, titleBarOptions);
The Title bar is generated ([http://prntscr.com/pmkkob](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
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
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
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.
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.
Thanks,
Villiam
Hi @Villiamjit
I have tested your code and it works. Here are few notes:
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>
Hi @Henry_Tao ,
Thanks for your help it’s now working for me as well. I have 2 more small queries.
-
Need to add text in the left side of the modal footer. http://prntscr.com/pnwn7a
-
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
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
Hi @Villiamjit
- 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.
- 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.
- 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
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
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-picker
Let me know if you have any other questions.
Cheers,
Henry
1 Like
Hello,
did you resolve this issue, I have the same issue, can you please guide me on how I can resolve it?
Thanks,