I've started working with React and Node.js for the first time, on building an private Shopify App. The app's purpose is to listen to an add to cart button, when clicked it should create a custom product in the Shopify Backend with the Shopify Product API. I've worked plenty in basic JavaScript and have great experience in jQuery, to handle the more basics of this project. The tought part is binding the POST event to the add to cart click, creating the product and adding it to the cart.

I'm trying the following solution for creating the product in the backend. Is this the correct way of doing it, or is there a better solution for doing this?

How can i bind this Fetch function to an click event?

    let new_product = {
        product: {
            title: Custom,
            body_html: test,
            vendor: Custom,
            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'
  },

})

I'm using Isomorphic Fetch in my project, which should work server and client side.

Any help and guidance would be appreciately recieved.

Thank you!

I've started working with React and Node.js for the first time, on building an private Shopify App. The app's purpose is to listen to an add to cart button, when clicked it should create a custom product in the Shopify Backend with the Shopify Product API. I've worked plenty in basic JavaScript and have great experience in jQuery, to handle the more basics of this project. The tought part is binding the POST event to the add to cart click, creating the product and adding it to the cart.

I'm trying the following solution for creating the product in the backend. Is this the correct way of doing it, or is there a better solution for doing this?

How can i bind this Fetch function to an click event?

    let new_product = {
        product: {
            title: Custom,
            body_html: test,
            vendor: Custom,
            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'
  },

})

I'm using Isomorphic Fetch in my project, which should work server and client side.

Any help and guidance would be appreciately recieved.

Thank you!

• javascript
• node.js
• reactjs
• shopify
• shopify-app

1 Answer 1

You have got several questions there. Before answering, it is important to clear few misconceptions that I assumed from your wording and sample code. There are 3 types of Shopify Apps.

1. Public
2. Custom
3. Private

So if you are building a Private app, then provided code will not work for creating Product because Private apps use Basic authentication while Public and Custom apps manage authentication with OAuth 2.0.

I'm using Isomorphic Fetch in my project, which should work server and client side.

Even though it works on Server and Client ends, do not call Shopify API from Client side as this will expose your private app credentials.

To implement what you are trying to do, you need to modify React App as well as Backend code.

1. Add an event listener to Button
2. Send a POST request to Backend server
3. Create Product on Shopify via API
4. Add the product to cart using ID returned in previous step
5. Return the Cart URL in response

Sample code in React would look like

function Product() {
  const addProduct = async () => {
    const cart = await fetch("/your-end-point", {
      method: "post",
      body: JSON.stringify({
        // add product params
      }),
    });
  };

  return <button onClick={addProduct}>Add Product</button>;
}

ReactDOM.render(<Product />, document.getElementById("root"));

Then inside your Node.js application, handle the Shopify API part. Instead of using fetch, I will remend using Official Node.js module for Shopify.

Sample code will look like

const Shopify = require("shopify-api-node");
router.post("/your-end-point", async (req, res) => {
  try {
    const shopify = new Shopify({
      shopName: "your-shop-name",
      apiKey: "your-api-key",
      password: "your-app-password",
    });
    const product = await shopify.product.create(req.body);
    // use product ID from previous request
    const checkout = await shopify.checkout.create({
      /*checkout params */
    });
    res.status(200).send(checkout);
  } catch (ex) {
    console.log(ex);
  }
});