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 · Accepted solution]

@LaraReddy 

Try this to change the display order.

<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(escapeHTML(item.short_description), escapeHTML(data.q))"></p>
<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>
<p ng-bind-html="highlight(item.catalog + ' : ' + item.breadcrumb, data.q)"></p>
</div>

[AnveshKumar M]

Hi @LaraReddy ,

Did it helped to fix your issue?

Please mark my answer helpful 👍 / Accept ✔️ as solution, if helped you.