Skip to main content

How to style Sitecore SXA sites with Creative Exchange Live

It has already been passed 2 years from first Sitecore SXA version release.  It became more popular in time and reached enough maturity. We were thinking to use for a project and finally, I found an opportunity to try it. 

There are already some good tutorials about using Sitecore SXA and Creative Exchange Live but I want to share my experience and give some keynotes about them, especially Creative Exchange Live.

I've used these versions in my example:
  • Sitecore Experience Platform 9.0 rev. 180604 (9.0 Update-2)
  • Sitecore PowerShell Extensions: full 4.7.2 version (CM)
  • Sitecore Experience Accelerator 1.7 Update-1

Setup Notes

  • Import PowerShell Extesions before SXA package
  • Restart the Sitecore Client and Restart the Sitecore Server before close import wizard
  • Rebuild indexes
Note: If you have a publish error, contact with Sitecore Support. I had and they provided me a patch to fix that issue. I cannot share that patch at the moment because the fix is needed more tests and they didn't want to share it as a complete solution for now. 

SXA and Creative Exchange Live

I won't give much detail how to use toolbox and add components. There is nothing special, drag and drop components and organize page as you want. 

The more interesting part is on styling. And Creative Exchange Live makes the life easy at this point!

You should follow these steps to be able to work with Creative Exchange Live properly:

1. Choose "Create new theme" option and select Basic2 template as usable while creating site 



This is the note in Official Sitecore Documentation, so don't forget to add Basic2 template:


2. Open Experience Editor, click Export button on Experience Accelerator menu and download the zip file created


3. Open Site Theme folder with a text editor (I use Visual Studio Code)

I assume that node.js and npm are already installed. If not, install them first. 

Then, update server option in config.js file, mine is below:


If gulp is not installed yet, install it with this command: 
npm install --global gulp-cli

After installation, you're ready to make changes!

Let's add a new style for a custom component. I've already created a new component called "Custom Carousel". 


I've added a sass file for my new component like other sxa components. Then, compile sass files with this command: gulp sassComponents
First it will ask you to enter Sitecore credentials and then will create css files:


Then, tell gulp to watch changes with this command: gulp css-watch
After this, all changes you make in css files will be uploaded to server.


Here it is, see new created css file in sitecore:



You can see our new background color on page.

 

For the other possible options and commands, see readme.md file.

Cool! We added new sass and css files to website. 

But what about to add a new class to a sxa component?

Let's continue...

As you see the picture above, I've added a Title component to page which shows website name as "Site2". 

Now, I want to add a new class to that component. 

There are two ways to do that:

1- Add a style from Sitecore

You will see Style item under Presentation folder item. You can create a new style and add the component to Allowed Renderings section.


2- Add with Creative Exchange

When you export and download the site, you will get index.html file. It is a static html file and you will see components you added the page before. 

Before to make changes on html file, you can tell gulp to watch changes on html file and upload them to server with: gulp html-watch

After command, I've added a custom class called "custom-title-add" as below:


And it's directly updated on server:


Basically, Creative Exchange does the same thing what you do while adding a style. If you look the Style item folder again, you will see a new style called "CreativeExchange" has been automatically created:



And finally, because your component is added as Allowed Renderings, then you can see available custom classes in Experience Editor:


That's it! Hope, it helps someone. I will keep on sharing on SXA while I learn new things!

Labels:

Comments

Post a Comment

Popular posts from this blog

Sitecore 9 - Custom Page Events & Filtering with XConnect

This is the first article of a series. I am going to start with creating a custom page event and will show how we can fetch event data using xconnect api. Let's start with reminding demo scenario: Imagine that you have a website displaying movies. Visitors are able to see movie details and take some actions like save movie or share it.  You want to follow the visitors' activities and you want to take some marketing actions based on those activities. For example, if a contact visits a movie more than X time or she/he saves a movie, you want to send those movies to an external system. In addition, there is going to be a limit to send same movie. Such as, it will not be possible to send same movie more than 2 times.  You want to configure this as a marketing automation plan to give flexibility to your marketing managers. They should be able to add configurable rules and activities.  My first focus is movie detail page. I want to track visitors when they visi...
Post a Comment
Read more

Sitecore Commerce – XC9 Tips – Missing Commerce Components in SXA Toolbox on Experience Editor

I've recently had an issue that commerce components were missing in SXA Toolbox. I setup Sitecore Commerce on top of an existing instance and I already had a SXA website working on it. The idea was to add commerce components and functionality to my existing website. But after commerce setup, the toolbox was still showing default SXA components and commerce components were missing although I add commerce tenant and website modules: I checked Available Renderings under Presentation folder, there was no problem, commerce renderings were there. I created another tenant and website to see if it shows the commerce components in toolbox. Nothing seemed different but I was seeing commerce components for new website and it was missing on existing one. Then, I noticed two things: 1- Selected catalog was empty in content editor (/sitecore/Commerce/Catalog Management/Catalogs) even if I see Habitat_Master catalog in Merchandising section on commerce management panel. 2- Bootstrap ...
6 comments
Read more

Sitecore Commerce – XC9 Tips – Configuring Postman

In this post, I am going to show how to setup postman and run the scripts. When you download Sitecore Commerce, it includes ready to use postman sample requests (inside Sitecore.Commerce.Engine.SDK.x.x.x folder). You need to import that postman folder to postman app. The steps are written in official documentation , just click import and choose postman folder. You will see some parameters in sample requests such as  {{SitecoreIdServerHost}}, {{OpsApiHost}}, {{OpsApi}} Those are environment based variables that you can change according to your environment details. When you click "setting" icon, you will see predefined environments: AdventureWorks and Habitat. For example, click "Habitat Environment" to edit its variables. You see that AuthoingHost is using port 5000, it is the default port if the that port is available. You can check which port is using your Authoring role from IIS. If your Authoring port is different than 5000, you ne...
1 comment
Read more