AcpFeed - AFS

AFS Integration Guide

Product
AFS
AFS_Version
7.7
Category
Reference Guide

This component displays ACP suggestions. Its configuration enables to select feeds to display in a multi-feed case.

AcpFeed Component - Displays ACP suggestions.

Parameter

Type

Card

Default

Description

includeFeeds

String

Optional

Empty list

Names of the feeds that must be displayed.
If not specified, all feeds are displayed.

excludeFeeds

String

Optional

Empty list

Names of the feeds that must be ignored.
If not specified, nothing is ignored.

suggestionExpression

String

Optional

$.suggestion

Defines the display format of a suggestion in the suggestions list of the search box.
If default value, the text is simply displayed.
See Custom Expression.

disableSelectSuggestionOnClick

Boolean

Optional

false

Indicates if a click on a suggestion directly opens the result or fills in the search box with the suggestion text (default behavior).

noSuggestionMessage

String

Optional

N/A

Defines the message to display when no suggestion was found.
If not specified, nothing is displayed.

Here is how to customize how ACP widget displays the suggestions.

This example assumes that:

  • AcpFeed has multiple feeds,
  • you only want to display the suggestions coming from the feeds restaurant and genre.

Each AFSWidgetAcpComponent whose title is AcpFeed acts as a placeholder.

Each time ACP widget retrieves suggestions, it dispatches them to each of its components of type AcpFeed.

Each AcpFeed displays the suggestion(s) coming from the feed(s) it has been configured for.

In the below example, the first one displays the suggestions coming from the feed "restaurant".

The last one displays the suggestions coming from the feed "genre".

Each <div class="AFSWidgetAcpComponent" title="AcpFeed">...</div> is replaced with a list whose items are the suggestions.

<div class="AFSWidget" title="Keywords">
<script type="application/json">
{
"acp": {
"instantSearch": false,
"enabled": true,
"mode": "CUSTOM",
"feeds": [
{
"name": "restaurant",
"title": "Restaurant"
},
{
"name": "genre",
"title": "Genre"
}
]
}
}
</script>

<table>
<tr>
<th class="AfsWidgetsAcpColumn">Restaurants</th>
<th class="AfsWidgetsAcpColumn">Genres</th>
</tr>
<tr>
<td class="AfsWidgetsAcpColumn">
<div class="AFSWidgetAcpComponent" title="AcpFeed">
<script type="application/json">
{
"includeFeeds" : ["restaurant"]
}
</script>
</div>
</td>
<td class="AfsWidgetsAcpColumn">
<div class="AFSWidgetAcpComponent" title="AcpFeed">
<script type="application/json">
{
"includeFeeds" : ["genre"]
}
</script>
</div>
</td>
</tr>
</table>
</div>