Can I add a custom rendering for the out of the box search box and dropdown filter?

Question

I want to create my own render variant for the search box and dropdown filters. I wantt to keep the functionality, but I want to change some of the markup and css classes. Is this possible, and how? I have tried to create my own render variant, and upon looking at the already existing ones, it seems like the only fields are things like title fields. Where does the rest come from?

Answer 1

If you can't find the things to change in a variant, you could check the view of the component. Those views can be customized (per site) so you can add anything you want in there. From the docs:

All SXA renderings come with default HTML views. If you want to change the HTML for a rendering, SXA lets you specify site-specific views for renderings.

How to do this is well documented on https://doc.sitecore.com/developers/sxa/93/sitecore-experience-accelerator/en/customize-rendering-html-per-site.html

Answer 2

The answer is yes, As mentioned here https://doc.sitecore.com/developers/sxa/93/sitecore-experience-accelerator/en/customize-rendering-html-per-site.html

Please make sure to follow the structure and don't change it, You can modify the html if you are using the existing model

Let's say for SearchBoxRenderingModel

<div @Html.Sxa().Component(Model.Rendering.RenderingCssClass ?? "search-box", Model.Attributes) data-properties='@Html.Raw(Model.JsonDataProperties)'>
<div class="component-content">
    @Model.MessageIsEmpty
    @if (Model.DataSourceItem != null)
    {
}
</div>

and for DropdownFilterRenderingModel

<div @Html.Sxa().Component(Model.Rendering.RenderingCssClass ?? "facet-dropdown", Model.Attributes).Decorate("class", "facet-component") data-properties='@Model.JsonDataProperties'>
<div class="component-content">
</div>

If you want to show some additional data or add additional logic, You can create your component and extend the existing one.