Create sections on searchpage

Hi,

In the default listing all products, posts and pages are listed randomly togehter. I would like to create sections like:

Products
Product 1
Product 2
etc.

Posts
Post 1
Post 2
etc.

Pages
Page 1
Page 2
etc.

How do I accomplish this? I have checked through the documentation on https://community.algolia.com/instantsearch.js/v1/documentation/#hits and several other snippets but I cannot find on how to create sections of the sort I need.

Is there any docs on this?

Best regards.

Hi @damir can you show me a live example of such behaviour so I can better understand what you mean? You can use this ready to modify template to create a small example of your use case: https://codesandbox.io/s/github/algolia/instantsearch-templates/tree/master/src/InstantSearch.js

Hi @vvo, thank you for a quick reply.

Here is a testing site --> http://verket2017.staging.wpengine.com/?s=Test&is_v=1 as you see here I I ahve 2 Post Types (Produkter and Inlegg), which are in english Products and Posts from the blog.

if you scroll down the page you can see that I have managed through some coding (not good) to partly section the searches but this code I have done is not good in the long term, I am in the testing fase in figuring it out.

So basically if there is a filter of some sort for me to display Products and Posts in separate containers it would help alot.

I cheked out your link with the brands refine list but I did manage to get it in teh way I wanted.

Do you have any suggestions?

Hi @damir thanks for the demo and explanations, to clarify: you want to display two set of results of the same size and have a single search box controlling both results.

If that’s the case, let me know and I’ll see how we can do that effectively.

Hi, yes that is correct! But, I found a solution here --> https://jsfiddle.net/8rhv9hdx/1/
Is there a better way for doing this I am listening. :slight_smile:

That’s exactly what I was gonna suggest to you, this example can actually be used to target a single index but two times and apply a filter manually to search only in type X or Y.

Let me know how it goes.

Oh okay, can you show me an example of that? Would be nice :smiley:

Since you have a single index, there’s a more efficient and easier way to achieve what you want, but first, a demo: https://codesandbox.io/s/ol2ry43w15

This demo shows two type of hits in a split display, here’s how:

  • every hit has a “type” attribute that is either “one” or “two”
  • the Algolia index has the “attributeForDistinct” setting set to the “type” attribute (this is distinct for grouping). You can configure this in your dashboard by going to Index > Display > Attribute for distinct
  • query time hitsPerPage attribute is set to 2 (so we get two groups max)
  • query time distinct attribute is set to 10 (so we get 10 hits of each type max)

Let me know what you think.

I will test it out. But I have a another small quick question. I followed this discussion Wordpress Plugin only indexing 150x150 Image and I got the shop_catalog image to be indexed in Algolia administration, I can see it in there, but on the website the shop_catalog size isn’t visible in the output. How do make the image viewable on the website serach page like the default thumbnail image?

@damir Can you reply to this previous topic or open a new one? So that we keep our discussion here focused, thanks!