Send html inputs to Shopify app with app proxies

[amir_nassal]

Hello everyone,

I've created a custom liquid page in the Templates folder in my development store and I successfully attached it with the app and I can get the information I need depending on the access scopes.

I'm stuck now with sending the inputs' values from the new liquid page to the backend (Express.js) using app proxies.

Is this possible?

I followed this documentation but I still don't know how to implement it in my code.

The code I used is available in this documentation

[amir_nassal]

Anyone?

[HunkyBill]

---

I'm stuck now with sending the inputs' values from the new liquid page to the backend (Express.js) using app proxies.

What does that mean? What are you stuck trying to do? Get what values? More details would be helpful. As an example of what I do for a pattern, I have a template in the shop that the merchant can edit. That same template is in my DB. When the Proxy gets a hit, typically the App is sent some data. An ID, whatever. Since I have this template, I fill in the Liquid that my App is responsible for. I used the ID to look something up, whatever. Now my template is a giant string of Liquid, with some Liquid tags filled in by me, and other I leave for Shopify. So I set the file type to be application/liquid and I send the string out the port back to Shopify. Shopify now renders the rest of the Liquid from the template, and WOW... what a cool thing. Right? 

So what's your problem? Try and explain it in some bullet points if you can. Simple is good.

[amir_nassal]

Hi @HunkyBill, thank you for your reply.

Sure, I'll keep it simple, here are the things that I've done before:

• I installed the new app in my development store
• I created a new liquid page in the Templates folder (Online store > Themes > Actions > Edit code)
• I used the code from the documentation that I've mentioned before (Express.js)
• I copied the API key, and the Secret key to the .env file
• I can pass the data that I want from the backend to the app (Using the rest admin API)
  • Example: 
    const shopRequestUrl = 'https://' + shop + '/admin/api/2019-04/price_rules.json';

Now I need to send the input's value (which is a discount code input) from that liquid page to the app so I can compare it with all the discount codes available in the store, because shopify doesn't allow calling priceRules from javascript due to security purposes.

Is this possible or there is another way?

[HunkyBill]

Again, your terminology is confusing, but let's try anyway.

What do you mean You can pass data from the backend to the App? Are you just saying your App works and you get the data you want making an API call? 

What is this mystical input specifically that you mention? Some form field a customer fills in? If so, you need to use an App Proxy callback to send the form submit value to your App. The whole point of the App Proxy pattern is to allow calls from the front-end SHOP to the backend APP. 

Make sense now?

[newuser13]

Hi @HunkyBill ,

I am trying to do a  similar form data to be filled by customer. I have followed the guide https://shopify.dev/tutorials/display-data-on-an-online-store-with-an-application-proxy-app-extensio... to create an app proxy.

In my theme.js i have added an ajax call 

 $.ajax({

      url: '/apps/subpath',

      type: 'PUT',    

       data: "my form data values",

      success: function (data) {

        console.info("come here");

        console.info(data);

      });

My proxy is getting hit in the app from the theme.js: But I am not able to retrieve the form data values. 

Am able to retrieve the full request  except form data values.

 router.put('/test', async (ctx) => {

      console.log("CTX request"+ctx.request.params)

 console.log("CTX request 2:+ctx.querystring)

console.log("CTX ctx.getRequestHandler.10::"+JSON.stringify(ctx.request))

 }

I could see the form data's sent in the request.

Can you provide me your support on this?

[HunkyBill]

I do not understand your question. You say your App is hit but cannot retrieve the form data.

Why are you using a PUT? You have an ID on your form for an existing resource? Also, you do not retrieve form data, you serialize it on the front-end, and send it in your request, whether it is a PUT, POST or GET. Seems like you got that. Not sure why you say you cannot retrieve data. If your request properly serializes the form, and you attach that data to the request, your Proxy gets the data and can use it any way you like.

You say you can see the data in the request? But not in the payload of your server-side code? Well then your server-side code is wrong. You do understand a GET uses a query string but a PUT or POST uses body parameters?

[newuser13]

Thanks @HunkyBill 

I changed to GET method instead of PUT and the parameters are sent as part of Querystring.

[betoxx1]

@newuser13Im receiving error 404.

Could you give me a hand here? 

[newuser13]

Do you see your data getting passed to the app?

Whether your app-proxy is configured correctly.

Can you please paste your code hiding sensitive information to help on this issue.

[Gregarican]

The whole concept of Shopify app proxy is pretty straightforward. And if certain values need to be passed through to the app proxy receiver, simply place those as query parameters. The receiver can then evaluate these and handle them on that end as needed. As long as the app proxy is correctly configured in the Shopify shop (https://shopify.dev/tutorials/display-data-on-an-online-store-with-an-application-proxy-app-extensio...).