Creative Exchange

 The Creative Exchange process is designed to facilitate several different teams working on a website. For example, the team that is working on the theme of the site can work in parallel with other teams.

How does the Front end teamwork in Parallel ?

ØWe can export the site theme as a Zip file.

ØThen Front end team works on it.

ØAgain we can import the files in our site

In SXA, any assets, such as images, fonts, and files that are normally referenced within the stylesheet, are considered to be part of the theme and they are imported with your CSS changes.

Change a site design using Creative Exchange

Already I have this structure, but I would like to center the text that is highlighted in the image, so I am going to export the theme and give this structure to my front-end team to design that.

You can download the Zip file. We can find the zip file in this path too

 C:\inetpub\wwwroot\Sc101.dev.local\App_Data\packages\CreativeExchange

Extract the zip file

This path is defined in Sitecore

Path : /sitecore/content/Demo SXA Sites/SXADemo/Settings/Creative Exchange Storages/Folder on server

If you open the index.CSS HTML then we could see the actual page which we saw in experience editor

So it gives a smooth feeling to frond-end team.

I have to add the CSS for this section. I am going to use the existing class from here. But we can create a new class also.

Add the CSS in the Styles section.

This is the optimized, first I have to beauty the file, then add my own CSS, minify the file

After that, for confirming my changes, I am going to open my index file

Wow, it is affected!!!!

So again I converted the files to zipping with the existing files. and going to import the file.

Create a Theme Using SXA CLI

 ØCreate a new Theme

ØBuild, compile and minify the Theme assets

ØUpload Theme assets to Sitecore

ØAutomatically synchronize the front end related assets with Sitecore

Create a Theme

We need NPM and Node, already I have installed them in my system

1. Go to Website\App_Config\Include\z.Feature.Overrides and enables the z.SPE.Sync.Enabler.Gulp.config.disabled file.

2. Open a command prompt terminal and install the registry:

npm config set @sxa:registry=https://sitecore.myget.org/F/sc-npm-packages/npm/

3. Use npm and the install command to install SXA CLI as a global package: npm i -g @sxa/CLI.

4. Create a new folder in my solution file

mkdir "-\media\Themes\Demo SXA Sites\SXA Demo"

5. Go to the created directory

cd "-\media\Themes\Demo SXA Sites\SXA Demo"

6. Run sxa register <url>.

sxa register https://sc101.dev.local/

For the <url>, enter the instance for which you want to create the theme.

Use sxa get-url for get the registered site instance name

7. Run sxa new <ThemeName>.

Optionally, you can enter the name of the new theme (<ThemeName>).

 sxa new SXADemoNew

Check the created theme in Sitecore content editor

How can we Automatically synchronize the front-end related assets with Sitecore?

       You can run "gulp" in the theme folder and start making your edits in VS.Your theme will compile locally and upload the compiled assets to sitecore

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