使用 Shopify 管理 API 创建产品

Question

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

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

如何将此 Fetch 函数绑定到单击事件？

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

})

我在我的项目中使用同构 Fetch，它应该适用于服务器和客户端。

任何帮助和指导将不胜感激。

谢谢你！

Answer 1

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

1. 民众
2. 风俗
3. 私人的

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

我在我的项目中使用同构 Fetch，它应该适用于服务器和客户端。

尽管它适用于服务器和客户端，但请勿从客户端调用 Shopify API，因为这会暴露您的私人应用程序凭据。

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

1. 为 Button 添加事件监听器
2. 向后端服务器发送POST请求
3. 通过 API 在 Shopify 上创建产品
4. 使用上一步返回的 ID 将产品添加到购物车
5. 返回购物车 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 部分。我建议使用Shopify 的官方 Node.js 模块，而不是使用 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);
  }
});