Headless Sitecore Commerce with Sitecore JSS – Part 1

In this blog series I will cover for you how you can create Headless Commerce Solution on the Sitecore Experience Platform by utilizing Sitecore JSS.

WOOLI has been in the EPAM lab since the JSS Technical Preview. So now EPAM is ready to share it with the Sitecore community, and that is simply great.

This is what you need in order to follow my tutorial:

  1. Sitecore Experience Commerce 9.1 (https://dev.sitecore.net/Downloads/Sitecore_Commerce/91/Sitecore_Experience_Commerce_91_Initial_Release.aspx)
  2. Sitecore JSS – 11.1.0 (https://dev.sitecore.net/Downloads/Sitecore_JavaScript_Services/120/Sitecore_JavaScript_Services_1200.aspx)
  3. NodeJS – 10.15.3 (https://nodejs.org/dist/v10.15.3/)
  4. WOOLI – https://github.com/epam/sitecore-headless-commerce-accelerator

First let’s start our Sitecore Instance and make sure that everything is operating and Commerce is loading and our certificates are in place.

Lets make sure that we can load Sitecore Commerce

Lets make sure that we can load Sitecore Content Editor

All Right now, is the fun time, let’s go ahead and install NODEJS and Sitecore JSS. Using choco lets install nodejs

choco install nodejs

What is Choco? It is a package manager for Windows. Here is how to get it.
https://chocolatey.org/docs/installation

Okay so by now we have node installed, let’s go ahead and install Sitecore JSS. If you don’t know how to install Sitecore JSS, here is the link to my other blog.

How to Install Sitecore JSS

So far everything was smooth. Make sure you are installing the JSS version that is compatible with XC 9.1.

And When you are creating an API Key, you need to be in the Master DB.

Now it is time for the easy task to build and deploy WOOLI to the Sitecore.

These are the following operation that you will need to perform in order to continue:

  1. Run npm install in the folder to install all the node_modules
  2. Add Nuget Packages Sources
  3. Restore Nuget Packages
  4. Execture scr/build.ps1

If you don’t do that, this is what you will get:

Make sure you add the appropriate Package Sources as it is highlighted in the repository readme

So once you run the build.ps1, all your code will build and deploy.

Lets Open the Content Editor and we will see Wooli has been deployed to our Sitecore Instance, where Sitecore Commerce is also installed.

Change the Catalog

Don’t forget to Rebuild Indexes

Make sure you have the appropriate bindings set up and load up http://wooli.local/

If you have any questions or problems reach out to me on Twitter or LinkedIn, or you can create an issue in GitHub, that will be the best way to do, you can be helping other as well https://github.com/epam/sitecore-headless-commerce-accelerator/issues

Stay tuned for the next blog about Headless Sitecore Commerce with Sitecore JSS

Sitecore SXA and JSS Datasource Location Fix

So many of you know that until 9.2 with JSS 12, there were some conflicts between SXA and JSS on the same environment, to be more specific they were not compatible.

So if you are using Sitecore 9.0.2 and JSS 11 and SXA 1.8 on the same environment, and you have created a Sitecore JSS site and then you had installed SXA on top of it. And now your content authors have to do extra work in order to add components to the page in the Experience Editor, they get extra steps now.

So your renderings are set up correctly (https://helix.sitecore.net/principles/layout/datasource-settings.html)

When you try to add component to a page, you select a component

and then you get prompted to create a component and give it name

But when you click to create it again pop-ups with a window to select a component and give it a name

Usually when you install something it should not break, but in my case a new pipeline was added.

Here is the compiled list of all the pipelines, that I see in the showConfig.aspx

ScriptedRenderingDataSourceRoots - [Cognifide.PowerShell]
GetDatasourceLocation - [Sitecore.XA.Foundation.LocalDatasources]
AddAdditionalTemplates - [Sitecore.XA.Foundation.LocalDatasources]
AddDatasourceLocations - [Sitecore.XA.Foundation.LocalDatasources]
RestrictFallbackDatasourceLocations - [Sitecore.XA.Foundation.Multisite]
SetFallbackDatasourceLocations - [Sitecore.Kernel]
GetDatasourceTemplate - [Sitecore.Kernel]
GetTemplatesForSelection - [Sitecore.Kernel]
CheckDialogState - [Sitecore.Kernel]
AddPageDataFolder - [Sitecore.XA.Foundation.LocalDatasources]
AddCompositePageDataFolder - [Sitecore.XA.Feature.Composites]
AddCompositePageDataFolder - [Sitecore.XA.Foundation.LocalDatasources]
GetDatasourceTemplate - [Sitecore.XA.Foundation.LocalDatasources]
ExtendGetDatasourceDialogUrl - [Sitecore.XA.Foundation.LocalDatasources]

The one that creates me the problem is this one “GetDatasourceTemplate

For the quick fix all you need to do is remove or disable the following file (SelectRenderingDatasource.xml) – location below

Before you delete anything important note this approach is not recommended as far as you want to use the SXA module itself. It will break SXA functionality.

After you install the SXA module, it overrides the logic for SelectRenderingDatasource in Website\sitecore\shell\override\Applications\Dialogs\SelectRenderingDatasource\SelectRenderingDatasource.xml (calling all other related logic). 

This will let you add the component to the page and then it will prompt you to give it a name

#SUGCON LONDON 2019 RECAP

This was my first #SUGCON EU. Even though it was only few days, it was an excellent event. This year SUGCON Europe took place in London, capital of Great Britain. I travelled from Houston, Texas. 9 hour flight with United Airlines, arrived a day before the Conference, took few photos of the city.

London Bridge, SUGCONEU Sitecore
London Bridge

It all started with Registration and Sitecore Certifications Exam.

Sitecore SUGCON EU 2019 LONDON
Sitecore SUGCON EU 2019 LONDON

First day was opened by Mark Frost the CEO of Sitecore, with a #sitecoreSelfie

Mark Frost – Sitecore CEO

Opening Keynote was by Donovan Brown from Microsoft. He talked about DevOps. Showed how easy it is to use Azure Boards, as well as Azure Pipelines and Azure Repos and Azure Artifacts, to get started you can visit azure.com/devops

There were many great Sessions at the #SUGCON, but the ones that caught my attention were the #JSS Sessions.

Anastasiya Flynn

JSS Immersion Session by Sitecore Front End Evangelist Anastasiya Flynn was really interesting. She went into the details about creating an event search page and shared some interesting and popular React Libraries.

She showed how you can debug your Sitecore JSS application in VS Code

GraphQL – Lessons Learned

React Libraries that were shared on this presentation:

Another Interesting Session was by Adam Lamarre. Fun with Sitecore JSS: Exploring GraphQL

Adam Lamarre

He showed a lot of cool demos with GraphQL and Sitecore JSS.

  • Item Query
  • Multiple Queries
  • Activity Log
  • Chat Room

I was really inspired by Activity log and Chat Room

Another session on JSS and Sitecore Commerce was by Pramila Soni & Saurabh Sachdeva

Really cool session was by Jeff L’Heureux – 16 Tools for your Sitecore Tool Belt

He shared 17 tools for your Sitecore faster working experience. You can find all the links on his blog.

Also not to forget to mention SFF Tribute

Of course everyone was waiting for Adam and Kam to get on the stage and show was they had been working on and how they were improving the JSS.

Adam Weber and Kam Figy from Sitecore

What was announced in their session? Sneak peak of JSS 9.2

  • JSS and SXA – Manage JSS apps with SXA
  • JSS support for Sitecore Forms
  • JSS Rendering Host

Now you will be able to create a JSS Tenant and JSS Site.

JSS Integrates with SXA, but retains JSS architecture, if you have been working with JSS, and FE technologies, and you are familiar with SXA the below bulleted list would make sense to you.

  • SXA component library not supported
  • Traditional Experience Editor (no toolbox)
  • Theming/Creative Exchange not supported
  • SXA Layout features won’t work in Disconnected Mode
  • Yes all the awesome features of JSS!

JSS Rendering Host was introduced

Sitecore JSS Rendering Host, you will be able to hear about it much more during the Sitecore Symposium Orlando 2019

Congratulations to all the MVP Award Winners!

Great Sense of Humor from the organizers

Thank you to all the Organizers of the SUGCON Europe 2019 in London, it was a great event.

You can find all the presentations and videos from the conference at the following link

How to Disable PhantomJS on Sitecore CD

If you get a requirement to disable PhantomJS on your Content Delivery environments, this trick will do it.

How PhantomJS is implemented with Sitecore:

Content Testing in Sitecore uses the¬†Phantom JS¬†tool for generation of the screenshot image files. In case you didn’t know, Sitecore has had screenshot generation features for quite some time. We use it to generate icons for items that you’ll be listing in the UI like renderings. These icon generation features are based on the¬†System.Windows.Forms.WebBrowser¬†control built into .net. So why did we not use the existing screenshot features for Content Testing? In early testing we found discrepancies with the¬†WebBrowser¬†control.¬†WebBrowser¬†uses Internet Explorer installed on the server where Sitecore is running. But the specific version that it uses isn’t always the latest. There are registry updates one can make to force the appropriate IE version, but this seemed like a big ask of users. This was one of the reasons we chose to use Phantom JS instead.

All you have to do, is create a patch file that will disable getScreenshotForUrl

Copy the above code into the configuration file and name it whatever you want and it into App_Config\Include\zzz

Reference:

Sitecore HTML Helper Methods – Part 1

Here is my cheat-sheet for all the html helper methods that I use all the time, and there are some that I find every day, and I just get excited about what Sitecore can give us.

Current Item

@Html.Sitecore().CurrentItem

Current Field

@Html.Sitecore().Field("Title")

Field with different source

@Html.Sitecore().Field("Title", Sitecore.Context.Database.GetItem("{858FAD09-070A-45BA-BA29-446940A3EC4F}"));

Create a image with a url that can be edited in Experience Editor

@Html.Sitecore().Field("link", new { text = @Html.Sitecore().Field("Image") })

 Placeholder

 @Html.Sitecore().Placeholder("main")

Image Field with class

@Html.Sitecore().Field("Image", new { @class = "img-responsive" })

Field that will allow you disable the web editing feature in Experience Editor

@Html.Sitecore().Field("Heading", new { DisableWebEdit = true })
This will list the Children of the Current Item you are in.
@foreach (Sitecore.Data.Items.Item item in Html.Sitecore().CurrentItem.GetChildren())
 {
@Html.Sitecore().Field("Heading", item)
@Html.Sitecore().Field("Preview", item)
}
Visitor Identification
@Html.Sitecore().VisitorIdentification()

More stuff coming soon…

How to create a user in Sitecore and give them special access to Sitecore Content

So today, I will demonstrate how to create a user that will have access only to a specific Content Item in Content Editor.

Requirement:

Create a user that will only have access to edit one specific item in Content Editor

Execution Steps:

In this tutorial we will be using  the following Sitecore tools:

  • User Manager
  • Role Manager
  • Security Editor

First lets create a user and name him Author:

user-1

Go to Sitecore LaunchPad and select User Manager. Click New and enter the values, depending on your requirements should look something like this:

user-2

Click Next and Close.

Next Step lets make user “author” member of “sitecore\Author” role.

Select the user and click Edit button on the ribbon.

user-3

Switch to the tab “Member Of” and click “Edit”

user-4

From the list of Roles select “sitecore\Author” and add it and then click OK.

The reason I am using this Role, because this OOTB role created by Sitecore, and it disables a lot of administrative functionality.

user-5

Now lets give this user access to edit only one specific item.

 

Select the user “author” from the list and click “Security Editor” on the ribbon.

user-3

In the next window you will make the following changes.

Make sure that the user “author” is selected. Then Allow to Write to the Item “Configurations” and Deny¬†“FXM” to Read. Everything under Configurations will inherit the permissions.

user-6.PNG

Everything is in effect immediate, there is no Save or Okay buttons. So be careful what you are doing. You can make mistakes very easy.

This is what you should see when you login with Author credentials.

user-7

Sitecore recommended practice is to create roles that have special permissions, and then assign those roles to users. In this example I would not create a Role for the user because I only have a requirement for one user to touch one item, and this will never change.

If you have any question, please do not hesitate to reach out to me, comment here or connect with me on Twitter @tmamedbekov

Sitecore Experience Editor with Angular JS Integration

I have been challenged to integrate Angular web-application with Sitecore, I needed to create an ability for Content Authors to edit content that is coming from Angular Application.

So lets think for a second, I have an angular application that has all of my design and all of my logic and templates and controllers and so on. Sitecore is serving as a database. Customer would like to edit content in Experience Editor, not in the Content Editor, they would like to edit everything on the web page, the only way to do it, is to build the web site in Sitecore recommended way, by using the the MVC way. Create Layouts, Controllers, Models and so on. But we don’t want to rebuild it all. We would like to do this faster without rebuilding it.

First thing is to figure out how to inject MVC into the Angular Template, within the Sitecore Layout. After my research has been done I stopped on an article by Sitecore MVP Alexander Smagin (Using Angular Directives in Sitecore Edit Mode).

In this tutorial I will show, how you can get going really fast without rebuilding everything in Sitecore.

What we will need to have in our project:

  1. Sitecore Layout (Layout.cshtml)
  2. Sitecore Controller (AngularController.cs)
  3. Angular Template (index.html)
  4. Angular Module (myangular.js)
  5. Sitecore Template
  6. Sitecore Layout
  7. Sitecore Item

So lets begin!!!

Step 1: Lets Create a Sitecore Template

If you do not know how to create a Sitecore Template , here is a quick tutorial (How to create a Sitecore Template?)

  • Content
    • Title – Single-Line Text
    • Text – Rich-Text Editor
    • Image – Image

Create a template

Save your work and add __Standard Values.  You result should look something like this.

Sitecore Tree View

Step 2: Lets Create a Sitecore Layout (Layout.cshtml)

Lets go ahead and open Visual Studio and create a Layout. Right click on Views folder and a View and name is angularLayout.cshtml  and paste the following code in the angularLayout.cshtml:

We will add Controller and Angular Module next.

Step 3: Lets Create a Sitecore Controller (AngularController.cs)

Go to Controllers folder and add new Controller and name it AngularController.cs and paste the following code in there:

Step 4: Lets Create an Angular Module (myangular.js)

Go ahead and create myangular.js under the Scripts folder, and paste the following code in there:

Make sure to change your templateUrl.

And finally you can either add your own template or use this one for the learning purposes. This is just a sample, use your imagination how you can go about it.

Step 5: Lets Create an Angular Template (index.html)

This is just a simple angular template that uses Bootstrap, and it will bind the content with the Sitecore (@Html.Sitecore().Field) method.

Now since we have done all the work in Visual Studio. Lets go ahead and build it, and Publish it to Sitecore.

Once Everything is Published we will go ahead and connect all of the code that we have done to our template, and start creating items, based on this template.

Step 6: Lets Create a Sitecore Layout in Content Editor.

You should have something similar to this:

layout_tree

And your Data information for this Layout will look like this:

layout_data.PNG

How we will have to go back to our __Standard Values and add this Layout to the Template that we have created.

So go and select __Standard Values and select Presentation Details

standard-values.PNG

Select the appropriate Layout and you are good to go.

Create and item and you open in Experience Editor, and this item renders the layout that comes from the .html page with angular directive, you can edit everything, that you see on the page.

final-product.PNG

If you have any question, please do not hesitate to reach out to me, comment here or connect with me on Twitter @tmamedbekov