使用开源项目 Spartacus快速创建一个电商店铺网站

可以采用StackBlitz WebIDE在线创建：

也可以采用Angular cli创建，命令行如下：

ng new mystore --style=scss

然后使用Spartacus schematics自动添加依赖：

打开app.module.ts, 替换B2cStorefrontModule.withConfig方法内的配置为实际的Commerce Cloud后台：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { translations, translationChunksConfig } from '@spartacus/assets';
import { B2cStorefrontModule } from '@spartacus/storefront';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    B2cStorefrontModule.withConfig({
      backend: {
        occ: {
          baseUrl: 'https://spartacus-jerry.eastus.cloudapp.azure.com:9002',
          prefix: '/occ/v2/'
        }
      },
      context: {
        currency: ['USD'],
        language: ['en'],
        baseSite: ['electronics-spa']
      },
      i18n: {
        resources: translations,
        chunks: translationChunksConfig,
        fallbackLang: 'en'
      },
      features: {
        level: '2.1'
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

之后即可正常工作：

url：https://spartacus-dev0.eastus.cloudapp.azure.com:9002/occ/v2/electronics-spa/cms/pages?fields=DEFAULT&pageType=ContentPage&pageLabelOrId=homepage&lang=en&curr=USD
请求Commerce Cloud CMS的page元数据，只抓取类型为ContentPage的页面：

响应：

上图的请求，分别对应了最后渲染的原生html页面的各个区域，例如：
Section1：

Section2A, 2B, 2C, 3, 4,5

返回一个title为Homepage的页面模板：

contentSlots有19个元素：

每个contentSlot有一个position，slot又包含若干个Component：

比如Section1 slot包含了两个Component：

Jerry 2021-3-11 11：11AM - 才发现这个Component里面甚至包含了sample data的transaction 数据。但是在SSR下，为什么还要返回给客户端呢？直接在服务器端渲染好了不就行了吗？

这两个Component都是SimpleResponsiveBannerComponent，一个url为578，一个为585.

578对应下图：

585对应这个区域：