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

Source Code

In the previous post, I walk you through how to create firebase project and setup an Ionic app to use firebase.

In this part, we will dive into coding our shopping cart app.

The App Home Page

The screenshot of the app's home page is what we have below:

As you can see, we promotional slide at the top and then list of random products below it.

From the json file we uploaded to firebase, there are three refs namely categories,products and promotions. The images in the top slider is coming from the promotions.

Let us start by implementing the promotion slider.

The code walk through

Generate a product provider by running this command

ionic g provider products

This command will generate products.ts file in "/src/providers/product/products.ts"

Import firebase from firebase module and Events from ionic-angular like so:

import { Events } from 'ionic-angular';
import firebase from 'firebase';

Create link to promotions ref and a variable that will hold our promotions array like so:

 promoRef = firebase.database().ref("promotions");
 promos: Array = [];

Let's create a method names getPromoSlider that we fetch our promotion images from firebase:

 getPromoSlider() {
    this.promoRef.once('value', (snap) => {
      this.promos = [];
      if (snap.val()) {
        var tempPromo = snap.val();
        for (var key in tempPromo) {
          let singlePromo = {
            id: key,
            name: tempPromo[key].thumb
          };

          this.promos.push(singlePromo);
        }
      }
      this.events.publish('promoLoaded');
    });
  }

The whole product.ts should now look like this:

import { Injectable } from '@angular/core';
import { Events } from 'ionic-angular';
import firebase from 'firebase';

@Injectable()
export class ProductsProvider {
  promoRef = firebase.database().ref("promotions");
  promos: Array = [];
  constructor(public events: Events) { }

  getPromoSlider() {
    this.promoRef.once('value', (snap) => {
      this.promos = [];
      if (snap.val()) {
        var tempPromo = snap.val();
        for (var key in tempPromo) {
          let singlePromo = {
            id: key,
            name: tempPromo[key].thumb
          };

          this.promos.push(singlePromo);
        }
      }
      this.events.publish('promoLoaded');
    });
  }  

}

The next step is to make use of our product service in the home.ts in order to fully implement the promislider

Let's begin by importing the ProductsProvider like so:

import { ProductsProvider } from '../../providers/products/products';

We also need to declare a variable that will hold all promo fetched from firebase like so:

promoSliders: any[];
promoImagesLoaded:boolean=false;

The finished home.ts should now look like this:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController, Events } from 'ionic-angular';
import { ProductsProvider } from '../../providers/products/products';


@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {
  promoSliders: any[];

  constructor(public navCtrl: NavController, public navParams: NavParams,
    private productService: ProductsProvider,
    private loadingCtrl: LoadingController,
    private events: Events) {
  }

  ionViewWillEnter() {
    this.loadPromo();
  }

  ionViewDidLeave() {
    this.events.unsubscribe('promoLoaded');
  }



  loadPromo() {
    let loader = this.loadingCtrl.create({
      content: 'Loading Promos..'
    });
    loader.present();
    this.productService.getPromoSlider();

    this.events.subscribe('promoLoaded', () => {
      this.promoSliders = this.productService.promos;
      if(this.promoSliders.length>0){
        this.promoImagesLoaded =true;
      }
      loader.dismiss();
    })
  }


}

We now need to work on the home.html to reflect the promoslider. We are going to make use of ion-slides. Open up the home.html and add the following code below the ion-content:

Now that promoslide has been done, the next thing is to load products to the home page under the promoslider. Open the product.ts and add the following line:

productRef = firebase.database().ref("products");
products:Array =[];

In addition to the above code, we also need to add a method that will fetch products from firebase like so:

getProducts() {
    this.productRef.once('value', (snap) => {
      this.products = [];
      if (snap.val()) {
        var tempProducts = snap.val();
        for (var key in tempProducts) {
          let singleProduct = {
            id:key,
            category_id: tempProducts[key].category_id,
            name: tempProducts[key].name,
            images:tempProducts[key].images,
            price:tempProducts[key].price,
            rating:tempProducts[key].rating,
            sale_price:tempProducts[key].sale_price,
            short_description:tempProducts[key].short_description,
            thumb:tempProducts[key].thumb
          };

          this.products.push(singleProduct);
        }
      }
      this.events.publish('productsLoaded');
    });
  }

Add the code below to the home.ts file like so:

loadProducts() {
    this.productService.getProducts();
    this.events.subscribe('productsLoaded', () => {
      this.products = this.productService.products;
      this.productRows = Array.from(Array(Math.ceil(this.products.length/2)).keys())
      
    })
  }

The full home.ts code should look like so:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController, Events } from 'ionic-angular';
import { ProductsProvider } from '../../providers/products/products';


@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {
  promoSliders: any[];
  products: any[];
  productRows:any;
  promoImagesLoaded:boolean=false;
  constructor(public navCtrl: NavController, public navParams: NavParams,
    private productService: ProductsProvider,
    private loadingCtrl: LoadingController,
    private events: Events) {
  }

  ionViewWillEnter() {
    this.loadPromo();
    this.loadProducts();
  }

  ionViewDidLeave() {
    this.events.unsubscribe('promoLoaded');
  }

  ionViewDidLoad() {

  }

  loadPromo() {
    let loader = this.loadingCtrl.create({
      content: 'Loading Promos..'
    });
    loader.present();
    this.productService.getPromoSlider();

    this.events.subscribe('promoLoaded', () => {
      this.promoSliders = this.productService.promos;
      if(this.promoSliders.length>0){
        this.promoImagesLoaded =true;
      }
      loader.dismiss();
    })
  }

  loadProducts() {
    this.productService.getProducts();
    this.events.subscribe('productsLoaded', () => {
      this.products = this.productService.products;
      this.productRows = Array.from(Array(Math.ceil(this.products.length/2)).keys())
      
    })
  }

 

}

And the full home.html page should be modify to look like so:

  
    
    Home
  



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


                
               
            
          
        
  

In the next post we will implement the single product page and the cart system.