Custom Shopify App Built for store won't render DIV on theme

So I’m basically stuck and been tirelessly looking to get my app running. Long story short, I built a custom app for my store that has a custom form that Post’s to a third party API for SMS subcribers. I followed the generic tutorials provided by Shopify, and installed it successfully on our production store. HOWEVER, I am trying to embed a div that is being built by my JS function. I used NGROK to create a tunnel between my local machine, have a server running that deals with OAuth (I’m still testing before I deploy to something like Heroku). I’ve also check if all dependencies are installed. Now the last bit is that when I embed the div with the correct ID- nothing renders – I tried to use Script Tag API, and/or setting up an APP Proxy with a URL redirect, however I STILL cannot get it to render on my theme. It’s just one input to enter a phone number that would POST to that API. If anyone can help explain the best way to go about this – or perhaps a more detailed explanation of using the Script Tags API and how I can include that in my server file so that it can connect to my store would be great. Thank you. I’ve attached my code (minus the API key) was to what I want to render in case I missed something, and included my server.js code.

FRONT END:

console.log('hello World! heres my app');
var div = document.getElementById('AttApp');
div.innerHTML += '<form id="attentive_form" action="https://api.attentivemobile.com/1/add-subscribers" method="POST"><label>Phone Number</label><input id="phone__input" type="phone"  name="phone" value="phone" placeholder="phone" /><button type="submit" class="small" >Phone</button></form>';

document.getElementById('attentive_form').addEventListener('submit', function(event){
    event.preventDefault();
    var phone = document.getElementById("phone__input").value;
      console.log(phone);
      var attentiveVisitorId = document.cookie.replace(/(?:(?:^|.*;\s*)__attentive_id\s*=\s*([^;]*).*$)|^.*$/, "$1");

      var headers = {
        'Authorization': 'API KEY',
        'Content-Type': 'application/json'
       };

      fetch('https://api.attentivemobile.com/1/add-subscribers', {
        method: 'POST', 

      headers: headers,
      body: JSON.stringify({"phone": phone , "visitorId": attentiveVisitorId }),
      
      })
      .then(response => response.json())
        .then(data => {
      console.log('Success:', data);
          })
      .catch((error) => {
    console.error('Error:', error); })

  });

BACK END:

// Import Koa / Dotenv / Fetch modules
require("isomorphic-fetch");
const Koa = require("koa");
const koaStatic = require("koa-static");
const mount = require("koa-mount");
var bodyParser = require('koa-bodyparser');
const session = require("koa-session");
const cors = require('@koa/cors');
const dotenv = require("dotenv");


// Import Shopify/Koa modules to assist with authentication
const { default: createShopifyAuth } = require("@shopify/koa-shopify-auth");
const { verifyRequest } = require("@shopify/koa-shopify-auth");

// Env Configuration
dotenv.config();
const port = parseInt(process.env.PORT, 10) || 3000;
const { SHOPIFY_API_SECRET_KEY, SHOPIFY_API_KEY } = process.env;
const script_tag = {
    "script_tag": {
        "event": "onload",
        "src": "https://b23bcfd244dc.ngrok.io/main.js"
    }
}

// Create server using Koa
const server = new Koa();
server.use(session(server));
server.keys = [SHOPIFY_API_SECRET_KEY];

// Import and use server-side routes
const { router } = require('./server/routes.js');
server.use(router.routes());
server.use(router.allowedMethods());

// Authenticate app with Shopify
server.use(
    createShopifyAuth({
        apiKey: SHOPIFY_API_KEY,
        secret: SHOPIFY_API_SECRET_KEY,
        scopes: ["read_products", "write_products"],
        afterAuth(ctx) {
            const { shop, accessToken } = ctx.session;
            ctx.cookies.set("accessToken", accessToken, { httpOnly: false });
            ctx.cookies.set("shopOrigin", shop, { httpOnly: false });
            ctx.redirect("/");
        }
    })
);
server.use(verifyRequest());

// Enable CORS (required to let Shopify access this API)
server.use(cors());

// Use module 'koa-bodyparser'
server.use(bodyParser());

// Mount app on root path using compiled Vue app in the dist folder
server.use(mount("/", koaStatic(__dirname + "/public")));

// Start-up the server
server.listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`);
});

34 thoughts on “Custom Shopify App Built for store won't render DIV on theme”

Leave a Comment