Contents
How do I create a car rendering in sxa?
To start off, create a new Variants item called “Car” under the Presentation/Rendering Variants folder of your SXA site. Under that item, create 3 Variant Definition items for each of the variants we need. When the variants have been added, they can be selected from the Variant dropdown list in the Experience Editor:
Where to find available renderings in sxa toolbox?
To make the rendering appear in the toolbox, we need to add it to Available Renderings. The Available Renderings folder is found under the Presentation folder of your SXA site. First add an Available Renderings item under the Available Renderings folder. In this case, I’ve added one called Cars.
Which is the default action result in sxa?
Keep in mind that the controller must inherit from Sitecore.XA.Foundation.Mvc.Controllers.StandardController. The Standard controller will handle the routing with default action result “Index”, so there’s no need to add our own, although we can override “Index” if we need to.
How to make a rendering of a car?
The rendering should be a Controller Rendering. Set the Controller (this one has been set to “Car”), and set the Controller Action to “Index”.
Which is the default CSS class for car details?
The Css Class for the Image field has been set to “col-xs-3”, and the Css Class for the Car Details section has been set to “col-xs-9”. The Tags for all of these items are using the default of “div”. This configuration translates to the following HTML:
How to create custom Sitecore sxa renderings and components?
Should inherit from “VariantsRepository”, which will make our custom carousel rendering extendible through variants. “FillBaseProperties” is an OOB SXA method found under namespace “Sitecore.XA.Foundation.RenderingVariants.Repositories” which will fill the base SXA properties in our model.
How to wrap a sxa component in a Div?
Note: Every SXA component should be wrapped inside a div “component” and “component-content”. Also, “Model.Attribute” will be used to add styles from the rendering parameters.
How to create Sitecore Experience accelerator ( sxa ) rendering variants?
1. Navigate to /sitecore/content/Main/Website/Presentation/Rendering Variants/Image. 2. Insert a Variant Definition item and name it Banner Image only. 3. Right-click on “Banner Image Only” node and add Field item named “Image.” 4.
1. Add a new Variant Definition item and name it “Banner with Link.” 2. Add a Field type item and name it “Image.” 3. Add another for “TargetURL.” 4. Now drop the Image component on the page and Select “Banner with Link” variant from Variant dropdown. 5. Edit the fields to add Caption and Banner image.
What should I inherit from my custom sxa model?
Our custom model should inherit from “VariantRenderingModel” which will hold some base SXA properties like: Datasource item, css class, heading tag, IsEdit etc. Should inherit from “VariantsRepository”, which will make our custom carousel rendering extendible through variants.
Where are the rendering parameters in Sitecore sxa?
Rendering Parameters folder will have Carousel rendering parameters and can inherit from OOTB templates like: And we need to add this rendering to the list of available renderings to make it appear in the SXA toolbox: Now jumping to the code.