如何使用 javascript 在 woocommerce 中通过 Api Rest 添加到购物车？

Posted 2023-02-27

【中文标题】如何使用 javascript 在 woocommerce 中通过 Api Rest 添加到购物车？

【英文标题】：How to add to cart via Api Rest in woocommerce with javascript?

【发布时间】：2021-11-09 05:14:21

【问题描述】：

我添加这个问题是为了能够帮助任何正在寻找新版本 Woocommerce Api Rest 答案的人，在 7 小时后我已经实现了它，如果我可以帮助某人节省这个时间，我很高兴。

重要

我建议使用 woocommerce rest api 文档中的 postman 或 insomnia 等工具，它们完全帮助我生成正确的代码并进行测试。

很好，我可以通过 api rest 添加一个简单产品的代码是这样的。

fetch("https://yourdomain.com/wp-json/wc/store/cart/add-item", 
  "method": "POST",
  "headers": 
    "X-WC-Store-API-Nonce": "here-your-nonce-woo-not-wp-nonce", // see how to create the nonce for woo that is not the same as wordpress, it is another
    "Content-Type": "application/json"
  ,
  "body": "\"id\":\"3665\",\"quantity\":\"1\""
)
.then(response => 
  console.log(response);
)
.catch(err => 
  console.error(err);
);

要查看您可以对购物车执行的所有操作，请执行https://yourdomain.com/wp-json/wc/store/，您将看到所有可能的路线，最复杂的事情可能是正确组装所谓的 post 与正确的 nonce 和其他请求文档。

对于添加到购物车，rest api ajala 的文档很少，这可以帮助某人并且可以增加 woocommerce 中的文档。

拥抱

【问题讨论】：

请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

【参考方案1】：

首先非常重要的是创建一个nonce woocommerce

这是创建 woocommerce nonce 的信息

https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/src/StoreApi/docs/nonce-tokens.md#generating-security-nonces-from-wordpress

通过 woocommerce 中的 api rest 对购物车的各种请求非常重要。

// wp_create_nonce( 'wc_store_api' ) 
$woononce = wp_create_nonce( 'wc_store_api' ), 
return $woononce

create nonce woocommerce api rest

确保您拥有 woocommerce nonce 后，下一个要定位的数据是您要添加的产品的 ID，并在您感觉更舒服时执行传统或异步等待。

fetch("https://yourxdomainx.com/wp-json/wc/store/cart/add-item", 
          "method": "POST",
          "headers": 
            "X-WC-Store-API-Nonce": 'NONCEHERE'// woononce,
            "Content-Type": "application/json"
          ,
          "body": `\"id\":\"$id_item\",\"quantity\":\"-$negativenumber\"`  
        )
        .then(response => 
          console.log(response);
        )
        .catch(err => 
          console.error(err);
          console.log('err');
        ); 

【讨论】：

您回答了自己的问题，但答案并未真正回答问题。