SXA Site Creation: Tutorial 4

In the previous post we worked on Tenant (about What is Tenant, How to use, and When to use) and now today will start creating Site under newly created Tenant
In SXA, Site is a Sitecore Item which represents to a website and that contains (Pages, Data, Partial Design, Page Design, and Partial Layout).
Under the newly created Tenant let's insert Site Item named as myfirstsite

and now follow the steps on each tab.
In the First tab (GENERAL tab) on the popup give the Site Name, Host Name and move to the second tab

Here in FEATURES tab will by default all SXA existing features will be selected, so will skip this tab (can also add or remove feature as per need) and jump to next

In the third tab, THEME will create the new theme by giving theme name and selecting checkbox

and at last on GRID tab will remain Grid as bootstrap

Now click OK and will see some automated script is getting fired and Site will be created as

It's demo time:

Open the Home item under the site as Experience editor, wait for some moment.

Now will see there is already three container (Header/Main/Footer) added, where can add available SXA renderings as needed.
on the right side can also see Toolbar Window as Accordion where all the available renderings listed which you can apply to the page container as required.
Since this is the first time so check all the available renderings.


In the next part will continue with adding rendering to the page...

SXA Tenant Creation: Tutorial 3

In the previous post we installed Sitecore with SXA on local, and now it's time to start working on it.
Since we are completely new with SXA, so will start with creating the Simple website using existing features and simple markup.
Here we are not going to write code or create new rendering or SXA component, we only reuse existing SXA features as much as possible.
Follow the below steps and in case of any issue share your problem in below comment section.
Let's start,

Step 1: We will first create tenant under Content,
But before creating we should know why Tenant?
Simply we can say here Tenant is a brand name for a Big Multi brand Company (ex: Tata, Loreal, Amazon, etc).
Suppose we are an International Cosmetic Company (ICC) with multiple Brands, so how will create a structure using SXA features

Sitecore
Content Tree
ICC (Tenant Folder)
Beauty (Tenant Folder)
A-Brand (Tenant)
B-Brand (Tenant)

Watches (Tenant Folder)
A-Brand (Tenant)
B-Brand (Tenant)

Sunglasses (Tenant Folder)
A-Brand (Tenant)
B-Brand (Tenant)

So here basically will start with Tenant Creation for a simple single website
right click on the Content Tree -> Insert -> Tenant -> Give the Name of Website/Brand (let's say demosite1)

by default all features will be selected at the time of tenant creation, as per need can add or remove from checkbox

Note: Remember - try to avoid the space in name of Tenant Folder/Tenant and Sites.

Hope Tenant will be created, to cross-check all done well. We can select newly created Tenant Item and will see configuration section will certain settings.

Go to each settings by the following path, you will see the structure will be created.

And it's not less than magic, because behind creating the New Tenant many PowerShell scripts run as part of automation and that helps to improve delivery.

1. In the next part will see how to work with Site creation under newly created Tenant...

SXA Compatibility and Installation: Tutorial 2

After some idea about SXA and their advantages in previous post, now we are going to setup SXA on our machine. But before installation it is good to know the compatibility with Sitecore and SXA versions.

Sitecore official shared SXA compatibility with Sitecore which i'm sharing here

To setup SXA with Sitecore, we also need compatible Sitecore Powershell Extension version. Below attaching images of compatibility with SXA and Sitecore Powershell Extension.

So let's start installation after choosing matching SXA, and SPE compatible version with Sitecore.

• First check License is SXA supportable or not?, if yes then go ahead with installation.
• After this continue with setup local instance with demosxa, and insure everything working fine before going with SXA
• Now it's time to install package of Sitecore Powershell Extension by downloading package from MarketPlace
• After Sitecore Powershell package installation, now it's time to install package for compatible SXA version.
• Sometime it take times to install SXA, so just chill and wait. And after successfully installation of SXA rebuild indexes.

Good Luck,

and in case of any issue. Let me know.

In coming post will start practicing using SXA...

What is SXA: Tutorial 1

What is SXA, why to use SXA?

Sitecore Experience Accelerator (usually known as SXA) is a new way of building websites on Sitecore. The goal of SXA is to create a Standardized set of page Layouts and reused across multiple websites.


Key points of Using SXA:

1. Out-of-the-box Component library

2. Out-of-the-box local data-source support

3. Extended Experience Editor (Drag & Drop)

4. Wire-frame design

5. Helix-based Architecture

6. Increase productivity by Working in parallel

For example : the content author can start entering the content in the wire-frame environment, while the front-end developer works on the theme and the developer sets up the data templates.


SXA uses the following concepts:

Toolbox
Toolbox make it easier to construct your page design and reusable renderings that you can drag and drop toolbox component onto your page.

Grid and Column Layout
SXA pages use a responsive grid layout and grid divide the pages into equal column by using row and column splitters. You can decide how to divide the available columns on page Desktop, Mobile, Tablet and Extra Large Device.

Pluggable Themes
SXA separates the structure (HTML) from design (CSS) to make it easier to change the design of the websites. Usually SXA use the themes like wireframe or use your own custom. A theme consist of style sheet, script, images, gulp, sass and fonts.


Page design and Partial designs
Partial design contain parts of a layouts that a website uses in multiple places like Header Footer use on all pages of website. A page design is the presentation definition for a page and consist of partial design and reusable renderings.

Creative Exchange
The Creative Exchange process is designed to facilitate several different teams working on a website or you can export a static representation of a site and send it to a creative agency to work parallel with other team.

You can export your site and produce a Zip file with all the wireframe and all page content. And Front-end-developer can work with the static HTML Offline. When the designs are ready then this Zip file is sent back to be imported again.


In coming post will continue with concepts and demo…