How to communicate remix app with theme app extensions?

[hacun3jr]

Hello, I am new to Shopify development.

I am looking for a way to have my remix app communicate with my theme app extensions? I have both created, but for example if my app has the merchant input some text into a text field within the app in the admin, how do I make it so that text is sent over to the theme app extension so that it can be shown within the theme in a product page for example?

I am aware of how the communication is between the assets and css files and the liquid files within the theme app extension, but have no idea how to have the remix react code useStates and variables be sent over to the extension.

Thanks in advance!

[djandreski · Accepted solution]

Hi @hacun3jr 
I'm also new to Shopify app development, and now I'm doing some smaller apps just get the grasp. Currently I try to make currency converter as a theme app extension, and also had that question, how to get the exchange rates to the App Block or how can the app block Javascript make an API call to my app to get the exchange rates. 
After all the research I asked ChatGPT 🙂 here it is what it proposed. It looks reasonable but I still haven't get to that part, so it's not tested.

----- ChatGPT response ---

To make the exchange rates available in Liquid templates, store them as Metafields associated with the shop. You can use the Shopify API to set Metafields for the shop. Each Metafield might represent a currency and its exchange rate.

Here's an example using the Shopify API (this is just a simplified example; you'll need to adapt it to your specific needs):

POST /admin/api/2021-10/metafields.json
{
  "metafield": {
    "namespace": "currency_converter",
    "key": "exchange_rates",
    "value": "{ \"USD\": 1.0, \"EUR\": 0.85, \"GBP\": 0.75 }",
    "value_type": "string"
  }
}

In your Liquid template that includes your App Block extension, you can use the metafield object to fetch the exchange rates and make them available to your Javascript:

{% assign exchangeRates = shop.metafields.currency_converter.exchange_rates | json %}

Now, you can use the exchangeRates variable in your JavaScript to perform currency conversion as described in a previous response.

I hope that this helps. And I also keep an eye on this thread in case someone else proposes a better solution.

[hacun3jr]

Thank you for the response!

I saw the metafields but I'm not sure if i will be able to customize the store as much as I'd like too with the limited metafield types? I have seen others use app proxy and some people talk about just bundling the react code into webpack or using vite, i havent tried those., but I wish there was a definitive way Shopify would have all of use use that is easy this way we don't have too much trial and error

[mqasim]

bro did you find the answer ? i'm also failed to find the exact way to send data from the remix app to the theme app extension