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