How to update theme files using NodeJS + React?

DanielTehrani
Excursionist
42 1 5

In my Shopify App which I'm building with NodeJS + React, I would like to insert liquid code into the theme files of the shop.
I found this tutorial, but it only shows how to do it "manually".

I thought about getting the theme file as a string using the Asset API, then inserting a liquid code using javascript native functions like .findIndex, .slice, etc etc. Is this the only way to insert code into theme files? Or is there an easier way?

Thanks.

0 Likes

Hey,

You need to an API call to the theme. Please read all the instructions here. It's important that you already do have experience with Javascript.

https://shopify.dev/docs/admin-api/rest/reference/online-store/asset



◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
DanielTehrani
Excursionist
42 1 5

Hi.
Thanks for the reply.


I've read the instructions, but I don't think there is an explanation about updating an existing theme.

I would like to know how to insert a liquid code into (using the Asset API) an existing theme.

Thanks.

0 Likes

Hello,

Yes, there is, you just need to grab the current theme's ID and make a PUT call to add create or update whatever file you wish.

diego_ezfy_0-1609634025645.png


I reckon that you're not very familiarized with Javascript itself since this is a fairly basic API call, therefore I'd highly suggest getting proficient in React before diving into Shopify App developement, it will save you a lot of headache and make your progress much more smooth.

Unfortunately app development for Shopify is not much beginner-friendly, I feel you there.
Consider taking a look in Udemy courses for React/Node to gain a bit more of understanding of how it works and I promise you it's going to be much more easy to understand!

Wishing you the best.

Kind regards,
Diego

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
DanielTehrani
Excursionist
42 1 5

I apologize for my confusion question.
I really appreciate the explanation, but I have solid experience in React + NodeJS applications.

 

I understand that I have to make a PUT call to update the theme, but I not sure if my methodology is correct.

At first, I get the liquid code by calling
GET /admin/api/2021-01/themes/{theme_id}/assets.json?asset[key]=templates/index.liquid

And next, for example, if I want to insert <h1>Hello World</h1> right before {{ content_for_header }}, should I do something like below?

const str = "Liquid code as string"
const indexOfContentForHeader = str.search("{{ content_for_header }}");

const updatedLiquidCode = str.slice(0, indexOfContentForHeader) + "<h1>Hello World</h1>" + str.slice(indexOfContentForHeader)

 

then, 

PUT /admin/api/2021-01/themes/{theme_id}/assets.json
{
"asset": {
"key": "templates/index.liquid",
"value": updatedLiquidCode
}
}

 

or is there a "cleaner" way?  (Is there a library to do something like the JavaScript code above?)

 

Sincerely,
Daniel

0 Likes

Oh, I see. 

Yes, as far as I am aware this would be the best way to do it.

Personally I'd do something like:

data.replace(`{{ content_for_header }}`, `<h1>hey</h1>
{{ content_for_header }}`);


Of course you'd need to use REGEX to target something like {{content_for_header             }} as well, but that's about it!

In Shopify dev-ing there's a lot of "non-conventional/ideal" ways to do things, unfortunately.
Shopify's support specifically for app developers is terrible as well, so feel free to reach out for anything you need, I'll be happy to help.

Kind regards,
Diego

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
DanielTehrani
Excursionist
42 1 5

Thanks for the quick replay!
Yes, I think using the replace function and REGEX is great and necessary!

 

I've been feeling that too, so thank you so much for helping!


In Shopify dev-ing there's a lot of "non-conventional/ideal" ways to do things, unfortunately.

 

Best,
Daniel

0 Likes