SAP Spartacus 6.7：为所有页面标题添加公司名称后缀故障排查

问题背景 #

• 使用版本：SAP Spartacus/Composable Storefront 6.7
• 需求：所有页面（内容页、PLP产品列表页、PDP产品详情页）的标题，在后台配置的基础标题后统一添加“- Company Name”后缀
• 异常现象：内容页标题正常添加后缀，但PLP标题显示异常（显示上一页标题或URL），PDP仅显示产品名称，无后缀

已尝试的代码 #

app.module.ts 中的提供者配置 #

{
  provide: PageMetaResolver,
  useExisting: CustomPageMetaService,
  multi: true,
},

CustomPageMetaService 实现 #

import { Injectable } from '@angular/core';
import {
  BasePageMetaResolver,
  PageHeadingResolver,
  ContentPageMetaResolver,
  PageTitleResolver,
  PageType,
  PageMetaResolver,
} from '@spartacus/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class CustomPageMetaService
  extends PageMetaResolver
  implements PageTitleResolver, PageHeadingResolver
{
  constructor(private basePageMetaResolver: BasePageMetaResolver) {
    super();
    this.pageType = PageType.CONTENT_PAGE; // 修改为其他PageType会导致所有页面失效
  }

  resolveHeading(): Observable<string | undefined> {
    return this.basePageMetaResolver.resolveTitle();
  }

  resolveTitle(): Observable<string | undefined> {
    return this.basePageMetaResolver
      .resolveTitle()
      .pipe(
        map((title) =>
          title
            ? `${title} - Company Name`
            : 'Company Name'
        )
      );
  }
}

解决方案 #

问题核心：当前的CustomPageMetaService仅针对PageType.CONTENT_PAGE（内容页）生效，而PLP对应PageType.PRODUCT_LISTING、PDP对应PageType.PRODUCT_PAGE，需要为这两类页面分别创建专属的Resolver来处理标题后缀。

方案步骤 #

1. 创建产品列表页（PLP）专属Resolver

import { Injectable } from '@angular/core';
import {
  ProductListPageMetaResolver,
  PageTitleResolver,
} from '@spartacus/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class CustomProductListPageMetaResolver extends ProductListPageMetaResolver implements PageTitleResolver {
  resolveTitle(): Observable<string | undefined> {
    return super.resolveTitle().pipe(
      map(title => title ? `${title} - Company Name` : 'Company Name')
    );
  }
}

2. 创建产品详情页（PDP）专属Resolver

import { Injectable } from '@angular/core';
import {
  ProductPageMetaResolver,
  PageTitleResolver,
} from '@spartacus/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class CustomProductPageMetaResolver extends ProductPageMetaResolver implements PageTitleResolver {
  resolveTitle(): Observable<string | undefined> {
    return super.resolveTitle().pipe(
      map(title => title ? `${title} - Company Name` : 'Company Name')
    );
  }
}

3. 在app.module.ts中注册所有Resolver
   更新提供者配置，把三个Resolver都注册进去：

{
  provide: PageMetaResolver,
  useExisting: CustomPageMetaService,
  multi: true,
},
{
  provide: PageMetaResolver,
  useExisting: CustomProductListPageMetaResolver,
  multi: true,
},
{
  provide: PageMetaResolver,
  useExisting: CustomProductPageMetaResolver,
  multi: true,
},

原理说明 #

Spartacus的PageMetaResolver机制是按页面类型匹配的，每种页面类型都有对应的基础Resolver。继承对应页面类型的基础Resolver并覆盖resolveTitle方法，就能保证该类型页面的标题会被处理，同时保留原有的基础标题逻辑，只添加后缀。

内容的提问来源于stack exchange，提问作者Rodrigo Roberto de Almeida