来自前端 javascript 的 BigCommerce 产品 object/id

Question

我正在尝试通过脚本管理器向 BigCommerce 产品页面添加内容。

有没有办法从前端JS获取当前产品object/id？

如果在 Stencil 框架中工作，有很多文档，但这可以从直接的前端 JS 实现吗？

Answer 1

有几种方法可以做到这一点：

使用 Stencil 你可以像这样在 Javascript 中注入对象：

{{inject "myProductName" product.title}}

<script>
// Note the lack of quotes around the jsContext handlebars helper, it becomes a string automatically.
var jsContext = JSON.parse({{jsContext}});

/* jsContext would output "{\"myProductName\": \"Sample Product\"}" which can feed directly into
your JavaScript. */

console.log(jsContext.myProductName); // Will output: Sample Product
</script>

只用JS没那么优雅。您可以查找添加到购物车表单，然后查找名称为 product_id 的隐藏输入，其中产品 ID 作为值。


const addToCartForm = Array.from(document.getElementsByTagName('form')).find(item => item.action.value === 'add' && item.action.name === 'action');

if (typeof addToCartForm === 'object' && addToCartForm.hasOwnProperty('product_id')) {
        return addToCartForm.product_id.value;
}

还有一个选项：BCData。每个产品页面都有一个名为 BCData 的变量，其数据如下所示：
```
{"csrf_token":"TOKEN_HERE","product_attributes":{"purchasable":true,"purchasing_message":"MY MESSAGE","sku":"MY SKU","upc":"MY UPC","stock":0,"instock":true,"stock_message":"MY STOCK MESSAGE","weight":0.35,"base":true,"image":"https://www.test.com/my-image","price":{"without_tax":{"formatted":".00","value":35,"currency":"USD"},"tax_label":"Tax"}}}
```
如果您的所有产品都有 skus，您可以获取 sku，然后将您的 JS 函数基于此而不是 id。我知道您特别要求基于 id 的解决方案，但我想让您知道，Bigcommerce 本机加载了一个 JS 对象。遗憾的是，在发表此评论时，BCData 不包含产品 ID。

祝你好运！

Documentation 第 1 点。

来自前端 javascript 的 BigCommerce 产品 object/id

BigCommerce product object/id from front end javascript

javascript

bigcommerce