`<miso-related-resources>`

More articles on the topic of the question. Ask shows them under the answer:

<miso-ask>
  <miso-answer></miso-answer>
  <miso-related-resources></miso-related-resources>
</miso-ask>

The answer does not cite these articles, so they have no numbers. For the articles it cites, use <miso-sources>.

Containers

Container	Default layout	Fields from
`<miso-ask>`	`list`: one article on each row	`related_resource_fl` on `client.ui.asks`

To change the list, call useLayouts on client.ui.asks, the context, under the role related_resources. Follow-up answers then get the change too.

Layouts

Give the layout type before the options:

client.ui.asks.useLayouts({
  related_resources: "carousel",
});

Type	What the reader sees	Class
`list`	One article on each row.	`miso-list`
`cards`	Articles side by side, in a grid.	`miso-cards`
`carousel`	One row of articles, with buttons to scroll.	`miso-carousel`
`horizontal`	One row of small cards.	`miso-horizontal`

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.date`	The date format: options for `toLocaleDateString` with `locale` added, a locale string, or a function.
`templates.article`	The markup of one article.

To change the date format, give templates.date the options of toLocaleDateString, with locale added:

client.ui.asks.useLayouts({
  related_resources: {
    templates: {
      date: { locale: "en-GB", year: "numeric", month: "long", day: "numeric" },
    },
  },
});

Write the markup of an article

Give your own function as the article template. It returns the HTML of one article. This one shows the cover image and the title:

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

client.ui.asks.useLayouts({
  related_resources: { templates: { article: renderArticle } },
});

Argument	What it holds
`layout`	The layout. `layout.templates.helpers` has `tagPair` and `escapeHtml`.
`state`	The state of the whole list.
`data`	The article. It holds only the fields that `related_resource_fl` asks for, with `product_id` and `title` always there.
`meta`	`meta.index` is the position of the article, 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.
Escape every value from the record with escapeHtml.
Style your own classes in your CSS.

Ask — Sources and Related Resources: the link, date, layout and markup changes, with complete samples.
Ask — API Configuration: filter the articles, or change them before Ask draws them.

<miso-related-questions>

<miso-sources>

<miso-related-resources>

Containers

Layouts

Options

Write the markup of an article

Next

`<miso-related-resources>`