In my current project, I am developing an e-commerce angular application that includes a basket with two types of products: restaurant + show combos and gift cards. When a client reserves a restaurant, they must also reserve a show; conversely, the client can add multiple restaurant/show combos and multiple gift cards to the basket. The command button will be disabled if:
1- A restaurant/show combo is missing one item (either restaurant or show).
Below is the HTML for the basket:
<div id="mySidenavv" class="sidenavv">
<div class="mySidenavv-content">
<div class="row">
<div class="col-md-8 Mon-panier ">Mon panier </div>
<div class="col-md-2"> <a href="javascript:void(0)" class="closebtn" (click)="closeSideNav()"><img
src="/assets/img/double-right-arrows-angles.png" alt="">
</a></div>
</div>
<div class="row Divider"></div>
<div class="item-container">
... (content continues)
...
</div>
</div>
</div>
Furthermore, in the respective TypeScript file:
ngOnInit() {
this.serverUrl = environment.serverUrl
this.cartService.myCart$.subscribe(res => {
this.total = 0
this.giftCardsTotal = 0
this.cartItems = this.cartService.getItemCard() || res
// Check conditions for disabling the book button
let indexEmptyItem = -1;
let giftItemIndex = -1;
for (let i=0; i<this.cartItems.length; i++) {
if ((!this.cartItems[i].restaurant || !this.cartItems[i].spectacle || !this.cartItems[i].placesListContent || this.cartItems[i].placesListContent.length < 1)) {
indexEmptyItem = i;
}
if (!this.cartItems[i].type) {
giftItemIndex = i;
}
}
if (indexEmptyItem == -1 || giftItemIndex == -1) {
this.disableBookBtn = false;
} else {
this.disableBookBtn = true;
}
// Calculate total prices
this.cartItems.forEach(item => {
if (item.spectacle) {
this.total += item.qte * item.spectacle.total;
}
if (item.type) {
this.giftCardsTotal += item.totalPrice;
}
});
this.total += this.giftCardsTotal;
})
setTimeout(() => this.cartService.initCart(), 100)
This code has been updated to address issues with the if statement and findIndex function not returning valid results.