Communicate APP with Frontend (javascript code)

New Member
11 0 0

Hello everyone,

I want to ask you about  communicating Apps with frontend (javascript). I want to write an App which will store some extra informations about added products. When i will save this extra informations to each product in App i want to get this extra informations on product page (in javascript code) and render product which look  depends on this extra informations. Is it possible to do that? I don't know how to communicate App with frontend and how to get some extra data from APP database that are not saved in Shopify Admin Panel.

Best Regards!

0 Likes
Highlighted
Shopify Expert
3841 0 270

You are missing a really cool and easy option. Forget front-end Javascript as being overkill, uneeded, and perhaps problematic. Instead, store your extra information as JSON in a Metafield Resource. You can attach as many of these resources to a Product as you need. Then, with simple Shopify Liquid in your templates, you can detect the presence of this extra information and render it. Problem solved. Zero front-end coding needed. 

If you are really set on front-end coding in Javascript, you can also solve the problem that way. Use JS to make an Ajax call to your App endpoint specific to receiving a product ID. So when viewing a product, make a call. The callback will return to you the same JSON as you might have stored in a Metafield Resource. Render the JSON as you wish or need, and you're done. The catch is that you have to setup an App Proxy in your App. And note that your shop will likely exhibit that "flash of delight" while waiting for your Ajax call to complete.

So there you go. Two ways to skin the cat. Have fun.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes
New Member
11 0 0

Thank you for your response.

It's sounds good when i am reading about Metafield Resources. I am trying to POST a test metafield to product, so i make a call with url like this: https://{shop_name}.myshopify.com/admin/products/#1732842123679/metafields.json

Result of this request is redirect to login page. Could you tell me what it's going on? I have an Authorization token, which is combination of [apiKey:accessToken] -> Get bytes of this string -> convert to base 64.

Is there any other token, which i need to provide with POST request?

Thank you in advance,
Best Regards.

0 Likes
Shopify Expert
3841 0 270

If you have an oAuth token with scope to write products you should be fine. And take the hash symbol from your product ID, that is not going to help. 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes
New Member
11 0 0

Okay, so i deleted the hash symbol from my product ID and now the response code is 301 with message - {"errors":"For security reasons, requests using HTTP Basic Authentication cannot include cookies."}. So i delete all cookies (one by one testing is it works). Without any cookies i am getting HTTP 400 (bad request). I have an acces to read and write products so i think that it is not the point.

Could you tell me what i am doing wrong?

 

Thank you in advance,

Best Regards!

0 Likes
New Member
11 0 0

Okay, i got this. We need to add headers "Content-type" as "application/json"

 

Thank you for the useful informations :)

Best Regards!

0 Likes