Sitecore SXA Custom Component
Ketan Garala
Sitecore, Kentico, and Umbraco Solutions Architect | Sitecore XMCloud Certified | Sitecore 3x MVP
Background Story
We had client requirement where they need convert list component with custom html div structure.
Steps
- Goto to “/sitecore/layout/Renderings/Feature/Experience Accelerator/Page Content/Page List”
2. Right click on it. Select script and clone rendering
3. Once window loaded make related changes shown below. As per your requirement name naming structure.
- Give name as per your new rendering. [We have used SectionList]
- Give default rendering CSS class. [We have used as section-list]
4. Parameters Tab
- Select make copy of original rendering parameter
5. On Datasource tab:
- Select make a copy of original rendering parameters same as Parameter tab:
6. On View tab:
- Select existing MVC View File:
- Define path and select name [We have used SectionList]
Note: Don’t Proceed we need Manual steps to do before proceed further.
7. Goto your root folder, in view folder Select PageList folder and copy and past on Same location.
8. Rename newly copied folder with your name [we have used SectionList]
9. As u can see we have copied from Page List so. There is UL LI structure in SectionList.
10. We need to change it to div based structure. So remove that ul li accordingly.
11. Now save the page.
12. Goto Presentation/Available rendering/Page Content
13. Select Edit.
14. Goto: Rendering/Features/Experience Accelerator/Page Content/SectionList Select SectionList
15. Click ok.
16. Goto Presentation/Rendering Variants
17. Right Click and Create New Variant [SectionList]
18. Select created variant. edit compatible rendering, add SectionList.
19. Now goto Experience Editor and you will find SectionList rendering in Page Content section.
Happy Sitecore Coding.
More help contact us. https://www.addact.in