Building an Ionic 3 Shopping Cart App with Firebase Realtime Database - Part 3

Hello friends, am sorry this part is coming so late. I have been very busy lately.

In part 2 of this series, the home page of the app where products are listed was done.

Source Code

In this part I will walk you through the process of building the product details page, cart and order placement.

The idea will be whenever customers clicks on any product in the home page, they should be presented with a product details page that will show a bigger sliding product images and other details.

The Single Product Page

The single product page we will be building will look like this:

Product Single Page

The Required Plugin

Since we will be implementing the add to cart in this part,  we will be using the Ionic Storage Native plugin.

Storage is an easy way to store key/value pairs and JSON objects. Storage uses a variety of storage engines underneath, picking the best one available depending on the platform.

Lets start by installing ionic native storage like so:

 
ionic cordova plugin add cordova-sqlite-storage --save

npm install --save @ionic/storage

The Code Walkthrough
 Let's start by modifying our home page html markup.  Add click event to the product col like this

(click)="showDetails(product)"

The full markup will now look like below:

  
 
            
  
  
   {{product.price | currency:'USD':true:'1.2-2'}}
   


  
    
 
  

The next thing is to add the showDetails method to the home.ts file.

showDetails(product){
   this.navCtrl.push("SinglePage",{product:product});    
}

The function is pretty simple we are just sending the selected product to the single page using the NavController push method.

Add the single page by runnig this command.

ionic g page single

Modify the single.html page content to reflect the following:

      
        
      
      
        
      
    

    
      
    

        
      
    
    



{{selectProduct?.name}}
{{ selectProduct?.short_description }}


{{ selectProduct?.price | currency:'USD':true
          }}


        
          


              Quantity
          

            
            
            
          
      
  

Add this below the content of the single.html page.

Add the following code to the home.ts file so that the whole home.ts will look like this:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
//import { Storage } from '@ionic/storage';
import { CartProvider } from '../../providers/cart/cart';

@IonicPage()
@Component({
  selector: 'page-single',
  templateUrl: 'single.html',
})
export class SinglePage {
  selectProduct: any;
  productCount: number = 1;
  cartItems: any[];
  constructor(public navCtrl: NavController, public navParams: NavParams,
    private cartService: CartProvider, public toastCtrl: ToastController) {
    if (this.navParams.get("product")) {
      window.localStorage.setItem('selectedProduct', JSON.stringify(this.navParams.get("product")));
    }


  }
  ionViewDidEnter(){
    this.getSingleProduct();
  }

 
  getSingleProduct() {
    if (window.localStorage.getItem('selectedProduct') != 'undefined') {
      this.selectProduct = JSON.parse(window.localStorage.getItem('selectedProduct'))
    }
  }

  ionViewDidLoad() {
    this.selectProduct = this.navParams.get("product");
    this.cartService.getCartItems().then((val) => {
      this.cartItems = val;
    })

  }

  decreaseProductCount() {
    if (this.productCount > 1) {
      this.productCount--;
    }

  }

  incrementProductCount() {
    this.productCount++;

  }

  addToCart(product) {
    var productPrice = this.productCount * parseInt(product.price);
    let cartProduct = {
      product_id: product.id,
      name: product.name,
      thumb: product.thumb,
      count: this.productCount,
      totalPrice: productPrice
    };
    this.cartService.addToCart(cartProduct).then((val) => {
      this.presentToast(cartProduct.name);
    });
  }


  presentToast(name) {
    let toast = this.toastCtrl.create({
      message: `${name} has been added to cart`,
      showCloseButton: true,
      closeButtonText: 'View Cart'
    });

    toast.onDidDismiss(() => {
      this.navCtrl.push('CartPage');
    });
    toast.present();
  }


}

Let's add our cart provider by running this command:

ionic g provider cart

The Cart Provider

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';

const CART_KEY = 'cartItems';

@Injectable()
export class CartProvider {

  constructor(public storage: Storage) {

  }

  addToCart(product) {
    return this.getCartItems().then(result => {
      if (result) {
        if (!this.containsObject(product, result)) {
          result.push(product);
          return this.storage.set(CART_KEY, result);
        } else {
          let index = result.findIndex(x => x.product_id == product.product_id);
          let prevQuantity = parseInt(result[index].count);
          product.count = (prevQuantity + product.count);
          let currentPrice = (parseInt(product.totalPrice) * product.count);
          product.totalPrice =currentPrice;
           result.splice(index, 1);
          result.push(product);
          return this.storage.set(CART_KEY, result);
        }

      } else {
        return this.storage.set(CART_KEY, [product]);
      }
    })
  }

  removeFromCart(product) {
    return this.getCartItems().then(result => {
      if (result) {
        var productIndex = result.indexOf(product);
        result.splice(productIndex, 1);
        return this.storage.set(CART_KEY, result);
      }
    })
  }

  removeAllCartItems() {
    return this.storage.remove(CART_KEY).then(res => {
      return res;
    });
  }


  containsObject(obj, list): boolean {
    if (!list.length) {
      return false;
    }

    if (obj == null) {
      return false;
    }
    var i;
    for (i = 0; i < list.length; i++) {
      if (list[i].product_id == obj.product_id) {
        return true;
      }
    }
    return false;
  }



  getCartItems() {
    return this.storage.get(CART_KEY);
  }

}

Watch out for part four because of the length of this post.