Sitecore XA ::Custom Search Results Using Scriban

In a recent project I was working, we used Sitecore Experience Accelerator (SXA) out of the box search renderings, but we needed to have control over the html of the search results, we started looking of how to implement this and we ended up using the new SXA 9.3 variant option Scriban to create a variation of the search results, in this post will show you how you can accomplish this in no time. 

I would like to start with explain what is SXA rendering variant, and I'm quoting the definition from sitecore documentation:

Rendering variants are configurable adaptations of the default renderings. To encourage reusability, designers and front-end developers can also create new rendering variants. This gives authors more options in the way they present their content.

 The above definition of rendering  variant is clear enough to start I think, simply you can create another version of the rendering display if you want to, SXA comes with rendering variants but you can still create your own variants, variants exists under each of your tenant sites, as example:

/sitecore/content/Tenent/Site/Presentation/Rendering Variants

If you looked under any of your tenant sites, in the following path:

/sitecore/content/Tenant/Site/Presentation/RenderingVariants/Search Results

You will find the search results variants, by default Search Results comes with two variants as you can see from the following screenshot, Horizontal and Vertical variant definitions:

Under the each variant definition you can see the variant field(s), each represents a display item, as example Title in the above screenshot, its of type "Variant Field", it has information like:

• Tag: represents the html tag you want to use for this field.
• Field name: represents the search result item field name to be displayed. 
• Prefix: Adds string value as a prefix.
• Suffix: Adds string value as a suffix.
• ....etc

If you want to have more information about variant and variant field, click here.

Now, to the new stuff, SXA introduced a new template language,  now SXA 9.3 uses Scriban instead of NVelocity, more information about Scriban you can find if you click here.

All what you need to do to created a new display for search results is to right click on the Search Results and add new "Variant Definations", call it as example Custom Results, then on the new variant definition, right click and add "Scriban" template, see the following screenshot for more information:

In the new added item, under variant details section, you will find a tag field, template field, css class and data attributes field. here the main field you're going to use is the template field, it will allow you add the html code you want in addition to the placeholders (Scriban placeholder) that will be replaced later with values, following is a screenshot of the fields:

In the following snippet, you will find a simple custom search results, notice that this is the search result item template that will be applied for each item in you search results:

Couple of things to mention on the above snippet:

• In line 1 above, the get_item_title is a custom Scriban extension that will do some logic to get the title value based on some custom fallback logic, like seo title, display name, then name..
• In line 3 above, the sitecore/content check is to have a different handling if the retrieved item is a content item or media item, Url handling will be different.
• In line 5 above, the  i_item.media_url is Sitecore OOTB to get the media item url.

Hope you enjoyed it, and helped you some how!