SXA_CLI themes with Scriban

This blog post is about how I setup the Scriban inside the SXA_CLI Themes. This blog post assumes that you already setup SXA_CLI and created your own SXA themes using SXA_CLI. If you haven’t done so. Therefore, please follow the instruction here. If you haven’t heard of Scriban template, you can read more about it here.

Creating the scriban structure

After creating the themes using SXA_CLI, I open my themes folder in the visual studio code editor. As shown in the image below.

SXA_CLI Themes Folder

After exploring the themes structure, I noticed that there is no Scriban folder inside the themes. So now, the questions are: Where should I put my Scriban files? Should I just create a Scriban folder and put all my Scriban files there? Will this work?

So, I decided to search for clues. I started in the config.js inside the gulp folder. Then I search for scriban words. And guess what? The config.js contains the information I need to setup Scriban in my SXA_CLI themes.

SXA_CLI config for scriban
SXA_CLI config for scriban

“Where should I put my Scriban files? Should I just create a Scriban folder and put all my Scriban files there? Will this work?”

What we learn from this configuration?

  1. There should be a folder called scriban inside the folder “-” in the root path. This scriban folder is where we put our scriban files.
  2. There should be a metadata.json file inside the scriban folder.

Feeling excited about this new information, I decided to create the folders and the metadata.json file. But after creating the metadat.json, I realized something is still missing. What is the content of the metadata.json?

SXA_CLI basic structure

What’s the content of the metadata.json file?

I search the internet and found this post about Sitecore Creative Exchange Live with Scriban. I learned from that post that the metadata.json file should contain a siteID and a database.

Scriban MScriban Metadata.json contentetadata.json content
Scriban Metadata.json content

Note: Make sure that you change the siteId with the ItemId of your site.

Creating the promo rendering in the scriban folder.

After updating the metadata.json file. I create the promo rendering and its new Cards rendering variants. To sum up, what I did was:

  1. I create a folder called Promo inside the scriban folder.
  2. Then, inside the promo folder, I create a folder called Cards.
  3. After that, I create a file called promo.scriban inside the Cards folder.
  4. Then I log in to Sitecore
  5. Lastly, I navigate to the promo rendering variant and create the Cards variants.

As a result, the themes structure is similar to the image below.

SXA_Thems new file structure with scriban.
The new theme structure
after creating the promo rendering variants under the scriban folder

Sitecore structure after creating the cards variant of promo. Notice that there is no child item in the cards.

Cards Rendering variants in Sitecore.
Sitecore Structure after creating the Cards variants.
Notice that the variants has no child item

Testing the SXA_CLI themes with Scriban

So, to test my changes. I open the terminal of the visual studio code. Then, in the terminal, I execute the npm install command. Then, after the npm install command completes. I execute gulp in the terminal. As a result, gulp is watching for any changes in my scriban files.

SXA_CLI, Gulp is watching scriban
Gulp is watching my scriban changes.

After that, I update the promo.scriban file with the code below. Then I click save.

<p>Hello scriban from SXA_CLI</p>

As a result, Gulp responded with “scriban import was successful”.

Scriban Template successful
Gulp responded with scriban import was successful

So, to ensure that my changes in my Scriban template is imported successfully. I login to my Sitecore instance and expand the Cards node under the promo rendering variant. The Cards variants now has a child item. This child item is a Scriban rendering variant field and has a template value similar to the promo.scriban.

SXA_CLI themes with Scriban

Thats it! We know setup the SXA_CLI themes with scriban.

Please don’t foget leave your comments. Salamat Po and Happy coding.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.