Create product with Product API on Add to cart button click

Retired Boards Appdev Store Design
1

Hi,

I’m on the road to building my first app. The only purpose of this app is to create a product with a custom price, based on some interactions on site, and then add that product to cart. The product is highly customizable, where differnet pieces can be added to the product, making the price dynamic. Creating a private app was the solution provided by the Shopify Front End Developers, so i’m trying that solution. I have followed the base setup of the app structure, following the Shopify tutorial on building apps with Node.js and React.

It’s fair to say im not known to working with APIs, nevertheless i’ve never worked in reacted so any help could is highly appreciated. I have worked plenty in css, html and basic javascript + great experience in jQuery, so I’ve been working with JavaScript before.

My main issue, is writing a script to create the product in the admin backend. I’m uncertain on how to trigger a POST, but i’m trying the following:

let new_product = {
        product: {
            title: Custom,
            body_html: test,
            vendor: Customcuff,
            product_type: customproduct,
            tags: Customproduct
        }
    };

fetch('/admin/api/2020-07/products.json', {
  method: 'post',
  body: JSON.stringify(new_product),

  headers: {
  	'X-Shopify-Access-Token': process.env.SHOPIFY_API_SECRET_KEY,
    'Accept': 'application/json'
  },

})

Is this the correct way to post a new product to the backend? Or is there other, better solutions for doing it this way?

Lastly, is this a task that should be easy to go about, or is creating products that way of more advanced nature?

Hope to hear back from you soon!

2

Hey @MagnusPilegaard ,

If you want to make API calls from the front end, you’ll need to use an App Proxy. Although it might be possible to make a call from the front end using JS, this would require exposing your API secret and should never be done. An app proxy allows you to send requests from the frontend of a store to an app you host, and it allows you to verify that the request originated from the store.

The code example you posted is from a Node app, which could be a great option for this use case. Node uses Javascript, but it’s designed to run as a standalone app and not in the browser. If you build and host your own Node app, you can use it to ingest data from the storefront app proxy, and then use that data to make an API call to Shopify from the Node app.

3

Hi @_JB !

Thank you for your answer!
I have been trying to use the isomorphic fetch module - shouldn’t this enable front end API calls?
I use en .env file to store my keys, which is a method used by Shopify in their official Node.js and React tutorial.

I appreciate your guidance on the topic, as I’m completely green in this area.
I have made the script myself inside the server.js file. I’m hosting the app myself, tunneling with ngrok. Would I need to use the storefront API to do this properly, or can this be done without?

A question on the side, is there an alternativ to making Shopify Apps without self-hosting?
Using Node, would mean I had to keep the app running for my clients to use it, or am I wrong on this?

I appreciate the broad guidance. :slightly_smiling_face: