SXA Carousel Slide in Search

May 14th, 2021

I’ve recently been working on a site that has a design requirement for the same look and feel for a slide in a carousel as a result on a listing page. Before we get to the search result, a little background on the carousel, as it took some custom work of its own. First, we created a custom carousel with custom slides that each have a reference to a product.

The carousel slides rendering variant was setup using a Scriban template to be able to reference the product. The $fruit variable will become apparent later.

Now, on to the search results. The idea was to use a Search Results rendering variant with a Component (VariantComponentField) pointing to the above carousel slides Rendering Variant. Since slides use the Page Content rendering variant, I selected that as my Rendering Item.

Then, selected the Scriban slide variant created for the carousel in the Rendering Parameters.

Finally, since the search results will return references to the products and the slides reference the product field, we need to make a minor adjustment to our slide Scriban to account for that by adjusting the $fruit variable mentioned above. The product (fruit) is the i_item in the case of a search result, but the field reference i_item.Fruit in the slide.

At this point you should be able to load your search results page with the carousel slide. If everything loads correctly, no need to read further.

In our case we ran into an interesting message displayed for each result. “Page Content is a Sitecore Experience Accelerator rendering and can only be used on a page in an SXA site.”

Not exactly what I was hoping for, but it makes sense for us since our products are currently outside the tenant – they are shared with a non-SXA site and can’t be moved. There must be some check in the Page Content controller (VariantsController) to ensure the item is under an SXA site. Time to bring up the decompiler and see what’s happening. The ‘Index’ Controller Action is not visible here, but is actually found on the inherited StandardController in Sitecore.XA.Foundation.Mvc.

The CurrentItem.IsInSxaContext() seems like the culprit, and indeed it is looking for the SXA Site item as an ancestor. I decided to clone the Page Content rendering and use my own controller to remove the SXA check – if you were using the rendering for something else it would be best to add a check rather than removing, but at this point I’m only using the rendering in this specific case.

For the rendering, I kept the same parameters template and view but, note, the item name needs to remain “Page Content” to be able select the standard Page Content rendering variants. After swapping out the SXA Page Content with my newly created one, we were in business.