import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { IonicModule } from '@ionic/angular'; import { Component } from '@angular/core'; import { ToastController } from '@ionic/angular'; import { HomePage } from '../home/home.page'; @Component({ selector: 'app-cart', templateUrl: './cart.page.html', styleUrls: ['./cart.page.scss'], standalone: true, imports: [IonicModule, CommonModule, FormsModule], providers:[HomePage], }) export class CartPage { cartItems: any[] = []; deliveryInstructions: string = ''; totalPrice: number = 0; itemPrice: number = 0; officeAddress: string = '123 Main St.'; constructor(private toastController: ToastController, private homePage:HomePage) {} makePayment(){ // Retrieve the orderList from local storage const orderList = JSON.parse(localStorage.getItem('orderList') ?? '[]'); // Store the orderList in the paidList array localStorage.setItem('paidList', JSON.stringify(orderList)); // Clear the orderList array in local storage localStorage.setItem('orderList', JSON.stringify([])); // Remove the order cards from the DOM after a short delay setTimeout(() => { const orderCards = document.querySelectorAll('.order-card'); orderCards.forEach(card => card.remove()); }, 100); }; ionViewWillEnter() { // retrieve cart items from local storage const cartItems = JSON.parse(localStorage.getItem('orderList') ?? "[]"); if (cartItems != null) { this.cartItems = cartItems; this.calculateTotalPrice(); } } calculateTotalPrice() { let totalPrice = 0; let itemPrice = 0; console.log(this.cartItems); for (let item of this.cartItems) { itemPrice += item.dishPrice * item.quantity; } // add delivery fee to the total price totalPrice = itemPrice + 50; this.totalPrice = totalPrice; this.itemPrice = itemPrice; console.log(totalPrice) } async presentToast(position: 'middle') { const toast = await this.toastController.create({ message: 'Payment Successful!', duration: 1500, position: position }); await toast.present(); } handlerMessage = ''; public alertButtons = [ { text: 'Cancel', role: 'cancel', handler: () => { } }, { text: 'OK', role: 'confirm', // I want to present a toast message when the user clicks OK handler: () => {this.makePayment(); this.presentToast('middle'); this.ionViewWillEnter() } } ]; }; <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