Inject current Product service into app Component:
Implementation code:
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);*/
}
}
In Component html, use async and json pipe to display the data of myproduct$ in json format:
Just open a product detail page and you can see the json data:
{
"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
}
To get more original articles by Jerry, please follow the public account "Wang Zixi":