Storing data from my embeded app

samz
New Member
2 0 1

Community,

I am reading myself in through the Shopify App development.

So I followed this https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react

tutorial on that, and that is all clear.

 

But I am still missing some key points.

- A simple setting like enabled or disabled, where is this data stored? Or where can we store this data for the store?

- 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?

Looking forward for your replies.

Tim_Anema
Shopify Staff
Shopify Staff
13 1 7

A simple setting like enabled or disabled, where is this data stored?

 

What are you enabling or disabling? You may want to add a database to your app or depending on what data you are storing you could use metafields

 

> 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?

 

You would need to add that conditional logic to your javascript to change how your page is laid out.

0 Likes
samz
New Member
2 0 1
Hi Tim,

Lets say a simple setting module enabled or disabled.

How can we fetch this on frontend, which data storage should we check in liquid conditions to see if we should render the module or not.

And about the JS, how can we include custom JS on the frontend when our app is installed?

Thanks!
0 Likes
OTM
Shopify Expert
667 170 236
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
 
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
sohail9689
Tourist
3 0 3

How I can get metafield data of the product in this JS file?? Basically, I'm building an app that saves some data of the product in meta field, now I want to display those meta fields data from my external javascript file.  console is working on the checkout page, but heaving problem of getting metfield data of that product. without go into product.liquid file, how access metafield data in js file. 

0 Likes
betoxx1
Excursionist
19 2 2

 

 

0 Likes