My client has specific requirements. His supplier has an API. He wants to fetch data from that real time API, and display them in a certain page. And when someone clicks on add to cart button, then it needs to create a new product using that product data in the Shopify store and create an order with that added product. I want to know how to achieve this.
I was going to create the front-end with React and build the code to Javascript and add to a theme app extension. Then build a node server and host it in heroku or netlify and connect that server with supplier API. If someone wants to add a displayed product to their cart, it make a POST request to NodeJS server and NodeJS server uses Shopify Admin API to create new product and the an order with that product.
How to achieve this? I have already coded the React front-end for filtering and displaying.
Simply create a theme app extension (can be an app block or embedded block) and fetch. It’s simply making a fetch request from the storefront. Remember that if you need to access your app’s API from the extension you need to setup the proxy route and verify the HMAC headers though.
I created the theme app extension with React and it’s working now (under testing). That React app (theme app extension) is for display data and filter the data. It’s a filter system. It has 2 functions.
- Fetch the data from my Remix App and display them as products and when user selects parameters to filter data, It collects those filter values and generate a query to make another request to my Remix app and fetch the filtered data and display those.
- There’s a add to cart button for each products. When user add the product to cart, theme app extension needs send another request to my Remix app to create the product in Shopiify using Admin API and create order and add that product to that order.
I Forgot about the Remix App. It communicate with supplier API to fetch data and with Admin API to create the products and orders when needed.