<ion-content [fullscreen]="true" class="ion-padding"> <ion-header> <ion-toolbar> <ion-title>Cart</ion-title> </ion-toolbar> </ion-header> <ion-card class="order-card" *ngFor="let item of cartItems"> <ion-card-header color="primary"> <ion-card-title>{{ item.restaurantName }}</ion-card-title> </ion-card-header> <br> <ion-card-content> <p>Dish: {{ item.dishName }}</p> <p>Quantity: {{ item.quantity }}</p> <p>Price: {{ item.dishPrice | currency :'ZAR':'symbol' }}</p> </ion-card-content> </ion-card> <ion-grid> <ion-row class="ion-text-center"> <ion-col size="2"> <ion-icon style="padding-top: 12px;" aria-hidden="true" name="home" size="large"></ion-icon> </ion-col> <ion-col style="padding-top: 13px;"> <ion-row> Deliver to My Couch </ion-row> <ion-row> <ion-text color="medium"><sub>12 Main Street</sub></ion-text> </ion-row> </ion-col> <ion-col size="auto"> <ion-button fill="clear"><ion-text color="danger" size="small">CHANGE</ion-text></ion-button> </ion-col> </ion-row> </ion-grid> <ion-card> <ion-card-header color="primary"> <ion-card-title> Cart details </ion-card-title> </ion-card-header> <ion-card-content> <ion-grid> <ion-row> <ion-col>Item Total:</ion-col> <ion-col>{{itemPrice | currency :'ZAR':'symbol'}}</ion-col> </ion-row> <ion-row> <ion-col>Delivery Fee:</ion-col> <ion-col>{{ 50 | currency :'ZAR':'symbol'}}</ion-col> </ion-row> <ion-row> <ion-col>Total Price:</ion-col> <ion-col>{{ totalPrice | currency :'ZAR':'symbol'}}</ion-col> </ion-row> </ion-grid> <ion-button id="present-alert" expand="block" color="primary">Make Payment</ion-button> <ion-toast class="custom-toast" position="middle" trigger="open-toast" message="Payment successful!" [duration]="3000" icon="checkmark-sharp"></ion-toast> </ion-card-content> </ion-card> <ion-alert trigger="present-alert" header="Confirm Payment" [buttons]="alertButtons" ></ion-alert> </ion-content>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter