SXA Themes Architecture

 A Themes defines the look and feel of your website

ØThemes separate site design from site data

ØThemes can be styled in any way your business requires

ØBranding on an existing site can be changed with little effort

ØMultiple sets of CSS files can be attached to any site, facilitating re-branding

Why Themes?

Re-use the same site and content but apply a theme that uses client brand colors

What is a Theme?

A theme contains all the frontend related assets as items

Themes can be created separately from the site's functionality and content.  

Create a new theme for a site

ØWe can find the created theme under the Media-library/Theme

Map the created theme to the site

ØGo to the site settings

ØGo to Page design

To know more about themes, kindly checkout this

https://doc.sitecore.com/en/developers/sxa/17/sitecore-experience-accelerator/the-sxa-themes.html

SXA - Creating Components

 I am going to create the below structure

Service Wrapper

Headline

Description

Service Teaser

Image

Headline

Description

Final Output in Experience editor

Demo

ØCreate New Template without fields

ØAdd the fields in Service Details

Add a new module for my new feature

ØGo to the path

/Sitecore/system/Settings/Feature

ØGoing to add my module name as Services

Creating the Rendering for my new module

ØGoing to duplicate the existing one and create the new one

ØGo to the path

/Sitecore/layout/Renderings/Feature/Experience Accelerator/Page Content/Promo

ØChanged all the required section property

ØThere are two options in the Parameters section, always recommend selecting the second one to create the new copy for our renderings

ØThe same options are available in the Data Source section

ØI am going to select the second option and gives the views name which I want to create

ØThen Proceed with your configuration for creation.

New Component Structure

ØMy new rendering is created in the chosen path. We can find all the configurations in the rendering that we mentioned while the creation

ØThese sections are created automatically except the highlighted section that is created in the initial stage.

ØPath : /sitecore/templates/Feature/SXADemo/Services 

ØThen I go to Services template 

ØThat contains the promo property, so let me create the fields for our requirements

ØRemove all the existing properties,

ØAdded the Services source query is

query:$sharedSites/*[@@name='Home']/*[@@templatename='Services Details']

Create the Rendering Variant

ØAlready we have a default rendering variant for our new module

ØGo to

/Sitecore/templates/Branches/Feature/SXADemo/Services

 

Delete the Promo properties    

Add the new field with the name of our template field section, then only It will map the fields,

I am going to create the rendering variant for the below template section which was created in the last

 

 According to I have to create two field sections and 1 reference section

query:$site/*[@@name='Home']//*[@@templatename='Services Overview']

(If you are new to rendering variant, then please go through the basic

https://sitecoreshades.blogspot.com/2021/06/rendering-variants.html)

Note:

I like to explain about the services section variant

There are three properties, Pass-through field created while the section  created,

If you like to show the result maximum of 6 then we could configure the above one and if you mentioned the section property as 2 then the first 2 results will be skipped from your total results.

But I am not going to use this now.

ØUnder the service section I have to create the fields for that, this is my service source template structure

ØAnd for styling added one more section column as Section and moved all fields into that

ØIn the column section I choose the link property as wrapped

Please continue the blog to install the new component on existing sites

https://sitecoreshades.blogspot.com/2021/07/add-new-module-in-my-existing-site.html

Add the new custom module in existing site

 

Add the new module in my existing site

ØRightClick the site Insert -> Add Site Module

ØThese are the new modules available in my local, now I am going to add my services module now

ØWow, New Services folder was created under my data folder

ØWe can find our new renderings under the Available rendering section and the rendering variant is also created.

ØCreate the item using Services overview then create the service's details under that

ØGo to Sitecore content editor Data folder

Experience Editor

I added some styles for my blog section

Rendering Variant with References/Links

 Hello !!!

If you are new to Rendering Variant, please start from my previous blog

Rendering Variant

Using the rendering variant reference item to display fields from a linked item

ØI added the new field in my Blog template as Authors

ØThe blog pages have the related products selected from a list:

Create the rendering variant reference item

1. In the Content Editor, navigate to Presentation/Rendering Variants, right-click Page Content, and click Insert, Variant Definition.

2. Enter Post Author and click Ok.

3. Next, let's create a rendering variant reference item that goes to the author field of the blog post, and renders the content of that field.

Right-click the Post Author variant, click Insert, click Reference, enter Authors, and click Ok. The Pass-through field defines the name of the field from the nested item. The rendering variant now passes through the author's field.

Render the fields from linked item

ØFirst, create a wrapper by adding a section. Right-click Post Author, click Section, enter HeadingWrapper, and click OK.

ØTo defines the fields that the rendering variant displays, you can now add child items.

ØThis is our Author Template, so we have to create the field for this