获取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
}