SXA: Add custom slide template to Carousel

Question

In SXA's carousels, slides only take one rich text to display their content. I would like to have a testimonial slide which has a title and a content, so that the contributor doesn't have to structure its text with HTML but just fill in the two fields.

I have created a TestimonialSlide template inheriting from SXA's Slide template and adding three fields,

• Name
• JobTitle
• Testimonial

The template is referenced in carousel's insert options. I can therefore add a TestimonialSlide to a carousel but then it freezes. Of course, it is not linked with any Model, Controller nor any View.

Here is my problem, I want to link this template to a View, Model, Controller, Rendering but I don't get how the link is done in SXA to copy the same structure. I get the impression that we only link a template and not a rendering... I am confused !

Can someone help me link my custom slide template to a View, Model, Controller and Rendering so that it can be added to a Carousel ?

Answer 1

Alright, I figured it out !

There are basically two ways of doing so. In every case, the first div inside the slide shouldn't have any attributes (else SXA Carousel breaks !)

First Way, with rendering variants

It is the most easy to use and also the quickest, but you can't use any controller's logic here

Create Rendering Variant

1. Go to /sitecore/system/Settings/Foundation/Experience Accelerator/Rendering Variants/Rendering Variants/Page Content
2. Insert Variant Definition
3. In inserted variant definition, click insert > field and insert the fields you want to have in you custom slide. You can also add html structure and css classes using section but be sure the first HTML tag does not contain any class !

Create custom slide template

1. Create custom slide template with appropriate fields (must be exact same names that in variant definition). The template should inherit from Carousel Slide
2. Add Standard Values
3. Design Layout on Standard Values, add Page Content in section-content placeholder with Styling > Variant set to the ID of the variant definition you have just defined

Add Template to Carousel's insert options

Second Way, with a rendering

This way is closer to the classic way of using renderings

Create custom slide rendering

1. Create Controller
2. Create View
3. Create Rendering

Create custom slide template

1. Create custom slide template with appropriate fields. The template should inherit from Carousel Slide
2. Add Standard Values
3. Design Layout on Standard Values, just add your custom slide rendering in section-content placeholder?

Add Template to Carousel's insert options

That's it !