algoliasearchHelper 分层方面

Question

我正在尝试使用 Algolia's searchHelper.js 实现分层类别菜单，但未显示类别内容。

示例 Algolia 记录：

objectID: 41
title: "Canon 40D With Lens"
hierarchicalCategories: {
"lvl0" : "Video Juegos y Consolas",
"lvl1" : "Video Juegos y Consolas > PS3",
"lvl2" : "Video Juegos y Consolas > PS3 > Juegos"
}

Answer 1

分层方面不同于连接和分离方面，因为它们基于树。您的示例中的问题是您为这种不同的结构重用了相同类型的模板。您可以在主 documentation of the Algolia JS Helper.

上找到有关层次结构面操作的更多信息

我也在 jsFiddle 上 fixed your sample。以下是我更改的部分：

接收数据时处理分层方面 (l.128):

else if(facetName === 'categories') {
  facetContent = {
    facet: facetName,
    title: FACETS_LABELS[facetName],
    values: content.getFacetValues(facetName, {sortBy: ['isRefined:desc', 'count:desc']})
  };
  facetsHtml += hierarchicalFacetTemplate.render(
    facetContent,
    {sub: hierarchicalFacetTemplateSource});
}

为了简单起见，我硬编码了属性的名称。

创建两个模板，一个用于容器，一个用于递归遍历值树。 (html: l.117-138)

<script type="text/template" id="hierarchical-facet-header-template">
  <div class="facet facet-hierarchical">
    <h5>{{ title }}</h5>
    {{#values}}
      {{>sub}}
    {{/values}}
  </div>
</script>

<!-- Hierarchical Facet template -->
<script type="text/template" id="hierarchical-facet-template">
    <ul>
      {{#data}}
      <li>
        <a href="" class="facet-link toggle-refine facet-hierarchical {{#isRefined}}facet-refined{{/isRefined}}" data-facet="{{ facet }}" data-value="{{ path }}">
          {{ name }}<span class="facet-count">{{ count }}</span>
        </a>
      {{>sub}}
      </li>
    {{/data}}
  </ul>
</script>

将这些新模板导入 JS。 (js: l.44-46)

var hierarchicalFacetHeaderTemplateSource = $('#hierarchical-facet-header-template').text();
var hierarchicalFacetTemplateSource = $('#hierarchical-facet-template').text();
var hierarchicalFacetTemplate = Hogan.compile(hierarchicalFacetHeaderTemplateSource);

algoliasearchHelper 分层方面

algoliasearchHelper hierarchical facets

algolia