Merge branch 'jensa' into 'master'

package-lock.json

@@ -400,14 +400,12 @@
             "balanced-match": {
               "version": "1.0.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -422,20 +420,17 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "concat-map": {
               "version": "0.0.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -552,8 +547,7 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "ini": {
               "version": "1.3.5",
@@ -565,7 +559,6 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -580,7 +573,6 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -588,14 +580,12 @@
             "minimist": {
               "version": "0.0.8",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -614,7 +604,6 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -695,8 +684,7 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -708,7 +696,6 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -830,7 +817,6 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -2590,7 +2576,7 @@
     },
     "camelcase-keys": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
       "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
       "requires": {
         "camelcase": "^2.0.0",
@@ -4322,14 +4308,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4344,20 +4328,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4474,8 +4455,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4487,7 +4467,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4502,7 +4481,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4510,14 +4488,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -4536,7 +4512,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4617,8 +4592,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4630,7 +4604,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4752,7 +4725,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4976,14 +4948,12 @@
     },
     "handlebars": {
       "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.1.tgz",
-      "integrity": "sha512-3Zhi6C0euYZL5sM0Zcy7lInLXKQ+YLcF/olbN010mzGQ4XVm50JeyBnMqofHh696GrciGruC7kCcApPDJvVgwA==",
+      "resolved": "",
       "dev": true,
       "requires": {
         "neo-async": "^2.6.0",
         "optimist": "^0.6.1",
-        "source-map": "^0.6.1",
-        "uglify-js": "^3.1.4"
+        "source-map": "^0.6.1"
       },
       "dependencies": {
         "source-map": {
@@ -6409,7 +6379,7 @@
     },
     "load-json-file": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
       "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
       "requires": {
         "graceful-fs": "^4.1.2",
@@ -6421,7 +6391,7 @@
       "dependencies": {
         "pify": {
           "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
         }
       }
@@ -6759,7 +6729,7 @@
     },
     "meow": {
       "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+      "resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
       "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
       "requires": {
         "camelcase-keys": "^2.0.0",
@@ -6776,7 +6746,7 @@
       "dependencies": {
         "minimist": {
           "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
         }
       }
@@ -7118,6 +7088,14 @@
       "resolved": "https://registry.npmjs.org/ngx-google-places-autocomplete/-/ngx-google-places-autocomplete-2.0.3.tgz",
       "integrity": "sha512-AFwgwQeHPW16l7TWE/8qpOlQ4zbQ9uvApqb3zCIWyENc2kaD+xkuMO+OOORO2DvFmjQJz5maOQxlH5JQiOlrAg=="
     },
+    "ngx-infinite-scroll": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/ngx-infinite-scroll/-/ngx-infinite-scroll-7.1.0.tgz",
+      "integrity": "sha512-uytsKxUgGcPQjYMcf7FObcducQHkEsilPHZGJ3AMhOM4mtxP+YramnXXdyp2thEcuMgfNr9fBJjYnP0YcJciEQ==",
+      "requires": {
+        "opencollective-postinstall": "^2.0.2"
+      }
+    },
     "ngx-malihu-scrollbar": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/ngx-malihu-scrollbar/-/ngx-malihu-scrollbar-7.0.0.tgz",
@@ -7178,7 +7156,7 @@
       "dependencies": {
         "semver": {
           "version": "5.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
           "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8="
         }
       }
@@ -7262,7 +7240,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "requires": {
             "ansi-styles": "^2.2.1",
@@ -7279,7 +7257,7 @@
         },
         "supports-color": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
           "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
         }
       }
@@ -7520,6 +7498,11 @@
         "is-wsl": "^1.1.0"
       }
     },
+    "opencollective-postinstall": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz",
+      "integrity": "sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw=="
+    },
     "opn": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz",
@@ -7569,7 +7552,7 @@
     },
     "os-locale": {
       "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+      "resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
       "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
       "requires": {
         "lcid": "^1.0.0"
@@ -8435,7 +8418,7 @@
         },
         "pify": {
           "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
         }
       }
@@ -8859,7 +8842,7 @@
       "dependencies": {
         "source-map": {
           "version": "0.4.4",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "resolved": "http://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
           "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
           "requires": {
             "amdefine": ">=0.0.4"
@@ -9834,12 +9817,12 @@
       "dev": true
     },
     "tar": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
-      "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
+      "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
       "requires": {
         "block-stream": "*",
-        "fstream": "^1.0.2",
+        "fstream": "^1.0.12",
         "inherits": "2"
       }
     },
@@ -10312,33 +10295,6 @@
       "integrity": "sha1-tlQ6g8/Iwr77P0yPumiW9bDJvmg=",
       "dev": true
     },
-    "uglify-js": {
-      "version": "3.5.15",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.5.15.tgz",
-      "integrity": "sha512-fe7aYFotptIddkwcm6YuA0HmknBZ52ZzOsUxZEdhhkSsz7RfjHDX2QDxwKTiv4JQ5t5NhfmpgAK+J7LiDhKSqg==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "commander": "~2.20.0",
-        "source-map": "~0.6.1"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "2.20.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz",
-          "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==",
-          "dev": true,
-          "optional": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
     "ultron": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ultron/-/ultron-1.1.1.tgz",

package.json

@@ -41,6 +41,7 @@
     "ngx-carousel": "^1.3.5",
     "ngx-gallery": "^5.9.1",
     "ngx-google-places-autocomplete": "^2.0.3",
+    "ngx-infinite-scroll": "^7.1.0",
     "ngx-malihu-scrollbar": "^7.0.0",
     "ngx-slick": "^0.2.1",
     "node-sass": "^4.12.0",

src/app/purchase/orders/orders.component.html

@@ -2,100 +2,44 @@
   <div class="container-fluid">
       <app-searchbar>
       </app-searchbar>
+    <div class="loader_overlay" *ngIf="loader"></div>
       <div class="myorder_wrapper">
-        <ul>
-          <li>
+        <ul *ngIf="bookedData" infiniteScroll  [infiniteScrollDistance]="2"  [infiniteScrollThrottle]="50"  (scrolled)="onScroll()" [scrollWindow]="false" style="max-height: 700px; overflow: scroll">
+          <li *ngFor="let book of bookedData">
             <div class="row">
               <div class="col-md-6">
                 <div class="auto_part_container">
-                  <img src="/assets/images/asset_product.png">
+                    <img src="{{imageServer + book.product_image}}" onerror="this.src='assets/images/user_avatar.jpg'">
                 </div>
                 <div class="auto_part_detail">
-                  <h2>Apollo Amazer 4G Tubeless 4 Wheeler</h2>
-                  <h3>Audi Q7</h3>
+                  <h2>{{book.product_name}}</h2>
+                  <h3>{{book.short_description}}</h3>
                   <div class="others">
-                    <h4><div>Color</div><span>Black</span></h4>
-                    <h4><div>Quantity</div><span>1</span></h4>
+                    <!-- <h4><div>Color</div><span>Black</span></h4> -->
+                    <h4><div>Quantity</div><span>{{book.quantity}}</span></h4>
                   </div>
-                    <h4><span>ORID102154896541</span><strong (click)="goToPage('track')">Track Order</strong></h4>
-                    <h4><div style="width:auto !important;">Ordered On</div><span>Mon, Jan 14th 2019</span></h4>
+                    <h4><span>{{book.format_order_id}}</span><strong (click)="trackOrder(book.transId)" *ngIf="(book.status == '2' || book.status == '3' || book.status == '4' || book.status == '5')">Track Order</strong></h4>
+                    <h4><div style="width:auto !important;">Ordered On</div><span>{{book.datetime | date: "EEE, MMMM dd, yyyy"}}</span></h4>
                 </div>
                 <div class="clear"></div>
               </div>
               <div class="col-md-6">
                 <div class="price_details">
-                  <h5>$ 3,200</h5>
-                  <h4>Delivery expected by Thu, Apr 25th 2019<br>
-                    <div>Your item has been Shipped</div>
-                    
+                  <h5>$ {{book.amount}}</h5>
+                  <h4 *ngIf="( book.status == '2' || book.status == '3' || book.status == '4')">{{book.expected_delivery == null || book.expected_delivery == '' ? 'Your Expected Delivery date will Update soon': 'Delivery expected by '+ (book.expected_delivery | date: "EEE, MMMM dd, yyyy") }}<br>
+                    <div *ngIf="book.status == '2'">Your Order is Placed</div>
+                    <div *ngIf="book.status == '3'">Your item is Packed</div>
+                    <div *ngIf="book.status == '4'">Your item has been Shipped</div>
                   </h4>
-                  <div class="cancel">Cancel Item</div>
-                  <div class="clear"></div>
-
-                </div>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div class="row">
-              <div class="col-md-6">
-                <div class="auto_part_container">
-                  <img src="/assets/images/asset_product.png">
-                </div>
-                <div class="auto_part_detail">
-                  <h2>Apollo Amazer 4G Tubeless 4 Wheeler</h2>
-                  <h3>Audi Q7</h3>
-                  <div class="others">
-                    <h4><div>Color</div><span>Black</span></h4>
-                    <h4><div>Quantity</div><span>1</span></h4>
-                  </div>
-                    <h4><span>ORID102154896541</span><strong (click)="goToPage('track')">Track Order</strong></h4>
-                    <h4><div style="width:auto !important;">Ordered On</div><span>Mon, Jan 14th 2019</span></h4>
-                </div>
-                <div class="clear"></div>
-              </div>
-              <div class="col-md-6">
-                <div class="price_details">
-                  <h5>$ 3,200</h5>
-                  <h4>Delivery expected by Thu, Apr 25th 2019<br>
-                    <div>Your item has been Shipped</div>
-                    
+                  <h4 *ngIf="( book.status == '5' || book.status == '6')">{{book.delivered == null || book.delivered == '' ? 'Order Delivered date will Update soon' : 'Delivered on '+ (book.delivered | date: "EEE, MMMM dd, yyyy") }}<br>
+                    <div *ngIf="book.status == '5'">Your Order is Delivered</div>
+                    <div *ngIf="book.status == '6'">Your item is Returned</div>
                   </h4>
-                  <div class="review">Write Review</div>
-                  <div class="clear"></div>
-
-                </div>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div class="row">
-              <div class="col-md-6">
-                <div class="auto_part_container">
-                  <img src="/assets/images/asset_product.png">
-                </div>
-                <div class="auto_part_detail">
-                  <h2>Apollo Amazer 4G Tubeless 4 Wheeler</h2>
-                  <h3>Audi Q7</h3>
-                  <div class="others">
-                    <h4><div>Color</div><span>Black</span></h4>
-                    <h4><div>Quantity</div><span>1</span></h4>
-                  </div>
-                    <h4><span>ORID102154896541</span><strong (click)="goToPage('track')">Track Order</strong></h4>
-                    <h4><div style="width:auto !important;">Ordered On</div><span>Mon, Jan 14th 2019</span></h4>
-                </div>
-                <div class="clear"></div>
-              </div>
-              <div class="col-md-6">
-                <div class="price_details">
-                  <h5>$ 3,200</h5>
-                  <h4>Delivery expected by Thu, Apr 25th 2019<br>
-                    <div>Your item has been Shipped</div>
-                    
+                  <h4 *ngIf = "book.status == '7'">
+                    <div *ngIf="book.status == '7'">This item is Canceled</div>
                   </h4>
-                  <div class="cancelled">Cancelled</div>
+                  <div class="cancel" *ngIf="(book.status == '2' || book.status == '3'|| book.status == '4')" (click)="cancelOrder(book.order_id)">Cancel Item</div>
                   <div class="clear"></div>
-
                 </div>
               </div>
             </div>
@@ -104,396 +48,33 @@
       </div>
   </div>
   <div class="bottom_product_list">
-    <h4>Audi Q7 <span>( Similar Results )</span></h4>
-    <ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()">
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
+    <!-- <h4>Audi Q7 <span>( Similar Results )</span></h4> -->
+    <div class="loader_overlay" *ngIf="trend_loader"></div>
+    <ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()"  *ngIf="trendingProductData">
+      <ngx-tile NgxCarouselItem *ngFor="let prdt of trendingProductData">
+        <li (click)="latestPrdtDtls(prdt.product_id)">
           <div class="inner_div_product">
               <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
+                <img src="{{imageServer + prdt.product_image}}" onerror="this.src='assets/images/user_avatar.jpg'">
               </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
+              <h5>{{prdt.product_name}}</h5>
+              <p>{{prdt.short_description}}</p>
               <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                  <fieldset class="rating"  *ngIf="prdt.rating > 0">
+                    <input type="radio" [checked]="(prdt.rating >= 4.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_5'" [attr.name]="'thirdStarName_'+prdt.product_id" value="5" /><label class = "full" for="thirdStar5"></label>
+                    <input type="radio" [checked]="(prdt.rating >= 4.25 && prdt.rating < 4.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_4half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="4.5" /><label class="half" for="thirdStar4half"></label>
+                    <input type="radio" [checked]="(prdt.rating >= 3.75 && prdt.rating < 4.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_4'" [attr.name]="'thirdStarName_'+prdt.product_id" value="4" /><label class = "full" for="thirdStar4"></label>
+                    <input type="radio" [checked]="(prdt.rating >= 3.25 && prdt.rating < 3.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_3half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="3.5" /><label class="half" for="thirdStar3half"></label>
+                    <input type="radio" [checked]="(prdt.rating >= 2.75 && prdt.rating < 3.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_3'" [attr.name]="'thirdStarName_'+prdt.product_id" value="3" /><label class = "full" for="thirdStar3"></label>
+                    <input type="radio" [checked]="(prdt.rating >= 2.25 && prdt.rating < 2.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_2half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="2.5" /><label class="half" for="thirdStar2half"></label>
+                    <input type="radio" [checked]="(prdt.rating >= 1.75 && prdt.rating < 2.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_2'" [attr.name]="'thirdStarName_'+prdt.product_id" value="2" /><label class = "full" for="thirdStar2"></label>
+                    <input type="radio" [checked]="(prdt.rating >= 1.25 && prdt.rating < 1.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_1half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="1.5" /><label class="half" for="thirdStar1half"></label>
+                    <input type="radio" [checked]="(prdt.rating >= 0.75 && prdt.rating < 1.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_1'" [attr.name]="'thirdStarName_'+prdt.product_id" value="1" /><label class = "full" for="thirdStar1"></label>
+                    <input type="radio" [checked]="(prdt.rating < 0.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="0.5" /><label class="half" for="thirdStarhalf"></label>
                   </fieldset>
-                  <span class="floatRight">$320</span>
+                  <span class="floatRight">$ {{prdt.amount}}</span>
                   <div class="clear"></div>
-                  <p>21 Reviews</p>
+                  <p>{{prdt.reviews}}  Reviews</p>
               </div>
           </div>
       </li>

src/app/purchase/orders/orders.component.scss

@@ -3,6 +3,9 @@
             width:100%;
             ul{
                 padding:0px;
+                &::-webkit-scrollbar {
+                    display: none;
+                }
                 li{
                     list-style: none;
                     background: #fff;

src/app/purchase/orders/orders.component.ts

 import { Component, OnInit } from '@angular/core';
 import { NgxCarousel } from 'ngx-carousel';
+import { WebService } from '../../provider/web.service';
+import { ImageStorage } from '../../../environments/server.config';
 import { Router,ActivatedRoute } from '@angular/router';
 
 @Component({
@@ -8,21 +10,106 @@ import { Router,ActivatedRoute } from '@angular/router';
   styleUrls: ['./orders.component.scss']
 })
 export class OrdersComponent implements OnInit {
+
+  page: number = 1;
+  total_page: number = 1;
+  loader:boolean;
+  loginDetails:any;
+  bookedData: any;
+  imageServer: string;
+  trend_loader:boolean;
+  trendingProductData:any;
+
   public carouselTile: NgxCarousel;
+
   constructor(
     private router        : Router, 
-    private route         : ActivatedRoute
+    private route         : ActivatedRoute,
+    public webService: WebService,
   ) { 
-    
+    this.loader = true;
+    this.trend_loader = true;
+    this.imageServer  = ImageStorage; 
   }
 
   ngOnInit() {
+    this.checkUserLogin();
+    this.getMyOrders();
+    this.trendingProducts();
     this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease'}
   }
+  
+  checkUserLogin(){
+    this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
+  }
+
+  getMyOrders(){
+    this.loader = true;
+    this.webService.post_data('getMyOrders',{"customer_id":this.loginDetails.customer_id,'page':this.page}).subscribe(response => {
+      if(response.status == 'success'){
+        this.total_page = response.meta.total_pages;
+        this.bookedData = response.data;
+      } else {
+        this.bookedData = false;
+      }
+      this.loader = false;
+    })
+  }
+
+  trackOrder(transId){
+    this.goToPage('track',{"ref":transId});
+  }
+
+  onScroll(){
+    if(this.total_page < this.page){
+      return false;
+    }
+
+    this.page += 1;    
+    this.trend_loader = true;
+    this.webService.post_data('getMyOrders',{"customer_id":this.loginDetails.customer_id,'page':this.page}).subscribe(response => {
+      if(response.status == 'success'){
+        let thisObj = this;
+        response.data.forEach(function(orderData,key) {
+          thisObj.bookedData.push(orderData);
+        });
+      }
+      this.trend_loader = false;
+    });
+  }
+
+  cancelOrder(odrId){
+    if(odrId < 0){
+      return false;
+    }
+    this.loader = true;
+    this.webService.post_data('cancelOrder',{"order_id":odrId}).subscribe(response => {
+      if(response.status == 'success'){
+        this.getMyOrders();
+      }
+      this.loader = false;
+    })
+  }
+
+  trendingProducts(){
+    this.trend_loader = true;
+    this.webService.get_data('getTrendingPrdts').subscribe(response => {
+      if(response.status == 'success'){
+        this.trendingProductData = response.data;
+      } else {
+        this.trendingProductData = false;
+      }
+      this.trend_loader = false;
+    });
+  }
+  
+  latestPrdtDtls(prdt_id){
+    this.goToPage('productdetails',{"product_id":prdt_id});
+  }
 
   goToPage(path,data=null){
-    this.router.navigateByUrl(path,{queryParams:data});
-    document.body.scrollTop = document.documentElement.scrollTop = 0;
+    this.router.navigate([path],{queryParams:  data});
+    document.body.scrollTop  =  document.documentElement.scrollTop  =  0;
   }
 
   carouselTileLoad(){ return ''; }

src/app/purchase/productdetails/productdetails.component.html

@@ -70,8 +70,9 @@
                         <div class="clear"></div>
                     </div>
                     <div class="rate_review" *ngIf="productDetails.reviews">
-                      <ul>
-                        <li *ngFor="let revws of productDetails.reviews">
+                      <div class="loader_overlay" *ngIf="review_loader"></div>
+                      <ul infiniteScroll  [infiniteScrollDistance]="2"  [infiniteScrollThrottle]="50"  (scrolled)="onScroll()" [scrollWindow]="false" style="max-height: 700px; overflow: scroll">
+                        <li *ngFor="let revws of reviewArray">
                           <div class="row">
                             <div class="col-md-9">
                                 <h4 class="pt0">{{revws.title}}</h4>
@@ -106,31 +107,32 @@
     </div>
   </div>
   <div class="bottom_product_list">
-    <ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()">
-      <ngx-tile NgxCarouselItem> <!-- LOOP THIS -->
-        <li (click)="goToPage('productdetails')">
+    <div class="loader_overlay" *ngIf="loader2"></div>
+    <ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()" *ngIf="trendingProductData">
+      <ngx-tile NgxCarouselItem *ngFor="let prdt of trendingProductData" >
+        <li (click)="latestPrdtDtls(prdt.product_id)">
           <div class="inner_div_product">
               <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
+                  <img src="{{imageServer + prdt.product_image}}" onerror="this.src='assets/images/user_avatar.jpg'">
               </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
+              <h5>{{prdt.product_name}}</h5>
+              <p>{{prdt.short_description}}</p>
               <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf"></label>
+                  <fieldset class="rating"  *ngIf="prdt.rating > 0">
+                    <input type="radio" [checked]="(prdt.rating >= 4.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_5'" [attr.name]="'thirdStarName_'+prdt.product_id" value="5" /><label class = "full" for="thirdStar5"></label>
+                    <input type="radio" [checked]="(prdt.rating >= 4.25 && prdt.rating < 4.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_4half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="4.5" /><label class="half" for="thirdStar4half"></label>
+                    <input type="radio" [checked]="(prdt.rating >= 3.75 && prdt.rating < 4.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_4'" [attr.name]="'thirdStarName_'+prdt.product_id" value="4" /><label class = "full" for="thirdStar4"></label>
+                    <input type="radio" [checked]="(prdt.rating >= 3.25 && prdt.rating < 3.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_3half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="3.5" /><label class="half" for="thirdStar3half"></label>
+                    <input type="radio" [checked]="(prdt.rating >= 2.75 && prdt.rating < 3.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_3'" [attr.name]="'thirdStarName_'+prdt.product_id" value="3" /><label class = "full" for="thirdStar3"></label>
+                    <input type="radio" [checked]="(prdt.rating >= 2.25 && prdt.rating < 2.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_2half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="2.5" /><label class="half" for="thirdStar2half"></label>
+                    <input type="radio" [checked]="(prdt.rating >= 1.75 && prdt.rating < 2.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_2'" [attr.name]="'thirdStarName_'+prdt.product_id" value="2" /><label class = "full" for="thirdStar2"></label>
+                    <input type="radio" [checked]="(prdt.rating >= 1.25 && prdt.rating < 1.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_1half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="1.5" /><label class="half" for="thirdStar1half"></label>
+                    <input type="radio" [checked]="(prdt.rating >= 0.75 && prdt.rating < 1.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_1'" [attr.name]="'thirdStarName_'+prdt.product_id" value="1" /><label class = "full" for="thirdStar1"></label>
+                    <input type="radio" [checked]="(prdt.rating < 0.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="0.5" /><label class="half" for="thirdStarhalf"></label>
                   </fieldset>
-                  <span class="floatRight">$320</span>
+                  <span class="floatRight">$ {{prdt.amount}}</span>
                   <div class="clear"></div>
-                  <p>21 Reviews</p>
+                  <p>{{prdt.reviews}} Reviews</p>
               </div>
           </div>
       </li>

src/app/purchase/productdetails/productdetails.component.scss

@@ -59,6 +59,9 @@
                 ul{
                     margin:0px;
                     padding: 0px;
+                    &::-webkit-scrollbar {
+                        display: none;
+                    }
                     li{
                         list-style: none;
                         border-bottom: 1px solid #eeeeee;

src/app/purchase/productdetails/productdetails.component.ts

@@ -15,6 +15,8 @@ import * as $ from 'jquery';
 export class ProductdetailsComponent implements OnInit {
   
   loader: boolean;
+  loader2:boolean;
+  review_loader:boolean;
   count:any;
   product_id: number;
   imageServer: string;
@@ -23,6 +25,10 @@ export class ProductdetailsComponent implements OnInit {
   galleryImages: NgxGalleryImage[];
   galleryOptions: NgxGalleryOptions[];
   loginDetails:any;
+  trendingProductData:any;
+  page: number = 1;
+  reviewArray:any = new Array();
+  total_page: number = 1;
 
   @ViewChild("indexLoginModal") loginModalRef: ElementRef;
 
@@ -33,6 +39,7 @@ export class ProductdetailsComponent implements OnInit {
               public subjectService : SubjectService) {
                 
     this.loader       = true;
+    this.loader2       = true;
     this.count        = 1;
     this.product_id   = 0;
     this.imageServer  = ImageStorage; 
@@ -61,6 +68,7 @@ export class ProductdetailsComponent implements OnInit {
     
     this.designModules();
     this.checkUserLogin();
+    this.trendingProducts();
   }
 
   checkUserLogin(){
@@ -71,12 +79,15 @@ export class ProductdetailsComponent implements OnInit {
   }
 
   getProductDetails(){
-    this.webService.post_data('SingleProductSearch',{"product_id":this.product_id}).subscribe(response => {
+    this.loader = true;
+    this.webService.post_data('SingleProductSearch',{"product_id":this.product_id,'page':this.page}).subscribe(response => {
       if(response.status == 'success'){
         let image: string = '';
         let imageArr: any[] = new Array();
         const thisObj = this;
         this.productDetails = response.data;
+        this.reviewArray = response.data.reviews.data;
+        this.total_page = response.data.reviews.meta.total_pages;
         console.log(response.data)
         if(this.productDetails.images.length > 0){
           thisObj.productDetails.images.forEach(function (data) {
@@ -95,6 +106,36 @@ export class ProductdetailsComponent implements OnInit {
     });
   }
 
+  onScroll(){
+    if(this.total_page < this.page){
+      return false;
+    }
+
+    this.page += 1;    
+    this.review_loader = true;
+    this.webService.post_data('SingleProductSearch',{"product_id":this.product_id,'page':this.page}).subscribe(response => {
+      if(response.status == 'success'){
+        let thisObj = this;
+        response.data.reviews.data.forEach(function(reviewData,key) {
+          thisObj.reviewArray.push(reviewData);
+        });
+      }
+      this.review_loader = false;
+    });
+  }
+
+  trendingProducts(){
+    this.loader2 = true;
+    this.webService.post_data('getTrendingPrdts',{'page':this.page}).subscribe(response => {
+      if(response.status == 'success'){
+        this.trendingProductData = response.data;
+      } else {
+        this.trendingProductData = false;
+      }
+      this.loader2 = false;
+    });
+  }
+
   buyProduct(amount){
     if(!this.loginDetails){
       this.loginModalRef.nativeElement.click();
@@ -104,6 +145,10 @@ export class ProductdetailsComponent implements OnInit {
     this.webService.setLocalStorageItem('productDetails', JSON.stringify(this.product_data));
     this.goToPage('address','');
   }
+
+  latestPrdtDtls(prdt_id){
+    this.goToPage('productdetails',{"product_id":prdt_id});
+  }
   
   goToPage(path,data=null){
     this.router.navigate([path],{queryParams:  data});

src/app/purchase/productlist/productlist.component.html

@@ -67,7 +67,7 @@
                 </div>
                 <div class="loader_overlay" *ngIf="loader"></div>
                 <div class="search_listing_content" *ngIf="productArray && productArray.length > 0;else noProductData">
-                    <ul>
+                    <ul infiniteScroll  [infiniteScrollDistance]="2"  [infiniteScrollThrottle]="50"  (scrolled)="onScroll()" [scrollWindow]="false" style="max-height: 700px; overflow: scroll">
                         <li *ngFor="let prdt of productArray">
                             <div class="inner_div_product cpoint" (click)="getSingleProductDetails(prdt.product_id)">
                                 <div class="product_wrapper">

src/app/purchase/productlist/productlist.component.scss

@@ -233,6 +233,9 @@
                 ul{
                     margin:0px;
                     padding:0px;
+                    &::-webkit-scrollbar {
+                        display: none;
+                    }
                     li{
                         list-style: none;
                         padding:10px;

src/app/purchase/productlist/productlist.component.ts

@@ -13,12 +13,15 @@ export class ProductlistComponent implements OnInit {
   loader: boolean;
   searchKey:string;
   imageServer: any;
-  productArray: any;
+  productArray: any[] = new Array();
   productBrand: any;
   brandArr: any[] = new Array();
   sliderMinvalue: number;
   sliderhighValue: number;
   slideroptions: Options;
+  page: number = 1;
+  total_page: number = 1;
+  filterParam: any = new Array();
 
   constructor(
     private router        : Router, 
@@ -26,13 +29,16 @@ export class ProductlistComponent implements OnInit {
     public webService     : WebService
   ){ 
     this.loader = true;
-    this.productArray = true;
+    this.productArray = [];
+    this.filterParam = {"key":'',"brand_id":Array(),"minPrice":'',"maxPrice":'','page':1};
 
     this.imageServer = ImageStorage;
     route.params.subscribe(val => {
       this.route.queryParams.subscribe(params => {
         this.searchKey = params['key'];
-        this.getProductDetails({"key":this.searchKey});
+        this.filterParam.key = this.searchKey;
+        this.filterParam.page = this.page;
+        this.getProductDetails(this.filterParam);
       });
     });
     if(this.searchKey == ''){
@@ -51,14 +57,22 @@ export class ProductlistComponent implements OnInit {
     document.body.scrollTop  =  document.documentElement.scrollTop  =  0;
   }
 
-  getProductDetails(params:any = ''){
+  getProductDetails(params:any = Array()){
     this.loader = true;
     this.webService.post_data('productSearch',params).subscribe(response => {
       if(response.status == 'success'){
-        console.log(response.data);
-        this.productArray = response.data;
+        this.total_page = response.meta.total_pages;
+        if(params.page == 1){
+          this.productArray = response.data;
+        } else {
+          let thisObj = this;
+          response.data.forEach(function(product,key) {
+            thisObj.productArray.push(product);
+          });
+        }
+
       } else {
-        this.productArray = false;
+        this.productArray = [];
       }
       this.loader = false;
     });
@@ -75,6 +89,15 @@ export class ProductlistComponent implements OnInit {
     });
   }
 
+  onScroll(){
+    if(this.total_page == this.page){
+      return false;
+    }
+    this.page += 1;
+    this.filterParam.page = this.page;
+    this.getProductDetails(this.filterParam);
+  }
+
   getSingleProductDetails(prdt_id){
     this.goToPage('productdetails',{"product_id":prdt_id});
   }
@@ -88,10 +111,17 @@ export class ProductlistComponent implements OnInit {
         this.brandArr.splice(id, 1);
       }
     }
-    this.getProductDetails({"key":this.searchKey,"brand_id":this.brandArr});
+    this.page = 1;
+    this.filterParam.page = this.page;
+    this.filterParam.brand_id = this.brandArr;
+    this.getProductDetails(this.filterParam);
   }
 
   getPrice(low,top){
-    this.getProductDetails({"key":this.searchKey,"brand_id":this.brandArr,"minPrice":low,"maxPrice":top});
+    this.page = 1;
+    this.filterParam.page = this.page;
+    this.filterParam.minPrice = low;
+    this.filterParam.maxPrice = top;
+    this.getProductDetails(this.filterParam);
   }
 }

src/app/purchase/purchase-home/purchase-home.component.html

 <div class="purchase_wrapper">
-  <div class="container-fluid">
-      <app-searchbar>
-      </app-searchbar>
-      <div class="purchase_content_wrapper">
-          <div class="purchase_content_section">
-              <div class="search_list_header">
-                  <div class="row">
-                      <div class="col-md-8">
-                          <p>Showing 1 -40 of 202 results for "Audi tyres"</p>
-                      </div>
-                      <div class="col-md-4">
-                          <select class="floatRight">
-                              <option>Select by popularity</option>
-                              <option>Select by price</option>
-                          </select>
-                          <div class="clear"></div>
-                      </div>
-                  </div>
-              </div>
-              <div class="search_listing_content">
-                  <ul>
-                      <li (click)="goToPage('productdetails')">
-                          <div class="inner_div_product">
-                              <div class="product_wrapper">
-                                      <img src="/assets/images/asset_product.png">
-                              </div>
-                              <h5>JK Victory Wheelers type</h5>
-                              <p>265/65 R17, Tubeless</p>
-                              <div class="star_ratting">
-                                  <fieldset class="rating">
-                                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                                  </fieldset>
-                                  <span class="floatRight">$320</span>
-                                  <div class="clear"></div>
-                                  <p>21 Reviews</p>
-                              </div>
-                          </div>
-                      </li>
-                      <li (click)="goToPage('productdetails')">
-                              <div class="inner_div_product">
-                                  <div class="product_wrapper">
-                                          <img src="/assets/images/asset_product.png">
-                                  </div>
-                                  <h5>JK Victory Wheelers type</h5>
-                                  <p>265/65 R17, Tubeless</p>
-                                  <div class="star_ratting">
-                                      <fieldset class="rating">
-                                          <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                          <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                          <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                          <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                          <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                          <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                          <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                          <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                          <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                          <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                                      </fieldset>
-                                      <span class="floatRight">$320</span>
-                                      <div class="clear"></div>
-                                      <p>21 Reviews</p>
-                                  </div>
-                              </div>
-                          </li>
-                          <li (click)="goToPage('productdetails')">
-                                  <div class="inner_div_product">
-                                      <div class="product_wrapper">
-                                              <img src="/assets/images/asset_product.png">
-                                      </div>
-                                      <h5>JK Victory Wheelers type</h5>
-                                      <p>265/65 R17, Tubeless</p>
-                                      <div class="star_ratting">
-                                          <fieldset class="rating">
-                                              <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                              <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                              <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                              <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                              <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                              <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                              <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                              <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                              <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                              <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                                          </fieldset>
-                                          <span class="floatRight">$320</span>
-                                          <div class="clear"></div>
-                                          <p>21 Reviews</p>
-                                      </div>
-                                  </div>
-                              </li>
-                              <li (click)="goToPage('productdetails')">
-                                      <div class="inner_div_product">
-                                          <div class="product_wrapper">
-                                                  <img src="/assets/images/asset_product.png">
-                                          </div>
-                                          <h5>JK Victory Wheelers type</h5>
-                                          <p>265/65 R17, Tubeless</p>
-                                          <div class="star_ratting">
-                                              <fieldset class="rating">
-                                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                                              </fieldset>
-                                              <span class="floatRight">$320</span>
-                                              <div class="clear"></div>
-                                              <p>21 Reviews</p>
-                                          </div>
-                                      </div>
-                                  </li>
-                                  <li (click)="goToPage('productdetails')">
-                                          <div class="inner_div_product">
-                                              <div class="product_wrapper">
-                                                      <img src="/assets/images/asset_product.png">
-                                              </div>
-                                              <h5>JK Victory Wheelers type</h5>
-                                              <p>265/65 R17, Tubeless</p>
-                                              <div class="star_ratting">
-                                                  <fieldset class="rating">
-                                                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                                                  </fieldset>
-                                                  <span class="floatRight">$320</span>
-                                                  <div class="clear"></div>
-                                                  <p>21 Reviews</p>
-                                              </div>
-                                          </div>
-                                      </li>
-                                      <li>
-                                              <div class="inner_div_product">
-                                                  <div class="product_wrapper">
-                                                          <img src="/assets/images/asset_product.png">
-                                                  </div>
-                                                  <h5>JK Victory Wheelers type</h5>
-                                                  <p>265/65 R17, Tubeless</p>
-                                                  <div class="star_ratting">
-                                                      <fieldset class="rating">
-                                                          <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                                          <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                                          <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                                          <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                                          <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                                          <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                                          <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                                          <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                                          <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                                          <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                                                      </fieldset>
-                                                      <span class="floatRight">$320</span>
-                                                      <div class="clear"></div>
-                                                      <p>21 Reviews</p>
-                                                  </div>
-                                              </div>
-                                          </li>
-                                          <li>
-                                                  <div class="inner_div_product">
-                                                      <div class="product_wrapper">
-                                                              <img src="/assets/images/asset_product.png">
-                                                      </div>
-                                                      <h5>JK Victory Wheelers type</h5>
-                                                      <p>265/65 R17, Tubeless</p>
-                                                      <div class="star_ratting">
-                                                          <fieldset class="rating">
-                                                              <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                                              <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                                              <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                                              <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                                              <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                                              <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                                              <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                                              <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                                              <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                                              <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                                                          </fieldset>
-                                                          <span class="floatRight">$320</span>
-                                                          <div class="clear"></div>
-                                                          <p>21 Reviews</p>
-                                                      </div>
-                                                  </div>
-                                              </li>
-                                              <li>
-                                                      <div class="inner_div_product">
-                                                          <div class="product_wrapper">
-                                                                  <img src="/assets/images/asset_product.png">
-                                                          </div>
-                                                          <h5>JK Victory Wheelers type</h5>
-                                                          <p>265/65 R17, Tubeless</p>
-                                                          <div class="star_ratting">
-                                                              <fieldset class="rating">
-                                                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                                                              </fieldset>
-                                                              <span class="floatRight">$320</span>
-                                                              <div class="clear"></div>
-                                                              <p>21 Reviews</p>
-                                                          </div>
-                                                      </div>
-                                                  </li>
-                  </ul>
-              </div>
-              <div class="bottom_product_list">
-                <ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()">
-                  <ngx-tile NgxCarouselItem>
-                    <li (click)="goToPage('productdetails')">
-                      <div class="inner_div_product">
-                          <div class="product_wrapper">
-                                  <img src="/assets/images/asset_product.png">
-                          </div>
-                          <h5>JK Victory Wheelers type</h5>
-                          <p>265/65 R17, Tubeless</p>
-                          <div class="star_ratting">
-                              <fieldset class="rating">
-                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                              </fieldset>
-                              <span class="floatRight">$320</span>
-                              <div class="clear"></div>
-                              <p>21 Reviews</p>
-                          </div>
-                      </div>
-                  </li>
-                  </ngx-tile>
-                  <ngx-tile NgxCarouselItem>
-                    <li (click)="goToPage('productdetails')">
-                      <div class="inner_div_product">
-                          <div class="product_wrapper">
-                                  <img src="/assets/images/asset_product.png">
-                          </div>
-                          <h5>JK Victory Wheelers type</h5>
-                          <p>265/65 R17, Tubeless</p>
-                          <div class="star_ratting">
-                              <fieldset class="rating">
-                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                              </fieldset>
-                              <span class="floatRight">$320</span>
-                              <div class="clear"></div>
-                              <p>21 Reviews</p>
-                          </div>
-                      </div>
-                  </li>
-                  </ngx-tile>
-                  <ngx-tile NgxCarouselItem>
-                    <li (click)="goToPage('productdetails')">
-                      <div class="inner_div_product">
-                          <div class="product_wrapper">
-                                  <img src="/assets/images/asset_product.png">
-                          </div>
-                          <h5>JK Victory Wheelers type</h5>
-                          <p>265/65 R17, Tubeless</p>
-                          <div class="star_ratting">
-                              <fieldset class="rating">
-                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                              </fieldset>
-                              <span class="floatRight">$320</span>
-                              <div class="clear"></div>
-                              <p>21 Reviews</p>
-                          </div>
-                      </div>
-                  </li>
-                  </ngx-tile>
-                  <ngx-tile NgxCarouselItem>
-                    <li (click)="goToPage('productdetails')">
-                      <div class="inner_div_product">
-                          <div class="product_wrapper">
-                                  <img src="/assets/images/asset_product.png">
-                          </div>
-                          <h5>JK Victory Wheelers type</h5>
-                          <p>265/65 R17, Tubeless</p>
-                          <div class="star_ratting">
-                              <fieldset class="rating">
-                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                              </fieldset>
-                              <span class="floatRight">$320</span>
-                              <div class="clear"></div>
-                              <p>21 Reviews</p>
-                          </div>
-                      </div>
-                  </li>
-                  </ngx-tile>
-                  <ngx-tile NgxCarouselItem>
-                    <li (click)="goToPage('productdetails')">
-                      <div class="inner_div_product">
-                          <div class="product_wrapper">
-                                  <img src="/assets/images/asset_product.png">
-                          </div>
-                          <h5>JK Victory Wheelers type</h5>
-                          <p>265/65 R17, Tubeless</p>
-                          <div class="star_ratting">
-                              <fieldset class="rating">
-                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                              </fieldset>
-                              <span class="floatRight">$320</span>
-                              <div class="clear"></div>
-                              <p>21 Reviews</p>
-                          </div>
-                      </div>
-                  </li>
-                  </ngx-tile>
-                  <ngx-tile NgxCarouselItem>
-                    <li (click)="goToPage('productdetails')">
-                      <div class="inner_div_product">
-                          <div class="product_wrapper">
-                                  <img src="/assets/images/asset_product.png">
-                          </div>
-                          <h5>JK Victory Wheelers type</h5>
-                          <p>265/65 R17, Tubeless</p>
-                          <div class="star_ratting">
-                              <fieldset class="rating">
-                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                              </fieldset>
-                              <span class="floatRight">$320</span>
-                              <div class="clear"></div>
-                              <p>21 Reviews</p>
-                          </div>
-                      </div>
-                  </li>
-                  </ngx-tile>
-                  <ngx-tile NgxCarouselItem>
-                    <li (click)="goToPage('productdetails')">
-                      <div class="inner_div_product">
-                          <div class="product_wrapper">
-                                  <img src="/assets/images/asset_product.png">
-                          </div>
-                          <h5>JK Victory Wheelers type</h5>
-                          <p>265/65 R17, Tubeless</p>
-                          <div class="star_ratting">
-                              <fieldset class="rating">
-                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                              </fieldset>
-                              <span class="floatRight">$320</span>
-                              <div class="clear"></div>
-                              <p>21 Reviews</p>
-                          </div>
-                      </div>
-                  </li>
-                  </ngx-tile>
-                  <ngx-tile NgxCarouselItem>
-                    <li (click)="goToPage('productdetails')">
-                      <div class="inner_div_product">
-                          <div class="product_wrapper">
-                                  <img src="/assets/images/asset_product.png">
-                          </div>
-                          <h5>JK Victory Wheelers type</h5>
-                          <p>265/65 R17, Tubeless</p>
-                          <div class="star_ratting">
-                              <fieldset class="rating">
-                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                              </fieldset>
-                              <span class="floatRight">$320</span>
-                              <div class="clear"></div>
-                              <p>21 Reviews</p>
-                          </div>
-                      </div>
-                  </li>
-                  </ngx-tile>
-                  <ngx-tile NgxCarouselItem>
-                    <li (click)="goToPage('productdetails')">
-                      <div class="inner_div_product">
-                          <div class="product_wrapper">
-                                  <img src="/assets/images/asset_product.png">
-                          </div>
-                          <h5>JK Victory Wheelers type</h5>
-                          <p>265/65 R17, Tubeless</p>
-                          <div class="star_ratting">
-                              <fieldset class="rating">
-                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                              </fieldset>
-                              <span class="floatRight">$320</span>
-                              <div class="clear"></div>
-                              <p>21 Reviews</p>
-                          </div>
-                      </div>
-                  </li>
-                  </ngx-tile>
-                  <ngx-tile NgxCarouselItem>
-                    <li (click)="goToPage('productdetails')">
-                      <div class="inner_div_product">
-                          <div class="product_wrapper">
-                                  <img src="/assets/images/asset_product.png">
-                          </div>
-                          <h5>JK Victory Wheelers type</h5>
-                          <p>265/65 R17, Tubeless</p>
-                          <div class="star_ratting">
-                              <fieldset class="rating">
-                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                              </fieldset>
-                              <span class="floatRight">$320</span>
-                              <div class="clear"></div>
-                              <p>21 Reviews</p>
-                          </div>
-                      </div>
-                  </li>
-                  </ngx-tile>
-                  <ngx-tile NgxCarouselItem>
-                    <li (click)="goToPage('productdetails')">
-                      <div class="inner_div_product">
-                          <div class="product_wrapper">
-                                  <img src="/assets/images/asset_product.png">
-                          </div>
-                          <h5>JK Victory Wheelers type</h5>
-                          <p>265/65 R17, Tubeless</p>
-                          <div class="star_ratting">
-                              <fieldset class="rating">
-                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                              </fieldset>
-                              <span class="floatRight">$320</span>
-                              <div class="clear"></div>
-                              <p>21 Reviews</p>
-                          </div>
-                      </div>
-                  </li>
-                  </ngx-tile>
-                  <ngx-tile NgxCarouselItem>
-                    <li (click)="goToPage('productdetails')">
-                      <div class="inner_div_product">
-                          <div class="product_wrapper">
-                                  <img src="/assets/images/asset_product.png">
-                          </div>
-                          <h5>JK Victory Wheelers type</h5>
-                          <p>265/65 R17, Tubeless</p>
-                          <div class="star_ratting">
-                              <fieldset class="rating">
-                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                              </fieldset>
-                              <span class="floatRight">$320</span>
-                              <div class="clear"></div>
-                              <p>21 Reviews</p>
-                          </div>
-                      </div>
-                  </li>
-                  </ngx-tile>
-                  <ngx-tile NgxCarouselItem>
-                    <li (click)="goToPage('productdetails')">
-                      <div class="inner_div_product">
-                          <div class="product_wrapper">
-                                  <img src="/assets/images/asset_product.png">
-                          </div>
-                          <h5>JK Victory Wheelers type</h5>
-                          <p>265/65 R17, Tubeless</p>
-                          <div class="star_ratting">
-                              <fieldset class="rating">
-                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                              </fieldset>
-                              <span class="floatRight">$320</span>
-                              <div class="clear"></div>
-                              <p>21 Reviews</p>
-                          </div>
-                      </div>
-                  </li>
-                  </ngx-tile>
-                  <ngx-tile NgxCarouselItem>
-                    <li (click)="goToPage('productdetails')">
-                      <div class="inner_div_product">
-                          <div class="product_wrapper">
-                                  <img src="/assets/images/asset_product.png">
-                          </div>
-                          <h5>JK Victory Wheelers type</h5>
-                          <p>265/65 R17, Tubeless</p>
-                          <div class="star_ratting">
-                              <fieldset class="rating">
-                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                              </fieldset>
-                              <span class="floatRight">$320</span>
-                              <div class="clear"></div>
-                              <p>21 Reviews</p>
-                          </div>
-                      </div>
-                  </li>
-                  </ngx-tile>
-                  <button NgxCarouselPrev class='leftRs'>&lt;</button>
-                  <button NgxCarouselNext class='rightRs'>&gt;</button>
-              </ngx-carousel>
-              </div>
-              <hr>
-          </div>
-          <div class="clear"></div>
-      </div>
-  </div>
+    <div class="container-fluid">
+        <app-searchbar>
+        </app-searchbar>
+        <div class="purchase_content_wrapper">
+            <div class="purchase_content_section">
+                <div class="search_list_header">
+                    <div class="row">
+                        <div class="col-md-8">
+                            <p>Latest Products</p>
+                        </div>
+                        <!-- <div class="col-md-4">
+                            <select class="floatRight">
+                                <option>Select by popularity</option>
+                                <option>Select by price</option>
+                            </select>
+                            <div class="clear"></div>
+                        </div> -->
+                    </div>
+                </div>
+                <div class="bottom_product_list"> 
+                    <div class="loader_overlay" *ngIf="loader"></div>
+                    <ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()" *ngIf="latestProductData">
+                        <ngx-tile NgxCarouselItem *ngFor="let prdt of latestProductData">
+                            <li (click)="latestPrdtDtls(prdt.product_id)" >
+                                <div class="inner_div_product">
+                                    <div class="product_wrapper">
+                                        <img src="{{imageServer + prdt.product_image}}" onerror="this.src='assets/images/user_avatar.jpg'">
+                                    </div>
+                                    <h5>{{prdt.product_name}}</h5>
+                                    <p>{{prdt.short_description}}</p>
+                                    <div class="star_ratting">
+                                        <fieldset class="rating" *ngIf="prdt.rating > 0">
+                                            <input type="radio" [checked]="(prdt.rating >= 4.75) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_5'" [attr.name]="'usrStarName_'+prdt.product_id" value="5" /><label class = "full" for="secondStar5"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 4.25 && prdt.rating < 4.75) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_4half'" [attr.name]="'usrStarName_'+prdt.product_id" value="4.5" /><label class="half" for="secondStar4half"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 3.75 && prdt.rating < 4.25) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_4'" [attr.name]="'usrStarName_'+prdt.product_id" value="4" /><label class = "full" for="secondStar4"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 3.25 && prdt.rating < 3.75) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_3half'" [attr.name]="'usrStarName_'+prdt.product_id" value="3.5" /><label class="half" for="secondStar3half"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 2.75 && prdt.rating < 3.25) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_3'" [attr.name]="'usrStarName_'+prdt.product_id" value="3" /><label class = "full" for="secondStar3"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 2.25 && prdt.rating < 2.75) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_2half'" [attr.name]="'usrStarName_'+prdt.product_id" value="2.5" /><label class="half" for="secondStar2half"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 1.75 && prdt.rating < 2.25) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_2'" [attr.name]="'usrStarName_'+prdt.product_id" value="2" /><label class = "full" for="secondStar2"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 1.25 && prdt.rating < 1.75) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_1half'" [attr.name]="'usrStarName_'+prdt.product_id" value="1.5" /><label class="half" for="secondStar1half"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 0.75 && prdt.rating < 1.25) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_1'" [attr.name]="'usrStarName_'+prdt.product_id" value="1" /><label class = "full" for="secondStar1"></label>
+                                            <input type="radio" [checked]="(prdt.rating < 0.75) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_half'" [attr.name]="'usrStarName_'+prdt.product_id" value="0.5" /><label class="half" for="secondStarhalf"></label>
+                                        </fieldset>
+                                        <span class="floatRight">$ {{prdt.amount}}</span>
+                                        <div class="clear"></div>
+                                        <p>{{prdt.reviews}} Reviews</p>
+                                    </div>
+                                </div>
+                            </li>
+                        </ngx-tile>
+                        <button NgxCarouselPrev class='leftRs'>&lt;</button>
+                        <button NgxCarouselNext class='rightRs'>&gt;</button>
+                    </ngx-carousel>
+                </div>
+
+                <div class="search_listing_content">
+                    <div class="loader_overlay" *ngIf="trend_loader"></div>
+                    <div class="row">
+                        <div class="col-md-8">
+                            <p>Trending Products</p>
+                        </div>
+                    </div>
+                    <ul *ngIf="trendingProductData" 
+                        infiniteScroll  [infiniteScrollDistance]="2"  [infiniteScrollThrottle]="50"  (scrolled)="onScroll()" [scrollWindow]="false" style="max-height: 700px; overflow: scroll">
+                        <li (click)="latestPrdtDtls(prdt.product_id)"  *ngFor="let prdt of trendingProductData" >
+                            <div class="inner_div_product">
+                                <div class="product_wrapper">
+                                    <img src="{{imageServer + prdt.product_image}}" onerror="this.src='assets/images/user_avatar.jpg'">
+                                </div>
+                                <h5>{{prdt.product_name}}</h5>
+                                <p>{{prdt.short_description}}</p>
+                                <div class="star_ratting">
+                                    <fieldset class="rating" *ngIf="prdt.rating > 0">
+                                        <input type="radio" [checked]="(prdt.rating >= 4.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_5'" [attr.name]="'usrReviewName_'+prdt.product_id" value="5" /><label class = "full" for="secondStar5"></label>
+                                        <input type="radio" [checked]="(prdt.rating >= 4.25 && prdt.rating < 4.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_4half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="4.5" /><label class="half" for="secondStar4half"></label>
+                                        <input type="radio" [checked]="(prdt.rating >= 3.75 && prdt.rating < 4.25) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_4'" [attr.name]="'usrReviewName_'+prdt.product_id" value="4" /><label class = "full" for="secondStar4"></label>
+                                        <input type="radio" [checked]="(prdt.rating >= 3.25 && prdt.rating < 3.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_3half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="3.5" /><label class="half" for="secondStar3half"></label>
+                                        <input type="radio" [checked]="(prdt.rating >= 2.75 && prdt.rating < 3.25) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_3'" [attr.name]="'usrReviewName_'+prdt.product_id" value="3" /><label class = "full" for="secondStar3"></label>
+                                        <input type="radio" [checked]="(prdt.rating >= 2.25 && prdt.rating < 2.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_2half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="2.5" /><label class="half" for="secondStar2half"></label>
+                                        <input type="radio" [checked]="(prdt.rating >= 1.75 && prdt.rating < 2.25) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_2'" [attr.name]="'usrReviewName_'+prdt.product_id" value="2" /><label class = "full" for="secondStar2"></label>
+                                        <input type="radio" [checked]="(prdt.rating >= 1.25 && prdt.rating < 1.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_1half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="1.5" /><label class="half" for="secondStar1half"></label>
+                                        <input type="radio" [checked]="(prdt.rating >= 0.75 && prdt.rating < 1.25) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_1'" [attr.name]="'usrReviewName_'+prdt.product_id" value="1" /><label class = "full" for="secondStar1"></label>
+                                        <input type="radio" [checked]="(prdt.rating < 0.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="0.5" /><label class="half" for="secondStarhalf"></label>
+                                    </fieldset>
+                                    <span class="floatRight">$ {{prdt.amount}}</span>
+                                    <div class="clear"></div>
+                                    <p>{{prdt.reviews}} Reviews</p>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+                <hr>
+            </div>
+            <div class="clear"></div>
+        </div>
+    </div>
 </div>
 
 <button #failureModel class="hide" data-toggle="modal" data-target="#failure"></button>
 
 <div class="modal" id="failure">
-    <div class="modal-dialog modal-full">
-        <div class="modal-content login_modal_wrapper">
-                <div class="modal_close" data-dismiss="modal"> × </div>
-           <div class="modal-body quote_modal">
-               <div class="login_modal_content">
-                   <div class="login_modal_inner">
-                    <div class="login_success">
-                        <img src="assets/images/asset_error.png">
-                        <h4>Your Booking is failure</h4>
+    <div class="modal-dialog modal-sm">
+        <div class="modal-content login_modal_wrapper status_modal">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal">&times;</button>
+               
+              </div>
+            <div class="modal-body quote_modal">
+                <div class="login_modal_content">
+                    <div class="login_modal_inner">
+                        <div class="login_success">
+                            <img src="assets/images/asset_error.png">
+                            <h4>Your Booking is failure</h4>
+                        </div>
+                        
+                        <div class="row">
+                            <div class="col-md-12 textCenter">
+                                <button class="btn log_btn btn-block" data-dismiss="modal">Close</button>
+                            </div>
+                        </div>
                     </div>
-
-                       <div class="row">
-                           <div class="col-md-12 textCenter" style="padding-top:40px;">
-                                <button class="log_btn" data-dismiss="modal">Close</button>
-                           </div>
-                       </div>
-                   </div>
-               </div>
-           </div>
+                </div>
+            </div>
         </div>
     </div>
 </div>
\ No newline at end of file

src/app/purchase/purchase-home/purchase-home.component.scss

@@ -233,6 +233,9 @@
                 ul{
                     margin:0px;
                     padding:0px;
+                    &::-webkit-scrollbar {
+                        display: none;
+                    }
                     li{
                         list-style: none;
                         padding:10px;
@@ -470,4 +473,26 @@
             }
         }
     }
+}
+
+
+.status_modal{
+    border-radius: 0px;
+    .modal-header{
+        border:none;
+    }
+    .login_modal_inner{
+        img{
+            width:75px;
+        }
+        h4{
+            font-size:18px;
+        }
+        .log_btn{
+            background: #2655bf;
+            color: #fff;
+            border:none;
+            border-radius: 0px;
+        }
+    }
 }
\ No newline at end of file

src/app/purchase/purchase-home/purchase-home.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild,  ElementRef} from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
 import { WebService } from '../../provider/web.service';
 import { Options } from 'ng5-slider';
+import { ImageStorage } from '../../../environments/server.config';
 import { NgxCarousel } from 'ngx-carousel';
 
 @Component({
@@ -11,6 +12,14 @@ import { NgxCarousel } from 'ngx-carousel';
 })
 export class PurchaseHomeComponent implements OnInit {
   public carouselTile: NgxCarousel;
+  
+  page: number = 1;
+  loader:boolean;
+  total_page: number = 1;
+  imageServer: any;
+  trend_loader:boolean;
+  latestProductData:any;
+  trendingProductData:any;
 
   @ViewChild("failureModel") public failureModelRef: ElementRef;
   
@@ -18,7 +27,11 @@ export class PurchaseHomeComponent implements OnInit {
     private router        : Router, 
     private route         : ActivatedRoute,
     public webService     : WebService
-  ) { }
+  ) { 
+    this.loader = true;
+    this.trend_loader = true;
+    this.imageServer = ImageStorage;
+  }
 
   value: number = 40;
   highValue: number = 60;
@@ -37,16 +50,65 @@ export class PurchaseHomeComponent implements OnInit {
       }
     });
     this.unsetProdDetails();
-    this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease'}
+    this.getLatestProducts();
+    this.trendingProducts();
+    this.carouselTile = {grid: {xs: 1, sm: 2, md: 4, lg: 8, all: 0},slide: 1, speed: 400, point: { visible: false }, load: 2, touch: true, loop: true}
   }
 
   unsetProdDetails(){
     this.webService.removeLocalItem('productDetails');
   }
 
+  getLatestProducts(){
+    this.loader = true;
+    this.webService.get_data('getLatestPrdts').subscribe(response => {
+      if(response.status == 'success'){
+        this.latestProductData = response.data;
+      } else {
+        this.latestProductData = false;
+      }
+      this.loader = false;
+    });
+  }
+
+  trendingProducts(){
+    this.trend_loader = true;
+    this.webService.post_data('getTrendingPrdts',{'page':this.page}).subscribe(response => {
+      if(response.status == 'success'){
+        this.total_page = response.meta.total_pages;
+        this.trendingProductData = response.data;
+      } else {
+        this.trendingProductData = false;
+      }
+      this.trend_loader = false;
+    });
+  }
+
+  latestPrdtDtls(prdt_id){
+    this.goToPage('productdetails',{"product_id":prdt_id});
+  }
+
+  onScroll(){
+    if(this.total_page < this.page){
+      return false;
+    }
+
+    this.page += 1;    
+    this.trend_loader = true;
+    this.webService.post_data('getTrendingPrdts',{'page':this.page}).subscribe(response => {
+      if(response.status == 'success'){
+        let thisObj = this;
+        response.data.forEach(function(trendData,key) {
+          thisObj.trendingProductData.push(trendData);
+        });
+      }
+      this.trend_loader = false;
+    });
+  }
+
   goToPage(path,data=null){
-    this.router.navigateByUrl(path,{queryParams:data});
-    document.body.scrollTop = document.documentElement.scrollTop = 0;
+    this.router.navigate([path],{queryParams:  data});
+    document.body.scrollTop  =  document.documentElement.scrollTop  =  0;
   }
 
   carouselTileLoad(){ return ''; }

src/app/purchase/purchase.module.ts

@@ -5,6 +5,7 @@ import { ProductlistComponent } from './productlist/productlist.component';
 import { ProductdetailsComponent } from './productdetails/productdetails.component';
 import { moduleRouting } from './purchase.routing';
 import { SearchbarComponent } from './searchbar/searchbar.component';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { Ng5SliderModule } from 'ng5-slider';
 import { MalihuScrollbarModule } from 'ngx-malihu-scrollbar';
 import { NgxGalleryModule } from 'ngx-gallery';
@@ -30,6 +31,7 @@ import { PurchaseHomeComponent } from './purchase-home/purchase-home.component';
     NgxGalleryModule,
     NgxCarouselModule,
     ReactiveFormsModule,
+    InfiniteScrollModule,
     TooltipModule,
     MalihuScrollbarModule.forRoot()
   ]

src/app/purchase/rating/rating.component.html

@@ -74,7 +74,7 @@
             </div>
         </div>
     </div>
-    <div class="bottom_product_list">
+    <!-- <div class="bottom_product_list">
         <h4>Audi Q7 <span>( Similar Results )</span></h4>
         <ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()">
             <ngx-tile NgxCarouselItem>
@@ -472,5 +472,5 @@
             <button NgxCarouselPrev class='leftRs'>&lt;</button>
             <button NgxCarouselNext class='rightRs'>&gt;</button>
         </ngx-carousel>
-    </div>
+    </div> -->
 </div>
\ No newline at end of file

src/app/purchase/searchbar/searchbar.component.html

@@ -12,9 +12,11 @@
       </ul>
     </div>
     <div  *ngIf="productArray && productArray.length > 0" class="nav_bar_search_list">
-      <ul class="filter-select">
+      <ul class="filter-select" malihu-scrollbar [scrollbarOptions]="scrollbarOptions" style="max-height: 350px; overflow: scroll">
         <li  class="cpoint" *ngFor="let prdt of productArray" (click)="clickProduct(prdt.product_id)">
-            <div class="search_list_image"></div>
+            <div class="search_list_image">
+                <img src="{{imageServer + prdt.image}}" onerror="this.src='assets/images/user_avatar.jpg'">
+            </div>
             <p>{{prdt.product_name}}</p>
             <div class="clear"></div>
           </li>

src/app/purchase/searchbar/searchbar.component.ts

 import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
 import { WebService } from '../../provider/web.service';
+import { ImageStorage } from '../../../environments/server.config';
 
 @Component({
   selector: 'app-searchbar',
@@ -11,10 +12,15 @@ export class SearchbarComponent implements OnInit {
   
   productArray: any;
   SingleProductData:any;
+  imageServer: string;
+  
+  public scrollbarOptions = { axis: 'y', theme: 'minimal-dark' };
+
   @ViewChild("productSearch") public productSearchRef: ElementRef;
   
   constructor(private router : Router, private route: ActivatedRoute, public webService: WebService) {
     this.productArray = true;
+    this.imageServer  = ImageStorage;
   }
 
   ngOnInit() {
@@ -32,11 +38,11 @@ export class SearchbarComponent implements OnInit {
     }
     this.webService.post_data('productSearch',{"key":product}).subscribe(response => {
       if(response.status == 'success'){
+        console.log(response.data)
         this.productArray = response.data;
       } else {
         this.productArray = false;
       }
-      console.log(this.productArray);
     });
   }
 

src/app/purchase/summary/summary.component.ts

@@ -91,9 +91,9 @@ export class SummaryComponent implements OnInit {
       if(response.status == 'success'){
         document.location.href = this.serverUrl+'orderPayNow/'+response.data;
       }else{
+        this.loader = false;
         this.failureModelRef.nativeElement.click();
       }
-      this.loader = false;
     })
   }
 

src/app/purchase/track/track.component.html

 <div class="purchase_wrapper">
-    <div class="container-fluid">
-      <div class="loader_overlay" *ngIf="loader"></div>
-      <div class="purchase_content_wrapper">
-          <div class="row">
-              <div class="col-md-4">
-                <div class="product_gallery">
-                  <div class="product_gallery_inner" *ngIf="galleryImages;else nogalleryimage">
-                      <ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>
-                  </div>
-                  <ng-template #nogalleryimage>
-                    No Image Found
-                  </ng-template>
+  <div class="container-fluid">
+    <div class="loader_overlay" *ngIf="loader"></div>
+    <div class="purchase_content_wrapper">
+      <div class="row">
+        <div class="col-md-4">
+          <div class="product_gallery">
+            <div class="product_gallery_inner" *ngIf="galleryImages;else nogalleryimage">
+              <ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>
+            </div>
+            <ng-template #nogalleryimage>
+              No Image Found
+            </ng-template>
+          </div>
+        </div>
+        <div class="col-md-8">
+          <div class="product_details" *ngIf="orderDetails">
+            <h1>{{orderDetails.product_name}}</h1>
+            <!-- <div class="review" (click)="reviewBtn()">Write review</div> -->
+            <div class="review" data-toggle="modal" data-target="#review" *ngIf="!userReviewed">Write review</div>
+            <div class="clear"></div>
+            <h2>{{orderDetails.short_description}}</h2>
+            <div class="others">
+              <!-- <h4><div>Color</div><span>Black</span></h4> -->
+              <h4><div>Quantity</div><span>{{orderDetails.quantity}}</span></h4>
+            </div>
+            <div class="row">
+              <div class="col-md-5">
+                <div class="order_range prevent-click">
+                  <ng5-slider [(value)]="verticalSlider2.minValue" [(highValue)]="verticalSlider2.maxValue" [options]="verticalSlider2.options"></ng5-slider>
                 </div>
+                <div class="order_range_details">
+                  <span>
+                    <h5>Order Confirmed</h5>
+                    <p>{{orderDetails.datetime | date: "EEE, MMMM dd, yyyy"}}</p>
+                  </span>
+                  <span>
+                    <h5>Packed</h5>
+                    <p *ngIf="orderDetails.expected_delivery">{{orderDetails.expected_delivery | date: "EEE, MMMM dd, yyyy"}}</p>
+                  </span>
+                  <span>
+                    <h5>Shipped</h5>
+                    <p *ngIf="orderDetails.expected_delivery">{{orderDetails.expected_delivery | date: "EEE, MMMM dd, yyyy"}}</p>
+                  </span>
+                  <span>
+                    <h5>Delivered</h5>
+                    <p *ngIf="orderDetails.delivered">{{orderDetails.delivered | date: "EEE, MMMM dd, yyyy"}}</p>
+                  </span>  
+                </div>
+                <div class="clear"></div>
               </div>
-              <div class="col-md-8">
-                  <div class="product_details" *ngIf="orderDetails">
-                    <h1>{{orderDetails.product_name}}</h1>
-                    <!-- <div class="review" (click)="reviewBtn()">Write review</div> -->
-                    <div class="review" data-toggle="modal" data-target="#review">Write review</div>
-                    <div class="clear"></div>
-                    <h2>{{orderDetails.short_description}}</h2>
-                    <div class="others">
-                        <!-- <h4><div>Color</div><span>Black</span></h4> -->
-                        <h4><div>Quantity</div><span>{{orderDetails.quantity}}</span></h4>
-                      </div>
-                      <div class="row">
-                        <div class="col-md-5">
-                            <div class="order_range">
-                                <ng5-slider [(value)]="verticalSlider2.minValue" [(highValue)]="verticalSlider2.maxValue" [options]="verticalSlider2.options"></ng5-slider>
-                            </div>
-                            <div class="order_range_details">
-                              <span>
-                                <h5>Order Confirmed</h5>
-                                <p>{{orderDetails.datetime | date: "EEE, MMMM dd yyyy"}}</p>
-                              </span>
-                              <span>
-                                  <h5>Packed</h5>
-                                  <p>Thurs, April 25th 2019</p>
-                              </span>
-                              <span>
-                                  <h5>Delivered</h5>
-                                  <p>Thurs, April 25th 2019</p>
-                              </span>  
-                            </div>
-                            <div class="clear"></div>
-                        </div>
-                        <div class="col-md-7">
-                          <div class="order_delivery_details">
-                            <div class="order_id">
-                              {{orderDetails.format_order_id}}
-                            </div>
-                            <div class="order_delivery" *ngIf="(( orderDetails.odr_status === '2' || orderDetails.odr_status === '3' || orderDetails.odr_status === '4' ) && orderDetails.expected_delivery != null)">
-                              <h4> Expected Delivery On {{orderDetails.expected_delivery}} </h4>
-                              <p> Item will be delivered </p>
-                            </div>
-                            <div class="order_delivery" *ngIf="(( orderDetails.odr_status === '5' || orderDetails.odr_status === '6' || orderDetails.odr_status === '7' ) && orderDetails.delivered != null)">
-                              <h4> Delivered On {{orderDetails.delivered}} </h4>
-                              <p> Item has been delivered </p>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div class="row">
-                        <div class="col-md-6">
-                            <h4>Total Amount</h4> 
-                            <h3>$ {{orderDetails.amount}}</h3>
-                        </div>
-                        <div class="col-md-6">
-                          <h4>
-                              <div class="need_invoice">Need invoice</div>
-                          </h4>
-                            
-                        </div>
-                      </div>
-                      
-                      
+              <div class="col-md-7">
+                <div class="order_delivery_details">
+                  <div class="order_id">
+                    {{orderDetails.format_order_id}}
+                  </div>
+                  <div class="order_delivery" *ngIf="(( orderDetails.odr_status === '2' || orderDetails.odr_status === '3' || orderDetails.odr_status === '4' ) && orderDetails.expected_delivery != null)">
+                    <h4> Expected Delivery On {{orderDetails.expected_delivery | date: "EEE, MMMM dd, yyyy"}} </h4>
+                    <p> Item will be delivered </p>
                   </div>
+                  <div class="order_delivery" *ngIf="(( orderDetails.odr_status === '5' || orderDetails.odr_status === '6' || orderDetails.odr_status === '7' ) && orderDetails.delivered != null)">
+                    <h4> Delivered On {{orderDetails.delivered | date: "EEE, MMMM dd, yyyy"}} </h4>
+                    <p> Item has been delivered </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-md-6">
+                <h4>Total Amount</h4> 
+                <h3>$ {{orderDetails.amount}}</h3>
+              </div>
+              <div class="col-md-6">
+                <h4>
+                  <div class="need_invoice">Need invoice</div>
+                </h4>
+                
               </div>
+            </div>
+            
+            
           </div>
+        </div>
       </div>
     </div>
   </div>
+</div>
 
 
 
@@ -91,54 +95,75 @@
 
 <!-- START-RATTING-DIV -->
 
-  <div class="modal" id="review">
-    <div class="modal-dialog modal-lg">
-      <div class="modal-content">
-        <div class="ratting_inner">
-              <div class="">
-                  <p>Rate this Product</p>
-                  <div class="ratting_star">
-                      <fieldset class="rating">
-                          <input type="radio" id="star5" name="rating" value="5" formControlName="rating"/>
-                          <label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                          <input type="radio" id="star4half" name="rating" value="4.5" formControlName="rating"/>
-                          <label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                          <input type="radio" id="star4" name="rating" value="4" formControlName="rating"/>
-                          <label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                          <input type="radio" id="star3half" name="rating" value="3.5" formControlName="rating"/>
-                          <label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                          <input type="radio" id="star3" name="rating" value="3" formControlName="rating"/>
-                          <label class = "full" for="star3" title="Meh - 3 stars"></label>
-                          <input type="radio" id="star2half" name="rating" value="2.5" formControlName="rating"/>
-                          <label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                          <input type="radio" id="star2" name="rating" value="2" formControlName="rating"/>
-                          <label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                          <input type="radio" id="star1half" name="rating" value="1.5" formControlName="rating" />
-                          <label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                          <input type="radio" id="star1" name="rating" value="1" formControlName="rating"/>
-                          <label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                          <input type="radio" id="starhalf" name="rating" value="0.5" formControlName="rating" />
-                          <label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                      </fieldset>
-                      <div class="clear"></div>
-                  </div>
-              </div>
-              <hr>
-              <div class="">
-                  <p>Give a Title</p>
-                  <input class="title_input" placeholder="Type Here">
+<div class="modal" id="review">
+  <div class="modal-dialog modal-md">
+    <div class="modal-content">
 
-              </div>
-              <hr>
-              <div class="">
-                  <p>Write a Review</p>
-                  <input class="title_input" placeholder="Type Here">
-              </div>
-              <hr>
-              <button class="submit_btn">Submit</button>
+      <div class="modal-header" #ratingModal>
+        <button type="button" class="close" data-dismiss="modal">&times;</button>
+       
       </div>
+      <div class="ratting_inner">
+        <div class="loader_overlay" *ngIf="loader_review"></div>
+        <form [formGroup]="rateForm" (ngSubmit)="rateFormSubmit(rateForm.value)">
+          <div class="">
+            <p>Rate this Product</p>
+            <div class="ratting_star">
+              <fieldset class="rating">
+                <input type="radio" id="star5" name="rating" value="5" formControlName="rating"/>
+                <label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                <input type="radio" id="star4half" name="rating" value="4.5" formControlName="rating"/>
+                <label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                <input type="radio" id="star4" name="rating" value="4" formControlName="rating"/>
+                <label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                <input type="radio" id="star3half" name="rating" value="3.5" formControlName="rating"/>
+                <label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                <input type="radio" id="star3" name="rating" value="3" formControlName="rating"/>
+                <label class = "full" for="star3" title="Meh - 3 stars"></label>
+                <input type="radio" id="star2half" name="rating" value="2.5" formControlName="rating"/>
+                <label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                <input type="radio" id="star2" name="rating" value="2" formControlName="rating"/>
+                <label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                <input type="radio" id="star1half" name="rating" value="1.5" formControlName="rating" />
+                <label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                <input type="radio" id="star1" name="rating" value="1" formControlName="rating"/>
+                <label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                <input type="radio" id="starhalf" name="rating" value="0.5" formControlName="rating" />
+                <label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+              </fieldset>
+              <div class="clear"></div>
+            </div>
+          </div>
+          <hr>
+          <div class="">
+            <p>Give a Title</p>
+            <input class="title_input" placeholder="Type Here" formControlName="title"
+              [ngClass]="{'input_error': !rateForm.controls['title'].valid && (rateForm.controls['title'].dirty || rateForm.controls['title'].touched || rateFormClick),
+                        'input_success': rateForm.controls['title'].valid}" (click)="rateFormClick = false">
+            <div class="s_error" *ngIf="(!rateForm.controls['title'].valid && rateForm.controls['title'].touched) || (!rateForm.controls['title'].valid && rateFormClick)">
+                <div class="s_validation" *ngIf="rateForm.controls['title'].hasError('required')">{{errorMsg.errorList.required}} </div>
+            </div>
+            
+          </div>
+          <hr>
+          <div class="">
+            <p>Write a Review</p>
+            <input class="title_input" placeholder="Type Here" formControlName="description"
+              [ngClass]="{'input_error': !rateForm.controls['description'].valid && (rateForm.controls['description'].dirty || rateForm.controls['description'].touched || rateFormClick),
+                        'input_success': rateForm.controls['description'].valid}" (click)="rateFormClick = false">
+            <div class="s_error" *ngIf="(!rateForm.controls['description'].valid && rateForm.controls['description'].touched) || (!rateForm.controls['description'].valid && rateFormClick)">
+                <div class="s_validation" *ngIf="rateForm.controls['description'].hasError('required')">{{errorMsg.errorList.required}} </div>
+            </div>
+          </div>
+          <div *ngIf="rateFormResponse" class="s_alert" [ngClass]="(rateFormResponse.status == 'success') ? 'alert-success' : 'alert-danger'">
+              <strong>{{rateFormResponse.message}}<br></strong>
+          </div>
+          <hr>
+          <button class="submit_btn" (click)="rateFormClick = true">Submit</button>
+        </form>
       </div>
     </div>
   </div>
+</div>
 
-  <!-- END-RATTING-DIV -->
\ No newline at end of file
+<!-- END-RATTING-DIV -->
\ No newline at end of file

src/app/purchase/track/track.component.scss

@@ -91,7 +91,7 @@
             }
 
             .order_range{
-                height:200px;
+                height:207px;
                 padding-top: 20px;
                 width:30px;
                 float: left;
@@ -99,7 +99,7 @@
             .order_range_details{
                 float: left;
                 width:calc(100% - 30px);
-                height:200px;
+                height:221px;
                 padding-top: 20px;
                 padding-left: 20px;
                 position: relative;
@@ -107,19 +107,19 @@
                 span{
                     position: absolute;
                     &:nth-child(1) {
-                        top:8%;
-                      }
-    
-                      &:nth-child(2) {
-                        top:48%;
-                      }
-    
-                      &:nth-child(3) {
-                        bottom:0%;
-                      }
+                        top:7%;
+                    }
+                    &:nth-child(2) {
+                        top:32%;
+                    }
+                    &:nth-child(3) {
+                        top:57%;
+                    }
+                    &:nth-child(4) {
+                        top:82%;
+                    }
                 }
-               
-                  
+                 
                 h5{
                     margin:0px;
                     padding:0px;
@@ -133,7 +133,7 @@
             }
 
             .order_delivery_details{
-                padding-top: 30px;
+                padding-top: 55px;
                 padding-bottom: 30px;
                 .order_id{
                     color: #000000;

src/app/purchase/track/track.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
 import { WebService } from '../../provider/web.service';
 import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
-import * as $ from 'jquery';
+import { FormGroup, FormControl, Validators, ValidationErrors } from '@angular/forms';
+import { ValidationService } from '../../provider/validation.service';
 import { NgxCarousel } from 'ngx-carousel';
 import { ImageStorage } from '../../../environments/server.config';
 import { Options } from 'ng5-slider';
+import * as $ from 'jquery';
 
 interface RangeSliderModel {
   minValue: number;
@@ -23,36 +25,50 @@ export class TrackComponent implements OnInit {
   count:any;
   loginDetails:any;
   loader:boolean;
+  loader_review:boolean;
   imageServer: string;
   orderDetails:any;
+  userReviewed:boolean;
   galleryOptions: NgxGalleryOptions[];
   galleryImages: NgxGalleryImage[];
+  verticalSlider2:any;
+  rateFormClick:boolean;
+  rateFormResponse:any;
+
+  @ViewChild('ratingModal') ratingModal: ElementRef;
 
   public carouselTile: NgxCarousel;
     constructor(private router        : Router, 
                 private route         : ActivatedRoute,
+                public errorMsg       : ValidationService,
                 public webService     : WebService){
       this.count = 0;
-      this.loader =true;
-      this.imageServer  = ImageStorage; 
+      this.loader = true;
+      this.userReviewed = true;
+      this.loader_review = false;
+      this.imageServer  = ImageStorage;
+      this.rateFormClick = false; 
     }
-    
+    rateForm;
     ngOnInit(): void {
       this.route.queryParams.subscribe(params => {
-        let payStatus = params['status'];
         this.ref_id = params['ref'];
-  
-        if(payStatus && payStatus !=''){
-          if(payStatus == 'success'){
-            if(this.ref_id > 0){
-              this.getOrderDetail();
-            }
-          }
+        if(!this.ref_id || this.ref_id < 0){
+          this.goToPage('purchaseHome','');
         }
       });
+      
       this.designModule();
+      this.getOrderDetail();
       this.checkUserLogin();
       this.unsetProdDetails();
+
+      
+      this.rateForm = new FormGroup({
+        rating: new FormControl('5'),
+        title: new FormControl('',[Validators.required]),
+        description: new FormControl('',[Validators.required])
+      });
     }
 
     checkUserLogin(){
@@ -66,10 +82,42 @@ export class TrackComponent implements OnInit {
       this.webService.removeLocalItem('productDetails');
     }
 
-    getOrderDetail(){
-      if(this.ref_id <= 0){
-        this.goToPage('purchaseHome','');
+    rateFormSubmit(data){
+      if(this.rateForm.invalid){
+        return false;
       }
+      data.product_id = this.orderDetails.product_id;
+      data.customer_id = this.loginDetails.customer_id;
+      this.loader_review = true;
+      const This = this;
+      this.webService.post_data('rateProduct',data).subscribe(response => {
+        if(response.status == 'success'){
+          this.rateFormResponse = response;
+          this.userReviewed = true;
+          setTimeout( function() {
+            This.rateFormResponse = false;
+            This.ratingModal.nativeElement.click();
+          }, 3000);
+        }else{
+          response.status = 'error';
+          response.message = (response.message == '')?this.errorMsg.errorList.req_failure:response.message;
+  
+          this.rateFormResponse = response;
+          setTimeout( function() {
+            This.rateFormResponse = false;
+          }, 3000);
+        }
+        this.loader_review = false;
+      },error => {
+        this.rateFormResponse = {'status':'error','message':this.errorMsg.errorList.req_failure};
+        setTimeout( function() {
+          This.rateFormResponse = false;
+        }, 3000);
+        this.loader_review = false;
+      });
+    }
+
+    getOrderDetail(){
       this.loader = true;
       this.webService.post_data('getOrderDetail',{'ref_id':this.ref_id}).subscribe(response => {
         if(response.status == 'success'){
@@ -77,6 +125,8 @@ export class TrackComponent implements OnInit {
           let imageArr: any[] = new Array();
           const thisObj = this;
           this.orderDetails = response.data;
+          this.userReviewed = (this.orderDetails.review_id <= 0 && (this.orderDetails.odr_status == '5' || this.orderDetails.odr_status == '6' || this.orderDetails.odr_status == '7'))?false:true;
+          console.log(this.userReviewed);
           if(this.orderDetails.images.length > 0){
             thisObj.orderDetails.images.forEach(function (data) {
               image = thisObj.imageServer + data.image;
@@ -87,6 +137,19 @@ export class TrackComponent implements OnInit {
             imageArr.push({small: image,medium: image,big: image});
           }
           this.galleryImages = imageArr;
+
+          if(this.orderDetails.odr_status === '2'){
+            this.verticalSlider2 = { minValue: 50, maxValue: 50, options: { floor: 0, ceil: 50, vertical: true } };
+          }
+          else if(this.orderDetails.odr_status ==='3'){
+            this.verticalSlider2 = { minValue: 50, maxValue: 76, options: { floor: 0, ceil: 76, vertical: true } };
+          }
+          else if(this.orderDetails.odr_status ==='4'){
+            this.verticalSlider2 = { minValue: 50, maxValue: 152, options: { floor: 0, ceil: 152, vertical: true } };
+          }
+          else if(this.orderDetails.odr_status === '5'){
+            this.verticalSlider2 = { minValue: 50, maxValue: 10000000, options: { floor: 0, ceil: 10000000, vertical: true } };
+          }
         }else{
           this.orderDetails = false;
           this.goToPage('purchaseHome','');
@@ -110,7 +173,6 @@ export class TrackComponent implements OnInit {
     carouselTileLoad(){ return ''; }
     add(){this.count = this.count + 1;}
     minus(){ this.count = this.count - 1; if(this.count < 0){ this.count = 0; }}
-    verticalSlider2: RangeSliderModel = { minValue: 50, maxValue: 100, options: { floor: 0, ceil: 100, vertical: true } };
 
     designModule(){
       this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease'}