如何在购物车预览中访问 "New Products"

Question

在我的基石主题中，我可以像这样使用 yaml front-matter 在主页上访问 "new products"

---
products:
    new:
---

但这不适用于模板文件。所以我想知道我是否可以做这样的事情。

utils.api.products.new( { template: 'cart-upsells' }, (err, response) => {
    if (err) { return false; }
    $upsells.html(response);
});

这也不起作用，因为我认为 utils.api.products.new 不存在。

我也愿意使用 BC-api 如果它是唯一的方法 — 假设我从 api 中做了 return 一堆 json 我可以吗如何使用把手将其模板化？

Answer 1

新产品在全球范围内可用，因此您应该能够在购物车预览模式中访问它们，而无需 API 调用。

您可以尝试将新产品的封面添加到您的 cart.html 页面吗？那应该调用 object，这样您就可以使用 {{products.new}}

在 preview.html 上访问新产品

---
products:
    new:
        limit:
---

编辑： 要在 header (cart-preview.html) 的 mini-cart 预览中访问新产品 object，您可以使用 {{inject}} 和 { {jsContext}} 帮助程序公开新产品 object 并在您的代码中使用它。例如，添加到base.html：

{{inject 'newProducts' products.new}}



<script>
    var jsContext = JSON.parse({{jsContext}});
    console.log(jsContext.newProducts);
</script>

您可以使用此方法在 mini-cart 预览中调用 jsContext.newProducts。您需要确保所有页面类型（类别、产品、页面、品牌）都调用新产品的前端内容，以便 object 显示。

编辑 #2： 您可以在 cart-preview.js 选项数组中添加 'New Products' 作为配置，这应该会提供 cart-preview。 html 访问 {{products.new}}。您的选项数组在 cart-preview.js:

中应该如下所示

$cart.on('click', event => {
        const options = {
            template: 'common/cart-preview',
            config: {
                products: {
                    new: {
                        limit: 3,
                    },
                },
            },
        };

然后，你可以在cart-preview.html中使用handlebars打印出属性：

{{#each products.new}}
{{name}}
{{/each}}

如何在购物车预览中访问 "New Products"

How to Access "New Products" in cart-preview

bigcommerce