Skip to content

D
dcarfixers_angular
Commit 27fd6817 by Jansa Jose
Options

purchase home changes

parent c0808a97
Showing with 233 additions and 694 deletions
src/app/purchase/productdetails/productdetails.component.html
......@@ -106,31 +106,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"> <!-- LOOP THIS -->
<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.ts
......@@ -15,6 +15,7 @@ import * as $ from 'jquery';
export class ProductdetailsComponent implements OnInit {
loader: boolean;
loader2:boolean;
count:any;
product_id: number;
imageServer: string;
......@@ -23,6 +24,7 @@ export class ProductdetailsComponent implements OnInit {
galleryImages: NgxGalleryImage[];
galleryOptions: NgxGalleryOptions[];
loginDetails:any;
trendingProductData:any;
@ViewChild("indexLoginModal") loginModalRef: ElementRef;
......@@ -33,6 +35,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 +64,7 @@ export class ProductdetailsComponent implements OnInit {
this.designModules();
this.checkUserLogin();
this.trendingProducts();
}
checkUserLogin(){
......@@ -95,6 +99,18 @@ export class ProductdetailsComponent implements OnInit {
});
}
trendingProducts(){
this.loader2 = true;
this.webService.get_data('getTrendingPrdts').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();
......
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]="'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>
</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="loader2"></div>
<div class="row">
<div class="col-md-8">
<p>Trending Products</p>
</div>
</div>
<ul *ngIf="trendingProductData">
<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>
......@@ -640,23 +102,23 @@
<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>
<div class="row">
<div class="col-md-12 textCenter" style="padding-top:40px;">
<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>
<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>
</div>
</div>
</div>
\ 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,12 @@ import { NgxCarousel } from 'ngx-carousel';
})
export class PurchaseHomeComponent implements OnInit {
public carouselTile: NgxCarousel;
loader:boolean;
loader2:boolean;
latestProductData:any;
imageServer: any;
trendingProductData:any;
@ViewChild("failureModel") public failureModelRef: ElementRef;
......@@ -18,7 +25,11 @@ export class PurchaseHomeComponent implements OnInit {
private router : Router,
private route : ActivatedRoute,
public webService : WebService
) { }
) {
this.loader = true;
this.loader2 = true;
this.imageServer = ImageStorage;
}
value: number = 40;
highValue: number = 60;
......@@ -37,6 +48,8 @@ export class PurchaseHomeComponent implements OnInit {
}
});
this.unsetProdDetails();
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, easing: 'ease'}
}
......@@ -44,9 +57,38 @@ export class PurchaseHomeComponent implements OnInit {
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.loader2 = true;
this.webService.get_data('getTrendingPrdts').subscribe(response => {
if(response.status == 'success'){
console.log(response.data)
this.trendingProductData = response.data;
} else {
this.trendingProductData = false;
}
this.loader2 = 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/searchbar/searchbar.component.ts
......@@ -36,7 +36,6 @@ export class SearchbarComponent implements OnInit {
} else {
this.productArray = false;
}
console.log(this.productArray);
});
}
......
src/app/purchase/track/track.component.html
......@@ -31,15 +31,19 @@
<div class="order_range_details">
<span>
<h5>Order Confirmed</h5>
<p>{{orderDetails.datetime | date: "EEE, MMMM dd yyyy"}}</p>
<p>{{orderDetails.datetime | date: "EEE, MMMM dd, yyyy"}}</p>
</span>
<span>
<h5>Packed</h5>
<p>Thurs, April 25th 2019</p>
<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>Thurs, April 25th 2019</p>
<p *ngIf="orderDetails.delivered">{{orderDetails.delivered | date: "EEE, MMMM dd, yyyy"}}</p>
</span>
</div>
<div class="clear"></div>
......@@ -50,11 +54,11 @@
{{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>
<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}} </h4>
<h4> Delivered On {{orderDetails.delivered | date: "EEE, MMMM dd, yyyy"}} </h4>
<p> Item has been delivered </p>
</div>
</div>
......
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
......@@ -27,6 +27,7 @@ export class TrackComponent implements OnInit {
orderDetails:any;
galleryOptions: NgxGalleryOptions[];
galleryImages: NgxGalleryImage[];
verticalSlider2:any;
public carouselTile: NgxCarousel;
constructor(private router : Router,
......@@ -87,6 +88,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 +124,7 @@ 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 } };
// verticalSlider2: RangeSliderModel = { minValue: this.verticalMinValue, maxValue: this.verticalMaxValue, options: { floor: 0, ceil: this.verticalMaxValue, 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'}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment