Hover Panel on Content Search Web Part

2018-10-23 23:31:45

I'm in SharePoint 2013 and I have a content search web part which shows a catalogue of items which have product pictures and descriptions.

I have added a hover panel onto a custom Content Search Web Part as I wanted a preview of the product image in the hover panel

In the content search web part I have added the following script at the top:

var id = ctx.ClientControl.get_nextUniqueId();

var itemId = id + Srch.U.Ids.item;

var hoverId = id + Srch.U.Ids.hover;

var hoverUrl = "~sitecollection/_catalogs/masterpage/Display Templates/Search/Item_creative_HoverPanel.js";

$setResultItem(itemId, ctx.CurrentItem);

ctx.currentItem_ShowHoverPanelCallback = Srch.U.getShowHoverPanelCallback(itemId, hoverId, hoverUrl);

ctx.currentItem_HideHoverPanelCallback = Srch.U.getHideHoverPanelCallback();

I then added the hover detail on the first div