custom connectHits using Hogan template

[sdrenth]

I'd like to create a custom renderer using connectHits as described here:
https://www.algolia.com/doc/api-reference/widgets/hits/js/#connector

But instead of using template literals I'd like to use Hogan templates. Currently it outputs the template, but the variables are not being parsed. What am I doing wrong?

Additional questions:

1. If possible, I'd like to use a wrapper template as well for the outer classes
2. I need to be able to set additional variables before rendering an item (for example add another variable): item.new_param = 'test'; EDIT: This can be resolved by implementing transformItems

connectHits:

const customHits = instantsearch.connectors.connectHits(
    function renderHits({ hits }, isFirstRendering) {
        document.querySelector('.is-hits').innerHTML = `
            <div class="product-overview">
              ${hits
                .map(
                    item => document.querySelector('#template-product-item').innerHTML
                )
                .join('')
            }
            </div>
        `;
    }
);

Hogan template:

<script id="template-product-item" type="x-tmpl-mustache">
    <div class="product-overview__item">
        PRODUCT ITEM {{ item.pagetitle }} {{ pagetitle }}
    </div>
</script>

Outputs:

PRODUCT ITEM {{ item.pagetitle }} {{ pagetitle }}
PRODUCT ITEM {{ item.pagetitle }} {{ pagetitle }}
PRODUCT ITEM {{ item.pagetitle }} {{ pagetitle }}

[Haroenv]

Hogan is only available in the default widgets, however if you have a build system, adding hogan.js as a dependency will not add a new copy to the site, and you'll be able to import and use it yourself in the custom widget

[sdrenth]

@Haroenv Thank you very much for your help!

For anyone wondering, this is what I ended up with after including Hogan js:

const customHits = instantsearch.connectors.connectHits(
    function renderHits({ hits }, isFirstRendering) {
        document.querySelector('.is-hits').innerHTML = `
            <div class="product-overview">
              ${hits
                .map(
                    function (item) {
                        var template = Hogan.compile(document.querySelector('#template-product-item').innerHTML);
                        
                        return template.render(item);
                    }
                )
                .join('')
            }
            </div>
        `;
    }
);