How to handle an array in Instant-Search.JS?

Open Q&A
,
1

Hi, I have Algolia displaying both products and posts in the same widget
Overall it works ok.
I have a couple of issues

  1. in the Algolia Dashboard for products, the Results shows the product Name, but on the posts results page, I see the post_id only (hard to understand what my users are actually doing)

  2. In the products display, I have an array for the categories.
    In my js file, I pull the information using:

${hit.taxonomies.category}

but I get the entire list displayed with no spaces at all.
How can I add a pipeline “|” between each category?

Here is my entire widget code:

instantsearch.widgets.hits({
hitsPerPage: 3,
container: “hits”,

templates: {
  item: (hit, { html, sendEvent }) => html`<div>
<article class="s_product_item" data-insights-index="wp_products_algolia_production" data-insights-object-id="${hit.objectID}" data-insights-position="${hit.__position}" data-insights-query-id="${hit.__queryID}" data-product-id="${hit.id}">
    <div class="s_product_image">
        <a class="s_product_link" href="${hit.url}"><img src="${hit.image_url}" alt="${hit.image_url}" /></a>
    </div>

    <div class="s_product_content">
        <small>${hit.taxonomies.category}</small>
        <a class="s_product_link" href="${hit.url}"><h4>${hit.name}</h4></a>
        <div class="s_product_actions">
            <div class="review_star start_${hit.review_star}">
                <span class="review-stars"></span>
                <span class="review-stars"></span>
                <span class="review-stars"></span>
                <span class="review-stars"></span>
                <span class="review-stars"></span>
            </div>
            <div class="reviews-text">
                <div class="review_count">${hit.review_count}</div>

                <div class="review_text">${hit.review_text}</div>
            </div>
            <div class="btn-sec">
                <div class="hit-price ${hit.price}">
                    <span>From</span>
                    <div class="s_p_price_value">${hit.currency_symbol}${hit.price}</div>
                </div>
                <div class="s_view_more">
                    <a class="btn s_product_link" type="button" href="${hit.url}">
                        View Product
                    </a>
                </div>
            </div>
        </div>
    </div>
</article>
`, empty: `
`, }, }),

Thank you in advance