Sitecore SXA module contains templates, Renderings, Layouts, Placeholder Settings, branch etc. It helps structure the SXA site by scaffolding items required to setup the component.

SXA modules are stored in the Feature and Foundation folder

/Sitecore/System/Settings/Foundation/Experience Accelerator/

/Sitecore/System/Settings/Feature/Experience Accelerator/

 

Steps to Create a New Module

 

1.     Navigate to Sitecore/system/settings/Feature, right click Features click Module

                        


                                


 

Ø  Provide a Module Name – Custom Carousel

Ø  Choose the location where this module to be created.

Ø  Select the system areas the module folders to be created.

Ø  Choose the module should be applied to tenant or Site

 

When module is created should be able to see the folder with the Site Setup Root item

                       


 

Once the Site Setup Root is created you should be able to see folders with name ‘Custom Carousel” will be created in Branch, Template, and Renderings, Placeholder settings, Layouts and Media Library or the system areas selected.

 

Clone and Customize Existing Rendering

 

In order to clone the rendering I have decided to use the OOTB component “Carousel” that I will clone it. Just go to the renderings folder and locate “Carousel” Rendeing.

/Sitecore/layout/Renderings/Feature/Experience Accelerator/Composites/Carousel

 

Right click on the Carousel component and from the context menu select Scripts and click Clone Rendering



 

This will open a popup, which we can fill as per our design and development requirements. Fill it with followings by providing the renderings name and CSS class relevant to your desired components.



For the parameters, I want to separate it from Carousel component so I will make it as a copy it.



 

For the data source, I want to make it a copy of Carousel component.

 



 

For the view we can face some writing permissions from the server and if that breaks will have to clean every single bit of the cloning process. So I want to make it a copy of Carouse; view and give the different name for the custom component



 

Now we can proceed with it. It will take a while to complete it.

 

The template will create in Templates/Features and specific folder and also view file in created in Sitecore root directory.

 

Drop the Component in Experience Editor

 

Go to Site node, open any page and select Custom Carousel component from it and drop it on our page. And create and select the desired data source.