const search = instantsearch({
  indexName: 'products',
  searchClient: algoliasearch('HZPJLF6UCQ', '9cb46f4945a1e70da7b395ff5105c1a2'),
});

//For debouncing 
let timerId;

search.addWidgets([
  
  instantsearch.widgets.searchBox({
    container: '#searchbox',
    placeholder: 'Rechercher un produit...',
    queryHook(query, refine) {
      clearTimeout(timerId);
      timerId = setTimeout(() => refine(query), 500);
    },
  }),
  instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      item: `
      		<div>
          		<a class="search-link" href="/product/{{Product Handle}}">
            			<div class="search-placeholder">
                  		<img class="search-img" src="{{Main Variant Image}}">
                  </div>
                  <span class="search-product-link">{{Product Name}}</span>
                  <span class="search-product-url">/product/{{Product Handle}}</span>
            	</a>
          </div>
      `,
      empty: `
          <p style="margin-bottom:30px; margin-top:30px;" class="center">
            Nous ne référençons pas encore de <q>{{ query }}</q><br>
            Vous souhaitez que nous puissions en proposer ?<br>
            <a href="/contact">Contactez-nous</a>
  				</p>
          <div id="nouveautes"></div>
			`,
    },
  }),
]);

search.start();