Custom Filter to categorize tags

Hi there,
We are one of the subscriber of your great search app.
I’m customizing the filter display of our tags by categorizing on it.
I did some coding by following the template of our previous customization which is working fine.

Here is the code located in algolia_instant_search.hogan file:

    <div class="ais-facet-disjunctive ais-facet-teamplayers">
        <div class="ais-root ais-refinement-list ais-facet">
          <div class="ais-refinement-list--header ais-facet--header ais-header"># of players</div>
           <div class="ais-body ais-refinement-list--body ais-facet--body">
            <div class="ais-refinement-list--list">  
              <!--begin-ais-refinement-list--item teamA-->            
              <div class="ais-refinement-list--item ais-facet--item algolia-teamA">
               <div>
                 <label class="ais-refinement-list--label ais-facet--label">
                   <input type="checkbox" class="ais-refinement-list--checkbox ais-facet--checkbox"> 5 Players
                 </label>                 
               </div>
              </div>
              <!--/end-ais-refinement-list--item teamA-->
              <!--begin-ais-refinement-list--item teamB-->            
              <div class="ais-refinement-list--item ais-facet--item algolia-teamB">
               <div>
                 <label class="ais-refinement-list--label ais-facet--label">
                   <input type="checkbox" class="ais-refinement-list--checkbox ais-facet--checkbox"> 10 Players
                 </label>                 
               </div>
              </div>
              <!--/end-ais-refinement-list--item teamB-->
              <!--begin-ais-refinement-list--item teamC-->            
              <div class="ais-refinement-list--item ais-facet--item algolia-teamC">
               <div>
                 <label class="ais-refinement-list--label ais-facet--label">
                   <input type="checkbox" class="ais-refinement-list--checkbox ais-facet--checkbox"> 15 Players
                 </label>                 
               </div>
              </div>
              <!--/end-ais-refinement-list--item teamC-->
            </div>
          </div>
        </div>
      </div>

Here is the code located in algolia_instant_search.js file:

     // Number of players
    instant.search.addWidget({
      init: function (opts) {
        var helper = opts.helper;

        // Team A
        $('.algolia-teamA').on('click', function () {
          var page = helper.getPage();
          if ($(this).hasClass('ais-facet--active')) { // Already selected, removing the filter
            $(this).removeClass('ais-facet--active');
            helper.setQueryParameter('filters', '');
          } else {
            $(this).addClass('ais-facet--active');
            helper.setQueryParameter('filters', 'tags:["5 Players"]');
          }
          helper.setPage(page);
          helper.search();
        });
        // Team B
        $('.algolia-teamB').on('click', function () {
          var page = helper.getPage();
          if ($(this).hasClass('ais-facet--active')) { // Already selected, removing the filter
            $(this).removeClass('ais-facet--active');
            helper.setQueryParameter('filters', '');
          } else {
            $(this).addClass('ais-facet--active');
            helper.setQueryParameter('filters', 'tags:["10 Players"]');
          }
          helper.setPage(page);
          helper.search();
        });
        // Team C
        $('.algolia-teamC').on('click', function () {
          var page = helper.getPage();
          if ($(this).hasClass('ais-facet--active')) { // Already selected, removing the filter
            $(this).removeClass('ais-facet--active');
            helper.setQueryParameter('filters', '');
          } else {
            $(this).addClass('ais-facet--active');
            helper.setQueryParameter('filters', 'tags:["15 Players"]');
          }
          helper.setPage(page);
          helper.search();
        });

        }
    });

Unfortunately it’s not working because I’m not sure on this line helper.setQueryParameter('filters', 'tags:["X Players"]');

Please advise

Thanks

This issue already solve by myself by reading some of your documentation.
Now I have control to access all products attributes and customize to display in our store by using filter.
Thanks for your documentation.

2 Likes

Glad you could find a solution to your issue!

If that’s not too much to ask, could I ask you to share with us which part of the documentation or which forum post helped you on your question? :slight_smile: