Hi, Samz,
This is Evita from On The Map.
If you want to create an app with React and Nodejs, I suggest you use Shopify-app-cli, it’s much simpler and faster to build apps.
A simple setting like enabled or disabled, where is this data stored? Or where can we store this data for the store?
If you want to store data, like shop orgin or accessToken and or other data, I suggest you use MongoDB for NodeJs.
If we make apps that should have functionality on the front-end, like conditional drop-down options for example, what is the workflow for this? What is the approach?
For this, you will have to use ScriptTag. To add scriptTag you will need to create API call in afterAuth function. For that, you will need to add read_script_tags,write_script_tags SCOPES, so you have permission to add the script code. After user accepts to install the App, in front-end Shopify will automatically include your script. When the script is included, you can add your Javascript code. You can’t add CSS with API call, what I did to add CSS, I created new CSS element using:
document.createElement("link")
API call for adding ScriptTag:
const scriptTagBody = {
script_tag: {
event: "onload",
src: `https://example.ngrok.io/public/myScriptName.js`
}
};
const scriptTagHeaders = {
// You can get accessToken in afterAuth callback.
"X-Shopify-Access-Token": ACCESSTOKEN,
"Content-Type": "application/json"
};
// Install request by using yarn or npm
const request = require("request");
const options = {
// You can get shop in AfterAuth callback
uri: `https://${shop}/admin/script_tags.json`,
json: true,
body: scriptTagBody,
headers: scriptTagHeaders,
method: "POST"
};
request(options, function(err, resp, body) {
// If something goes wrong
if (err) {
console.log(error)
}
console.log('**Script has been added to front store!**');
});
So in your myScriptName.js, you create something similar to this:
// For CSS
const cssLink ="https://example.com/public/test.min.css";
var style = document.createElement("link");
style.href = cssLink;
style.rel = "stylesheet";
//Append the script and style to the document's head.
document.head.appendChild(style);
// For JS
const scriptsrc="https://example.com/public/test.min.js";
var script = document.createElement("script");
script.src=scriptSrc;
script.async = true;
script.type = "text/javascript";
script.onload = callback;
document.head.appendChild(script);
Best,
Evita