Cannot make script tags work properly

Kenny-Gin
New Member
1 0 0

Hello community, 

 

I am a fairly new junior software developer and have been trying to learn how to make simple apps on the Shopify Platform. At the moment I have an idea of making an app that interacts with the Script Tag Resource API but haven't managed to display my script on the storefront. At the moment I am just trying to make a simple "Hello World" appear somewhere on the storefront but to no success. I am not sure where/what I am doing wrong so any hints/tips would be greatly appreciated.

 

This is how far I've come:

 script_onsite.png

 

The script is displayed as being found on the test store if you look in the browser, but it contains nothing. It is completely empty.

 

I also get back this in the browser's console: corb_error.png

 

This is the code that I am trying to execute (the script creator):  

import fetch from 'node-fetch'

const scriptTagBody = JSON.stringify({
  script_tag: {
    event: "onload",
    src: `${process.env.HOST}/scripts/cookie-banner-client`,
    display_scope: "all"
  },
});


export const createCookieBannerScript = async (shop, accessToken) => {
  console.log("Reached POST");
  const response = await fetch(
    `https://${shop}/admin/api/2020-04/script_tags.json`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*",
        "X-Shopify-Access-Token": accessToken,
        "Accept" : "*/*",
        
      },
      body: scriptTagBody,
    }
  );
  return response;
  //const responseJson = await response.json();
  //console.log(responseJson);
  //return responseJson
};

The "Hello World"-script: 

function cookieBanner () {
    return ( 
        <div>
            <p style={{backgroundColor:"hotpink"}}> Hello world</p>
        </div>
    )
}
export default cookieBanner

 

The place the script creator gets called in server.js: 

 router.get("*", verifyRequest(), async ctx => {
    await handle(ctx.req, ctx.res);
    ctx.respond = false;
    ctx.res.statusCode = 200;
    const {shop, accessToken} = ctx.session
    await handlers.createCookieBannerScript(shop, accessToken)

Some additional info maybe that I am using ngrok to host the script at the moment and the URL pathway to the script displays "Hello world" properly so I know that the pathway works.

 

Any and all tips would be greatly appreciated.

 

Thanks in advance!

/Kenny

 

0 Likes
GMKnight
Shopify Partner
72 7 30

Hi Kenny,

 

I don't think you need those headers because you're not serving cross site. Is have used the following quite successfully without CORS problems:

 

const data = {
'script_tag': {
'event': 'onload',
'src': SCRIPT_TAG_SRC,
'display_scope': 'online_store'
}
};

const config = {
headers: {
'X-Shopify-Access-Token': accessToken
}
};

const response = await axios.post(url, data, config);

 

Essentially you are doing the right thing.

 

I generally serve scripts from my public/scripts directory (you might want to look at koa-static package).

 

Also the recommended way for your script is by using a closure:

 

https://shopify.dev/tutorials/include-javascript-in-shopify-themes

 

You can then use something like XMLHttpRequest in your closure to get any data you need from your server.

 

Hope this helps a little. Just how I do it. I'm sure there are other ways.

 

GMKnight.

Store owner and app developer. Canada.
0 Likes