We are going to create a landing page for our brand new model of a laptop. If you manage a commerce website, this is a very common scenario. As a company, you would be interested in creating a special landing page for promotional purposes. The blog is based on Sitecore Experience Commerce 9 initial release and the default Storefront, so lets start!

Step 1 – Create a ‘Default Commerce Page’

Open content editor, right-click on the Home item and create a new ‘Default Commerce Page’

Step 2 – Open up ‘Experience Editor’

Right-click the newly created page and open up ‘Experience Editor’

Step 3- Drag and Drop Catalog Item Container’ component

In the middle part of the page, drag and drop ‘Catalog Item Container’ component. This is a special type of component which will serve as a ‘current context’ for all of the child components within this component.

Set the data source for the product:

Step 4- Drag and Drop ‘Column Splitter’

Drag and drop ‘Column Splitter’ inside ‘Catalog Item Container’. Column splitter is a powerful component which can create bootstrap like columns for any given placeholder. Right now we are only interested in 2 columns so we will leave it at as is:

Step 5- Drag and Drop ‘Product Images’

Drag and drop ‘Product Images’ component. This will take the context of the product from ‘Catalog Item Container’ component and the images will show up.

Step 6- Drag and Drop ‘Product Information’

Drag and drop ‘Product Information’ component. This will take the context of the product from ‘Catalog Item Container’ component and information will show up.

Set associated content item (there is one predefined)

Step 7- Drag and Drop ‘Product Inventory’ component

Drag and drop ‘Product Inventory’ component. This will take the context of the product from ‘Catalog Item Container’ component.

Set associated content item (there is one predefined)

Step 8- Drag and Drop ‘Product Price’ component

Drag and drop ‘Product Price’ component. This will take the context of the product from ‘Catalog Item Container’ component.

Step 9-Drag and Drop ‘Product Variant’ component

Step 10- Drag and Drop ‘Add to Cart’ component

Save and Preview the page.

That’s it, all done. Click save and preview the page. It should look something like this:

Final output the page

Publish the page and you are all set to rock the world!

Summary:

As you see, within 5 minutes I was able to setup a landing page for one of the product with help of some powerful components. I had the full flexibility over the page structure and design. Now that is the real power of Sitecore Experience Commerce with SxA Storefront components. Go check it out!

Thanks
Naveed

Updated March 5, 2018 with Video

The video actually takes 3 minutes! There is no voice as it is self explanatory.

This is quick post about an error that I encountered during the checkout process using Sitecore Experience Commerce 9 storefront. The error happened as I entered incorrect Braintree sandbox account values during the installation process. The installation was successful but the checkout process didn’t work as expected.

After installation, I added some products to the cart and tried to checkout using the standard process. On the Billing Page, when I clicked on ‘Validate Payment‘ button, I received this error:

“A public action method ‘ShoppingCartLines’ was not found on controller ‘Sitecore.Commerce.XA.Feature.Cart.Controllers.CartController’.

The Billing Page:

The Error Page:

Sitecore Slack community came to help and thanks to Kautilya Prasad who suggested to check the Braintree account values. Also, Sitecore support team came back with the same answer pointing towards incorrect Braintree sandbox values. If you are seeing this error as well then it means that either you have not entered the sandbox values for Braintree account or have entered them incorrectly during the installation process.

In order to fix the issue, please:

Make sure that you use valid parameters for braintree policy in the PlugIn.Payments.Braintree.PolicySet-1.0.0 config file.

Make sure that valid parameters for braintree policy are bootstrapped to Global database.

Confirm values are present and correct in the config file:

Bootstrap the values to global database:

If your Braintree account is configured correctly, you will see ‘Credit Card‘ form next to the validate payment button like this: (which I was not seeing it during the checkout process earlier)

The installation of Sitecore Experience Commerce is a fairly easy process, but if you are new to it, you may end up with few installation issues. This blog aims to provide some workarounds and fixes if you encounter these errors.

Error: The service cannot accept control messages at this time.

If you see this error message, you can either wait few minutes or do and ‘iisreset’ and start the installation process again. This error message happens temporarily from time to time if IIS is busy in starting or stopping operations.

Error: Get Token From Sitecore.IdentityServer – The remote server returned an error 500

If during the installation process you get the ‘Get Token From Sitecore.IdentityServer’ failed 500 error like below, then this error means that Server Identity has not been able to contact the SQL server and is throwing a 500 error exception. The most probable reason is that you will have multiple SQL server instances running on your machine and the correct value for the “Server:MACHINE-NAME\SQLEXPRESS” has not been passed through the scripts.

Option 1 (During installation process)

To fix it if you have already started the installation process, open the following configuration JSON files and update the connection string SQL Server instance name manually to Server:”MACHINE\\SQLEXPRESS2016″, in some files you have to do it at 2 places:

file by removing the Tasks that have already been installed. For example you may want to remove the tasks till ImportRootCertificate and run the script again to just initialize commerce and bootstrap your environment.

Option 2 (Before starting the installation process)

If you are planning to install XC9 with multiple instances of SQL servers running locally on your machine, then you may want to do this prior to the installation: (assuming the SQL server you are referring to can be accessed at “MACHINE\\SQLEXPRESS2016” or something similar

1- Unzip the Sitecore.Commerce.Engine.2.0.1922.zip file

2-Navigate to \Sitecore.Commerce.Engine.2.0.1922\wwwroot\bootstrap\Global.json

3-Update the Server value on line 48 and line 97 to match your SQL server instance name

4-Zip the folder again in a way that it doesn’t create any sub-folder and path \Sitecore.Commerce.Engine.2.0.1922.zip\wwwroot\bootstrap\Global.json exists, otherwise you will get an error again.

Error: InitiazlieHabitatCommerceServices 502.3 – Bad Gateway error

Initializing Shops: https://localhost:5005/commerceops/InitializeEnvironment(environment='HabitatShops')
PS>TerminatingError(Invoke-RestMethod): "
IIS 10.0 Detailed Error - 502.3 - Bad Gateway
HTTP Error 502.3 - Bad Gateway
The specified CGI application encountered an error and the server terminated the process.
Most likely causes:
The CGI application did not return a valid set of HTTP errors. A server acting as a proxy or gateway was unable to process the request due to an error in a parent gateway.
Things you can try:
Use DebugDiag to troubleshoot the CGI application. Determine if a proxy or gateway is responsible for this error.
Detailed Error Information:
Module AspNetCoreModule
Notification ExecuteRequestHandler
Handler aspNetCore
Error Code 0x80072ee2

This error is also related to incorrect SQL server values (as mentioned above) in the configuration json files:

Error: sxa.storefront.com is visible in experience editor but not as the published site

If you have used a different HostName value in your installation script then ‘sxa.storefront.com‘ like ‘sitecore901.commerce‘ and wondering why this is not coming up after you have published the webiste multiple times then you need to do the following:

Sitecore Experience Commerce is the new offering from Sitecore in the commerce arena and it is getting lot of attraction. This blog presents a PowerShell script to help out developers during the uninstall process.

I have posted a reference installation script that I have used during installation, (originally taken from the documentation and then added actual version for the packages) so you can always refer to it and compare it with your own script.

It may happen that during your installation, you have entered an incorrect value for a parameter or path to one of the packages. Then you may want to uninstall the the module before you can re-install it again. Or may be you just want to uninstall the XC9 module to start from scratch. The process of uninstalling XC9 module can be difficult to do manually, so I present a a simple PowerShell script to automate it!

All you need to do is update the Param values (between line 3 and 15) to suit your installation variables and then run from the PS console:

Copy it locally in the deploy folder and run it like .\uninstall-commerce.ps1

All the script is doing is un-installing the SolrIndexes, IIS websites, website physical files and databases.

When you will start working with Sitecore Experience Commerce, one of the most important tool that you will need is Postman to run your API calls for various purposes.

This blog is a walk through about how to set it up and get started with it. The example is based upon Sitecore XC9 initial release. It assumes that you have downloaded and installed Postman on your local environment.

1-Disable SSL verification

The first think that you want to do is disable SSL verification from the File > Settings > SSL certification verification. This settings needs to be turned off.

2-Disable AntiForgery Settings

This settings should always be enabled during the production environment, but for requesting API through Postman tool this setting needs to be disabled.

Navigate to \CommerceAuthoring_Sc9\wwwroot\config.json and set the value for AntiForgeryEnabled to false.

3-Import Postman sample scripts

There are various API scripts that are available within the \Sitecore.Commerce.Engine.SDK.2.0.1922\postman deploy folder location. All you have to do is import them before so you start playing around with the API calls

After the import of the DevOps folder new set of calls will appear in the left hand panel

3-Import the other folder and the individual files too and you will end up with lots of collection as below:

4-Bootstrap Sitecore Commerce

To bootstrap you first need to get the authentication token

If everything is correct, it will generate a token which can be used in subsequent calls

Then scroll down in the left hand panel and under SitecoreCommerce_DevOps > 1 Environment Bootstrap click on Bootstrap Sitecore Commerce

If everything is correct, the Postman will show a success message like this:

Error: The required antiforgery header value “X-XSRF-TOKEN” is not present.

If you are trying to bootstrap and you get this as 500 error

Check the logs at \CommerceAuthoring_Sc9\wwwroot\logs

If the error message is related to antiforgery as below, then you need navigate to \CommerceAuthoring_Sc9\wwwroot\config.json and set the AntiForgeryEnabled value to false. Also do an iisreset or recycle the app pool

ERROR Connection id ""0HLBOLTT3AJ84"", Request id ""0HLBOLTT3AJ84:00000001"": An unhandled exception was thrown by the application.
Microsoft.AspNetCore.Antiforgery.AntiforgeryValidationException: The required antiforgery header value "X-XSRF-TOKEN" is not present.
at Microsoft.AspNetCore.Antiforgery.Internal.DefaultAntiforgery.d__9.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Sitecore.Commerce.Core.CommerceController.d__13.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Mvc.Internal.ControllerActionFilter.d__4.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.d__14.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.d__22.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.Rethrow(ResourceExecutedContext context)
at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.d__17.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.d__15.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Builder.RouterMiddleware.d__4.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Builder.RouterMiddleware.d__4.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Authentication.AuthenticationMiddleware.d__6.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Cors.Infrastructure.CorsMiddleware.d__7.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Sitecore.Commerce.Core.ClientCertificateValidationMiddleware.d__4.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Diagnostics.StatusCodePagesMiddleware.d__3.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Sitecore.Framework.Diagnostics.DiagnosticMetadataMiddleware.d__5.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Sitecore.Framework.Diagnostics.DiagnosticPageMiddleware.d__4.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Server.IISIntegration.IISMiddleware.d__11.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Hosting.Internal.RequestServicesContainerMiddleware.d__3.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.Frame`1.d__2.MoveNext()

That’s all there is, checkout the other sample API calls and get familiar with them!

Sitecore released their much awaited module – Sitecore Experience Commerce (or XC9 in short) in late January 2018. As an avid Sitecore enthusiast, I was eager to learn more about it. On a free weekend, I decided to install and play with it. This blog is about the first look and feel about the XC9 module and only explores very high level features. The detailed documentation about the module can be found at the official site.

The Storefront

Once the installation is complete, the modules comes with an sample store called the Storefront.

The home page comes with featured carousel and product list components (SXA based)

Clicking on any of the top menu items (for example Appliances) will present the list of products with filtering and sorting options:

Clicking on an individual item will take the user through to the product details page, where the user can add the product in their shopping cart:

The Checkout Process

The checkout process is very user friendly and can be compared with any top of the line commerce stores. For example if the user decides to add a laptop and click on the ‘View Cart‘ link from the top right, the user will be shown the summary of cart:

The user can either click ‘checkout‘ or click ‘continue shopping great products‘. If the user decides to click the ‘checkout‘ button, the next screen asks for delivery details to calculate additional shipping charges:

The user can check ‘Ground’ option and click ‘Continue to billing’. The next screen asks for ‘Billing’ details and also includes shipping charges:

Before the user can continue, the user must validate credit card details. At the moment, the system is configured to use Braintree sandbox account. The user can enter any of the test credit card details available from the Braintree website and click ‘Validate Payment’:

Once the credit card has been validated, the user can proceed to the final review screen before hitting ‘Confirm Order‘ button:

The final screen will show order confirmation number:

That was an amazing experience for buying a product and as a user, I am very much impressed!

The Business Tools

So that was the customer experience, now lets see what is there in the for the back office administrators. After installing the XC9 module a new icon as ‘Business Tools’ should be available for admin users from the Sitecore Experience Platform dashboard.

The Business Tool dashboard comes with 7 sub-modules to manage the store.

Merchandising

Inventory

Pricing

Promotions

Orders

Customers

Relationship Definitions

Since the user has just made a purchased, lets checkout what is in the ‘Order’ module

Clicking on the ‘Order’ link from the dashboard or side link, the admin user can see one order is in the ‘Pending’ state:

Clicking on the pending order link, the admin user can see the details about the order:

This out of the box back office processing system for admin users looks amazing as they can instantly see all the order summaries and details. I will pause the exploring rest of the commerce modules as they require much more detail and perhaps another blog.

The Storefront Content Tree

The Storefront content tree is based upon conventions and structure introduced by SXA module. The SXA modules comes with 80+ components for speeding up the development process.

A new set of commerce components are added in the SXA toolbox library.

All of the pages in the Storefront are developed using SXA or Commerce-SXA components.

Summary

As you can see, Sitecore Experience Commerce 9 is a very rich and extensive module for developing an online store. In this blog, I have only scratched the surface of the module and I am super excited about it. The 40+ commerce SXA components, the 7 back office processing modules, and additional 80+ standard SXA components for rapid website development, all together deliver a knockout punch in the online commerce industry

In my opinion, Sitecore XC9 module will definitely meet the expectations of any business looking for a modern, cloud-ready and secure online store. So, if you manage an online store and looking for replacement options, do evaluate Sitecore Experience Commerce out before making any decisions.