获取SAP Spartacus当前显示产品json数据的又一办法
时间:2022-07-25
本文章向大家介绍获取SAP Spartacus当前显示产品json数据的又一办法,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
app Component里注入current Product service:
实现代码:
import { Component, OnInit } from '@angular/core';
import { ContentSlotComponentData } from '@spartacus/core';
import { CurrentProductService } from '@spartacus/storefront';
import { DebugConfig } from './app.module';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] })
export class AppComponent implements OnInit {
constructor(private config: DebugConfig, private currentProductService: CurrentProductService) {
console.log(config);
}
title = 'Jerry Store';
myproduct$ = this.currentProductService.getProduct();
componentMeta: ContentSlotComponentData = {
uid: 'ElectronicsHomepageSplashBannerComponent',
typeCode: 'SimpleResponsiveBannerComponent',
flexType: 'SimpleResponsiveBannerComponent'
};
ngOnInit(): void {
/*const factory = this.componentFactoryResolver.resolveComponentFactory(MycomComponent);
this.outletService.add('header', factory, OutletPosition.BEFORE);*/
}
}
在Component html里,用async和json pipe将myproduct$的数据以json格式显示:
随便打开一个产品的明细页面,就可以看到json数据了:
{
"code": "300938",
"name": "Photosmart E317 Digital Camera",
"summary": "Point and shoot simplicity in a 5 MP camera.",
"price": {
"formattedValue": "$114.12",
"currencyIso": "USD",
"priceType": "BUY",
"value": 114.12
},
"images": {
"PRIMARY": {
"zoom": {
"altText": "Photosmart E317 Digital Camera",
"format": "zoom",
"imageType": "PRIMARY",
"url": "https://spartacus-dev0.eastus.cloudapp.azure.com:9002/medias/?context=bWFzdGVyfGltYWdlc3wxMzkzNnxpbWFnZS9qcGVnfGltYWdlcy9oMjYvaDdhLzg3OTcyNTE0NjkzNDIuanBnfGU3N2FlYWQ1YmQ1ODhjZjZiNTFjNDg3NDdjNGRkNjM5NGQzMjZmZWVmNjc3ZWQwMjgzY2MyNDJlNzYyNTczM2Q"
},
"product": {
"altText": "Photosmart E317 Digital Camera",
"format": "product",
"imageType": "PRIMARY",
"url": "https://spartacus-dev0.eastus.cloudapp.azure.com:9002/medias/?context=bWFzdGVyfGltYWdlc3w3MDg1fGltYWdlL2pwZWd8aW1hZ2VzL2g2Ni9oOWQvODc5NzI3Nzc0OTI3OC5qcGd8NzdjOTNiMThkODQ4NTM4NmQ2NjMxMGMwYmMyOTIwODIwMzI4NTgyMGUxNDc4Y2I0OTRkOGViODNlNDZiYTJhNw"
},
"thumbnail": {
"altText": "Photosmart E317 Digital Camera",
"format": "thumbnail",
"imageType": "PRIMARY",
"url": "https://spartacus-dev0.eastus.cloudapp.azure.com:9002/medias/?context=bWFzdGVyfGltYWdlc3wyMDYxfGltYWdlL2pwZWd8aW1hZ2VzL2g3ZS9oZmEvODc5NzMwNDA5NDc1MC5qcGd8OGZjMTNjM2JmMGY0MmYyMWY3OGM5YjQ4YjAyNzM4NjkxYjUyMmQzMDBhMmMzMjMwZThmMjI4OWMwZjg1NmYzMw"
},
"cartIcon": {
"altText": "Photosmart E317 Digital Camera",
"format": "cartIcon",
"imageType": "PRIMARY",
"url": "https://spartacus-dev0.eastus.cloudapp.azure.com:9002/medias/?context=bWFzdGVyfGltYWdlc3wxNDQwfGltYWdlL2pwZWd8aW1hZ2VzL2gxNS9oZmYvODc5NzMzMDQ0MDIyMi5qcGd8ODU0ZWQwMjY5OWE5OTBlZjc0ZGFhZTU4ZWYwNDk4ODFmZmM1ZTg2ZjIxOWFiZTBkZmU0NDBmMDBiNTYyMzdlYg"
}
},
"GALLERY": [
{
"zoom": {
"altText": "Photosmart E317 Digital Camera",
"format": "zoom",
"galleryIndex": 0,
"imageType": "GALLERY",
"url": "https://spartacus-dev0.eastus.cloudapp.azure.com:9002/medias/?context=bWFzdGVyfGltYWdlc3wxMzkzNnxpbWFnZS9qcGVnfGltYWdlcy9oMjYvaDdhLzg3OTcyNTE0NjkzNDIuanBnfGU3N2FlYWQ1YmQ1ODhjZjZiNTFjNDg3NDdjNGRkNjM5NGQzMjZmZWVmNjc3ZWQwMjgzY2MyNDJlNzYyNTczM2Q"
},
"product": {
"altText": "Photosmart E317 Digital Camera",
"format": "product",
"galleryIndex": 0,
"imageType": "GALLERY",
"url": "https://spartacus-dev0.eastus.cloudapp.azure.com:9002/medias/?context=bWFzdGVyfGltYWdlc3w3MDg1fGltYWdlL2pwZWd8aW1hZ2VzL2g2Ni9oOWQvODc5NzI3Nzc0OTI3OC5qcGd8NzdjOTNiMThkODQ4NTM4NmQ2NjMxMGMwYmMyOTIwODIwMzI4NTgyMGUxNDc4Y2I0OTRkOGViODNlNDZiYTJhNw"
},
"thumbnail": {
"altText": "Photosmart E317 Digital Camera",
"format": "thumbnail",
"galleryIndex": 0,
"imageType": "GALLERY",
"url": "https://spartacus-dev0.eastus.cloudapp.azure.com:9002/medias/?context=bWFzdGVyfGltYWdlc3wyMDYxfGltYWdlL2pwZWd8aW1hZ2VzL2g3ZS9oZmEvODc5NzMwNDA5NDc1MC5qcGd8OGZjMTNjM2JmMGY0MmYyMWY3OGM5YjQ4YjAyNzM4NjkxYjUyMmQzMDBhMmMzMjMwZThmMjI4OWMwZjg1NmYzMw"
}
}
]
},
"nameHtml": "Photosmart E317 Digital Camera",
"nameForUrl": "photosmart-e317-digital-camera",
"baseOptions": [],
"purchasable": true,
"averageRating": 4.5,
"stock": {
"isValueRounded": false,
"stockLevel": 314,
"stockLevelStatus": "inStock"
},
"description": "Get point and shoot simplicity plus crisp, true-to-life photos with this stylish and easy-to-use camera.<br/><br/>Get close in with 4x digital zoom, review via the clear 3.8 cm LCD then print great 10 × 15 cm photos and enlargements up to poster size.",
"availableForPickup": true,
"url": "/electronics-spa/products/300938",
"numberOfReviews": 22,
"manufacturer": "HP",
"categories": [
{
"code": "576",
"name": "Digital Compacts",
"url": "/Open-Catalogue/Cameras/Digital-Cameras/Digital-Compacts/c/576"
},
{
"code": "brand_1",
"name": "HP",
"url": "/Brands/HP/c/brand_1"
}
],
"priceRange": {},
"configurable": false
}
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Intellij IDEA 如何自动生成 serialVersionUID
- 图解面试题:SQL存储过程有什么用?
- LeetCode-6.Z 字形变换 - 消费补偿算法
- python + redis 实现 分布式队列任务
- Git error: hint: Updates were rejected because the remote contains work that you do hint: not have l
- 500 行代码写一个俄罗斯方块游戏
- k8s——资源限制
- k8s群集之动态扩缩容——HPA
- k8s群集的三种Web-UI界面部署
- Hive通过Jdbc连接HiveServer2
- SAP Spartacus OccCmsComponentAdapter的findComponentsByIds方法
- 分布式锁:二、Redis锁
- 面试官:kill -9 进程杀不掉,怎么办?
- SAP Spartacus的OccCmsPageNormalizer
- Redis性能指标监控!你知几何?