How to begin with no search results?

Hello,

I’m using a php implementation of Algolia at www.malikoutdoor.com/searchy, and the opening search results (before you enter a string) are really confusing to my audience. Is there a simple way in the PHP implementation to not show those opening search results?

Anyone…?
Bueller…?
Bueller…?

Hey @andrew3,

You can do that like this:

search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      allHits: document.getElementById('hit-template').innerHTML,
      empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
    }
  })
);

<script type="text/html" id="hit-template">
  {{#query}}
    {{#hits}}
      <div class="hit">
        <div class="hit-image">
          <img class="toLowerCase" src="/images/products/{{{_highlightResult.item_number.value}}}.jpg" alt="{{name}}">
        </div>
        <div class="hit-content">
          <h2 class="hit-name"><a href="/product_detail.php?sku={{{_highlightResult.item_number.value}}}" style+"text-decoration:none; color:#333;cursor:pointer;">{{{_highlightResult.product_name.value}}}</a></h2>
          <p class="hit-description">{{{_highlightResult.description.value}}}</p>
        </div>
      </div>
    {{/hits}}
  {{/query}}
</script>

Hope that helped!

1 Like

@haroen, Thanks so much, but that didn’t seem to help. I’m now getting an output of raw data, as you can see here:
http://www.malikoutdoor.com/searchy/index2.html

I’m sure I missed something, but … help?

Hey @andrew3,

sorry for that confusion, I forgot that a template always needs to start with a html element, it can’t start with a conditional like that:

<div>
  {{#query}}
    {{#hits}}
      <div class="hit">
        <div class="hit-image">
          <img class="toLowerCase" src="/images/products/{{{_highlightResult.item_number.value}}}.jpg" alt="{{name}}">
        </div>
        <div class="hit-content">
          <h2 class="hit-name"><a href="/product_detail.php?sku={{{_highlightResult.item_number.value}}}" style+"text-decoration:none; color:#333;cursor:pointer;">{{{_highlightResult.product_name.value}}}</a></h2>
          <p class="hit-description">{{{_highlightResult.description.value}}}</p>
        </div>
      </div>
    {{/hits}}
  {{/query}}
</div>

See my sandbox with your template: https://codesandbox.io/s/w7r206l8kk