HTML templates
This demo shows a basic search example with a custom HTML template for the product tile. You can customize all of the aspects of search appearance by providing custom templates for individual components. See Search.js templates documentation for more details.
The visual shown here was applied by providing this piece of script. No explicit configuration is needed, except using the correct id attribute by which search.js finds template.
<script>
function LBInitSearch() {
Luigis.Search({
TrackerId: '179075-204259',
Locale: 'en',
Theme: 'boo',
Size: 20,
Facets: ['brand', 'category', 'price_amount'],
DefaultFilters: {
type: 'product'
},
QuicksearchTypes: ['category', 'brand'],
UrlParamName: {
QUERY: 'q',
}
}, '#q', '#search-ui')
}
</script>
<script src="https://cdn.luigisbox.com/search.js" async onload="LBInitSearch()"></script>
<script type="text/x-template" id="template-result-default">
<div class="col-md-4 mb-4">
<a :href="url">
<h5>{{ attributes.title }}</h5>
</a>
<img class="img-fluid" :src="attributes.image_link"/>
<a class="btn btn-primary" :href="url">See more</a>
</div>
</script>