BigCommerce Stencil 如何嵌套 {{filter}} Handlebars Helper？答案

【问题标题】：BigCommerce Stencil how can I nest the {{filter}} Handlebars Helper?BigCommerce Stencil 如何嵌套 {{filter}} Handlebars Helper？
【发布时间】：2020-06-12 07:14:29
【问题描述】：

在 javascript 和模板语言方面，我完全是个业余爱好者，但我知道的足以应付我们的小型企业。我们正在使用定制的 bigcommerce 模板主题（基石）。我从概念上理解车把助手工作的原因，但我不了解它们如何工作的细节。我已尝试阅读文档，但我不了解所有术语，所以我仍然迷路。

我想显示具有批量折扣的产品的最低价格，如果是装箱产品，则显示单价。问题是，bigcommerce 不允许您在“类别”页面中调用产品批量定价，因此我们正在尝试使用自定义字段。我想也许我可以通过“嵌套” {{filter}} 助手来达到预期的结果，但它不起作用。这是类别模板中的代码部分：

{{#if price}}
    {{#filter custom_fields 'As low as' property='name'}}
        <div>As low as {{value}}{{#filter custom_fields 'Price Unit' property='name'}} / {{value}}{{/filter}}</div>
        <div>with bulk discounts</div>
    {{else}}
        <div class="listItem-price">{{> components/products/price price=price}}</div>
    {{/filter}}
{{/if}}

你会如何处理这个问题？

【问题讨论】：

标签： filter handlebars.js bigcommerce

【解决方案1】：

您究竟想用过滤器功能完成什么 - 据我了解，您似乎正试图在一个循环中访问两个相邻的自定义字段？

如果是这种情况，我会尝试使用嵌套的 {{#each}} 循环 - 你会注意到，当你像这样嵌套循环时，有时你需要尝试使用 ../ 到达嵌套上下文之上 - - 老实说，它不是很一致，有时你需要两轮（就像我们在这里所做的那样），有时你需要一个 - 这就是我基本上使用反复试验来确定不同点的东西

{{#each custom_fields}}
  {{#if name '==' 'First Custom Field Name'}}
    First Value: {{value}}
    {{#each ../../custom_fields}}
      {{#if name '==' 'Second Custom Field Name'}}
        Second Value: {{value}}
      {{/if}}
    {{/each}}
  {{/if}}
{{/each}}

如果您想要一种不那么老套的方法，我建议您使用 stencil-utils 库方便的“按 ID 获取产品”功能：

(https://github.com/bigcommerce/stencil-utils)

您可以调用utils.api.product.getById(productID, {template}, callback) - 这基本上是使用产品模板从 BigCommerce 获取 HTML 响应 - 方便获取仅特定于产品页面但在这些页面之外的数据 - 通常您将使用product-view.html 作为基础——如果您选中quickview.js，这就是 BigCommerce 在产品卡上填充“快速查看”模式的方式。

这对于获取将在您需要的任何其他位置（类别页面、内容页面、博客文章等）呈现在产品页面上的所有数据非常方便。

无论如何，只需几个步骤即可：

首先，在类别卡上公开您产品的id。您只需转到 card.html 并添加一个 data-id="{{id}}" 属性，这样您就可以在页面加载时循环浏览每个属性。

例如：<div class="card" data-id="{{id}}"> ... </div>

接下来，我们将构建一个自定义模板，其中仅包含批量折扣的相关信息。基本上，你可以只使用product-view，但为了避免巨大的有效载荷，我们可以创建一个新模板：

templates/components/products/bulk-discount-rate-fetcher.html:

<div data-bulk-rates="{{json product.bulk_discount_rates}}"></div>

是的，就是这样！

现在是函数的核心，我们将遍历类别页面上的所有产品卡片，我们将使用 stencil-utils 使用批量折扣的简单 JSON 数据标签填充我们的自定义模板：

import utils from '@bigcommerce/stencil-utils';

$('.card').each((index, el) => {
  const id = $(el).data('id');
  utils.api.product.getById(id, { template: 'products/bulk-discount-rate-fetcher' }, (err, response) => {
    if (err) return console.log(err);
    const bulkRates = $(response).data('bulk-rates');
    console.log(bulkRates);
  });
})

结果：

如果您也希望将产品价格纳入此自定义设置，则需要进行一些额外的工作。

【讨论】：