jQuery(document).ready(function() {
var metafield_value = get_metafield_value(); // --->>>> HOW WOULD I GET METAFIELD VALUES HERE?
$('body').prepend('<h2>'+metafield_value+'</h2>');
});
...
app.prepare().then(() => {
const server = new Koa();
...
server.use(
createShopifyAuth({
...
async afterAuth(ctx) {
const { shop, accessToken } = ctx.session;
...
const scriptUrl = `https://${shop}/admin/api/2019-10/script_tags.json`;
const options = {
credentials: 'include',
headers: {
'X-Shopify-Access-Token': accessToken,
'Content-Type': 'application/json',
},
};
const requestBody = {
"script_tag": {
"event": "onload",
"src": `https://myserver/script.js`,
}
};
const optionsWithPost = { ...options, method: 'POST', body: JSON.stringify(requestBody) };
fetch(`${scriptUrl}`, optionsWithPost);
};
}
})
);
...
router.post('/get_metafield',function(req,res){
var metafield_value = get_metafield();
res.end(metafield_value);
});
You will need to use JSONP in your script tag to make a call to your app server and get the configuration.
//register loadSettings
window["loadSettings"] = function (settings) {
const whatYouNeed = JSON.parse(settings);
// Use the above, as you like.
};
var script = document.createElement("script");
script.src=`https://<your-server-url>/<route-path>`;
document.head.appendChild(script);
Make sure that that the above route does not need authentication and then your server should return configuration as JSON, something like below:
res.setHeader("Content-Type", "application/json");
const resJson = JSON.stringify(`{"settings": "{Your data}"}`);
return res.json(`window['loadSettings'](${resJson})`);
User | Count |
---|---|
25 | |
24 | |
23 | |
19 | |
13 |