Lec 49

Author: samarthagarwal

src/pages/search/search.html

@@ -7,7 +7,7 @@
 <ion-header>
 
   <ion-navbar>
-    <ion-title>Search</ion-title>
+    <ion-title>Search : {{ searchQuery }}</ion-title>
   </ion-navbar>
 
 </ion-header>
@@ -47,4 +47,7 @@ <h2> {{ product.title }} </h2>
       </button>
     </ion-item>
   </ion-list>
+   <ion-infinite-scroll (ionInfinite)="loadMoreProducts($event)">
+    <ion-infinite-scroll-content></ion-infinite-scroll-content>
+  </ion-infinite-scroll>
 </ion-content>

src/pages/search/search.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NavController, NavParams } from 'ionic-angular';
+import { NavController, NavParams, ToastController } from 'ionic-angular';
 import * as WC from 'woocommerce-api';
 
 @Component({
@@ -11,8 +11,9 @@ export class SearchPage {
   searchQuery: string = "";
   WooCommerce: any;
   products: any[] = [];
+  page: number = 2;
 
-  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  constructor(public navCtrl: NavController, public navParams: NavParams, public toastCtrl: ToastController) {
     console.log(this.navParams.get("searchQuery"));
     this.searchQuery = this.navParams.get("searchQuery");
 
@@ -33,4 +34,25 @@ export class SearchPage {
     console.log('ionViewDidLoad SearchPage');
   }
 
+  loadMoreProducts(event){
+
+    this.WooCommerce.getAsync("products?filter[q]=" + this.searchQuery + "&page=" + this.page).then((searchData) => {
+      this.products = this.products.concat(JSON.parse(searchData.body).products);
+
+      if(JSON.parse(searchData.body).products.length < 10){
+        event.enable(false);
+
+        this.toastCtrl.create({
+          message: "No more products!",
+          duration: 5000
+        }).present();
+
+      }
+
+      event.complete();
+      this.page ++;
+
+    });
+  }
+
 }