Storing data from my embeded app

[samz]

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]

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

[samz]

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!

[syedusama076]

Hey Tim!
I want to add a database to my embedded app.

metafields didn't work for me.

I want to enable the button on adding the scripttag in the store and disable it if I remove scripttag. The enable and disable setting for every store, I want to save in database.
Please guide me.

Thanks in advance.!

[OTM]

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

[sohail9689]

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. 

[betoxx1]

 OTM, having the access token in a js file in the store doesnt give security issues?