开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Spartacus 3.3 -开始定制页面和组件的最佳方法

Spartacus是一个开源的Angular框架，用于构建现代化的电子商务应用程序。它提供了一套可扩展的组件和页面模板，使开发人员能够快速构建功能丰富的电子商务网站。

在定制Spartacus页面和组件时，以下是一些最佳方法：

使用Spartacus样式系统：Spartacus提供了一套灵活的样式系统，可以轻松自定义页面和组件的外观。您可以使用CSS或SASS来定义自己的样式，并通过样式类将其应用于页面和组件。
使用Spartacus组件库：Spartacus提供了一套丰富的可重用组件，包括导航栏、产品列表、购物车等。您可以使用这些组件作为基础，根据自己的需求进行定制。
使用Spartacus扩展点：Spartacus提供了一些扩展点，可以在不修改核心代码的情况下添加自定义功能。您可以使用扩展点来添加自定义页面、组件或服务，并将它们集成到Spartacus应用程序中。
使用Spartacus CMS：Spartacus集成了一个内容管理系统（CMS），可以帮助您管理和定制页面内容。您可以使用CMS来创建和编辑页面，添加自定义内容和组件。
使用Spartacus主题：Spartacus支持主题定制，您可以根据自己的品牌和设计要求创建自定义主题。通过定义颜色、字体和其他样式属性，您可以轻松地将Spartacus应用程序与您的品牌保持一致。
使用Spartacus插件：Spartacus提供了一些插件，可以帮助您扩展和定制应用程序的功能。例如，您可以使用插件来添加社交媒体分享功能、支付集成或第三方登录。
使用Spartacus构建工具：Spartacus提供了一些构建工具，可以帮助您自动化和简化开发流程。例如，您可以使用构建工具来编译、打包和部署Spartacus应用程序。

总结起来，定制Spartacus页面和组件的最佳方法是使用Spartacus样式系统、组件库、扩展点、CMS、主题、插件和构建工具。这些工具和技术使您能够快速、灵活地定制和扩展Spartacus应用程序，以满足您的特定需求。

腾讯云相关产品和产品介绍链接地址：

腾讯云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/tencentdb
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
腾讯云视频处理（VOD）：https://cloud.tencent.com/product/vod
腾讯云音视频通信（TRTC）：https://cloud.tencent.com/product/trtc

相关搜索:在剃刀页面上调用脚本和样式组的最佳方法在页面上垂直和水平居中<div>的最佳方法是什么？将页面更改中的单个组件过渡添加到nuxt组件的最佳方法？绑定Angular中两个子组件的输入和输出的最佳方法跨页面重用相同组件(具有相同属性)的最佳方法哪里的标准兼容测试体验好哪里的APP兼容测试体验好哪里的手机兼容测试体验好哪里的适配兼容测试体验好哪里的手游安全测试体验好

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

SAP Spartacus 的 CSS 架构

只有在主要版本中，Spartacus 才能引入一组新变量，但这不被视为最佳实践。为了提供一组稳定的变量，Spartacus 中的 CSS 变量主要用于配色方案和字体定义。...CSS 变量可以在文档的根或特定的选择器上进行定制。...由于 Spartacus 组件是在库中构建和分发的，因此无法使用组件样式, 因为 Component 和 style 的定义，在 Spartacus 里是分开的。这些样式将被预处理并烘焙到组件库中。...这意味着 CSS 规则不是可选的，也不是很容易定制的。取而代之的是，在样式库中可选择提供组件样式。您可以使用这些样式、扩展它们或完全跳过它们并从头开始构建 CSS 规则。...Page Layout Styles 全局主题和组件样式对于在页面上呈现组件最重要。但是，在页面上编排组件的整体布局是另一个重要的样式层。有关此图层的更多信息，请参阅页面布局。

1.3K3 0

Jerry在2020 SAP全球技术大会的分享：SAP Spartacus技术介绍的文字版

从编程角度讲，响应式设计通过各种前端技术，为页面元素赋予了根据屏幕分辨率的变化而自动调整显示行为，以达到最佳显示效果的能力。 ?...开始及其之后的所有版本。...(2) Spartacus的页面布局由不同的Angular组件组成，这些Angular组件同Commerce的CMS组件具有一一对应关系。...Spartacus允许二次开发人员增强甚至开发新的Angular组件，去替换Spartacus发布时使用的默认组件，以此来实现客户的页面定制化需求。...通过Angular的Dependency Injection机制，注入自开发的service，从而达到定制化Spartacus的运行流程和逻辑的目的。

1.3K2 0

SAP Commerce Cloud 通过 SmartEdit 添加 Component 的一个例子

Spartacus通过使用现代的Web技术和最佳实践，提供了一种响应式设计和用户友好的界面，以改善用户体验。它具有可定制的模块化架构，可以根据企业的需求进行灵活配置和扩展。...它提供了一个直观的图形界面，用户可以使用拖放和所见即所得的编辑器来修改页面布局、添加内容块、配置产品列表等。...尽管Spartacus和SmartEdit是SAP电商云的两个独立组件，但它们之间存在紧密的关系。Spartacus提供了一个灵活的UI框架，可以与SmartEdit集成，以实现内容编辑和管理功能。...这意味着他们可以根据具体的业务需求，添加自定义的编辑器组件、配置选项和工作流程。通过这种方式，企业可以根据自己的品牌形象和用户需求，灵活地定制和管理其电子商务网站的内容。...总结来说，Spartacus和SmartEdit是SAP电商云中的两个重要组件。

1592 0

SAP 电商云 Spartacus UI 去除 Checkout 页面 header 和 footer 区域的几种方法介绍

1 distraction-free checkout 如何移除 checkout 页面的 footer 和 header 方法1 - 把 checkout CMS page 的header 和 footer...给包括 checkout pages 在内的所有页面都添加这个 Component assignment 关系。...(2) 对于 PreHeader slot 和 HamburgerMenuComponent 重复上述的操作。...方法2 - 复写页面模板 MultiStepCheckoutSummaryPageTemplate 的 header 和 footer section 使用如下代码将这两个区域设置为 [] 即可： provideConfig...，使我们失去了在 CMS 里控制页面布局的可能性。

7271 0

SAP 电商云 Spartacus UI 的自定义 hamburger 菜单

clean 同下面这个糟糕布局的 web 页面相比，hamburger 菜单清爽得多：在视觉空间非常宝贵的地方，例如移动应用程序和网站，汉堡菜单可以带来难以置信的价值。...决策专家希娜·艾扬格 (Sheena Iyengar) 进行的一项研究发现，当购买选项较少时，人们购买的可能性要高出 10 倍。这就是为什么汉堡菜单可以成为清理杂乱页面的好方法。...仅响应式方法无法解决 Accessibility 的所有用例，例如重新排序组件的能力。可能还需要重新订购组件，以优化访问您店面的不同设备的用户体验。...Spartacus 中的标题就是一个很好的例子：对于大屏幕，所有元素都是可见的，但在小型设备上，一些组件隐藏在汉堡菜单后面，一些组件被重新排列。...尽管 CSS 支持 DOM 元素的重新排序，包括 flex-box 和网格，但重新排序的 DOM 元素与 HTML 选项卡系统不同步。这不会为使用标签系统浏览店面的人提供最佳体验。

1.9K3 0

SAP Commerce Accelerator Storefront 到 Spartacus 的 page by page migration 策略

SAP Commerce Accelerator Storefront 是基于SAP Commerce Cloud的一个开箱即用的电子商务前端解决方案，提供了一套功能强大、易于定制的电子商务功能和界面。...Page by page migration是一种渐进式的迁移方法，旨在逐步将现有的Accelerator Storefront中的页面迁移到Spartacus。...创建Spartacus页面模板：在Spartacus中，需要为每个要迁移的页面创建对应的模板。这些模板将基于Angular组件构建，并使用Spartacus提供的各种特性和样式。...迁移页面内容：在每个模板中，需要将现有Accelerator Storefront的页面内容迁移到相应的Spartacus模板中。这包括HTML结构、样式和功能。...逐步替换组件和功能：通过迭代的方式，逐步替换现有Accelerator Storefront中使用的组件和功能为Spartacus中的对应项。

1652 0

SAP Commerce Cloud 项目 Spartacus 入门

无需修改，店面即可开箱即用，但 Spartacus 的设计可升级、可定制和可扩展，以满足您的所有品牌和功能要求。...Spartacus 是使用 SAP Commerce Cloud 维护可定制店面的战略性方法。它取代了在 SAP Commerce v4.4 中首次引入的加速器模板，以提供现成的入门实施。...Spartacus 纯粹是一组库，其中包含一组核心库、组件和样式。它有自己的发布周期，目标是每两周发布一次。您可以完全控制是否接受这些库更新。...您可以选择要在应用程序中使用的库版本（Spartacus 使用 Semantic 版本控制 2.0），这些可用于完全配置和自定义您的店面。有关主要版本更新的更多详细信息，请参阅此页面。...定制的方式与加速器不同；您从不直接自定义 Spartacus 代码——而是覆盖或替换样式和代码。这种方法允许易于升级。有关扩展 Spartacus 的更多信息，您可以查看我们的视频库。

1.1K3 0

SAP Commerce Cloud Storefront 框架选型：Accelerator 还是 Spartacus?

在本文中，我们将介绍可用选项，提供有关如何选择最佳选项的建议，以及如何为 SAP Commerce 配置企业对消费者 (B2C)/企业对企业 (B2B) 店面和 Web service 云解决方案。...这些模板提供了带有时尚、电子和电动工具示例的预构建示例店面，为作为 SAP Commerce Cloud 一部分的特性和功能提供了一个起点。然后可以根据需要定制它们以满足您的要求。...SmartEdit 支持它以确保业务用户可以修改页面模板，同时还为开发人员提供了许多选项来扩展和自定义店面以满足要求。作为一个开源项目，您将能够随时提取最新的更改并将它们合并到您的解决方案中。...我们见过的典型例子包括：实施团队更喜欢店面不使用的编程语言（例如，Ruby）。很大一部分需求与模板店面不一致，定制的时间可能比从头开始构建定制解决方案还要多。...如果您刚刚开始一个项目并且 Spartacus 提供了您需要的功能，建议从基于 Spartacus 的店面开始。如果 Spartacus 中缺少加速器中可用的功能，那么您应该评估权衡。

7083 0

SAP Spartacus 的页面布局

Page structure CMS 中的页面由槽和组件构成。页面包含插槽，插槽包含组件。为了组织公共插槽和组件，Spartacus 支持页面模板。...页面模板包含可全局使用的布局和组件，例如页眉和页脚部分。 CMS 提供了页面结构，但没有提供清晰的布局定义。...当页面模板、插槽或组件在 Spartacus 中动态呈现时，Spartacus 将为每个插槽添加 Outlets。 Outlets 可用于替换 Spartacus 中的部分页面模板。...Spartacus 提供的 CSS 是可选的，因此您可以添加新样式或修改现有样式。由于页面布局由页面模板代码和位置名称驱动，因此布局与后端的安装数据紧密耦合。...尽管 CSS 支持 DOM 元素的重新排序，包括 flex-box 和 grid，但重新排序的 DOM 元素与 HTML Tab 系统不同步。这不会为使用标签系统浏览店面的人提供最佳体验。

1.7K2 0

SAP Spartacus 如何连接到其他系统

Angular 提供数据绑定标准，并依赖反应式编程作为数据绑定的最佳实践和标准模式。...以下最佳实践用于 Spartacus 中的数据绑定： UI组件使用标准的 Angular 异步管道从后端绑定到可观察数据。...为了提供最佳的灵活性，连接到后端系统涉及三个实体：连接器、适配器和转换器。但是请注意，当您使用第三方系统时，并非所有实体都必须涉及。...尽管使用了不同的名称（例如，填充器或序列化器而不是转换器），但这是跨不同框架和技术堆栈的常见模式。细粒度的设置有助于分离关注点，并简化进一步的定制。...适配器（和转换器）在单独的模块中发货和提供，因此它们在最终构建中成为可选的，以防您希望使用替代系统。可以配置 OCC 适配器中使用的端点，因此 Spartacus 的定制可以非常轻量级。

1.9K4 0

聊聊 SAP 产品 UI 上的消息显示机制

本文从 StackOverflow 社区上来自 Partner 的一个 SAP Commerce Cloud Spartacus UI 的定制化需求说起。...Jerry 之前的文章SAP 错误消息调试之七种武器：让所有的错误消息都能被定位，曾经介绍过七种不同的方法，均能在 SAPGUI 环境里，已知消息类和消息编号，快速找到抛出该消息的准确位置。...Connector 将 Adapter 取回的数据交给 NgRx Store 结构统一管理，后者的复杂度被 Facade 层所隐藏，而Spartacus UI 组件只会同 Facade 层交互，进行数据绑定和页面展示...SAP 电商云 UI 标准的 Service，然后基于该定制化 Service，实现配套的 Effects 和 Action....如此一来，标准的和用户评论相关的逻辑流(如下图 1-2-3 所示)将不会再得到执行，取而代之的是我们自己定制化的执行流，如下图 A-B-C 所示，其中蓝色的图例均为 Partners 需要开发的定制化代码

2.2K3 0

乐高(LEGO)在线购物店面剖析

这个 API 调用向 Commerce Cloud 询问，当前页面 (ID 为 homepage)，应该显示哪些内容插槽(Content Slots)和组件(Components)....关于 SAP Commerce Cloud UI 页面布局的内容插槽和组件，在 Jerry 之前的文章谈谈 SAP 产品 UI 开发中的组件概念里有所介绍。...等等：只不过从放置到这些标准插槽里的组件名称可以看出，乐高做了定制化开发。...虽然乐高店铺使用的是构建之后的生产版本，Angular 代码中的类名和变量名在该版本中被混淆化成单一的字母，但是代码中的 JSON 对象名称和字段仍保持不变，因此我们仍然可以从中找到 SAP Spartacus...如果想系统学习 SAP Spartacus 开发，可以从我们团队发布在 Github 上的帮助文档开始入手。感谢阅读。

9281 0

SAP Spartacus - Progressive Web Applications，渐进式 Web 应用程序

让我们从通常的访问方法开始——“正常访问”服务器通过浏览器呈现的 HTML 页面：如果浏览器查询一个页面，服务器会向相应的 HTML 页面提供任何样式表（CSS）和 JavaScript。...对于客户而言，原生应用程序的实现意味着除了网站之外，还必须为设备开发单独的应用程序。这意味着不能使用相同的代码。但是，本机应用程序为用户提供了移动设备上的最佳用户体验。...然而，JavaScript 的大量使用对搜索引擎和旧设备来说是一个障碍。因此，经常使用服务器端渲染：将 JavaScript 在服务器上转换为 HTML，并与通常的访问方法一起使用。...Spartacus 对 SAP Commerce 客户意味着什么？由于 PWA（即 Spartacus）的复杂性要高得多，它需要不同且更深入的 JavaScript 知识和最先进的前端框架。...然后，例如，需要额外的基础设施以及定制的开发和部署流程。这对我的升级策略意味着什么？新的发展是否应该与 Spartacus 一起实施？在我看来，你应该考虑用 Spartacus 来代替。

1.3K3 0

将您的基于 Accelerator 的 SAP Commerce Cloud Storefront 迁移到 Spartacus Storefront

尽管建议将迁移到 Spartacus 作为重新开始和重新考虑您的店面体验的机会，但您可能需要迁移到 Spartacus 并保持相同的体验。...这可以让您了解迁移与从绿地方法开始相比可能需要多少工作。...Spartacus 组件（参见上面的模块和组件）用于在客户端构建页面，它们执行对服务器的 OCC 调用（参见上面的 OCC API）以检索渲染所需的数据。...Starting the Migration 步骤 1 - 清点您的 CMS 组件和页面对当前店面中使用的页面和组件进行清点非常重要，如下表所示。...Spartacus 组件（参见上面的模块和组件）用于在客户端构建页面，它们执行对服务器的 OCC 调用（参见上面的 OCC API）以检索渲染所需的数据。

7652 0

SAP Spartacus Customizing CMS Components

但是，有一种特殊的组件来呈现 CMS 内容。 CMS 组件在运行时动态添加。由后端提供的 CMS 组件类型映射到等效的 JavaScript 组件。映射以可定制的配置提供。...这允许您配置自定义组件以呈现特定的 CMS 组件。此外，可以定制特定于组件的业务逻辑。这需要额外的配置，其中自定义服务可以提供给（默认）组件。...CmsComponentData 服务包含组件 uid 和 data$，它是组件有效负载的可观察对象。...页面的内容通常是 CMS 驱动的，因此在 Spartacus 中提出了为每个 CMS 组件配置守卫。在从后端加载页面的 CMS 组件后，这些组件的所有 Guard 都会被执行。...（延迟）并且与索引和社交共享无关虽然可以在组件中添加条件逻辑以在 SSR 中呈现（部分）视图，但 Spartacus 为组件提供了一种配置，使其更通用，并避免组件中的任何特定逻辑。

1.4K2 0

SAP 电商云 Spartacus UI 4.1 版本的延迟加载技术介绍

业务用户最终将通过引入或删除组件来改变页面结构。...这就是为什么需要另一种延迟加载方法的原因，Spartacus 支持以下两种不同粒度的延迟加载技术： CMS 组件的延迟加载 CMS 驱动的功能模块延迟加载 Defining Dynamic Imports...Unified Injector 统一注入器提供了一种注入令牌或多提供令牌的方法，这种方法同时考虑到根注入器和来自延迟加载功能的注入器。...当一个被延迟加载模块覆盖的 CMS 组件被实例化时，它可以注入（即访问）以下服务： ModuleInjector 层次结构，从功能模块注入器开始，包括依赖模块和根注入器 ElementInjector...为了获得最佳体验，建议根据使用情况将功能拆分为逻辑部分，并为最少、最需要的部分创建单独的入口点（和功能），并为不太常用的代码创建另一个入口点。

1.6K1 0

Spartacus 开源项目给 SAP Commerce Cloud Storefront 共享的一些有用的特性介绍

它由可重用的 UI 组件和用于构建店面的逻辑组成。它还包含一个开箱即用的 B2C 实现，我们可以根据需要进行调整，此实现也称为 recipe module....有很多现成的组件，如 Carousel、购物车、产品列表、产品详细信息、搜索框等。每个电子商务系统的重要组成部分都离不开搜索引擎优化(SEO)。...Spartacus 支持服务器端渲染，能够微调服务器上渲染的内容和未渲染的内容。 Spartacus 开箱即用的标准实现也包含了负责生成元数据和结构数据的工具，帮助搜索引擎理解页面内容。...在系统可升级性这一块上，由于 Angular 的模块化系统，我们可以有选择地选择想要使用 Spartacus 的哪些部分。另一个有助于定制的 Angular 特性是组件继承。...我们可以扩展任何 Spartacus 组件并根据我们的需要对其进行调整。最后一件事是 Angular 依赖注入框架，这意味着我们可以轻松地用我们自己的自定义服务覆盖现有服务。

6001 0

基于 Spartacus 的 Angular Storefront 性能优化建议

作为一款基于 Angular 的 Storefront 应用，我们可以遵循许多 Angular 开发的最佳实践，来提高 Spartacus 店面的性能，这也有助于提高您的 Google Lighthouse...通过遵循这些建议，我们还可以改进 Google Core Web Vitals 报告的结果，该报告侧重于页面加载速度、页面交互速度和网站的视觉稳定性。...(3) 没有布局移动，即 Layout shift（页面上的可见元素在页面加载期间移动或移动尽可能少）强烈建议采用以下最佳实践来提高店面应用程序的性能：尽可能减少同步和异步 HTTP 请求的数量。...在自定义模块中实现延迟加载之前，了解延迟加载在 Spartacus 中的工作原理很重要。利用 SSR 传输状态机制来避免重复的 XHR 调用。使用内联字体和 CSS 而不是异步加载它们。...辅助功能 Spartacus 中有一些组件和元素尚未完全符合可访问性。必要时，您可以覆盖这些组件和元素，这样您就可以添加缺少的 aria 属性。它还允许您重命名元素以提高可访问性评分。

9001 0

SAP Spartacus 的延迟加载 Lazy load 设计原理

业务用户最终将通过引入或删除组件来改变页面结构。...这就是为什么需要另一种延迟加载方法的原因，Spartacus 通过以下方式提供： CMS 组件的延迟加载 CMS 驱动的功能模块延迟加载 - CMS-driven lazy loading of feature.../lazy/lazy.component').then(m => m.LazyComponent) } } } Technical Details CMS 组件映射中对动态导入的支持是使用可定制的组件处理程序...Spartacus 能够从延迟加载功能中提取 CMS 组件映射配置，并使用它来解析该功能所涵盖的组件类和工厂。这就是为什么可以并推荐使用在延迟加载模块中提供默认 CMS 映射配置的标准方式的原因。...当一个被延迟加载模块覆盖的 CMS 组件被实例化时，它可以注入（即访问）以下服务： ModuleInjector 层次结构，从功能模块注入器开始，包括依赖模块和根注入器 ElementInjector

1.5K2 0

SAP Commerce Accelerator和SAP Spartacus的技术对比

开始及其之后的所有版本。...(1) Spartacus的模块之一，ConfigModule，将业务逻辑和页面布局以及样式，通过配置的方式暴露出来，二次开发人员通过调整配置，可以更改Spartacus默认的行为和页面布局以及样式。...(2) Spartacus的页面布局由不同的Angular Component组成，这些Angular Component同Commerce的CMS Component具有一一对应关系。...Spartacus允许二次开发人员增强甚至开发新的Angular Component，去替换Spartacus发布时使用的默认Component，以次来实现客户的页面定制化需求。...Injection机制，注入自开发的service，从而达到定制化Spartacus的运行流程和逻辑的需求。

5292 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭