Headstart – Information for Sitecore developer

We saw how to set up the OrderCloud Headstart buyer and seller websites in the previous article.
My buyer application’s main page is blank after I configured my Ordercloud Headstart application.

I examined the code and discovered that the feature products list must be presented on home page, and the logic is already there in the buyer application code. Here is where we may look at the code that has been implemented here.

In second screen shot you can check “xp.Featured” filter is responsible to get the featured products from Order cloud commerce. Featured is the extended property and it is not configured and found in Headstart Seller code. To enable this feature we have to configure or managed the Featured products in the seller application and this code is missing.

I have implemented the feature product configuration code in seller application. We have added the featured product checkbox field in Product creation section (please see below screen shot). Admin or seller can able to set the product as a featured product by selecting the Featured checkbox flag.

We have to update existing component code and please find the below detail below.

Component location path: src\UI\Seller\src\app\products\components\product-edit\product-edit.component.html.

Add below html block under “productInReviewNotifications” .

Code base location : src\UI\Seller\src\app\products\components\product-edit\product-edit.component.ts

Add Feature extended property to handleUpdateProduct method.See below screenshot.

Add below code line to createProductForm function.

Featured: new FormControl(_get(superHSProduct.Product, ‘xp.Featured’)

Add below code to existing code file :- src\UI\Seller\src\app\products\product.service.ts

Featured property to XP object.

By adding all the above code to Seller application code you are able to see the feature product listing on buyer application home page.

References

Find documents here
Headstart Repo here

As you all know Sitecore acquire the Boxever CDP. Sitecore Boxever is a Customer Data Platform (CDP) which collects the data from any system or channels (Web,Mobile APP and Kiosk and POS). Sitecore CDP is having the capability of Data Management, A/B testing, Decisioning and Personalization.

Sitecore provide the Sandbox environment. Now question is how we will get the access. So to get the access, please complete the Sitecore CDP training from Sitecore eLearning portal. (https://learning.sitecore.com/pathway/boxever-training). After completion of this training you will get the completion certification.

Now send the mail to this email id “‘PartnerEnablement@sitecore.com‘” with your attached certification to get the access on Boxever sandbox environment.

In a week’s time, you will probably have a access to the Sitecore CDP “https://app.boxever.com/” sandbox environment . After logging in to this portal, we can access the portal and view the dashboard given below.

Sitecore CDP provides the following features /functionalities.

Data Collection
Personalization
A/B Testing
Decisioning

In this article we will cover where this CDP product fit in the Sitecore landscape and JavaScript based integration of CDP with Web Channel. In the next article we will cover the all the touchpoints of data collection and provide the integration sample code.

Sitecore Content Hub/Ordercloud/ Experience Manager Integration Diagram.

Sitecore CDP provide following way to integrate the CDP system with all channel to collect the data.

JavaScript Library : t is a lightweight JavaScript library that interacts with target channels to collect data and provides multiple JavaScript functions with multiple touch points to collect data, which we will introduce in the next article.
Integration with Google Tag Manager
Stream API
Rest API
Batch API

Lets start with JavaScript Library integration to capture the Website data. Please follow the following Steps to make the connection between website channel and CDP.

To capture the visitor behavior data from site and pushed to Sitecore CDP , we need to paste a small JavaScript code into our site’s pages. We have to paste this code in head section of page (as example Sitecore website -Layout and Angular site index.html).
To run this code we required the client_key which we will get from Sandbox environment (please see the screen shot below)