CODEWITHSUNDEEP
shopifyshopify-appshopify-api
cardfaux
cardfaux

Reputation: 91

How To Pass Data Between Shopify "THEME-APP-EXTENSION" And The Backend Of The App?

I am trying to figure out how to pass data between the theme-app-extension and the backend of the application that the theme-app-extension is connected to. The theme-app-extension is all liquid, css, and javascript so I wasn't sure if there was a built in way to pass data between the two. For example is there a suggested method to pull data into the theme-app-extension from the database and is there a suggested way to send data to the database from the code running the theme-app-extension? I am fairly new to doing anything with theme-app-extensions as well as building Shopify applications. I have built Shopify applications that was admin facing or just cosmetic, this is my first time building a Shopify application that takes user input and sends it to the database and retrieves that data for the end-user to see.

Any suggestions would be greatly appreciated.

Thank You.

Upvotes: 6

Views: 3458

Answers (4)

Benny Chan
Benny Chan

Reputation: 928

There are mainly 2 ways to do so:

  1. Metafields. Your backend creates metafields on the entity and you use liquid to render the data for your app blocks
  2. App proxy and your app API. Set up an app proxy to fix cross origin between Shopify and your app. Use ajax call to retrieve data from your backend

Upvotes: 1

Webaaz
Webaaz

Reputation: 21

You can use Shopify metafields API in your backend to add metafields on product, app...

Then in your liquid block you can get the metafield like

<script>
    MY_VAR = '{{ app.metafields.mynamespace.myvar }}';
</script>

More information on metafields on the Shopify blog

Upvotes: 2

Malek
Malek

Reputation: 160

I started working on Shopify App (Theme App Extension) a week ago

I run into the same problem, so I did consume API in a javascript file using Fetch Here is an example of the code:

enter image description here

I add this into global.js file inside assets

enter image description here

And then I linked the script files inside my Liquid block

enter image description here

Also inside global.js, I did manipulate DOM by injecting data consumed from API, here is an example

enter image description here

Finally what I did is communicate directly with DOM to inject or retrieve data, then handle it using javascript

I hope this helps you

Ps: This is my first experience with Shopify too, and I was quite disappointed (lack of resources, docs, and community)

Upvotes: 3

David Lazar
David Lazar

Reputation: 11427

You usually (always) pass data from the front-end to the back-end using an App Proxy. There really is no other way at this time. The Proxy gives you an XHR call you can use, and you can return Liquid or JSON. Your choice.

Upvotes: 0

Related Questions