TagLearn Sitecore

Create a new Sitecore 10 SXA module

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.

In this blog post I will walkthrough the steps to create a module manually to have a better understanding and helps specially to debug when there are issues with the existing modules.

Create Module (Part 1)

Navigate to – /sitecore/system/Settings/Feature

Right click Featur folder to create module

Create new module overlay will open.

  1. Provide a Module name – i.e. Custom Image Block
  2. Choose the location where this module to be created.
  3. Select the system areas the module folders to be created
  4. 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 Image Block” will be created in Branch, Template, Renderings, Placeholder Settings, Layouts and Media Library or the system areas selected.

Create template required for creating Branch

For creating a branch you will need a template and rendering. Create a template in “Custom Image Block” folder. For now you don’t have to add fields. See blog the fields that were created for component.

Create “Image Block Folder” Template

Create rendering required for creating Branch

Create controller rendering with name “Image Block” in – /sitecore/layout/Renderings/Feature/Wits/Custom Image Block.

For now don’t setup anything in rendering. See blog for the configuration required in rendering-

Create Branch

Navigate to /sitecore/templates/Branches/Feature

Create a new branch. Right click on the folder “Custom Image Block” and insert new branch option

Select the template earlier created-

Branch with name “Image Block” will be created.

Delete $name item in the branch

Rename the Image Block to “Available Image Block Renderings”.

Right click branch and insert item from template-

/sitecore/templates/Foundation/Experience Accelerator/Presentation/Available Renderings/Available Renderings

Give it a name $name as this will create a item in “Available Renderings” folder in site with the component name

Select $name and select the newly created rendering-

Create or Copy the existing branch and name it as “Image Block Variant”

Create a variant, name it as “$name” from template – /sitecore/templates/Foundation/Experience Accelerator/Rendering Variants/Variants

Create Variant Definition under Variant name it as “Default” from template

Path of the variant definition- /sitecore/templates/Foundation/Experience Accelerator/Rendering Variants/Variant Definition

Create Scriban Variant named “Scriban” from template – /sitecore/templates/Foundation/Experience Accelerator/Scriban/Scriban

Add markup in template field or the same can be added when the module is installed on the site – if the markup is specific to the site.

Branch structure should like this-

Create Module (Part 2)

Add Site Item to add Available rendering to the site module is installed

Name it “Add Available Renderings”

Select the Location from the Site>>Presentation>>Available Renderings

In Template field select the “Available Image Block Renderings” from the newly created branch.

Provide the Name

Add Site Item to add rendering variant to the site module is installed

Add another site item, name it “Add Image Block Variant”

Select “Rendering Variant” in Location and “Image Block Variant” created in branch

This will create a “Image Block” in the “Rendering Variant” folder in the site where the module will be installed

Add Site Item to add data folder to the site module is installed

Add another site item, name it “Add Image Block Data Item”

This will create a “Image Block Folder” in “Data” folder in the site where the module will be installed

That’s it you are good to install “Image Block” module.

Different approaches of creating Sitecore SXA themes

Themes define the look and feel of a site and makes it flexible to change the layout and design of the website.

Themes help to customize the appearance of the site which includes layout, typography, color and other design elements.

SXA come with two types of themes- Site and Base themes. To add own/custom classes and assets, such as styles, scripts, images and fonts use Site theme.

There are multiple ways site theme cane be created-

Option 1 – Add custom theme when creating a Site

Check out this blog post for adding a theme when creating a site

Option 2 – Add theme to existing Site (create theme manually)

Right click on your site- click Scripts and click New Site Theme option

Provide the theme name and location.

Click OK and a theme should be created on specified location

Option 3 – Add a theme using SXA CLI

Will add the details shortly.

Hope this helps!

Sitecore 10 SXA Site Structure

Previous blog shows how to create Tenant and SXA Site.

In this blog lets see what does the installation script adds to the SXA site.

Following is the site content structure-

1. Site

SXA site is a container to the content that will be used as a output of the site. Site contains the settings to select the Site Media Library, Theme Folder and Modules.

2. Home Page

This is the home page of the site. All other pages in the site must be stored under the Home item.

3. Media Folder

Media Folder helps scope the part of media library is available to content editors on the images selection dialog.

You can change the scope by adding or removing the folder in “Virtual” section “Additional Children” field.

Media Folder “Additional Children” field
Scoped item in media folder from Media Library
Scoped to the selected folders configured in “Additional Children” field

Best Practice – Do not put media items directly under the Media folder. Form SXA 1.7 and higher uploading items to media folder in the Site is not allowed.

4. Data Folder

Data Folder is the repository for storing all the data sources. These data sources can be reused across many pages scoped inside the Site. Data folder had component type folder and can be created manually or when the module is installed.

Data for each component can be created manually from the content tree or from experience editor by using the “Associated Content” option. Data folder is used as a source configured in rendering’s Data Source field in a form of query or directly mapped to the component folder.

Best Practice – Clean up unused data sources

Best Practice – Give Site data sources meaningful names

Best Practice – Organize site data sources in folders

Best Practice –Run source field reports to help set the data source context

5. Presentation

The presentation folder contains all the presentation related details and settings for the components selected while creating the site.

Presentation folder has list of components based on the modules selected while creating the site.

Presentation folder contains Page and Partial Designs, Layout Service , Available Renderings, Rendering Variants and Styles.

Rendering variant contains list of components on the site and can be customized using Variant Definition and Variant Fields. Also can use template based Variant like Scriban and Template

6. Settings

Settings folder contains site specific configuration. Site Grouping contains the Site Settings like site name, host name, database etc.

Settings also contains the Redirects, HTML snippets and Item Queries. Settings Folder contains options to select the Fav icon, error handling and other SEO related settings.

© 2021 Sandeep Pote

Theme by Anders NorénUp ↑