BigCommerce模具如何嵌套{{filter}}车把帮手？

Question

关于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}}

您将如何处理？

Answer 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);
  });
})

结果：

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