product

src/app/productlist/productlist.page.html

@@ -75,10 +75,8 @@
 
     </div>
 </ion-content>
-
-
 <div class="search_item_list" *ngIf="searchShow" [@slideInOut]>
-    <ul>
-        <li>sample</li>
+        <ul *ngIf="searchService.searchList">
+            <li *ngFor="let search of searchService.searchList" (click)="viewPage(search)">{{search.text}}</li>
         </ul>
-</div>
\ No newline at end of file
+    </div>
\ No newline at end of file

src/app/productlist/productlist.page.ts

-import { Component, OnInit } from "@angular/core";
-import { Location } from "@angular/common";
-import { trigger, transition, animate, style } from "@angular/animations";
-import { Router, ActivatedRoute, NavigationExtras } from "@angular/router";
-import { ProductsService } from "./../../config/products.service";
-import { ServiceService } from "./../../config/service.service";
+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router, ActivatedRoute, NavigationExtras } from '@angular/router';
+import { ProductsService } from './../../config/products.service';
+import { ServiceService } from './../../config/service.service';
+import { SearchService } from './../../config/search.service';
 
 @Component({
-  selector: "app-productlist",
-  templateUrl: "./productlist.page.html",
-  styleUrls: ["./productlist.page.scss"],
+  selector: 'app-productlist',
+  templateUrl: './productlist.page.html',
+  styleUrls: ['./productlist.page.scss'],
   animations: [
-    trigger("slideInOut", [
-      transition(":enter", [
-        style({ transform: "translateY(100%)" }),
-        animate("200ms ease-in", style({ transform: "translateY(0%)" }))
+    trigger('slideInOut', [
+      transition(':enter', [
+        style({ transform: 'translateY(100%)' }),
+        animate('200ms ease-in', style({ transform: 'translateY(0%)' }))
       ]),
-      transition(":leave", [
-        animate("200ms ease-out", style({ transform: "translateY(100%)" }))
+      transition(':leave', [
+        animate('200ms ease-out', style({ transform: 'translateY(100%)' }))
       ])
     ])
   ]
@@ -33,9 +34,10 @@ export class ProductlistPage implements OnInit {
     private route: ActivatedRoute,
     private location: Location,
     public prodService: ProductsService,
-    public service: ServiceService
+    public service: ServiceService,
+    public searchService: SearchService
   ) {
-    this.service.get("params").then(val => {
+    this.service.get('params').then(val => {
       this.data = val;
       console.log(this.data);
       this.prodService.prodList(this.data.uid);
@@ -72,7 +74,7 @@ export class ProductlistPage implements OnInit {
 
   prodDetails(index: number) {
     this.prodService.setProd(this.prodService.product[index]);
-    this.router.navigateByUrl("productdetail");
+    this.router.navigateByUrl('productdetail');
     document.body.scrollTop = document.documentElement.scrollTop = 0;
   }
 
@@ -82,10 +84,10 @@ export class ProductlistPage implements OnInit {
     console.log(this.prodService.fav);
     if (state > -1) {
       this.prodService.fav.splice(state, 1);
-      this.prodService.changeFav(index, "yes");
+      this.prodService.changeFav(index, 'yes');
     } else {
       this.prodService.fav.push(index);
-      this.prodService.changeFav(index, "no");
+      this.prodService.changeFav(index, 'no');
     }
     return;
     console.log(this.prodService.fav);
@@ -103,6 +105,34 @@ export class ProductlistPage implements OnInit {
 
   checkFavStatus(index) {
     const state = this.prodService.fav.findIndex(x => x === index);
-    return state > -1 ? "fav_fill" : "fav_icon";
+    return state > -1 ? 'fav_fill' : 'fav_icon';
+  }
+
+  searchFun(data: string) {
+    this.searchService.search(data);
+  }
+
+  viewPage(datas: any) {
+    console.log(datas);
+    let data;
+    let url;
+    if (datas.type === 'shopper') {
+      data = datas.data;
+      this.service.set('params', data);
+      url = 'productlist';
+    } else if (datas.type === 'category') {
+      data = datas.data;
+      this.service.set('params', data);
+      url = 'catstorelist';
+    } else {
+      data = datas.data;
+      data.size = this.service.splitSep(data.size);
+      data.tag = this.service.splitSep(data.tag);
+      (data.color = this.service.splitSep(data.color)), (url = 'productdetail');
+      this.prodService.setProd(data);
+    }
+    this.searchClose();
+    this.router.navigateByUrl(url, { queryParams: data });
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
   }
 }