Update search results for catalog items on the portal level

[LaraReddy]

Hi All,
Can anyone please help us to show the catalog item short description on portal level.

Requirement:
Currently search results on the portal only include the catalog item name. The short description needs to be included to provide a better user experience when searching the portal.

Under the catalog name we need to display the catalog short description as well.

Advance thanks.

[AnveshKumar M · Accepted solution]

@LaraReddy 

Can you try this script.

<div ng-if="item.type == 'sc'" class="sc">
<a href="{{item.url}}" class="h4 text-primary m-b-sm block">
<i ng-if="item.picture" class="ta-img" style="background-image:url('{{item.picture}}?t=small')"></i>
<i ng-if="!item.picture && item.icon" class="ta-icon" style="background-image:url('{{item.icon}}'); width:16px; height:16px;margin-right:15px"></i>
<i ng-if="!item.picture && !item.icon" class="ta-icon fa fa-shopping-cart"></i>
<span ng-bind-html="highlight(item.name, data.q)"></span></a>
<div ng-style="getBGImage(item)" ng-if="item.picture" class="img-responsive m-r item-image pull-left"></div>
<p ng-bind-html="highlight(item.catalog + ' : ' + item.breadcrumb, data.q)"></p>
<p ng-bind-html="highlight(escapeHTML(item.short_description), escapeHTML(data.q))"></p>
<span class="text-muted m-r-sm" ng-if="data.showPrices && item.price != '$0.00'">{{item.price}}</span>
</div>
<div ng-if="item.type == 'sc_content'">
<a ng-if="item.content_type == 'external'" ng-href="{{::item.url}}" target="_blank" class="h4 text-primary m-b-sm block"><span ng-bind-html="highlight(item.name, data.q)"></span> ➚</a>
<a ng-if="item.content_type == 'kb'" ng-href="?id=kb_article&sys_id={{::item.kb_article}}" class="h4 text-primary m-b-sm block">
<i class="fa m-r-sm fa-file-text-o"></i>
<span ng-bind-html="highlight(item.name, data.q)"></span>
</a>
<a ng-if="item.content_type == 'literal'" ng-href="?id={{item.page}}&sys_id={{item.sys_id}}" class="h4 text-primary m-b-sm block">
<i class="fa m-r-sm fa-file-text-o"></i>
<span ng-bind-html="highlight(item.name, data.q)"></span></a>
<div ng-style="getBGImage(item)" ng-if="item.picture" class="img-responsive m-r item-image pull-left"></div>
<p ng-bind-html="highlight(escapeHTML(item.short_description), escapeHTML(data.q))"></p>
<p ng-bind-html="highlight(item.catalog + ' : ' + item.breadcrumb, data.q)"></p>
</div>

[AnveshKumar M]

Hi @LaraReddy ,

The short description is included OOB in the Portal Search results, if you want to customize it you can modify the search sources (All -> Service Portal -> Search -> Search Source) and select catalog and add the customizations to the "Search page template" script.

If your instance is AI Search enabled, it would differ.

[LaraReddy]

Hi Anvesh,
Many thanks for the response.

As you suggested, We tried and added one line of script in "Search page template".
But still it's not working.

COuld you pls check the below script once:

<div ng-if="item.type == 'sc'" class="sc">
<a href="{{item.url}}" class="h4 text-primary m-b-sm block">
<i ng-if="item.picture" class="ta-img" style="background-image:url('{{item.picture}}?t=small')"></i>
<i ng-if="!item.picture && item.icon" class="ta-icon" style="background-image:url('{{item.icon}}'); width:16px; height:16px;margin-right:15px"></i>
<i ng-if="!item.picture && !item.icon" class="ta-icon fa fa-shopping-cart"></i>
<span ng-bind-html="highlight(item.name, data.q)"></span></a>
<div ng-style="getBGImage(item)" ng-if="item.picture" class="img-responsive m-r item-image pull-left"></div>
<p ng-bind-html="highlight(item.catalog + ' : ' + item.breadcrumb, data.q)"></p>
<span class="text-muted m-r-sm" ng-if="data.showPrices && item.price != '$0.00'">{{item.price}}</span>
</div>
<div ng-if="item.type == 'sc_content'">
<a ng-if="item.content_type == 'external'" ng-href="{{::item.url}}" target="_blank" class="h4 text-primary m-b-sm block"><span ng-bind-html="highlight(item.name, data.q)"></span> ➚</a>
<a ng-if="item.content_type == 'kb'" ng-href="?id=kb_article&sys_id={{::item.kb_article}}" class="h4 text-primary m-b-sm block">
<i class="fa m-r-sm fa-file-text-o"></i>
<span ng-bind-html="highlight(item.name, data.q)"></span>
</a>
<a ng-if="item.content_type == 'literal'" ng-href="?id={{item.page}}&sys_id={{item.sys_id}}" class="h4 text-primary m-b-sm block">
<i class="fa m-r-sm fa-file-text-o"></i>
<span ng-bind-html="highlight(item.name, data.q)"></span></a>
<div ng-style="getBGImage(item)" ng-if="item.picture" class="img-responsive m-r item-image pull-left"></div>
<p ng-bind-html="highlight(escapeHTML(item.short_description), escapeHTML(data.q))"></p>  // New script line.
<p ng-bind-html="highlight(item.catalog + ' : ' + item.breadcrumb, data.q)"></p>
</div>

[AnveshKumar M · Accepted solution]

@LaraReddy 

Can you try this script.

<div ng-if="item.type == 'sc'" class="sc">
<a href="{{item.url}}" class="h4 text-primary m-b-sm block">
<i ng-if="item.picture" class="ta-img" style="background-image:url('{{item.picture}}?t=small')"></i>
<i ng-if="!item.picture && item.icon" class="ta-icon" style="background-image:url('{{item.icon}}'); width:16px; height:16px;margin-right:15px"></i>
<i ng-if="!item.picture && !item.icon" class="ta-icon fa fa-shopping-cart"></i>
<span ng-bind-html="highlight(item.name, data.q)"></span></a>
<div ng-style="getBGImage(item)" ng-if="item.picture" class="img-responsive m-r item-image pull-left"></div>
<p ng-bind-html="highlight(item.catalog + ' : ' + item.breadcrumb, data.q)"></p>
<p ng-bind-html="highlight(escapeHTML(item.short_description), escapeHTML(data.q))"></p>
<span class="text-muted m-r-sm" ng-if="data.showPrices && item.price != '$0.00'">{{item.price}}</span>
</div>
<div ng-if="item.type == 'sc_content'">
<a ng-if="item.content_type == 'external'" ng-href="{{::item.url}}" target="_blank" class="h4 text-primary m-b-sm block"><span ng-bind-html="highlight(item.name, data.q)"></span> ➚</a>
<a ng-if="item.content_type == 'kb'" ng-href="?id=kb_article&sys_id={{::item.kb_article}}" class="h4 text-primary m-b-sm block">
<i class="fa m-r-sm fa-file-text-o"></i>
<span ng-bind-html="highlight(item.name, data.q)"></span>
</a>
<a ng-if="item.content_type == 'literal'" ng-href="?id={{item.page}}&sys_id={{item.sys_id}}" class="h4 text-primary m-b-sm block">
<i class="fa m-r-sm fa-file-text-o"></i>
<span ng-bind-html="highlight(item.name, data.q)"></span></a>
<div ng-style="getBGImage(item)" ng-if="item.picture" class="img-responsive m-r item-image pull-left"></div>
<p ng-bind-html="highlight(escapeHTML(item.short_description), escapeHTML(data.q))"></p>
<p ng-bind-html="highlight(item.catalog + ' : ' + item.breadcrumb, data.q)"></p>
</div>

[LaraReddy]

Hi Anvesh,
Many thanks for the response.

It's working fine now.

Thank you so much.