I'm working on e-commerce angular application and in the basket I have 2 types of products : a couple of restaurant + spectacle and giftCard, when client reserve a restaurant should reserve a spectacle with it and Conversely, client can add multiple couples of restaurants and spectacles, and he can add multiple giftCards to the basket. the command button will be disabled if :
1- a couple of restaurant/ spectacle missing item ( spectacle or spectacle )
this the html of 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">
<div class="cartItem" *ngFor='let item of cartItems; let i = index; '>
<div *ngIf="!item.type">
<div (click)="goToDetails( i )" class="row"
*ngIf='item.spectacle && item.placesListContent.length > 0 ; else defaultSpectacle'>
<div class="col-4 image-content">
<div class="card-img" [style.background]="'url(' + item.spectacle.sp_visuel + ')'"></div>
<div class="= Bg-Circle ">
<div class="col-md-2 Combined-Shape ">
<button type="button" class="close " aria-label="Close"
(click)="removeFromCart(item.spectacle.sp_id, i, 'spectacle')">
<img src="/assets/img/times-circle-solid.svg" class="img-close" alt="">
</button>
</div>
</div>
</div>
<div class="col-8">
<div class="row item-title">
</div>
<div class="row line" *ngFor='let place of item.placesListContent'>
<img src="/assets/img/tickets.svg" class="tickets-img" alt="">
<div class="Details"> </div>
</div>
<div class="row line">
<img src="/assets/img/calendar.svg" class="tickets-img" alt="">
<div class="Details date"></div>
</div>
<div class="row line">
<img src="/assets/img/clock.svg" class="tickets-img" alt="">
<div class="Details"></div>
</div>
<div class="row line-div">
<div class="col-8 small-Divider"></div>
<div class="col-4 price"> €</div>
</div>
</div>
</div>
<ng-template #defaultSpectacle>
<div class="row">
<div class="col-4 image-content">
<div class="card-img" [style.background-color]="'#dddfe7'"></div>
</div>
<div class="col-8">
<div class="row item-title">
<a (click)="goToShows(i,'restaurant')">Trouver un spectacle</a>
</div>
<div class="row line">
<img src="/assets/img/tickets.svg" class="tickets-img" alt="">
<div class="Details">A déterminer</div>
</div>
<div class="row line">
<img src="/assets/img/calendar.svg" class="tickets-img" alt="">
<div class="Details date">A déterminer</div>
</div>
<div class="row line">
<img src="/assets/img/clock.svg" class="tickets-img" alt="">
<div class="Details">A déterminer</div>
</div>
<div class="row line-div">
<div class="col-8 small-Divider"></div>
<div class="col-4 price">-</div>
</div>
</div>
</div>
</ng-template>
<div (click)="(item.restaurant && item.spectacle) ? goToDetails( i ): ''"
*ngIf='item.restaurant ;else defaultRestaurant;' class="row">
<div class="col-4 image-content">
<div class="card-img" [style.background]="'url(' +serverUrl+'/'+item.restaurant.image+ ')'"></div>
<div class="= Bg-Circle ">
<div class="col-md-2 Combined-Shape ">
<button type="button" class="close " aria-label="Close"
(click)="removeFromCart(item.restaurant.id, i, 'restaurant')">
<img src="/assets/img/times-circle-solid.svg" class="img-close" alt="">
</button>
</div>
</div>
</div>
<div class="col-8">
<div class="item-title">
</div>
<div class="row line">
<img src="/assets/img/calendar.svg" class="tickets-img" alt="">
<div class="Details date" *ngIf='item.restaurant.time'>
</div>
<div class="Details date" *ngIf='!item.restaurant.time'>A déterminer</div>
</div>
<div class="row line">
<img src="/assets/img/clock.svg" class="tickets-img" alt="">
<div class="Details" *ngIf='item.restaurant.time'>
</div>
<div class="Details" *ngIf='!item.restaurant.time'>A déterminer</div>
</div>
<div class="row line">
<img src="/assets/img/tray.svg" class="tickets-img" alt="">
<div class="Details">
<span class="comma"
*ngFor="let formule of item.restaurant.selectedPlacesRestaurant "></span>
</div>
</div>
<!-- <div class="row line-div">
<div class="col-8 small-Divider"></div>
<div class="col-4 price"> €</div>
</div> -->
</div>
</div>
<ng-template #defaultRestaurant>
<div class="row">
<div class="col-4 image-content">
<div class="card-img" [style.background-color]="'#dddfe7'"></div>
</div>
<div class="col-8">
<div class="item-title">
<a (click)="goToRestaurants(i,'restaurant')">Trouver un restaurant</a>
</div>
<div class="row line">
<img src="/assets/img/calendar.svg" class="tickets-img" alt="">
<div class="to-be-determined">A déterminer</div>
</div>
<div class="row line">
<img src="/assets/img/clock.svg" class="tickets-img" alt="">
<div class="to-be-determined">A déterminer</div>
</div>
<div class="row line">
<img src="/assets/img/tray.svg" class="tickets-img" alt="">
<div class="Details">Formule : Entracte</div>
</div>
<div class="row line-div">
<div class="col-md-8"></div>
<div class="col-md-4 price"></div>
</div>
</div>
</div>
</ng-template>
<div class="row Divider"></div>
</div>
<div class="item-container" *ngIf="item.type && item.amount">
<div class="cartItem">
<div class="row">
<div class="col-4 image-content d-flex justify-content-center text-center">
<div class="mask">
<img class="type-icon" [src]="serverUrl+'/'+item?.icon" alt="">
</div>
<div class="= Bg-Circle d-flex justify-content-center text-center">
<div class="col-md-2 Combined-Shape-card d-flex ">
<button type="button" class="close " aria-label="Close" (click)="removeFromCart(item,i,'type')">
<img src="/assets/img/times-circle-solid.svg" class="img-close" alt="">
</button>
</div>
</div>
</div>
<div class="col-6 align-self-center gift-card-desc pl-0">
<p class="type-desc"> Chèque cadeaux Spectacle + Restaurant <span
class="gift-type"></span>
</p>
</div>
<div class="col-2 align-self-center gift-card-desc pl-0">
<p class="type-price"> € </p>
</div>
</div>
<div (click)="goToDetails()" class="row">
</div>
</div>
</div>
</div>
</div>
<div class="cart-footer">
<div class="row">
<div class="col-6 purchases-continue"><a (click)="closeSideNav()" class="a">Continuer mes achats</a></div>
<div class="col-6 totale"> Total : €</div>
</div>
<button class="btn btn-submit form-control btn-block" (click)='goToCommand()' [disabled]="disableBookBtn">
<p class="command">Commander</p>
</button>
</div>
</div>
</div>
and here the ts file :
ngOnInit() {
this.serverUrl = environment.serverUrl
this.cartService.myCart$.subscribe(res => {
this.total = 0
this.giftCardsTotal = 0
this.cartItems = this.cartService.getItemCard() || res
if (this.cartItems.length == 0) this.disableBookBtn = true
this.cartItems.forEach(item => {
debugger
let indexEmptyItem = _.findIndex(this.cartItems, item => { return (!item.restaurant || !item.spectacle || !item.placesListContent || item.placesListContent < 1)})
let giftItemIndex = _.findIndex(this.cartItems, item => { return (!item.type)})
debugger
if (indexEmptyItem == -1 || giftItemIndex == -1)
this.disableBookBtn = false
else
this.disableBookBtn = true
// let itemPrice = 0
// if ( item.placesListContent ){
// item.placesListContent.forEach( value => {
// itemPrice += ( value.tr_reduit || value.tr_tarif)*value.tr_qte
// });
//
// let price_restaurant = 0;
// if(item.restaurant && item.restaurant.price) price_restaurant = item.restaurant.price*1
// itemPrice += price_restaurant
//
// }else{
// itemPrice = 0
// }
// if()
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)
}
the if statement and findIndex function not return a valid result !
Aucun commentaire:
Enregistrer un commentaire