ais-hits
<ais-hits // Optional parameters :show-banner="boolean" :escapeHTML="boolean" :class-names="object" :transform-items="function" />
1
2
3
4
5
6
7
8
9
import { AisHits } from 'vue-instantsearch';
// Use 'vue-instantsearch/vue3/es' for Vue 3
export default {
components: {
AisHits
},
// ...
};
1. Follow additional steps in Optimize build size to ensure your code is correctly bundled.
2. This imports all the widgets, even the ones you don’t use. Read the Getting started guide for more information.
About this widget
Use the ais-hits
widget to display a list of results.
To set the number of search results, use the ais-hits-per-page
or ais-configure
widget.
Examples
1
<ais-hits />
Props
show-banner
|
type: boolean
default: true
Optional
Whether to display a top banner when banner data is included within the |
||
Copy
|
|||
escapeHTML
|
type: boolean
default: true
Optional
Whether to escape HTML entities from hits string values. |
||
Copy
|
|||
class-names
|
type: object
default: {}
Optional
The CSS classes you can override:
|
||
Copy
|
|||
transform-items
|
type: function
default: items => items
Optional
Receives the items and is called before displaying them.
It returns a new array with the same “shape” as the original.
This is helpful when transforming or reordering items.
Don’t use The entire If you’re transforming an attribute with the When using an array, take steps to avoid creating infinite loops. When you use an array as a prop, it causes the widget to re-register on every render, and this can sometimes cause these infinite loops. |
||
Copy
|
Customize the UI
default
|
The slot to override the complete DOM output of the widget. When you implement this slot, none of the other slots will change the output, as the default slot surrounds them. Scope
|
||
Copy
|
|||
banner
|
The slot to override the DOM output of the banner. Scope
|
||
Copy
|
|||
item
|
The slot to override the DOM output of the item. Scope
|
||
Copy
|
HTML output
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="ais-Hits">
<aside class="ais-Hits-banner">
<a class="ais-Hits-banner-link">
<img class="ais-Hits-banner-image" />
</a>
</aside>
<ol class="ais-Hits-list">
<li class="ais-Hits-item">
...
</li>
<li class="ais-Hits-item">
...
</li>
<li class="ais-Hits-item">
...
</li>
</ol>
</div>
Click and conversion events
If the insights
option is true
, the ais-hits
widget automatically sends a click
event with the following “shape” to the Insights API whenever users click a hit.
1
2
3
4
5
6
7
8
9
{
eventType: 'click',
insightsMethod: 'clickedObjectIDsAfterSearch',
payload: {
eventName: 'Hit Clicked',
// …
},
widgetType: 'ais.hits',
}
To customize this event, use the sendEvent
function in your item
slot and send a custom click
event on the root element.
1
2
3
4
5
6
7
8
9
10
<ais-hits>
<template v-slot:item="{ item, sendEvent }">
<div @click="sendEvent('click', item, 'Product Clicked')">
<h2>
<ais-highlight attribute="name" :hit="item" />
</h2>
<p>{{ item.description }}</p>
</div>
</template>
</ais-hits>
The sendEvent
function also accepts an object as a fourth argument to send directly to the Insights API. You can use it, for example, to send special conversion
events with a subtype.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<ais-hits>
<template v-slot:item="{ item, sendEvent }">
<div>
<h2>
<ais-highlight attribute="name" :hit="item" />
</h2>
<p>{{ item.description }}</p>
<button
@click="sendEvent('conversion', item, 'Added To Cart', {
// Special subtype
eventSubtype: 'addToCart',
// An array of objects representing each item added to the cart
objectData: [
{
// The discount value for this item, if applicable
discount: item.discount || 0,
// The price value for this item (minus the discount)
price: item.price,
// How many of these items were added
quantity: 2,
// The per-item `queryID` for the query preceding this event
queryID: item.__queryID,
},
],
// The total value of all items
value: item.price * 2,
// The currency code
currency: 'USD',
})"
>
Add to cart
</button>
</div>
</template>
</ais-hits>
Fields representing monetary values accept both numbers and strings, in major currency units (for example, 5.45
or '5.45'
).
To prevent floating-point math issues, use strings, especially if you’re performing calculations.