SAP 电商云 Spartacus UI Configurable Product 的页面设置

news2024/11/27 12:38:49

关键字

CPQ,Product Configuration,Product Configure,Product Variant

变体是在某些方面彼此不同但基于相同基本模型的产品。 变体的一个示例是 T 恤的颜色和尺寸。 在 Spartacus 中启用变体功能,并在 SAP Commerce Cloud 中配置产品后,客户可以在店面中选择具有他们选择的变体(或多个变体)的产品。

启用 variant 的代码:

ConfigModule.withConfig(<CmsConfig>{
      cmsComponents: {
        ProductVariantSelectorComponent: {
          component: ProductVariantSelectorComponent,
          guards: [ProductVariantGuard],
        },
      },
    }),

具有变体的产品需要在 /page 响应中包含 ProductVariantSelectorComponent CMS 组件,并且需要在页面上呈现它们。

搜索 home theater

url:

custom Angular Component:cx-configure-product‘

url:http://localhost:4000/electronics-spa/en/USD/configure/vc/product/entityKey/CONF_HOME_THEATER_ML

http://localhost:4000/electronics-spa/en/USD/configure/vc/product/entityKey/CONF_HOME_THEATER_ML
打开之后是这样:

在这个 template 里面:ProductDetailsPageTemplate

运行时的 Summary content slot:

summary 里的 Component:

仅当 configurable 为 true 才显示:

打印出来:

owner type 硬编码成 product:

这是标准的接口:

http://localhost:4000/electronics-spa/en/USD/configure/vc/product/entityKey/CONF_HOME_THEATER_ML

运行时打印出来的 pipe 的输入和输出数据:

上面的是已经进到 configuration 明细页面后打印出来的。不对,重新找。

这个才是正确的:

把程序修改一下:

判断是否是 route 配置:

只要 command 对象有 cxRoute,就被认为是 route command:

根据 route 名称从 route configure 里拿到配置:

  getRouteConfig(routeName: string): RouteConfig {
    const routeConfig = this.config?.routing?.routes;

    const result = routeConfig && routeConfig[routeName];
    if (!routeConfig || result === undefined) {
      this.warn(`No path was configured for the named route '${routeName}'!`);
    }
    return result;
  }

path: configure/vc/:ownerType/entityKey/:entityKey

把 path 里的变量 place holder 用实际值进行替换:

最后结果:

添加到购物车之后:

URL 如下:

http://localhost:4000/electronics-spa/en/USD/configure/vc/cartEntry/entityKey/0?forceReload=true&resolveIssues=false

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/47863.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于python的pulp库使用,从基础模型到复杂模型,从一维变量到二维变量

写在前面 学习笔记&#xff0c;仅作参考。 个人觉得配合步骤和建模&#xff0c;直接看代码就能入门pulp&#xff0c;所以没有啥解释&#xff0c;见谅。 参考 https://blog.csdn.net/youcans/article/details/116371416 步骤 1、安装PuLp &#xff08;pip install pulp) 2…

HRD特征及其检测方法简介

HRD特征及其检测方法简介1、HRD背景知识介绍1.1 HRR通路简介1.2 HRR基因突变可导致通路失活和HRD1.3 HRD高发癌种2、HRD的两类主要标志物2.1 致病基因2.2 基因组瘢痕3、HRD检测方法4、全景变异分析&#xff08;CGP&#xff09;5、关键信息6、参考文件1、HRD背景知识介绍 1.1 H…

(4)点云数据处理学习——其它官网例子

1、主要参考 &#xff08;1&#xff09;视频&#xff0c;大佬讲的就是好啊 【Open3D】三维点云python教程_哔哩哔哩_bilibili &#xff08;2&#xff09;官方的github地址 GitHub - isl-org/Open3D: Open3D: A Modern Library for 3D Data Processing &#xff08;3&#…

BUUCTF Misc 被偷走的文件 snake

被偷走的文件 下载文件 wireshark打开&#xff0c;搜索flag字符串 可以看到一个带有flag.rar的FTP包进行TCP流追踪 看来流量中有flag.rar&#xff0c;使用kali中的foremost进行文件分离 发现一个文件夹内有一个需要密码的压缩包 密码是5790&#xff0c;解压 得到flag …

Redis数据结构和类型

Redis 包含五种数据类型&#xff0c;分别为String、List、Hash、Set、ZSet 底层实现的数据结构包SDS、双向链表、压缩列表、哈希表、整数集合、跳表 redis结构图数据类型和数据结构的关系Redis六种数据结构 一、动态字符串(SDS) Redis 是用 C 语言实现的&#xff0c;但是它…

Kotlin高仿微信-第12篇-单聊-图片

Kotlin高仿微信-项目实践58篇详细讲解了各个功能点&#xff0c;包括&#xff1a;注册、登录、主页、单聊(文本、表情、语音、图片、小视频、视频通话、语音通话、红包、转账)、群聊、个人信息、朋友圈、支付服务、扫一扫、搜索好友、添加好友、开通VIP等众多功能。 Kotlin高仿…

STC 51单片机45——51单片机对脉冲计数 汇编 16位除法

部分代码&#xff1a; ORG 0000H LJMP INIT ORG 0003H //外部中断0 LJMP INT0SUB ORG 0013H //外部中断1 LJMP INT1SUB ORG 0100H INIT: CLR P1.0 //控制端复位 …

D-019 EEROM硬件电路设计

EEROM硬件电路设计1 简介1.1 存储器的分类1.2EEPROM的特性2 接口介绍2.1 IIC接口2.2 SPI接口2.3 MicroWire 接口3 EEPROM 和 FLASH4 电路设计实战5 电路设计要点1 简介 1.1 存储器的分类 按照掉电数据是否丢失的特性&#xff0c;存储器可划分为&#xff1a; 易失性存储器&…

快排图文详解:快速排序算法的实现 - 【双边循环法与单边循环法 递归与非递归(栈的方式)的实现】

1.基本介绍 同冒泡排序一样&#xff0c;快速排序&#xff08;Quicksort&#xff09;也属于交换排序&#xff0c;通过元素之间的比较和交换位置来达到排序的目的。但快速排序是对冒泡排序的一种改进。 2.基本思想 关于基本思想&#xff0c;我们在这里先不考虑是如何具体实现的…

nuxtjs生命周期、项目创建、声明式导航与编程式导航、动态路由、嵌套路由、配置式路由、定制默认应用模板、扩展默认布局

文章目录1. 介绍2. 生命周期3. 项目创建4. 声明式导航和编程式导航5. 动态路由参数和验证6. 嵌套路由7. 404页面8. 配置式路由9. 定制默认应用模板10. 扩展默认布局10.1 默认布局10.2 自定义布局10.3 显示错误的布局1. 介绍 Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对…

离线解锁 CodeCombat 全关卡教程 使用docker安装实现

背景 暂时还没收入&#xff0c;想玩顺便&#xff0c;但官方的有点贵&#xff08;是真的贵&#xff0c;扛不住&#xff09; 前期准备 下载安装docker desktop https://www.123pan.com/s/fmvUVv-HqApH&#xff0c; 这个安装不会的随便搜一个教程&#xff0c;挺多的。我随便找了一…

创建实例化新表格及新行

这期讲一下如何创建创建实例化新表格及行进行添加数据&#xff0c; 在上图可以看到先实例化DataTable表格&#xff0c;用于接收数据&#xff0c; Columns 获取此表的列的集合&#xff0c; Add 创建并添加DataColumn对象&#xff0c; Typeof 数据类型 创建并添加表头。 接下来…

Java定时器选择

java计时器和死循环哪个好&#xff1f;哪个建议使用&#xff1f; 计时器性能更好&#xff0c;但是写起来稍微复杂一点。如果是非常短暂的延迟&#xff0c;用死循环也未尝不可。一般来说能不用死循环的尽量不用死循环&#xff01;如果你使用的是JDK1.5以上的&#xff0c;可以使…

PyQt5可视化编程-控件

控件就像是应用这座房子的一块块砖。PyQt5有很多的控件&#xff0c;比如按钮&#xff0c;单选框&#xff0c;滑动条&#xff0c;复选框等等。我们将介绍一些很有用的控件&#xff1a; QCheckBox,ToggleButton,QSlider,QProgressBar, QCalendarWidget,QPixmap,QLineEdit,QSplitt…

实验四+ R型指令设计实验【计算机组成原理】

实验四+ R型指令设计实验【计算机组成原理】 前言推荐实验四+ R型指令设计实验结果附录defineInstMemIDEX最后前言 编写于 2022/11/22 VIP发布于 2022/11/22 实验于 2022/11/24 发布于 2022/11/24 以下内容源自计算机组成原理实验 仅供学习交流使用 推荐 实验四+ R型指令…

论文指标评价体系及权重计算

一 、评价指标体系 评价指标体系构建在实际研究中使用较为广泛&#xff0c;比如企业绩效评价指标体系构建、政府财政支出绩效评价、医院绩效评价研究等等。 ‍1、相关背景 在中国知网搜索 “ 评价指标 ”、“ 指标体系权重 ” 等相关关键词&#xff0c;可以发现&#xff0c;…

学习ASP.NET Core Blazor编程系列十三——路由(完)

九、NavigationManager 有的时候我们可能需要在代码里进行导航&#xff0c;如果是JavaScript我们会用window.location来切换页面&#xff0c;Blazor为我们提供了相应的封装&#xff1a;NavigationManager。使用NavigationManager可以通过代码直接进行页面间的跳转。我们在BookI…

算法训练Day34 贪心算法专题 | LeetCode1005.K次取反后最大化的数组和 ;134.加油站;135.分发糖果(不要两头兼顾,一边一边处理)

前言&#xff1a; 算法训练系列是做《代码随想录》一刷&#xff0c;个人的学习笔记和详细的解题思路&#xff0c;总共会有60篇博客来记录&#xff0c;计划用60天的时间刷完。 内容包括了面试常见的10类题目&#xff0c;分别是&#xff1a;数组&#xff0c;链表&#xff0c;哈…

基于人工势场法的移动机器人路径规划研究(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 路径规划是移动机器人领域的热点研究方向&#xff0c;人工势场法已在工业机器人路径规划中得到广泛应用&#xff0c;近年来正逐…

RKMEDIA--VI的使用

在上一篇文章RKMEDIA使用简介中简单的介绍了rkmedia的组成部分&#xff0c;本章主要聊聊VI模块。 rkmedia中的VI模块主要可以从两个方式获取流&#xff1a;直接打开video节点的方式、使用rk平台的rkaiq。 1、直接打开video节点的方式 顾名思义只需要在vi初始化中配置VI_CHN_AT…