我想自定义AddedToCartDialogComponent，它有选择器cx-added-to-cart-dialog

Question

我想自定义AddedToCartDialogComponent并向该对话框窗口添加一些新元素。 我读过斯巴达克斯的文档。 我不太确定为什么它不起作用..因为我没有看到任何变化。

斯巴达克斯版本：4 这是代码：

自定义.module.ts：

 @NgModule({
  declarations: [
    CustomSideCartComponent
  ],
  imports: [
    CommonModule,
    StarRatingModule,
    ConfigModule.withConfig({
      cmsComponents: {
        AddedToCartDialogComponent: {
          component: CustomSideCartComponent, // new custom component
        },
      },
    } as CmsConfig),
  ],
  exports: [CustomSideCartComponent],
})
export class CustomSidecartModule { }

自定义.组件.ts：

@Component({
  selector: 'app-custom-side-cart',
  templateUrl: './custom-side-cart.component.html',
  styleUrls: ['./custom-side-cart.component.css']
})
export class CustomSideCartComponent extends AddedToCartDialogComponent implements OnInit {

  product$: Observable<Product | null> = this.currentProductService.getProduct();

  constructor(
    private currentProductService: CurrentProductService,
    protected modalService: ModalService,
    protected cartService: ActiveCartService
  ) {
    super(modalService, cartService)
  }

  ngOnInit(): void {
  }

}

custom.component.html：

<ng-container *ngIf="product$ | async as product">
  <h1 class="new-name">{{ product.name }}</h1>
  <cx-star-rating [rating]="4"></cx-star-rating>
</ng-container>

app.module.ts：

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    StoreModule.forRoot({}),
    EffectsModule.forRoot([]),
    SpartacusModule,
    FormsModule,
    ReactiveFormsModule,
    CustomPdpModule,
    CustomSidecartModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

没有定义 CMS

AddedToCartDialogComponent

，因此您不能以这种方式覆盖它。在 Spartacus 4 中，您必须提供您自己的

AddToCartComponent

版本，并覆盖方法

openModal

。

Answer 2

我必须扩展

AddedToCartDialogEventListener

并重写

-openModal

方法，如@Michal 在之前的答案中提到的。

udx-added-to-cart-dialog-event.listener.ts:

import { Injectable } from "@angular/core";
import { AddedToCartDialogEventListener } from "@spartacus/cart/base/components";
import { CartUiEventAddToCart } from "@spartacus/cart/base/root";
import { take } from "rxjs";

@Injectable({
    providedIn: 'root',
})
export class UDXAddedToCartDialogEventListener extends AddedToCartDialogEventListener {
    override openModal(event: CartUiEventAddToCart): void {
        // Raj: Overriding behavior to use custom dialog
        const addToCartData = {
            productCode: event.productCode,
            quantity: event.quantity,
            numberOfEntriesBeforeAdd: event.numberOfEntriesBeforeAdd,
            pickupStoreName: event.pickupStoreName,
          };
      
          const dialog = this.launchDialogService.openDialog(
            "UDX_ADDED_TO_CART",
            undefined,
            undefined,
            addToCartData
          );
      
          if (dialog) {
            dialog.pipe(take(1)).subscribe();
          }
    }
}

我还扩展了

AddedToCartDialogComponent

类来进行自定义更改，并且按照模块文件中的开箱即用代码将其挂钩：

export const udxDefaultAddedToCartLayoutConfig: LayoutConfig = {
    launch: {
        UDX_ADDED_TO_CART: {
        inlineRoot: true,
        component: UDXAddedToCartDialogComponent,
        dialogType: DIALOG_TYPE.DIALOG,
        },
    },
};
  
@NgModule({
    imports: [
      CommonModule,
      ReactiveFormsModule,
      CartSharedModule,
      RouterModule,
      SpinnerModule,
      PromotionsModule,
      UrlModule,
      IconModule,
      I18nModule,
      ItemCounterModule,
      KeyboardFocusModule,
    ],
    providers: [provideDefaultConfig(udxDefaultAddedToCartLayoutConfig)],
    declarations: [UDXAddedToCartDialogComponent],
    exports: [UDXAddedToCartDialogComponent],
  })
  export class UDXAddedToCartDialogModule {
    constructor(_addToCartDialogEventListener: AddedToCartDialogEventListener) {
      // Intentional empty constructor
    }
  }