algoliasearchHelper hierarchische Facetten

Question

Ich versuche, ein hierarchisches Kategorie-Menü mit Algolia's searchHelper.js zu implementieren, aber der Inhalt der Kategorie wird nicht angezeigt.

https://jsfiddle.net/t0tue5rk/1/

Probe Algolia Rekord:

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

Die hierarchischen Facetten unterscheiden sich von den konjunktiven und disjunktiven Facetten, dass sie auf einem Baum basieren. Das Problem in Ihrem Beispiel ist, dass Sie die gleiche Art von Vorlage für diese andere Struktur wiederverwenden. Sie können weitere Informationen über die Manipulation von hierarchischen Facetten auf der Haupt documentation of the Algolia JS Helper finden.

ich auch fixed your sample auf jsFiddle. Hier sind die Teile, die ich geändert:

• die hierarchischen Facetten Handhabung, wenn Daten (l.128) empfangen:

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

  Aus Gründen der Einfachheit fest einprogrammiert ich den Namen des Attributs.

• Erstellen Sie zwei Vorlagen, eine für den Container und eine für den rekursiven Durchlauf des Wertebaums. (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> 
  

• Import diese neuen Vorlagen in die JS. (Js: l.44-46)

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