Reload page after delete item in IONIC4

Question

Good day expert in the house. Please am currently building an e-commerce mobile app with ionic 4, am having difficulty updating my item-total summary when an item is deleted from the cart page.

This my cart.html page below

    
  
    
      
    
    
      
      {{ cartItem }}
    
    Cart
  




  
  
    
      
        There is no Item in your cart...!
        Browse farms
      
    
  
   
  
    
      
        Items in cart
        
          
        
      


      
        
          
        
        
          {{ item.name }}
          Amount: ₦{{ baseProducts[j].price * baseProducts[j].quantity | number:'1.0-0'}}
          Returns: ‎₦{{ item.meta_data[1].value * baseProducts[j].quantity | number:'1.0-0' }}
            
          
            Change Quantity
              
                1
                2
                3
                4
                5
                6
                7
                8
                9
                10

Sub total

₦{{ calculatePrice() | number:'1.0-0'}}

Total Payment ₦{{ calculatePrice() | number:'1.0-0' }}

  Proceed to checkout

my cart.ts file

import { Storage } from '@ionic/storage';
import { Component, OnInit } from '@angular/core';
import { CartserviceService } from '../services/cartservice.service';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.page.html',
  styleUrls: ['./cart.page.scss'],
})
export class CartPage implements OnInit {

  /* use below 4 variables at beginning so that cart page html works properly */
  cartData:any = [];
  baseProducts:any = [];
  totalPrice: number = 0;
  show: boolean = true;
  cartItem: number = 0;
  quantityValue:number = 1;

  constructor(private storage: Storage, private cart: CartserviceService) {
    this.cart.keepCartItemsOnRefresh();

    // products added to carts  
    this.storage.forEach((data)=>{
      let storedProducts = {};
      this.cart.keepCartItemsOnRefresh();
      let parseFromStorage = JSON.parse(data);
      this.cartData.push(parseFromStorage);
      storedProducts['product_id'] = parseFromStorage.id;
      storedProducts['price'] = parseFromStorage.price;
      storedProducts['quantity'] = 1;
      this.baseProducts.push(storedProducts);
    }).then(()=>{
      console.log('parse-prudcts', this.baseProducts)
    });
   }

  ngOnInit() {
    this.cart.cartItems.subscribe((value) =>{
      this.cartItem = value;
    });
  }



    //update in products

    changeCartItemQty(currentItem){
      this.baseProducts.forEach((productToUpdate) => {
        if(productToUpdate.product_id == currentItem.product_id){
          productToUpdate.quantity = parseInt(currentItem.quantity);
        }
      });
      this.cart.quantityUpdatedProducts = this.baseProducts;
      console.log('Changed Quantity on cart',this.cart.quantityUpdatedProducts);
    }
  // Delete item from cart
  removeFromCart(index, item){
  this.cartData.splice(index,1);
  let pId = item.id;
  this.storage.remove(`product_${pId}`);
  this.cart.keepCartItemsOnRefresh();

  }



  // calulate farm price
  calculatePrice(){
    this.totalPrice = 0;
    let farmPrice = 0;
    this.baseProducts.forEach((product)=>{
    farmPrice = product.price * product.quantity;
    this.totalPrice += farmPrice;
   });
   return this.totalPrice   
  } 
}

I want the item total to update to the current item total in the cart when I delete an item from the cart

Reload page after delete item in IONIC4

Answers (1)

Related Questions