Add a new javascript code on a web page through a Shopify App - Shopify Admin API

Highlighted
Shopify Partner
55 0 3

Currently, I'm under an early development stage. I'm using Node JS and Express framework to build my application.

I've built a Shopify App that adds a widget to an html page. It's just 3 lines of Javascript code.

What I'm trying to achieve here is that whenever this app is installed, it should add the script tags in the existing web page of the merchant's website automatically.

I dug a little and found that first of all we need to ask for permissions and then use POST /admin/script_tags.json

{
  "script_tag": {
    "event": "onload",
    "src": "https:\/\/djavaskripped.org\/fancy.js"
  }
}

and send a post request to add a script to an existing page.

Until now, I've successfully built the app by following Building a Shopify application with Node.js and Express tutorial.

What should be my next step? I'm a little confused.

shopify

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1555 81 282

Hey Abhilash,

You'll want to first make sure you're rewriting your scopes variable if you're not already:

const scopes = 'read_products,write_script_tags';

Second, I assume you would want to install your script tag during or right after the installation flow. In this block, instead of calling shop.json, you'd be able to POST your script tag instead:

    request.post(accessTokenRequestUrl, { json: accessTokenPayload })
    .then((accessTokenResponse) => {
      const accessToken = accessTokenResponse.access_token;
      // DONE: Use access token to make API call to 'script_tags' endpoint
      const createScriptTagUrl = 'https://' + shop + '/admin/script_tags.json';
      const shopRequestHeaders = {
        'X-Shopify-Access-Token': accessToken,
      };
      const scriptTagBody = {
        "event": "onload",
        "src": "https:\/\/myscripts.com\/script.js"
      };

      request.post(shopRequestUrl, { json: scriptTagBody }, { headers: shopRequestHeaders })
      .then((shopResponse) => {
        res.status(200).end(shopResponse);
      })
      .catch((error) => {
        res.status(error.statusCode).send(error.error.error_description);
      });
    })
    .catch((error) => {
      res.status(error.statusCode).send(error.error.error_description);
    });

The above should create the script tag so long as you have the necessary access scope. Hope that helps a bit.

Cheers.

0 Likes
Highlighted
Shopify Partner
55 0 3

Worked, well.

APP PERMISSIONS

This app can access and modify your store‘s data.

  • Read products, variants and collections

  • Modify script tags in your store's theme template files

    The above part shows up now in my app.

However, when I refreshed my test home page (https://myapp.myshopify.com/), the script didn't show up.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1555 81 282

Have you verified that you in fact created the script? With your access token, you can request /admin/script_tags.json to see if it's supposed to be there. If not, perhaps something went wrong in the execution of the request.

Cheers.

0 Likes
Highlighted
Shopify Partner
55 0 3

Sending 

const scriptTagBody = { "event": "onload", "src": "https:\/\/myscripts.com\/script.js" }; gives below error

Error: Invalid URI "/"

0 Likes
Highlighted
Shopify Partner
55 0 3

Anyone?

0 Likes
Highlighted
Shopify Partner
55 0 3

Fixed using the below code. Basically, the request body was supposed to be sent as JSON.

 

request.post({
    url: createScriptTagUrl,
    body: scriptTagBody,
    headers: shopRequestHeaders,
    json: true
}, function(error, response, body) {
    if (!error) {
        console.log(body)
    }
});
0 Likes
Highlighted
Shopify Partner
6 0 0

Hi Abhilash,

1. Can you explain me about the source in this snippet. I dont know what to add in that source.

const scriptTagBody = { "event": "onload", "src": "https:\/\/myscripts.com\/script.js" }; 

2. Where to add this request body JSON format in the code.

0 Likes
Highlighted
Shopify Partner
55 0 3

@Harish
I'm currently using Node JS. Hence pasting the below working code. It'll help you to get an idea about the implementation.
 

const shopRequestHeaders = {
                'X-Shopify-Access-Token': "enter your access token over here"
            };

            const createScriptTagUrl = 'https://shopname.myshopify.com/admin/script_tags.json';
            const scriptTagBody = {
                "script_tag": {
                    "event": "onload",
                    "src": "https:\/\/myscripts.com\/script.js"

                }
            }
            request.post({
                url: createScriptTagUrl,
                body: scriptTagBody,
                headers: shopRequestHeaders,
                json: true
            }, function (error, response, body) {

                //Do whatever you want with the body
            });

 

0 Likes
Highlighted
Shopify Partner
6 0 0

@Abhilash

 

Thanks abhilash the script tag is added, but when I add a textarea in the function body it shows error. Can you give some sample code for the function.  

0 Likes