Spartacus 2211：如何覆写PDP取货选项并预设门店

关于CMS组件替换规则的说明 #

在Spartacus 2211版本中，官方文档提及的“仅可替换完整CMS组件”规则，仅针对由CMS驱动的顶层组件（比如AddToCartComponent这类直接在CMS中配置的组件）。对于底层通过Outlet暴露的子组件（如取货选项区域），依然可以通过provideOutlet进行替换，你之前的替换失败是代码写法错误导致的（将NgModule类名与组件名混淆，且组件逻辑未正确处理选项过滤）。

实现需求的具体方案 #

核心思路 #

1. 从数据层面过滤掉配送选项，避免仅靠样式隐藏导致的逻辑残留问题
2. 通过正确的Outlet替换，自定义取货选项区域的UI与交互
3. 利用Spartacus内置的取货服务预设选中门店

步骤1：创建自定义取货选项组件 #

该组件将仅保留“免费到店取货”选项，并处理门店预设逻辑：

import { Component, OnInit } from '@angular/core';
import { CartItemContext } from '@spartacus/cart/base/components';
import { PickupOption, PickupStoreService, StoreFinderService } from '@spartacus/pickup-in-store/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-custom-pickup-option',
  template: `
    <div class="pickup-option-container" *ngIf="pickupOption$ | async as pickupOption">
      <input 
        type="radio" 
        id="pickup-option" 
        name="delivery-method" 
        [(ngModel)]="selectedOption"
        [value]="pickupOption"
        checked
        disabled
      >
      <label for="pickup-option">{{ pickupOption.description }}</label>
      
      <div class="store-selection">
        <span *ngIf="selectedStore$ | async as store">
          已选门店：{{ store.name }}
        </span>
        <button *ngIf="!(selectedStore$ | async)" (click)="openStoreFinder()">
          选择门店
        </button>
      </div>
    </div>
  `,
  styles: [`
    .pickup-option-container { margin: 1rem 0; }
    .store-selection { margin-top: 0.5rem; }
  `]
})
export class CustomPickupOptionComponent implements OnInit {
  pickupOption$: Observable<PickupOption>;
  selectedOption: PickupOption;
  selectedStore$: Observable<any>; // 替换为实际的Store类型

  constructor(
    private cartItemContext: CartItemContext,
    private pickupStoreService: PickupStoreService,
    private storeFinderService: StoreFinderService
  ) {}

  ngOnInit(): void {
    // 过滤仅保留到店取货选项
    this.pickupOption$ = this.cartItemContext.options$.pipe(
      map(options => options.find(opt => opt.type === 'PICKUP_IN_STORE'))
    );

    // 监听选中的门店，若无则自动预设第一个可用门店
    this.selectedStore$ = this.pickupStoreService.getSelectedStore();
    this.storeFinderService.getFindStoresResult().pipe(
      map(stores => stores?.stores)
    ).subscribe(stores => {
      if (stores?.length && !(this.selectedStore$)) {
        this.pickupStoreService.selectStore(stores[0]);
      }
    });
  }

  openStoreFinder(): void {
    // 触发Spartacus内置的门店选择弹窗
    this.pickupStoreService.openStoreFinder();
  }
}

步骤2：配置Outlet替换模块 #

创建独立模块，正确注册Outlet替换规则：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { OutletRefModule, provideOutlet, OutletPosition } from '@spartacus/storefront';
import { CartOutlets } from '@spartacus/cart/base/root';
import { CustomPickupOptionComponent } from './custom-pickup-option.component';

@NgModule({
  declarations: [CustomPickupOptionComponent],
  imports: [CommonModule, FormsModule, OutletRefModule],
  providers: [
    provideOutlet({
      id: CartOutlets.ADD_TO_CART_PICKUP_OPTION,
      position: OutletPosition.REPLACE,
      component: CustomPickupOptionComponent
    })
  ]
})
export class CustomPickupOptionModule {}

步骤3：导入模块到应用 #

将CustomPickupOptionModule导入到你的AppModule或对应Feature模块中，确保替换逻辑生效。

步骤4：（可选）从数据层彻底移除配送选项 #

若想从根源上避免配送选项被加载，可自定义并替换PickupOptionService：

import { Injectable } from '@angular/core';
import { PickupOptionService } from '@spartacus/pickup-in-store/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class CustomPickupOptionService extends PickupOptionService {
  override getOptions(): Observable<any[]> { // 替换为实际的PickupOption类型
    return super.getOptions().pipe(
      map(options => options.filter(opt => opt.type === 'PICKUP_IN_STORE'))
    );
  }
}

然后在AppModule的providers数组中替换原有服务：

providers: [
  { provide: PickupOptionService, useClass: CustomPickupOptionService }
]

内容的提问来源于stack exchange，提问作者David Levy