angularspartacus-storefront

I want to customize AddedToCartDialogComponent which has selector cx-added-to-cart-dialog


I want to customize AddedToCartDialogComponent and add some new elements to this dialog window. I've read documentation of Spartacus. I'm not really sure why it's doesn't work.. Because I don't see any changes.

Spartacus version: 4 Here is a code:

custom.module.ts:

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

custom.component.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 { }

Solution

  • There is no CMS AddedToCartDialogComponent defined, so you can not override it in this way. In Spartacus 4 you have to provide your own version of AddToCartComponent with overridden method openModal.