I am attempting to write an embedded app but am having trouble getting it to actually embed. I followed the App Bridge tutorial and ended up with this set of code:
<html>
<head>
<title>Affiliate Sales</title>
<script src="https://unpkg.com/@shopify/app-bridge"></script>
<script>
var AppBridge = window['app-bridge'];
var createApp = AppBridge.createApp;
var actions = AppBridge.actions;
var Redirect = actions.Redirect;
var urlParams = new URLSearchParams(window.location.search);
var shopOrigin = urlParams.get('shop');
var apiKey = 'XXX';
var redirectUri = 'https://myapurl.com/fooBar.html';
var permissionUrl = 'https://' +
shopOrigin +
'/admin' +
'/oauth/authorize?client_id=' +
apiKey +
'&scope=read_content,write_content,read_themes,write_themes,read_products,write_products,read_customers,write_customers,read_orders,write_orders,read_script_tags,write_script_tags,read_fulfillments,write_fulfillments,read_shipping,write_shipping&redirect_uri=' +
redirectUri;
// If the current window is the 'parent', change the URL by setting location.href
if (window.top == window.self) {
window.location.assign(permissionUrl);
// If the current window is the 'child', change the parent's URL with Shopify App Bridge's Redirect action
} else {
var app = createApp({
apiKey: apiKey,
shopOrigin: shopOrigin
});
Redirect.create(app).dispatch(Redirect.Action.REMOTE, permissionUrl);
}
</script>
</head>
<body>
<center><h1>Affiliate Sales</h1></center>
</body>
</html>
The Oauth seems to go okay (as well as the original app install). And it redirects to fooBar.html but does not embed. It redirects the window as a whole. I feel like the documentation is rather lacking on exactly how to get this setup or maybe I am just missing something. Any help in this would be greatly appreciated. If it matters/helps I am using a custom build PHP app for this.
