javascript - 使用 Shopify Admin API 创建产品

Question

我第一次开始使用 React 和 Node.js 构建私有(private) Shopify 应用程序。该应用程序的目的是监听添加到购物车按钮，单击它时应使用 Shopify 产品 API 在 Shopify 后端创建自定义产品。我在基本的 JavaScript 方面做了很多工作，并且在 jQuery 方面有丰富的经验，可以处理这个项目的更多基础知识。困难的部分是将 POST 事件绑定(bind)到添加到购物车的点击、创建产品并将其添加到购物车。

我正在尝试使用以下解决方案在后端创建产品。这是正确的做法，还是有更好的解决方案？

如何将此 Fetch 函数绑定(bind)到点击事件？

    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'
  },

})

我在我的项目中使用 Isomorphic Fetch，它应该可以在服务器端和客户端工作。

如有任何帮助和指导，我们将不胜感激。

谢谢!

Answer 1

你有几个问题。在回答之前，重要的是要清除我从您的措辞和示例代码中假设的一些误解。 Shopify Apps 有 3 种类型.

1. 公开
2. 自定义
3. 私有(private)

因此，如果您正在构建私有(private)应用，那么所提供的代码将无法用于创建产品，因为私有(private)应用使用基本身份验证，而公共(public)和自定义应用使用 OAuth 2.0 管理身份验证。

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

即使它适用于服务器端和客户端，也不要从客户端调用 Shopify API，因为这会暴露您的私有(private)应用凭据。

要实现您正在尝试做的事情，您需要修改 React App 以及后端代码。

1. 为按钮添加一个事件监听器
2. 向后端服务器发送 POST 请求
3. 通过 API 在 Shopify 上创建产品
4. 使用上一步返回的 ID 将产品添加到购物车
5. 返 repo 物车 URL 作为响应

React 中的示例代码如下所示

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"));

然后在您的 Node.js 应用程序中，处理 Shopify API 部分。我建议使用 Official Node.js module for Shopify 而不是使用 fetch .

示例代码如下所示

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);
  }
});