I'm currently facing an issue where the product description using Algolia in a Materialize accordion does not trigger when clicked.
Below is the code snippet from my view:
<div class="row">
<div id="hits-container"></div>
</div>
<script src="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script>
<script src="<?php echo js_url('jquery.min')?>"></script>
<script src="<?php echo js_url('initialization')?>"></script>
<script src="<?php echo js_url('pluginAlgolia')?>"></script>
<script src="<?php echo js_url('materialize.min')?>"></script>
<script>
$(document).ready(function(){
$('select').material_select();
$('.collapsible').collapsible();
});
</script>
The following code represents the hits widgets in pluginAlgolia.js:
search.addWidget(
instantsearch.widgets.hits({
container: '#hits-container',
hitsPerPage: 6,
templates: {
empty: noResultsTemplate,
item: hitTemplate
}
})
);
Additionally, here is the template found in initialization.js:
var hitTemplate =
'<div class="col s12 m6 l4">' +
'<article class="hit">' +
'<div class="product-picture-wrapper center">' +
'<div class="product-picture"><img src="{{image}}" /></div>' +
'</div>' +
'<div class="product-name"><h4>{{{_highlightResult.designation.value}}}</h4></div>' +
'<ul class="collapsible" data-collapsible="accordion">' +
'<li>'+
'<div class="collapsible-header">Description</div>' +
'<div class="collapsible-body">' +
'{{{_highlightResult.description.value}}}' +
'</div>' +
'</li>' +
'</ul>' +
'<div class="product-price">${{prixttc}}</div>' +
'</article>' +
'</div>';