当前位置: 首页 > Web前端 > JavaScript

MigrateYourAccelerator-basedStorefronttoSpartacusStorefront

时间:2023-03-26 22:33:59 JavaScript

原文:MigrateYourAccelerator-basedStorefronttoProjectSpartacusGettingStartedwithCloudProjectSpartacus》,你可能想迁移到基于无状态高性能架构的店面,想知道如何实际准备迁移。本文将讨论一种适用于小型店面的迁移方法,但该过程也可以帮助进行较大的项目迁移。不过,对于后者,建议进行完整的重新实施。是否迁移?尽管迁移到建议将Spartacus作为一个重新开始并重新思考您的店面体验的机会,您可能希望迁移到Spartacus并保持相同的体验。根据自定义基于加速器的店面的数量和方法,您可能会发现很容易或很难尝试将您现有的经验迁移到Spartacus。如果您不确定,您可以练习使用以下步骤来确定如何无需花时间实施它就可以改变。与从全新方法开始相比,这可以让您了解迁移可能需要多少工作。如“SAPCommerceCloudProjectSpartacus入门”中所述,您可以同时运行Accelerator和Spartacus店面以降低风险,但不建议长时间这样做。在两个技术堆栈上维护两个店面会使开发和测试变得非常困难,更不用说您可能会给客户带来不一致的用户体验,具体取决于他们点击的店面页面。Prerequisites建议您在升级到SAPCommerce1905或更高版本后开始迁移到Spartacus店面,因为OmniCommerceConnect(OCC)应用程序编程接口(API)的安装方式已经简化(它们现在可以作为扩展而不是Add-ons插件)。要开始,您还需要以下内容:初始设置查看Spartacus的发行说明和路线图,以确保您了解哪些功能是等效的,哪些可能已经更改,哪些可能缺失升级您现有的店面以至少使用SAPCommerce1905任何现有的OCC加载项都已转换为常规扩展(如果使用SAPCommerce2005或更高版本)您已完成“构建和部署您的第一个SAPCommerceCloud项目”的步骤。您可能还想查看安装SAPCommerceCloud2005以与Spartacus一起使用所涵盖的内容,并确保您已配置并执行Spartacus项目设置。前端团队将构建由布局和Angular模块组成的店面用户界面。开发人员的核心技能将是:AngularRxJSSpartacusHMTL5后端团队后端团队将构建前端团队所需的OCCAPI。所需的核心开发人员技能是:SAPCommerceOCCA基于Spartacus的店面剖析在开始迁移之前,您应该熟悉Spartacus店面的工作原理。首先访问SpartacusStorefront文档并查看模块和组件目录。它看起来像这样:浏览模块和组件并熟悉Spartacus提供的功能。特别注意提供默认CmsConfig的模块,它定义了标准CMS组件和Spartacus组件之间的映射。在下面的示例中,BannerComponent提供了到SimpleResponsiveBannerComponent、BannerComponent和SimpleBannerComponent的映射。BannerModule@NgModule({imports:[CommonModule,RouterModule,GenericLinkModule,MediaModule],providers:[provideDefaultConfig({cmsComponents:{SimpleResponsiveBannerComponent:{component:BannerComponent,},BannerComponent:{组件:BannerComponentSiComponent,}{组件:BannerComponent,},},}),],declarations:[BannerComponent],entryComponents:[BannerComponent],exports:[BannerComponent],})exportclassBannerModule{}Accelerator-basedStorefrontvsSpartacus-basedStorefront您可能熟悉标准的基于Spring-MVC的加速器位于下图左侧,但请仔细查看右侧Spartacus店面的描述以了解关键差异。加速器店面在传统店面中,浏览器向服务器发出请求,服务器检索页面结构并执行控制器、皮肤和服务以处理和检索呈现视图所需的信息。大多数状态都保存在服务器端。SpartacusStorefront在无头店面中,前端在浏览器上加载,页面结构和布局从服务器检索(除非它具有静态布局)。Spartacus组件(参见上面的模块和组件)用于在客户端构建页面,它们对服务器执行OCC调用(参见上面的OCCAPI)以检索渲染所需的数据。但是,出于性能和SEO目的,初始页面可能最初是在服务器上构建的(使用称为服务器端呈现-SSR的技术)。状态保存在客户端。在迁移期间,您将现有的加速器控制器功能分解为单独的SpartacusAngular组件(还包括视图/模板逻辑)和OCCAPI,如虚线所示。请注意,在某些情况下,可能还需要修改现有的底层外观和服务。还需要更改内容目录,Spartacus文档很好地概述了加速器和Spartacus样本数据之间的差异。最后,您可以在Chrome的开发人员工具的帮助下分析对产品详细信息页面的示例调用,以了解所有内容是如何组合在一起的。使用“网络”选项卡查看Spartacus生成的请求。使用AuguryChrome插件,您可以在浏览器中构建页面后查看生成的组件层次结构。开始迁移第1步-清点您的CMS组件和页面清点您当前店面中使用的页面和组件很重要,如下表所示。对于每个页面,列出使用的控制器和自定义CMS组件,并找出每个组件需要显示或处理的数据。有些必填信息乍一看可能看不出来,比如下拉框或弹窗。在现有店面中编辑给定页面以检索组件详细信息时,您可以在SmartEdit中过滤对/pagescontentslotcomponents的请求。Accelerator产品详情页中使用的组件:{componentId:"SiteLogoComponent",...}1:{componentId:"HomepageNavLink",...}2:{componentId:"OrderComponent",...}3:{componentId:"MiniCart",...}4:{componentId:“ElectronicsCategoryNavComponent”,...}5:{componentId:“breadcrumbComponent”,...}6:{componentId:“TabPanelContainer”,...}7:{componentId:“FooterNavigationComponent”,...}8:{componentId:“MyAccountComponent”,…}9:{componentId:“MyCompanyComponent”,…}10:{componentId:“SearchBox”,…}11:{componentId:“VariantSelector”,…}12:{componentId:“AddToCart”,…}13:{componentId:"Similar",...}14:{componentId:"CookieNotificationComponent",...}15:{componentId:"AnonymousConsentManagementComponent",...}16:{componentId:"AssistedServiceComponent",...}17:{componentId:"ProfileTagScriptComponent",...}18:{componentId:"PersonalizationScriptComponent",...}19:{componentId:"BundleCarouselComponent",...}开箱即用的Spartacus支持几乎所有响应式B2CCMS组件,因此您只需要关联自定义,以及来自标准库中未含盖的第三方插件或市场农场扩展的组件根据其功能区域进行分组和分类,使用如下所示的组件清单。请注意,与AcceleratorPage方法不同,Spartacus中的所有内容都需要是组件,因此您可能需要将现有JakartaServerPage(JSP)布局的部分组件化。以下查询为您提供店面中使用的组件、页面模板和页面的概览://Componentlistselect{ct.code},{c.id},{ct.extensionName},count(*)ascntfrom{AbstractCMSComponent作为acc在{ct.pk}={acc.itemtype}上以ct身份加入ComposedType在{cv.pk}={acc.catalogversion}上以cv身份加入目录版本在{cv.catalog}={c.pk}上以c身份加入目录}其中{c.id}LIKE'%ContentCatalog'和{cv.version}='Online'按{ct.code}、{cv.version}、{c.id}、{ct.extensionName}按cnt排序desc//页面模板select{ct.code},{c.id},{pt.name},{pt.frontendTemplateName}from{PageTemplateasptjoinComposedTypeascton{ct.pk}={pt.itemtype}在{cv.pk}={pt.catalogversion}上以cv身份加入CatalogVersion在{cv.catalog}={c.pk}}上以c身份加入目录,其中{c.id}LIKE'%ContentCatalog'和{cv.version}='Online'orderby{ct.code}//Pagesselect{ct:code},{c:id},{ap:name[de]},{ap:uid}from{AbstractPageasapjoinComposedTypeasct在{ct.pk}={ap.itemtype}在{cv.pk}上作为cv加入目录版本={ap.catalogversion}在{cv.catalog}={c.pk}上作为c加入目录}其中{c.id}LIKE'%ContentCatalog'and{cv.version}='Online'orderby{ct.code}//Pages,ComponentsandSlotsselect{c.id},{cv.version},{p.uid}as"Page",{pt.uid}作为“模板”,{s4p.position}作为“模板指定位置”,{st.uid}作为“内容槽id4t”,{st.active}作为“内容槽4t活动”,{sn.templatePOS}作为“pos”,{sn.name}作为“模板可用位置”,{comp.uid},{compt.code},{comp.visible}from{AbstractPageaspjoinCatalogVersionascvon{cv.pk}={p.catalogVersion}在{c.pk}={cv.catalog}上以c身份加入目录在{pt.pk}={p.masterTemplate}上以pt身份加入PageTemplate在{s4p.page}={p.上以s4p身份加入ContentSlotForPage。pk}在{st.pk}={s4p.contentSlot}左侧加入ContentSlot作为st在{sn.template}={pt.pk}和{sn.name}={s4p.position}上以sn身份加入ContentSlotName在{st.pk}={e2s.source}上以e2s身份加入ElementsForSlot在{上以comp身份加入AbstractCMSComponentcomp.pk}={e2s.target}在{compt.pk}={comp.itemtype}}上加入ComposedType作为compt,其中{cv.version}='Online'和{c.id}like'%ContentCatalog'orderby{cv.version},{c.id},{p.uid},{sn.templatePOS},{comp.uid}//模板、组件和slotsselect{c.id},{cv.version},{p.uid},{pt.uid},{s4t.position}作为“模板指定位置”,{st.uid}作为“内容槽id4t”,{st.active}作为“内容槽4t活动”,{s4t.allowOverwrite}为“模板允许覆盖”,{sn.templatePOS}为“pos”,{sn.name}为“模板可用位置”,{comp.uid},{compt.code},{comp.visible}from{AbstractPageaspjoinCatalogVersionascvon{cv.pk}={p.catalogVersion}joinCatalogascon{c.pk}={cv.catalog}在{pt.pk}={p.masterTemplate}作为pt加入PageTemplate在{s4t.pageTemplate}={pt.pk}作为st加入ContentSlotForTemplate在{st.pk}={s4t.contentSlot}在{sn.template}={pt.pk}上左加入ContentSlotName作为sn和{sn.name}={s4t.position}在{st.pk}={上加入ElementsForSlot作为e2se2s.source}在{comp.pk}={e2s.target}上加入AbstractCMSComponent作为comp在{compt.pk}={comp.itemtype}}上加入ComposedType作为compt其中{cv.version}='Online'和{c.id}like'%ContentCatalog'orderby{cv.version},{c.id},{p.uid},{sn.templatePOS},{comp.uid}在标准加速器中,PageController(基于AbstractPageController)准备呈现页面所需的上下文在Spartacus中,大部分工作已由框架执行,但手动检查可能需要移动到自定义OCC扩展或单个组件的逻辑是个好主意。第2步-执行GAP分析对于每个组件,确定是否有相应的OCCAPI提供所需的数据(和相应的可注入服务),否则描述将需要的OCC扩展。此外,为每个组件设置开发优先级(或重要性)。第3步-使用APIFirst方法启动API实现,创建缺失的OCC扩展并根据现有OCC服务的语义定义接口。从一个空的(或模拟的)实现开始,因为这将允许前端团队在下一步中开始并行工作。使用SwaggerCodeGen自动生成前端所需的TypescriptAngular客户端代码。使用必要的缺失字段增强DTO。第4步-实施CMS页面和组件创建一个基本的Web内容管理系统(WCMS)结构来复制您当前的店面并启动您的Spartacus应用程序。在Chrome开发者工具中打开控制台选项卡,您会看到针对每个没有相应Angular组件的CMS组件的警告,以及针对可用CMS插槽的警告。验证此信息是否与您的CMS组件清单匹配。在无头店面中,前端在浏览器上加载,页面结构和布局从服务器检索(除非它具有静态布局)。Spartacus组件(参见上面的模块和组件)用于在客户端构建页面,它们对服务器执行OCC调用(参见上面的OCCAPI)以检索渲染所需的数据。但是,出于性能和SEO目的,初始页面可能最初是在服务器上构建的(使用称为服务器端呈现-SSR的技术)。状态保存在客户端。结束语本文提供了对Spartacus以及迁移现有加速器店面所需的技术的更多技术介绍。迁移可能涉及大量的重新设计,但有形的性能和维护优势使其值得。精心准备是成功迁移的关键。更多Jerry原创文章在这里:《王子熙》:

最新推荐
猜你喜欢