I am attempting to use the App Bridge to write my PHP app. I have followed the tutorial here: https://shopify.dev/tools/app-bridge/getting-started But the app is not embedding. Note that I am using Vanilla JS, not Node.js. My understanding is the script that it pieces together on the tutorial is to be placed in the HTML outputted on the initial page that is loaded after Oauth for installation (or when the store owner clicks on the app from Admin). The script seems to be running because it redirects just fine but at no point is the app embedded. The code I have at this point looks like this:
<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://myappdomain.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>My App</h1></center>
</body>
</html>
The page gets redirected to `fooBar.html` just fine but not embedded. If I remove all of the scripts, this page gets loaded just fine but also not embedded. I do not think this doc is very straightforward and seems to be only geared to people using either Node and/or React. But these are not the only frameworks out there and not everyone uses frameworks. Any assistance in this would be greatly appreciated.
