SAP Spartacus Storefront 2211 - 如何覆盖 PDP 取货选项和预选商店

Question

我正在使用 SAP 可组合店面 Spartacus 2211

在 PDP 中，我需要

1- 隐藏“运送”取货选项 2- 预先选择“店内免费提货”，因为它应该是唯一可用的选项。 （见图1）

由于 #2 增加了复杂性，我需要预先选择该选项，还需要预先选择任何商店，这是在单击“选择商店”然后单击“查找商店”时通过弹出窗口选择的（参见图 2）

PDP 拾取选项 PDP 店内提货弹出窗口

对于1，我尝试通过全局styles.scss隐藏“运送它”选项，效果很好，但它仍然是组合的预选选项，这是一个问题，因为用户仍然可以在选择该隐藏选项的情况下添加到购物车.

我尝试用 CMS 组件替换完整的 AddToCartComponent，但这意味着复制组件的其他部分，例如数量选择器和 AddToCart 按钮，我也尝试过但没有成功。

我也尝试过更换特定的更深的出口：

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

但是这个选项并没有取代 ootb 拾取选项内容，它只是将我的 html 模板附加到现有模板中。

根据文档，我们只能替换完整的 CMS 组件，这对于 2211 版本仍然有效吗？我渴望知道如何替换/定制较低级别的组件。

Answer 1

是的，这是一种奇怪的行为，它无法更换组件。 为什么不使用 css 隐藏标准组件并使用自定义组件。 我能够预先选择接送选项。

import { Component } from '@angular/core';
import { CartOutlets } from '@spartacus/cart/base/root';
import { CartPickupOptionsContainerComponent, PdpPickupOptionsContainerComponent } from '@spartacus/pickup-in-store/components';
import { PickupOption } from '@spartacus/pickup-in-store/root';
import { provideOutlet, OutletPosition } from '@spartacus/storefront';

@Component({
  selector: 'app-cust-cart-pick-up-container',
  templateUrl: './cust-cart-pick-up-container.component.html',
  styleUrl: './cust-cart-pick-up-container.component.scss',
})
export class CustCartPickUpContainerComponent extends PdpPickupOptionsContainerComponent{
pickupOptions1:PickupOption = 'pickup';
}

<ng-container *ngIf="availableForPickup">
    <cx-pickup-options
    [selectedOption] = pickupOptions1
    
      (pickupOptionChange)="onPickupOptionChange($event)"
      (pickupLocationChange)="openDialog()"
    ></cx-pickup-options>
  </ng-container>
  

对于您的情况 2，我会检查并通知您。

问候 KR