n
nn
nnnnn
nnnIn the previous post, I walk you through how to create firebase project and setup an Ionic app to use firebase.
nn
nIn this part, we will dive into coding our shopping cart app.
n
n
nThe App Home Page
nThe screenshot of the app’s home page is what we have below:
n
n
n
nAs you can see, we promotional slide at the top and then list of random products below it.
n
nFrom 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.
nnnn
nLet us start by implementing the promotion slider.
n
n
nThe code walk through
nGenerate a product provider by running this command
n
n
ionic g provider productsn
n
nThis command will generate products.ts file in “/src/providers/product/products.ts“
nnnnn
nImport firebase from firebase module and Events from ionic-angular like so:
n
n
import { Events } from 'ionic-angular';nimport firebase from 'firebase';n
n
nCreate link to promotions ref and a variable that will hold our promotions array like so:
n
n
promoRef = firebase.database().ref("promotions");n promos: Array = [];n
n
nLet’s create a method names getPromoSlider that we fetch our promotion images from firebase:
n
getPromoSlider() {n this.promoRef.once('value', (snap) => {n this.promos = [];n if (snap.val()) {n var tempPromo = snap.val();n for (var key in tempPromo) {n let singlePromo = {n id: key,n name: tempPromo[key].thumbn };nn this.promos.push(singlePromo);n }n }n this.events.publish('promoLoaded');n });n }n
n
nThe whole product.ts should now look like this:
n
n
import { Injectable } from '@angular/core';nimport { Events } from 'ionic-angular';nimport firebase from 'firebase';nn@Injectable()nexport class ProductsProvider {n promoRef = firebase.database().ref("promotions");n promos: Array = [];n constructor(public events: Events) { }nn getPromoSlider() {n this.promoRef.once('value', (snap) => {n this.promos = [];n if (snap.val()) {n var tempPromo = snap.val();n for (var key in tempPromo) {n let singlePromo = {n id: key,n name: tempPromo[key].thumbn };nn this.promos.push(singlePromo);n }n }n this.events.publish('promoLoaded');n });n } nn}n
n
nThe next step is to make use of our product service in the home.ts in order to fully implement the promislider
nnnnn
nLet’s begin by importing the ProductsProvider like so:
n
import { ProductsProvider } from '../../providers/products/products';n
n
n
nWe also need to declare a variable that will hold all promo fetched from firebase like so:
n
promoSliders: any[];npromoImagesLoaded:boolean=false;n
n
n
nThe finished home.ts should now look like this:
n
n
import { Component } from '@angular/core';nimport { IonicPage, NavController, NavParams, LoadingController, Events } from 'ionic-angular';nimport { ProductsProvider } from '../../providers/products/products';nnn@IonicPage()n@Component({n selector: 'page-home',n templateUrl: 'home.html',n})nexport class HomePage {n promoSliders: any[];nn constructor(public navCtrl: NavController, public navParams: NavParams,n private productService: ProductsProvider,n private loadingCtrl: LoadingController,n private events: Events) {n }nn ionViewWillEnter() {n this.loadPromo();n }nn ionViewDidLeave() {n this.events.unsubscribe('promoLoaded');n }nnnn loadPromo() {n let loader = this.loadingCtrl.create({n content: 'Loading Promos..'n });n loader.present();n this.productService.getPromoSlider();nn this.events.subscribe('promoLoaded', () => {n this.promoSliders = this.productService.promos;n if(this.promoSliders.length>0){n this.promoImagesLoaded =true;n }n loader.dismiss();n })n }nnn}nn
nWe 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:
n
n
n nn n nn
n
nNow 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:
n
productRef = firebase.database().ref("products");nproducts:Array =[];n
n
nIn addition to the above code, we also need to add a method that will fetch products from firebase like so:
n
n
getProducts() {n this.productRef.once('value', (snap) => {n this.products = [];n if (snap.val()) {n var tempProducts = snap.val();n for (var key in tempProducts) {n let singleProduct = {n id:key,n category_id: tempProducts[key].category_id,n name: tempProducts[key].name,n images:tempProducts[key].images,n price:tempProducts[key].price,n rating:tempProducts[key].rating,n sale_price:tempProducts[key].sale_price,n short_description:tempProducts[key].short_description,n thumb:tempProducts[key].thumbn };nn this.products.push(singleProduct);n }n }n this.events.publish('productsLoaded');n });n }nn
n
nAdd the code below to the home.ts file like so:nn
n
loadProducts() {n this.productService.getProducts();n this.events.subscribe('productsLoaded', () => {n this.products = this.productService.products;n this.productRows = Array.from(Array(Math.ceil(this.products.length/2)).keys())n n })n }n
n
nThe full home.ts code should look like so:n
n
import { Component } from '@angular/core';nimport { IonicPage, NavController, NavParams, LoadingController, Events } from 'ionic-angular';nimport { ProductsProvider } from '../../providers/products/products';nnn@IonicPage()n@Component({n selector: 'page-home',n templateUrl: 'home.html',n})nexport class HomePage {n promoSliders: any[];n products: any[];n productRows:any;n promoImagesLoaded:boolean=false;n constructor(public navCtrl: NavController, public navParams: NavParams,n private productService: ProductsProvider,n private loadingCtrl: LoadingController,n private events: Events) {n }nn ionViewWillEnter() {n this.loadPromo();n this.loadProducts();n }nn ionViewDidLeave() {n this.events.unsubscribe('promoLoaded');n }nn ionViewDidLoad() {nn }nn loadPromo() {n let loader = this.loadingCtrl.create({n content: 'Loading Promos..'n });n loader.present();n this.productService.getPromoSlider();nn this.events.subscribe('promoLoaded', () => {n this.promoSliders = this.productService.promos;n if(this.promoSliders.length>0){n this.promoImagesLoaded =true;n }n loader.dismiss();n })n }nn loadProducts() {n this.productService.getProducts();n this.events.subscribe('productsLoaded', () => {n this.products = this.productService.products;n this.productRows = Array.from(Array(Math.ceil(this.products.length/2)).keys())n n })n }nn nn}nn
n
n
n
n
nAnd the full home.html page should be modify to look like so:n
n
n nnn n nHome nn nn nn n nn n nn nn nn nn
n {{product.price | currency:'USD':true:'1.2-2'}}n nnn n
n
nIn the next post we will implement the single product page and the cart system.