I am using SXA 1.6 Clone Feature to clone SXA Search result render to new one with custom .cshtml file so I can change the markup of the container instant of <ul> <li> to <div>tags , however I have noticed if I change

<div @Html.Sxa().Component(Model.Rendering.RenderingCssClass ?? "search-results", Model.Attributes) data-class-variant="@variantClass" data-properties='@Model.JsonDataProperties'>


<div @Html.Sxa().Component(Model.Rendering.RenderingCssClass ?? "FeaturedNews-search-results", Model.Attributes) data-class-variant="@variantClass" data-properties='@Model.JsonDataProperties'>`

With the changes done in "RenderingCssClass" there is no search result and when I try to change the class with the below code its not reflecting on the rendered results

<ul class="search-result-list">

            @foreach (BaseVariantField variantField in Model.VariantFields)
                @Html.RenderingVariants().RenderVariant(variantField, Model.PageItem, false)
  • First of all you need to check if you are getting any results at all. Please inspect the JSON which is returned from the server if there are any results. You can also try with standard Search Results. Put it on the page and check if your search is configured properly. – Dawid Rutkowski Mar 18 '18 at 21:00
  • Yes iam getting result when the RenderingCssClass is "search-results" – user1534066 Mar 18 '18 at 21:03
  • I'll check that for you tomorrow. – Dawid Rutkowski Mar 18 '18 at 21:33

As I promised I've checked this for you. So the first place to looks in case of search renderings is the JavaScript file (most of the search renderings works on the fron-end). Take a look at component-search-results.js:

enter image description here

This is just a part of code but you can already see that it requires the search-results css class. So what you should do is:

<div @Html.Sxa().Component(Model.Rendering.RenderingCssClass ?? "search-results FeaturedNews-search-results", Model.Attributes) data-class-variant="@variantClass" data-properties='@Model.JsonDataProperties'>`

What is more, take a look at the beginning of component-search-results.js. The template to build search results unsorted list (<ul><li>) is defined at the beginning of that file.

| improve this answer | |
  • Thank you so much fro your help , i tried to look for this js inside my theme but its look like its retrieved from BaseTheme , to add my own html markup shall i duplicate the file ? – user1534066 Mar 19 '18 at 12:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.