`<miso-products>`

The search results. Hybrid Search shows them under the answer, and loads more as the reader scrolls:

<miso-hybrid-search>
  <miso-query></miso-query>
  <miso-answer></miso-answer>
  <miso-products></miso-products>
</miso-hybrid-search>

Containers

Container	Default layout	Fields from
`<miso-hybrid-search>`	`list`: one result on each row	`fl` on `client.ui.hybridSearch`

To change the results, call useLayouts on client.ui.hybridSearch, under the role products.

Layouts

Give the layout type before the options:

client.ui.hybridSearch.useLayouts({
  products: ["cards", { link: { open: false } }],
});

Type	What the reader sees	Class
`list`	One result on each row.	`miso-list`
`cards`	Results side by side, in a grid.	`miso-cards`

carousel and horizontal also draw the results, but they do not load more as the reader scrolls. Use them only when the first page of results is enough.

Options

Your options are merged over the defaults, so set only what you change.

Option	What it does
`link`	Where the links open. `{ open: false }` opens them in the same tab. Also takes `target` and `rel`.
`className`	The class of the layout, in place of the one in the table above.
`templates.product`	The markup of one result.

Write the markup of a result

Give your own function as the product template. It returns the HTML of one result. This one shows the image, the title and the description:

function renderProduct(layout, state, data, meta) {
  const { tagPair, escapeHtml } = layout.templates.helpers;
  const [openTag, closeTag] = tagPair(layout, data);
  const image = data.cover_image
    ? `<img class="my-result-image" src="${escapeHtml(data.cover_image)}" alt="">`
    : "";
  return openTag +
    image +
    `<div class="my-result-title">${escapeHtml(data.title)}</div>` +
    `<div class="my-result-description">${escapeHtml(data.description || "")}</div>` +
    closeTag;
}

client.ui.hybridSearch.useLayouts({
  products: { templates: { product: renderProduct } },
});

Argument	What it holds
`layout`	The layout. `layout.templates.helpers` has `tagPair` and `escapeHtml`.
`state`	The state of the whole list.
`data`	The result. It holds only the fields that `fl` asks for, with `product_id` and `title` always there.
`meta`	`meta.index` is the position of the result, counted from 0.

Start with tagPair. It returns the opening and closing tag of the item, which link to the article and record clicks on it.
Ask for the fields you show. description is not in the default fl. Add it with useApi, as Write the markup of a result shows.
Escape every value from the record with escapeHtml.
Style your own classes in your CSS.

Hybrid Search — Results and Sources: the link, layout and markup changes, with complete samples.
Hybrid Search — Facets: the filters next to the results.
Hybrid Search — API Configuration: the number of results, and which articles they come from.

<miso-messages>

<miso-related-questions>

<miso-products>

Containers

Layouts

Options

Write the markup of a result

Next

`<miso-products>`