首页 > 其他分享 >SAP Spartacus UI 中的 CmsTicketInterceptor

SAP Spartacus UI 中的 CmsTicketInterceptor

时间:2023-06-03 10:33:24浏览次数:50  
标签:CmsTicketInterceptor Spartacus cmsTicketId UI SAP CMS smartedit 页面

在 Spartacus UI 发起的 OCC API 请求的 URL 中,您可能会注意到一个名为 cmsTicketId 的字段。这个字段的含义与用途如下:

cmsTicketId 是一个标识符,用于关联 Spartacus UI 与 SAP Commerce Cloud 后端 CMS (Content Management System) 的会话。CMS 是一个用于管理网站内容的系统,如页面、组件和其他与前端显示相关的元素。在 SAP Commerce Cloud 中,CMS 通过 CMS Cockpit 或者 SmartEdit 工具进行管理。为了确保在 Spartacus UI 中显示的内容与 CMS 的状态保持一致,需要使用一个会话标识符来关联二者。这就是 cmsTicketId 的作用。

当用户在 CMS 中进行更改并预览更改结果时,系统会创建一个 CMS 会话票证(CMS Ticket)。这个票证包含了当前 CMS 会话的所有更改,但尚未发布到生产环境。Spartacus UI 会将这个票证的 ID 作为 cmsTicketId 参数传递给 OCC API,以便在 API 请求中获取与该票证关联的 CMS 数据。这样,用户就可以在 Spartacus UI 中实时预览他们在 CMS 中所做的更改。

cmsTicketId 参数只在开发或预览模式下使用,以确保用户能够预览未发布的 CMS 更改。在生产环境中,Spartacus UI 通常不会传递 cmsTicketId 参数,因为生产环境只显示已发布的 CMS 内容。

为了让SmartEdit能够在可组合的商店界面加载页面,需要向SmartEdit发送所有所需的上下文数据。这包括站点、内容目录和内容目录版本,还可以指定语言、日期和时间。因此,需要将cmsTicketId附加到从可组合商店界面发送到后端的任何CMS请求中。

为此,可组合商店界面具有CmsTicketInterceptor。如果存在cmsTicketId并且请求指定了cms,拦截器会将cmsTicketId添加为请求参数之一。以下是一个示例:

https://localhost:9002/occ/v2/electronics-spa/cms/pages?lang=en&curr=USD&cmsTicketId=647947668977012877c9ca9d-6be3-43d1-ac3a-e1f4d017a70c&pageLabelOrId=login&pageType=ContentPage

拿到的响应如下:

把得到的 page uuid 进行 base64 解码:

eyJpdGVtSWQiOiJsb2dpbiIsImNhdGFsb2dJZCI6ImVsZWN0cm9uaWNzLXNwYUNvbnRlbnRDYXRhbG9nIiwiY2F0YWxvZ1ZlcnNpb24iOiJTdGFnZWQifQ==

得到结果:

{"itemId":"login","catalogId":"electronics-spaContentCatalog","catalogVersion":"Staged"}

如果使用cmsTicketId发送CMS请求,响应的JSON数据中将包含一个properties字段。properties字段包含了所需的动态属性组,这些属性组适用于包含的CMS项。例如,CMS页面中的属性可能包含以下数据:

...
"label" : "homepage",
"properties" : {
    "smartedit" : {
        "classes" : "smartedit-page-uid-homepage smartedit-page-uuid-eyJpdGVtSWQiOiJob21lcGFnZSIsImNhdGFsb2dJZCI6ImVsZWN0cm9uaWNzLXNwYUNvbnRlbnRDYXRhbG9nIiwiY2F0YWxvZ1ZlcnNpb24iOiJTdGFnZWQifQ== smartedit-catalog-version-uuid-electronics-spaContentCatalog/Staged"
        }
    }
}

在smartedit组中,存在一个classes属性。classes属性的值是此特定CMS页面所需的SmartEdit合同。因此,您需要将这些类添加到HTML body标签的类列表中。如果您查看HTML页面源代码,您将看到body标签具有此classes属性。以下是一个示例:

<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={
...

标签:CmsTicketInterceptor,Spartacus,cmsTicketId,UI,SAP,CMS,smartedit,页面
From: https://blog.51cto.com/jerrywangsap/6407547

相关文章

  • SAP-SD拣配什么意思
    外向交货单创建成功后,如果涉及库存物料出库,则可能发生一系列的操作,例如拣配、包装、运输等,本文档就是描述拣配的操作。拣配(Picking)是为向客户交货而准备货物的过程,例如将需要交货的物料从库房移至装车地点,在此过程中需要特别注意日期、数量和质量。不是所有的交货都需要拣配,是否含......
  • vue+elementUI 合并行3
    1、返回数据为一维数组getData(){that.tableData=res.data.data.list;}2、合并函数挂在vue底层:Vue.prototype.$spanMethodFunc=function(list,props,row,col)写在method内:spanMethodFunc(list,props,row,col){if(col>=props.length||!props[co......
  • Vue进阶(幺零八):npm run build 错误 (node:7852) UnhandledPromiseRejectionWarning: Cs
    (文章目录)一、前言在项目打包过程中,突然报如下错误:Vuenpmrunbuild错误(node:7852)UnhandledPromiseRejectionWarning:CssSyntaxError:xxxx.但是在执行npmrundev过程中,并未错误或告警信息。二、解决方案打开webpack.prod.conf.js,注释掉以下配置代码newOptimiz......
  • vue+elemntUI合并行2
    返回的是一维数组o:[{id:1,name:s;age:11},{id:1,name:s;age:11},{id:2,name:p;age:15}]1、对返回的数据做处理getData(){that.tableData=res.data.data.list;that.getFormatList();//重新合并行},getFormatList(){letrecordObj={};this.re......
  • vue+elementui 合并行
    1,数据格式是二维的如:o:{id:123,prams:{name:aaa,age:11}}的对象第一步:先获取返回的数据为indexInfoList,遍历转化为一维数组 that.indexInfoList.forEach(ele => {if(ele.prams.length>=1){ele.prams.map((related,index)=>{......
  • 浪潮信息发布G7系列SAP HANA一体机,挑战内存计算极限性能
    2023年5月30日,浪潮信息“智算开新局·创新机”全国巡展济南站正式启航。会上,浪潮信息重磅发布基于G7算力平台的新一代SAPHANA一体机,为企业提供高性能、高可靠、高稳定性和绿色节能的数据平台。该方案针对 SAPHANA应用进行了深入优化,在SAP最新发布的IntelSapphireRapids双路计......
  • Step by Step about How to Build libjingle 0.4
    [b]1.DownloadandInstallVisualC++2010Express[/b][url]http://www.microsoft.com/express/Downloads/#2010-Visual-CPP[/url][b]2.DownloadandinstallbinarypackageforExpat[/b]http://sourceforge.net/projects/expat/files/expat_......
  • IOS基础-UICollectionView
    资料UICollectionView详解(一)——基本使用自定义UICollectionviewCell简述iOS-自定义UICollectionViewCell注册问题UICollectionView详解:(Header/Footer)iOSUICollectionView中添加边框UICollectionview设置sectionbackground自定义UICollectionReusableViewUICollectionView......
  • owsap top 10 2018
    OWASP-Top10Vulnerabilitiesinwebapplications(updatedfor2018) IntroductionOWASP(Openwebapplicationsecurityproject)communityhelpsorganizationsdevelopsecureapplications.Theycomeupwithstandards,freewaretoolsandconferencesthathelp......
  • IOS学习-UITextField
    《iOS8开发指南》,自己总结用UITextField文本框(UITextField)是一种常见的信息输入机制,类似于Web表单中的表单字段。文本框基础常用属性(1)boderStyle属性:设置输入框的边框线样式(2)backgroundColor属性:设置输入框的背景颜色,使用其font属性设置字体。(3)clearButtonMode属性:设置......