In the URL of the OCC API request initiated by the Spartacus UI, you may notice a field cmsTicketIdcalled . The meaning and purpose of this field are as follows:
cmsTicketIdIs an identifier for associating the session between Spartacus UI and SAP Commerce Cloud backend CMS (Content Management System). A CMS is a system for managing website content such as pages, components, and other elements related to front-end display. In SAP Commerce Cloud, the CMS is managed through the CMS Cockpit or SmartEdit tool. To ensure that what is displayed in the Spartacus UI is consistent with the state of the CMS, a session identifier is needed to link the two. That's what cmsTicketIdthe does.
When a user makes changes in the CMS and previews the results of the changes, the system creates a CMS session ticket (CMS Ticket). This ticket includes all changes for the current CMS session, but not yet published to production. The Spartacus UI will pass this ticket ID as cmsTicketIda parameter to the OCC API to get the CMS data associated with the ticket in the API request. This way, users can preview the changes they made in the CMS in real-time in the Spartacus UI.
cmsTicketIdParameters are only used in development or preview mode to ensure users can preview unpublished CMS changes. In a production environment, the Spartacus UI usually does not pass cmsTicketIdthe parameter because the production environment only displays the published CMS content.
In order for SmartEdit to be able to load a page in a composable store interface, all required context data needs to be sent to SmartEdit. This includes site, content directory, and content directory version, and you can also specify language, date, and time. Therefore, the cmsTicketId needs to be appended to any CMS request sent from the composable store interface to the backend.
The composable store interface has a CmsTicketInterceptor for this purpose. If cmsTicketId exists and the request specifies cms, the interceptor will add cmsTicketId as one of the request parameters. Here is an example:
https://localhost:9002/occ/v2/electronics-spa/cms/pages?lang=en&curr=USD&cmsTicketId=647947668977012877c9ca9d-6be3-43d1-ac3a-e1f4d017a70c&pageLabelOrId=login&pageType=ContentPage
The response I got is as follows:
Base64 decode the obtained page uuid:
eyJpdGVtSWQiOiJsb2dpbiIsImNhdGFsb2dJZCI6ImVsZWN0cm9uaWNzLXNwYUNvbnRlbnRDYXRhbG9nIiwiY2F0YWxvZ1ZlcnNpb24iOiJTdGFnZWQifQ==
got the answer:
{
"itemId":"login","catalogId":"electronics-spaContentCatalog","catalogVersion":"Staged"}
If you use cmsTicketId to send a CMS request, the response JSON data will contain a properties field. The properties field contains the required set of dynamic properties that apply to the contained CMS item. For example, an attribute in a CMS page might contain the following data:
...
"label" : "homepage",
"properties" : {
"smartedit" : {
"classes" : "smartedit-page-uid-homepage smartedit-page-uuid-eyJpdGVtSWQiOiJob21lcGFnZSIsImNhdGFsb2dJZCI6ImVsZWN0cm9uaWNzLXNwYUNvbnRlbnRDYXRhbG9nIiwiY2F0YWxvZ1ZlcnNpb24iOiJTdGFnZWQifQ== smartedit-catalog-version-uuid-electronics-spaContentCatalog/Staged"
}
}
}
In the smartedit group, there is a classes attribute. The value of the classes attribute is the SmartEdit contract required for this particular CMS page. Therefore, you need to add these classes to the class list of the HTML body tag. If you look at the HTML page source you will see that the body tag has this classes attribute. Here is an example:
<body class="smartedit-page-uid-homepage smartedit-page-uuid-eyJpdGVtSWQiOiJob21lcGFnZSIsImNhdGFsb2dJZCI6ImVsZWN0cm9uaWNzLXNwYUNvbnRlbnRDYXRhbG9nIiwiY2F0YWxvZ1ZlcnNpb24iOiJTdGFnZWQifQ== smartedit-catalog-version-uuid-electronics-spaContentCatalog/Staged">
<cx-storefront ng-version="8.0.0" class="stop-navigating"><header><cx-page-layout section="header" ng-reflect-section="header" class="header"><!--bindings={
...