Unsure how to set conditional blocks in hit template

 <script type="text/html" id="hit-template">
      <li class="col-sm-12 col-md-4">
        <div class="property">
          <a href="{{slug}}" class="property-select">
          <div class="top" style="background-image: url('{{image}}')">
              <div class="overlay">
                <span><i class="fa fa-chevron-circle-right"></i>  View Property</span>
              </div>
          </div>
          <div class="bottom">
                <div class="row">
                    <div class="col-xs-8">
                        <div class="address">{{address_short}}</div>
                        <div class="city">{{city}}, {{state}}</div>
                    </div>
                    <div class="col-xs-4">
                      <div class="price text-right">${{#helpers.formatNumber}}{{list_price}}{{/helpers.formatNumber}}</div>
                      <!-- want to add conditional here if sq_ft = 0 do not show -->
                      <div class="sqft text-right">{{#helpers.formatNumber}}{{sq_ft}}{{/helpers.formatNumber}} Sq Ft</div>
                      <div class="sqft text-right">${{#helpers.formatNumber}}{{price_per_sqft}}{{/helpers.formatNumber}} / Sq Ft</div>
                    <!-- end conditional-->
                 
                    </div>
                  }
                  }
                </div>    
                 <div class="row">
                      <div class="col-xs-12">
                        <div class="bed-bath">
                          <span class="box">{{bedrooms}}</span>
                          <span class="box">Beds</span>
                          <span class="box">{{bath_full}}.{{bath_half}}</span>
                          <span class="box">Baths</span>
                        </div>
                      </div>
                 </div>
            </div>
            </a>
          </div>
      </li> 
    </script>

Ideally I’d like to have a conditional wrapped around the block commented above. I’m not sure how to accomplish that in the hit template. I just want to show or hide sections of the template based on item values when it renders.

Any help or links to documentation would be appreciated. I’m using instantsearch.js

Hi there,

Thank you for reaching out.
If I understand correctly, you would like to be able to hide the results if the query returns nothing.
You can take a look at the guide about how to design a no result page.

Let us know if you have any questions.

Cheers,

Hey Marie,

That actually isn’t what I was asking. I’m wondering how to modify the markup of the hit template based on variables / data within the records themselves.

In my example above, I want to remove the following markup if the sq_ft variable happens to be 0

 <div class="sqft text-right">{{#helpers.formatNumber}}{{sq_ft}}{{/helpers.formatNumber}} Sq Ft</div>
 <div class="sqft text-right">${{#helpers.formatNumber}}{{price_per_sqft}}{{/helpers.formatNumber}} / Sq Ft</div>

Hi,

In that case, what you could do is use templates (see documentation) and pass it your own function that will perform a check:

search.addWidget(
    instantsearch.widgets.hits({
      container: "#hits",
      templates: {
        item:function(data) {
          // perform check here
          if(data.surface === 0) {
            // use markup 1
            return '<div id="noSurface">SqFt = 0 </div>'
          } else {
            // use markup 2
            return '<div>'+ data._highlightResult.surface.value  + '</div>'
          }
        }
      }
    })
  );

Cheers,

2 Likes