It is not showing content attributes

Hi, it seems like template is not working.
I cannot display CONTENT attributes which is text.
Please advise.

search.addWidgets([
instantsearch.widgets.searchBox({
container: ‘#searchbox’,
}),
instantsearch.widgets.hits({
container: ‘#hits’,
templates: {
empty: {{#query}} No results for <q>{{query}}</q> {{/query}} ,
item: <article> <img src="{{LOGO_URL}}" align="left" alt="{{logo}}"> <p>{{#helpers.highlight}}{ "attribute": "_snippetResult.CONTENT" }{{/helpers.highlight}}</p> </article> ,
},
}),
instantsearch.widgets.pagination({
container: ‘#pagination’,
}),
]);

Hi @ynaka, You may find the snippet widget helpful. If that doesn’t help, could you provide a codesandbox to help us troubleshoot further? We have a starter template here.

It seems like nothing happens even if I cleared template.

Hi @ynaka, could you provide a codesandbox so that we can troubleshoot?

I am a beginner so I would spend another week for setting up codesandbox so I will up load a capture.

const search = instantsearch({
indexName: ‘All_Content’,
searchClient: algoliasearch(‘xxxxxx’, ‘92c8xxxxxxxxxxb76de9ab457’),
});

search.addWidgets([
instantsearch.widgets.searchBox({
container: ‘#searchbox’,
}),

/* instantsearch.widgets.clearRefinements({
container: ‘#clear-refinements’,
}),*/

instantsearch.widgets.hits({
container: ‘#hits’,
templates: {
item: <div> <img src="{{LOGO_URL}}" align="left" alt="{{name}}" /> {{#helpers.highlight}}{ "attribute": "_snippetResult.CONTENT" }{{/helpers.highlight}} </div> ,
},
}),

]);

/*// Create the render function
const renderMenuSelect = (renderOptions, isFirstRender) => {
const { items, canRefine, refine, widgetParams } = renderOptions;

if (isFirstRender) {
const select = document.createElement(‘select’);

select.addEventListener('change', event => {
  refine(event.target.value);
});

widgetParams.container.appendChild(select);

}

const select = widgetParams.container.querySelector(‘select’);

select.disabled = !canRefine;

select.innerHTML = <option value="">Categories</option> ${items .map( item => <option
value="{item.value}" {item.isRefined ? ‘selected’ : ‘’}
>
{item.label}({item.count})
`

  )
  .join('')}

`;
};

// Create the custom widget
const customMenuSelect = instantsearch.connectors.connectMenu(renderMenuSelect);

// Instantiate the custom widget
search.addWidgets([
customMenuSelect({
container: document.querySelector(’#tag-list’),
attribute: ‘Tag’,
})
]);
*/
search.start();

It still runs without js file so I don’t know where it referencing.
I restart server everytime I save file.

I can see that the selector for search box #searchbox doesn’t match up with the class you gave it .serach-box

As well as for hits, the syntax for snippet results is different. If I see it correctly you’re using <div> <img src="{{LOGO_URL}}" align="left" alt="{{name}}" /> {{#helpers.highlight}}{ "attribute": "_snippetResult.CONTENT" }{{/helpers.highlight}} </div>, while the correct code would be: <div> <img src="{{LOGO_URL}}" align="left" alt="{{name}}" /> {{#helpers.snippet}}{ "attribute": "CONTENT" }{{/helpers.snippet}} </div>

We have a starter codesandbox template available here so you don’t need to worry about setting it up correctly to start with here: https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/instantsearch.js

Hope that already helps, but for more detailed help, we’ll need to see your site live somewhere so it can be debugged. Hope you understand!

Hi,

How can I display and highlight attributes which only matched?

For example, I want to display only if the location is matched.

Other than that location shouldn’t be visible to the user.

Thanks.

search.addWidgets([
  instantsearch.widgets.hits({
    container: "#hits",

    templates: {
      item: `

<div id="clearfix" >

<img src="{{LOGO_URL}}" alt="{{hits-image}}" id="hits-image">

<p>{{#helpers.highlight}}{ "attribute": "TITLE" }{{/helpers.highlight}}</p>

<p>{{#helpers.highlight}}{ "attribute": "LOCATION" }{{/helpers.highlight}}</p>

</div>

`,
    },
  }),

  instantsearch.widgets.pagination({
    container: "#pagination",
  }),
]);

You will want to read the more advanced properties of _highlightResult for that: https://www.algolia.com/doc/api-reference/api-methods/search/#method-response-_highlightresult

instantsearch.widgets.hits({
    container: '#hits',
    transformItems: function (items) {
      return items.map(function (item) {
        // change this variable from "name" to your attribute
        item.__matchesName = item._highlightResult.name.matchLevel === 'full';
        return item;
      });
    },
    templates: {
      item: `
<article>
  {{__matchesName}}
  {{#__matchesName}}
  <h1>{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}</h1>
  {{/__matchesName}}
  <p>{{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}</p>
</article>
`,
    },
  })

here’s a sandbox demonstrating that: https://codesandbox.io/s/priceless-heyrovsky-xh8ub?file=/src/app.js

Hi,
What if I want to apply item.__matchesName more items ?
I would like to add it about 10 attributes.
Thank you very much!!

Will your list not become really big if all 10 would match? How do you want to decide which one to show in the case multiple Match?

Hi,
Are there any ways that I can add attributes into your code ?
Thanks you.

It seems related to How to add some more attributes in the transformItems
I’ll reply there.

Yes, on the line were I instantiate the __matchesName variable based on the matchLevel condition for name, you can add a matches for any variable you want. For example you can add __matchesDescription by adding this:

item.__matchesDescription = item._highlightResult.description.matchLevel === 'full';

If you have an even bigger list of items, you can store the list of matching attributes and filter or map in the transformItems. Any JavaScript to transform the array is valid there!

I have tried this but it seems not responding at all.
Is there something wrong in my code ?

instantsearch.widgets.hits({
  container: '#hits',
  transformItems: function (items) {
    return items.map(function (item) {
      item.__matchesLocation =
        item._highlightResult.LOCATION.matchLevel === 'full';
      item.__matchesTitle = item._highlightResult.TITLE.matchLevel === 'full';
      item.__matchesGaiyo = item._highlightResult.GAIYO.matchLevel === 'full';
      item.__matchesContent =
        item._highlightResult.CONTENT.matchLevel === 'full';

      return item;
    });
  },
  templates: {
    item: `

		<div id="clearfix" >
		<img src="{{LOGO_URL}}" alt="{{hits-image}}" id="hits-image">
		{{#__matchesLocation}}{{#helpers.highlight}}{ "attribute": "LOCATION" }{{/helpers.highlight}}{{/__matchesLocation}}
		{{#__matchesTitle}}{{#helpers.highlight}}{ "attribute": "TITLE" }{{/helpers.highlight}}{{/__matchesTitle}}
		{{#__matchesGaiyo}}{{#helpers.highlight}}{ "attribute": "GAIYO" }{{/helpers.highlight}}{{/__matchesGaiyo}}
		{{#__matchesContent}}{{#helpers.highlight}}{ "attribute": "CONTENT" }{{/helpers.highlight}}{{/__matchesContent}}
		</div>

      `,
  },
});

This should work as expected, and it does for me with two attributes which exist in the demo index: https://codesandbox.io/s/priceless-heyrovsky-xh8ub?file=/src/app.js

Could you make your code into a sandbox so we can debug what’s going on?

oh it was working for 2 attributes but as soon as you add several, it stops.

Hey, please send us a reproducible CodeSandbox example so we can help you debug :slightly_smiling_face:

Please check. thank you

here’s a fixed version of your sandbox: https://codesandbox.io/s/sweet-wildflower-9psup?file=/src/app.js

  1. a typo in the template
  2. checking whether the objects actually have the keys (like GAIYO wasn’t on every object)

Hi,
I am trying to display contributor and comment detail by developing your code.

Screenshot 2020-11-17 104018

Screenshot 2020-11-17 131205

I would like to display comment detail and contributor at the same time.
I get both item.isContributor & item.isComment_Detail true on my end.

Please use the word “ぜひ!” when you run check since comments are pretty over lapping.