Sitecore Commerce 10- Setup Development Environment for Business Tools

Business Tools is extensible using pluggable framework and can extend a UI using Entity Views. Although Business Tools offers a rich set of controls you might want to create your own custom control for the best business experience.

For this you need to first setup the development environment for business tools. Once the environment is setup you should be ready to develop custom control/customize the business tools.

Prerequisites

  1. Instance of Commerce Engine deployed in development environment
  2. Install Node.js Javascript runtime
  3. Install Angular CLI tool – npm install -g @angular/cli

NPM configuration to have NPM Packages from Sitecore public feed

Sitecore BizFx SDK relies on NPM packages available on the Sitecore official public feed for NPM packages.

Open Poswershell as Administrator

Execute these 2 commands in powershell

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

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

This will add following line to–

C:\Users\[your user]\.npmrc

[Optional] – you may check if this lines are added

@speak:registry=https://sitecore.myget.org/F/sc-npm-packages/npm/
@sitecore:registry=https://sitecore.myget.org/F/sc-npm-packages/npm/

Setup and Install SPEAK and BizFx packages for development solution

Copy Sitecore.BizFX.SDK.4.0.8 folder to your development folder and extract the SDK zip file to folder e.g. c:\BizFXDevelopment\SitecoreBizFx

Copy below files to the folder SDK was extracted. You should find this files from the Sitecore XC release package.

  1. speak-icon-fonts-1.1.0.tgz
  2. speak-ng-bcl-2.0.0-r00116.tgz
  3. speak-styling-1.0.0-r00110.tgz

Execute the following commands where the above files were copied

​​​​​​​npm install speak-icon-fonts-1.1.0.tgz
​​​​​​​npm install speak-ng-bcl-2.0.0-r00116.tgz
npm install speak-styling-1.0.0-r00110.tgz
npm install @sitecore/bizfx

Run npm install. This should install required npm modules and add a folder node_modules

npm install

Setup the business tools config.json with your deployment configuration

Once the npm installed successfully open config.json file located in src\assets folder

Update the config to the same as the BizFx site instance except for BizFxUri. Note BizFxUri points to http in below config

{
  "EnvironmentName": "HabitatAuthoring",
  "EngineUri": "https://localhost:5000",
  "IdentityServerUri": "https://xp10.IdentityServer",
  "BizFxUri": "http://localhost:4200",
  "Language": "en",
  "ContentLanguage": "en",
  "Currency": "USD",
  "ShopName": "CommerceEngineDefaultStorefront",
  "LanguageCookieName": "selectedLanguage",
  "ContentLanguageCookieName": "selectedContentLanguage",
  "EnvironmentCookieName": "selectedEnvironment",
  "AutoCompleteTimeout_ms": 300,
  "AccessTokenUpdateInterval_ms": 300000
}

Run the development environment

Important!

Stop the SitecoreBizFx site as the site listens to 4200 port. Next step will help listen the site from the extracted SDK folder.

Execute following Powershell command –

ng server

Open browser on http://localhost:4200/ this should ask to enter the Sitecore client credentials, once provided it will throw an error

This site can’t provide a secure connection

The reason this error occurs the identity server is not configure to server BizFx site on http

Update the Sitecore Identity Server Configuration

Open the Sitecore.Commerce.Identity ServiceHost.xml from the installed Identity Server instance \wwwroot\Config\production

Add http://localhost:4200 to AllowedCorsOriginGroup1

<AllowedCorsOrigins>
<AllowedCorsOriginsGroup1>http://localhost:4200</AllowedCorsOriginsGroup1>
</AllowedCorsOrigins>

Update Commerce Engine configuration

  • Open config.json from wwwroot folder in CommerceAuthoring site
  • Since the config is changed need to bootstrap so the changes are applied to authoring site
  • Restart IIS. Optionally you may just restart Commerce Authoring site

Run Business tool from development environment

Open browser on http://localhost:4200/

Business tools running on http and in developer mode.

References –

step-by-step instructions on how to setup and compile the Business Tools (BizFX) application using the ​Sitecore.BizFX.SDK

Stay tuned next blog will walk through on how to create a new custom control/component in Business Tools

This image has an empty alt attribute; its file name is image-43.png

How to resolve user registration error in Sitecore Commerce- “Invalid or missing value for property Domain .”,”User created but external Id was not provided”

Are you wondering why this error occurred while registering user?

You may come across this error when the engine is trying to create a customer in Commerce and the domain you have created for Storefront is not available in Commerce. The customer in commerce are mapped to the domain and if the domain is not found or matched with what is configured in Storefront this error will come.

So how to resolve this error-

Lets say your Storefront is mapped to use the default environment i.e. HabitatShops.

Follow steps below to make this work-

  • Open PlugIn.Habitat.CommerceAuthoring-1.0.0.json and find the CustomerPropertiesPolicy
  • You may see the list of Domains default been Storefront, extranet and CommerceUsers
  • Add the domain you have configured in your storefront in this list e.g.:- HabitatStorefront
  • Add the same domain to PlugIn.Habitat.CommerceShops-1.0.0.json
  • Ensure the domain is created and mapped in the Storefront correctly
  • Bootstrap Habitat Environment using Postman and now you should see the domain in the list whilst creating a customer

You should now able to see the domain in the list whilst creating a customer in business tool

Should also allow to create a customer with the new domain-

Hope this helps.

Enable Catalog search in business tool for Sitecore 9.1 Commerce environments

Sitecore Commerce indexes Catalogs, Categories and SellableItems to help search items in Business tools. The settings for the Search can be found in PlugIn.Search.PolicySet-1.0.0.json

These indexes has a search scope, for searching catalog and related items by default the scope is “xc910CatalogItemsScope”

So in SOLR indexed items related to catalogs are kept in core – “xc910CatalogItemsScope”

By default Sitecore will index only Habitat Environment in Sitecore Commerce 9.1. If you want to index your custom environment or AdventureWorks environment, follow these steps-

  • Open Sitecore.Commerce.Engine.Connectors.Index.Common.config file. This should be in CM Y.Commerce.Engine folder
  • In this instance for Adventureworks add “AdventureWorksAuthoring” in Environemnts element for Master Index and “AdventureWorksShops” for Web Index
  • Open Postman and Run – Full Index Minion Catalog Items
  • Check if the items are indexed correctly in SOLR.
  • Search the same keyword in Business tool for AdeventureWorks environment

Sitecore commerce – No catalog data available

Sitecore Storefront can have multiple catalogs, but only one catalog can be used to each Storefront.

At times whilst development you might have to switch between the Authoring site and Visual Studio Commerce Engine Solution for debugging. I have seen sometimes the Catalog for the Storefront is reset during the switch which results in error – No catalog data available.

This message is shown on the menu as seen in the screenshot-

ErrorNoCatalogDataAvailable

ErrorNoCatalogDataAvailable2

Solution-

Login to Sitecore Client and follow these steps-

  1. Navigate to following location in Content Editor-  /sitecore/content/Sitecore/Storefront/Home/CatalogsSelectCatalog
  2. If none of the Catalog is selected, please select the Catalog and Save. In this case Habitat_Master
  3. Should now display the menu as the Catalog details are now setupErrorNoCatalogDataAvailable1

You also might need to consider checking Catalog Configuration here – /sitecore/content/Sitecore/Storefront/Settings/Commerce/Catalog Configuration

Setup the Catalog and Start Navigation Category

CatalogConfiguration

 

Hope this helps.

 

 

Sitecore Commerce environments- configure and access environment policy

Environments in Sitecore XC are used to control the configuration policies that defines behavior. Define a Commerce environment in the environment configuration JSON file. JSON file contains information specific to Commerce Engine policies that needs to be implemented for specific environment for example Habitat Authoring.

In this article will show how to configure the policy in a specific environment JSON file and access the policy that affects the behavior based on the settings.

First check the default environment. Open Sitecore.Commerce.Engine.Connect.config and see

<defaultEnvironment>HabitatAuthoring</defaultEnvironment>

In this case will add a setting to include Sitecore Clinet Url in enviornment-

Open Comerce Authoring – wwwroot\data\Environments folder

Since the default environment is HabitatAuthoring, you should update PlugIn.Habitat.CommerceAuthoring-1.0.0.json file-

{
"$type": "Sample.Commerce.Plugin.Management.Policies.SitecoreCmsServerPolicy, Sample.Commerce.Plugin.Management",
"ServerHostName": "https://mystorefront.local/"
},

Restart IIS. Hope you already know how to run the Commerce Ops script using postman.

Open Postman, run the GetToken and in SitecoreCommerce_DevOps

run Bootstrap Sitecore Commerce.

This should sync the environment related changes.

Assuming you have a plugin. Create a policy in  Sample.Commerce.Plugin.Management.Policies namespace with the class SitecoreCmsServerPolicy inherited from Policy as below-

using Sitecore.Commerce.Core;

namespace Sample.Commerce.Plugin.Management.Policies
{

public class SitecoreCmsServerPolicy: Policy
{
public string ServerHostName { get; set; }
}
}

You can use the environment configurations by getting the policy as folloes-

var cmsSitecoreServerPolicy = context.GetPolicy<SitecoreCmsServerPolicy>();

cmsSitecoreServerPolicy.ServerHostName;

You should now get the value “https://mystorefront.local/&#8221; when ServerHostName is accessed.

You may update these environment files- PlugIn.Habitat.CommerceShops-1.0.0.json for shops environment

Hope this helps.

 

Reference- Commerce Engine environments