diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 7ae6feb..bce3322 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -6,7 +6,7 @@ const routes: Routes = [
];
@NgModule({
- imports: [RouterModule.forRoot(routes)],
+ imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
exports: [RouterModule]
})
export class AppRoutingModule { }
diff --git a/src/app/home/dashboard/dashboard.component.html b/src/app/home/dashboard/dashboard.component.html
index 0233a64..14a267a 100644
--- a/src/app/home/dashboard/dashboard.component.html
+++ b/src/app/home/dashboard/dashboard.component.html
@@ -891,7 +891,7 @@
<div class="clear"></div>
<p>Estimated Price : <strong>{{estimatedPrice}}</strong></p>
<div class="clear"></div>
- <button class="request_all_btn" *ngIf="selMechanics.length > 0 && scheduleDateInit == true" (click)="scheduleMultipleRequest()">Request All</button>
+ <button class="request_all_btn" *ngIf="selMechanics.length > 0 && scheduleDateInit == true" (click)="scheduleMultipleRequest()">{{loginDetails? 'Request All' : 'Login and Continue'}}</button>
</div>
<div class="service_map">
<agm-map #gm [latitude]="lat" [longitude]="lng" [fitBounds]="true">
diff --git a/src/app/home/home.routing.ts b/src/app/home/home.routing.ts
index 199d2cd..24ff12e 100644
--- a/src/app/home/home.routing.ts
+++ b/src/app/home/home.routing.ts
@@ -6,15 +6,12 @@ import { TncComponent } from './tnc/tnc.component';
import { PrivacyComponent } from './privacy/privacy.component';
import { TnsComponent } from './tns/tns.component';
-
const ModuleRoutes: Routes = [
-
- { path: 'index', component: IndexComponent},
- { path: 'dashboard', component: DashboardComponent},
- { path: 'termscondition', component: TncComponent},
- { path: 'termsservice', component: TnsComponent},
- { path: 'privacy', component: PrivacyComponent}
-
+ { path: 'index', component: IndexComponent },
+ { path: 'privacy', component: PrivacyComponent },
+ { path: 'dashboard', component: DashboardComponent },
+ { path: 'termsservice', component: TnsComponent },
+ { path: 'termscondition', component: TncComponent }
];
export const moduleRouting: ModuleWithProviders = RouterModule.forChild(ModuleRoutes)
diff --git a/src/app/home/index/index.component.html b/src/app/home/index/index.component.html
index 0a1ea73..096a23a 100644
--- a/src/app/home/index/index.component.html
+++ b/src/app/home/index/index.component.html
@@ -629,7 +629,7 @@
<div class="clear"></div>
<p>Estimated Price : <strong>{{estimatedPrice}}</strong></p>
<div class="clear"></div>
- <button class="request_all_btn" *ngIf="selMechanics.length > 0 && scheduleDateInit == true" (click)="scheduleMultipleRequest()">Request All</button>
+ <button class="request_all_btn" *ngIf="selMechanics.length > 0 && scheduleDateInit == true" (click)="scheduleMultipleRequest()">{{loginDetails? 'Request All' : 'Login and Continue'}}</button>
</div>
<div class="service_map">
<agm-map #gm [latitude]="lat" [longitude]="lng" [fitBounds]="true">
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index 747ca80..157057c 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -24,11 +24,11 @@
HOME
</a>
</li>
- <!-- <li class="nav-item">
- <a class="nav-link" (click)="goToPage('productlist')">
+ <li class="nav-item">
+ <a class="nav-link" (click)="goToPage('purchaseHome')">
PURCHASE
</a>
- </li> -->
+ </li>
<li class="nav-item">
<a class="nav-link base_arrow dropdown">
<div class="dropdown-toggle" data-toggle="dropdown">
diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
index 1394591..07107b1 100644
--- a/src/app/navbar/navbar.component.ts
+++ b/src/app/navbar/navbar.component.ts
@@ -47,9 +47,9 @@ export class NavbarComponent implements OnInit {
forgotForm;
signupForm;
autospsignupForm;
+ @ViewChild('spModal') spModal: ElementRef;
@ViewChild('loginModal') loginModal: ElementRef;
@ViewChild('signupModal') signupModal: ElementRef;
- @ViewChild('spModal') spModal: ElementRef;
public scrollbarOptions = { axis: 'y', theme: 'minimal-dark' };
diff --git a/src/app/provider/dataservice.service.ts b/src/app/provider/dataservice.service.ts
new file mode 100644
index 0000000..4f693d6
--- /dev/null
+++ b/src/app/provider/dataservice.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+ providedIn: 'root'
+})
+
+export class DataserviceService {
+ serviceData: any = new Array();
+}
diff --git a/src/app/provider/web.service.ts b/src/app/provider/web.service.ts
index d2e296d..2635f20 100644
--- a/src/app/provider/web.service.ts
+++ b/src/app/provider/web.service.ts
@@ -51,6 +51,9 @@ export class WebService {
localStorage.removeItem(data);
localStorage.clear();
}
+ removeLocalItem(data) {
+ localStorage.removeItem(data);
+ }
get_stored_json(json_file: string) {
return this.http.get("assets/json_data/" + json_file);
}
diff --git a/src/app/purchase/addaddress/addaddress.component.html b/src/app/purchase/addaddress/addaddress.component.html
index 3587c6e..fff6df8 100644
--- a/src/app/purchase/addaddress/addaddress.component.html
+++ b/src/app/purchase/addaddress/addaddress.component.html
@@ -1,56 +1,103 @@
<div class="purchase_wrapper">
- <div class="container-fluid">
- <app-searchbar>
- </app-searchbar>
- <div class="add_address_wrapper">
- <h4>Add New Address</h4>
- <div class="row">
- <div class="col-md-12">
- <p>Name*</p>
- <input class="" type="text">
- </div>
+ <div class="container-fluid">
+ <div class="loader_overlay" *ngIf="loader"></div>
+ <div class="add_address_wrapper">
+ <form [formGroup]="addaddressForm" (ngSubmit)="addressFormSubmit(addaddressForm.value)">
+ <h4>Add New Address</h4>
+ <div class="row">
+ <div class="col-md-6">
+ <p>Name*</p>
+ <input class="" type="text" formControlName="name"
+ [ngClass]="{'input_error': !addaddressForm.controls['name'].valid && (addaddressForm.controls['name'].dirty || addaddressForm.controls['name'].touched || addressSubmitClick),
+ 'input_success': addaddressForm.controls['name'].valid}" (click)="addressSubmitClick = false">
+ <div class="s_error" *ngIf="(!addaddressForm.controls['name'].valid && addaddressForm.controls['name'].touched) || (!addaddressForm.controls['name'].valid && addressSubmitClick)">
+ <div class="s_validation" *ngIf="addaddressForm.controls['name'].hasError('required')">{{errorMsg.errorList.required}} </div>
+ </div>
</div>
- <div class="row">
- <div class="col-md-12">
- <p>Phone Number*</p>
- <input class="" type="text">
+ <div class="col-md-6">
+ <p>Phone Number*</p>
+ <input class="" type="text" formControlName="phone_no"
+ [ngClass]="{'input_error': !addaddressForm.controls['phone_no'].valid && (addaddressForm.controls['phone_no'].dirty || addaddressForm.controls['phone_no'].touched || addressSubmitClick),
+ 'input_success': addaddressForm.controls['phone_no'].valid}" (click)="addressSubmitClick = false">
+ <div class="s_error" *ngIf="(!addaddressForm.controls['phone_no'].valid && addaddressForm.controls['phone_no'].touched) || (!addaddressForm.controls['phone_no'].valid && addressSubmitClick)">
+ <div class="s_validation" *ngIf="addaddressForm.controls['phone_no'].hasError('required')">{{errorMsg.errorList.required}} </div>
+ <div class="s_validation" *ngIf="addaddressForm.controls['phone_no'].hasError('pattern')">{{errorMsg.errorList.valid}} Mobile Number</div>
</div>
- </div>
- <div class="row">
- <div class="col-md-12">
- <p>House number or Building number*</p>
- <input class="" type="text">
- </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <p>House number or Building number*</p>
+ <input class="" type="text" formControlName="house_no"
+ [ngClass]="{'input_error': !addaddressForm.controls['house_no'].valid && (addaddressForm.controls['house_no'].dirty || addaddressForm.controls['house_no'].touched || addressSubmitClick),
+ 'input_success': addaddressForm.controls['house_no'].valid}" (click)="addressSubmitClick = false">
+ <div class="s_error" *ngIf="(!addaddressForm.controls['house_no'].valid && addaddressForm.controls['house_no'].touched) || (!addaddressForm.controls['house_no'].valid && addressSubmitClick)">
+ <div class="s_validation" *ngIf="addaddressForm.controls['house_no'].hasError('required')">{{errorMsg.errorList.required}} </div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <p>Area, Road or Colony*</p>
+ <input class="" type="text" formControlName="area"
+ [ngClass]="{'input_error': !addaddressForm.controls['area'].valid && (addaddressForm.controls['area'].dirty || addaddressForm.controls['area'].touched || addressSubmitClick),
+ 'input_success': addaddressForm.controls['area'].valid}" (click)="addressSubmitClick = false">
+ <div class="s_error" *ngIf="(!addaddressForm.controls['area'].valid && addaddressForm.controls['area'].touched) || (!addaddressForm.controls['area'].valid && addressSubmitClick)">
+ <div class="s_validation" *ngIf="addaddressForm.controls['area'].hasError('required')">{{errorMsg.errorList.required}} </div>
</div>
- <div class="row">
- <div class="col-md-12">
- <p>Area, Road or Colony*</p>
- <input class="" type="text">
- </div>
- </div>
- <div class="row">
- <div class="col-md-12">
- <p>State*</p>
- <input class="" type="text">
- </div>
- </div>
- <div class="row">
- <div class="col-md-12">
- <p>City*</p>
- <input class="" type="text">
- </div>
- </div>
- <div class="row">
- <div class="col-md-12">
- <p>Land mark <span>(Optional)</span></p>
- <input class="" type="text">
- </div>
- </div>
- <div class="row">
- <div class="col-md-12">
- <button class="add_btn" (click)="goToPage('address')">Add Address</button>
- </div>
- </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-6">
+ <p>City*</p>
+ <input class="" type="text" formControlName="city"
+ [ngClass]="{'input_error': !addaddressForm.controls['city'].valid && (addaddressForm.controls['city'].dirty || addaddressForm.controls['city'].touched || addressSubmitClick),
+ 'input_success': addaddressForm.controls['city'].valid}" (click)="addressSubmitClick = false">
+ <div class="s_error" *ngIf="(!addaddressForm.controls['city'].valid && addaddressForm.controls['city'].touched) || (!addaddressForm.controls['city'].valid && addressSubmitClick)">
+ <div class="s_validation" *ngIf="addaddressForm.controls['city'].hasError('required')">{{errorMsg.errorList.required}} </div>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <p>State*</p>
+ <input class="" type="text" formControlName="state"
+ [ngClass]="{'input_error': !addaddressForm.controls['state'].valid && (addaddressForm.controls['state'].dirty || addaddressForm.controls['state'].touched || addressSubmitClick),
+ 'input_success': addaddressForm.controls['state'].valid}" (click)="addressSubmitClick = false">
+ <div class="s_error" *ngIf="(!addaddressForm.controls['state'].valid && addaddressForm.controls['state'].touched) || (!addaddressForm.controls['state'].valid && addressSubmitClick)">
+ <div class="s_validation" *ngIf="addaddressForm.controls['state'].hasError('required')">{{errorMsg.errorList.required}} </div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <p>Land mark <span>(Optional)</span></p>
+ <input class="" type="text" formControlName="landmark" (click)="addressSubmitClick = false">
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-2"></div>
+ <div class="col-md-5">
+ <input class="custom_checkbox" id="custom_checkbox_1" name="address_type" type="radio" value="1" formControlName="address_type">
+ <label for="custom_checkbox_1">Home</label>
+ </div>
+ <div class="col-md-5">
+ <input class="custom_checkbox" id="custom_checkbox_2" name="address_type" type="radio" value="2" formControlName="address_type">
+ <label for="custom_checkbox_2">Office</label>
+ </div>
+ </div>
+ <div *ngIf="addressResponse" class="s_alert" [ngClass]="(addressResponse.status == 'success') ? 'alert-success' : 'alert-danger'">
+ <strong>{{addressResponse.message}}<br></strong>
+ </div>
+ <div class="row">
+ <div class="col-md-6">
+ <!-- <button type="submit" class="btn_cart" (click)="goToPage('address')">Add Address</button> -->
+
+ <button type="submit" class="btn_cart" (click)="addressSubmitClick = true">{{address_id > 0?'Update Address' : 'Add Address'}}</button>
+ </div>
+ <div class="col-md-6">
+ <button class="add_btn" (click)="goToPage('address')">Cancel</button>
+ </div>
</div>
+ </form>
</div>
+ </div>
</div>
\ No newline at end of file
diff --git a/src/app/purchase/addaddress/addaddress.component.scss b/src/app/purchase/addaddress/addaddress.component.scss
index e684d5e..99d9cfc 100644
--- a/src/app/purchase/addaddress/addaddress.component.scss
+++ b/src/app/purchase/addaddress/addaddress.component.scss
@@ -34,6 +34,15 @@ box-shadow: 0px 1px 21px -10px rgba(0,0,0,0.2);
padding-bottom: 20px;
}
+ .btn_cart{
+ width:100%;
+ background: #fef160;
+ color: #000000;
+ text-align: center;
+ height: 45px;
+ border:none;
+
+ }
.add_btn{
width:100%;
background: #2655bf;
@@ -43,4 +52,6 @@ box-shadow: 0px 1px 21px -10px rgba(0,0,0,0.2);
border:none;
}
}
+
+
}
\ No newline at end of file
diff --git a/src/app/purchase/addaddress/addaddress.component.ts b/src/app/purchase/addaddress/addaddress.component.ts
index 308d4cf..ddc47f9 100644
--- a/src/app/purchase/addaddress/addaddress.component.ts
+++ b/src/app/purchase/addaddress/addaddress.component.ts
@@ -1,23 +1,168 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit , HostListener } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
+import { FormGroup, FormControl, FormBuilder, Validators, ValidationErrors } from '@angular/forms';
+import { WebService } from '../../provider/web.service';
+import { ValidationService } from '../../provider/validation.service';
+import { SubjectService } from '../../provider/subject.service';
@Component({
selector: 'app-addaddress',
templateUrl: './addaddress.component.html',
styleUrls: ['./addaddress.component.scss']
})
+
export class AddaddressComponent implements OnInit {
+ loader : boolean;
+ address_id : any;
+ loginDetails : any;
+ editAddressResp : any;
+ addressResponse : any;
+ addressSubmitClick : boolean;
+ prdtData:any = new Array();
+ product_id:any;
+
+ addaddressForm: FormGroup;
+ name = new FormControl('', [Validators.required]);
+ city = new FormControl('', [Validators.required]);
+ area = new FormControl('', [Validators.required]);
+ state = new FormControl('', [Validators.required]);
+ landmark = new FormControl('');
+ house_no = new FormControl('', [Validators.required]);
+ phone_no = new FormControl('', [Validators.required, Validators.pattern("^[0-9\ ( ) + , - ]+$")]);
+ address_type = new FormControl('1');
- constructor(
- private router : Router,
- private route : ActivatedRoute
- ) { }
+ constructor(private router : Router,
+ private route : ActivatedRoute,
+ public errorMsg : ValidationService,
+ public webService : WebService,
+ private formBuilder : FormBuilder,
+ public subjectService : SubjectService) {
+ this.loginDetails = false;
+ this.addressSubmitClick = false;
+ }
ngOnInit() {
+ this.prdtData = JSON.parse(this.webService.getLocalStorageItem('productDetails'));
+ this.subjectService.getLoginData().subscribe(loginData => {
+ this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
+ });
+ this.checkProductId(this.prdtData['product_id']);
+
+ this.route.params.subscribe(val => {
+ this.route.queryParams.subscribe(params => {
+ this.address_id = params['address_id'];
+ });
+ });
+ if(this.address_id != ''){
+ this.getUserAddressById(this.address_id);
+ }
+ this.buildAddressForm();
+ }
+
+ buildAddressForm(){
+ this.addaddressForm = this.formBuilder.group({
+ name: this.name,
+ city: this.city,
+ area: this.area,
+ state: this.state,
+ landmark: this.landmark,
+ house_no: this.house_no,
+ phone_no: this.phone_no,
+ address_type: this.address_type
+ });
+ }
+
+ checkProductId(product_id){
+ if(product_id > 0){
+ this.product_id = product_id;
+ }else{
+ this.goToPage('purchaseHome','');
+ }
+ }
+
+ addressFormSubmit(data){
+ if(this.addaddressForm.invalid){
+ return false;
+ }
+ if(this.address_id > 0){
+ this.updateAddressFormSubmit(data,this.address_id);
+ }else{
+ this.addaddressFormSubmit(data)
+ }
+ }
+
+ addaddressFormSubmit(data){
+ this.loader = true;
+ const This = this;
+ data.customer_id = this.loginDetails.customer_id;
+ this.webService.post_data('saveUserAddress',data).subscribe(response => {
+ this.loader = false;
+ if(response.status == 'success'){
+ this.addressResponse = response;
+
+ setTimeout( function() {
+ This.addressResponse = false;
+ This.goToPage('address','');
+ This.addaddressForm.reset();
+ This.addressResponse = false;
+ This.addressSubmitClick = false;
+ }, 3000);
+ }else{
+ response.message = (response.message == '')?this.errorMsg.errorList.req_failure:response.message;
+ this.addressResponse = response;
+ setTimeout( function() {
+ This.addressResponse = false;
+ }, 3000);
+ }
+ })
+ }
+ updateAddressFormSubmit(data,id){
+ this.loader = true;
+ const This = this;
+ data.customer_id = this.loginDetails.customer_id;
+ this.webService.post_data('updateUserAddress',{"data":data,"address_id":id}).subscribe(response => {
+ this.loader = false;
+ if(response.status == 'success'){
+ this.addressResponse = response;
+
+ setTimeout( function() {
+ This.addressResponse = false;
+ This.goToPage('address','');
+ This.addaddressForm.reset();
+ This.addressResponse = false;
+ This.addressSubmitClick = false;
+ }, 3000);
+ }else{
+ response.message = (response.message == '')?this.errorMsg.errorList.req_failure:response.message;
+ this.addressResponse = response;
+ setTimeout( function() {
+ This.addressResponse = false;
+ }, 3000);
+ }
+ })
+ }
+
+ getUserAddressById(address_id){
+ this.loader = true;
+ this.webService.post_data('getUserAddressById',{"address_id":address_id,'customer_id':this.loginDetails.customer_id}).subscribe(response => {
+ this.loader = false;
+ if(response.status == 'success'){
+ this.editAddressResp = response.data;
+
+ this.addaddressForm.controls["city"].setValue(this.editAddressResp.city);
+ this.addaddressForm.controls["area"].setValue(this.editAddressResp.area);
+ this.addaddressForm.controls["state"].setValue(this.editAddressResp.state);
+ this.addaddressForm.controls["landmark"].setValue(this.editAddressResp.landmark);
+ this.addaddressForm.controls["house_no"].setValue(this.editAddressResp.house_no);
+ this.addaddressForm.controls["phone_no"].setValue(this.editAddressResp.phone_no);
+ this.addaddressForm.controls["name"].setValue(this.editAddressResp.name);
+ this.addaddressForm.controls["address_type"].setValue(this.editAddressResp.address_type);
+ }
+ })
}
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;
}
}
diff --git a/src/app/purchase/address/address.component.html b/src/app/purchase/address/address.component.html
index 9cfee59..c24c841 100644
--- a/src/app/purchase/address/address.component.html
+++ b/src/app/purchase/address/address.component.html
@@ -1,45 +1,37 @@
<div class="purchase_wrapper">
<div class="container-fluid">
- <app-searchbar>
- </app-searchbar>
+ <div class="loader_overlay" *ngIf="loader"></div>
<div class="address_wrapper">
<h3>Delivery Address</h3>
<div class="address_inner_wrapper">
<ul>
- <li>
- <h4>Loius Morgan <span class="address">(Home)</span><span class="number">+91 996548752</span></h4>
- <p> Ground Floor, Carnival Infopark, Phase- 2 Kusumagiri PO, Kakkanad, Kochi, Kerala 682030</p>
- <div class="edit">
- Edit
- </div>
- </li>
- <li>
- <h4>Loius Morgan <span class="address">(Home)</span><span class="number">+91 996548752</span></h4>
- <p> Ground Floor, Carnival Infopark, Phase- 2 Kusumagiri PO, Kakkanad, Kochi, Kerala 682030</p>
- <div class="edit">
- Edit
- </div>
- </li>
- <li>
- <h4>Loius Morgan <span class="address">(Home)</span><span class="number">+91 996548752</span></h4>
- <p> Ground Floor, Carnival Infopark, Phase- 2 Kusumagiri PO, Kakkanad, Kochi, Kerala 682030</p>
- <div class="edit">
- Edit
- </div>
- </li>
+ <div *ngIf="userAddress && userAddress.length > 0;else noAddress">
+ <li *ngFor="let addrs of userAddress"
+ [ngClass]="address_id == addrs.id ? 'selected_add' : '' "
+ (click)="select_address(addrs.id)">
+ <h4>{{addrs.name}} <span class="address">({{addrs.address_type === '1'?'Home':'Office'}})</span><span class="number">{{addrs.phone_no}}</span></h4>
+ <p>{{addrs.house_no+', '+addrs.area+', '+addrs.state+', '+addrs.city}}</p>
+ <div class="edit" (click)="editAddress(addrs.id)">
+ Edit
+ </div>
+ </li>
+ </div>
<div class="add_new" (click)="goToPage('addaddress')">
Add new Address
</div>
</ul>
+ <ng-template #noAddress>
+ Address is Not Added!
+ </ng-template>
<div class="row">
<div class="col-md-6">
- <h2>$ 3,200</h2>
- <h5>Delivery expected by Thur 1 May 2019</h5>
+ <h2>$ {{prdtData.total_amount}}</h2>
+ <!-- <h5>Delivery expected by Thur 1 May 2019</h5> -->
</div>
<div class="col-md-6 textRight">
<h4>
- <div class="delivery_btn floatRight" (click)="goToPage('summary')">Deliver here</div>
+ <div [ngClass]="(address_id > 0)?'delivery_btn floatRight':'delivery_btn floatRight disable_btn'" (click)="deliverProduct()">Deliver here</div>
<div class="clear"></div>
</h4>
diff --git a/src/app/purchase/address/address.component.scss b/src/app/purchase/address/address.component.scss
index fde3f9f..5ad6aa0 100644
--- a/src/app/purchase/address/address.component.scss
+++ b/src/app/purchase/address/address.component.scss
@@ -22,12 +22,12 @@
cursor: pointer;
&:hover{
- border:2px solid #2655bf;
+ border:2px solid #a0b9f3;
// transition-delay: 1s;
// transition-timing-function: ease-in-out;
}
&:focus{
- border:2px solid #2655bf;
+ border:2px solid #a0b9f3;
// transition-delay: 1s;
// transition-timing-function: ease-in-out;
}
@@ -62,6 +62,9 @@
margin: 0px;
}
}
+ .selected_add{
+ border:2px solid #2655bf !important;
+ }
diff --git a/src/app/purchase/address/address.component.ts b/src/app/purchase/address/address.component.ts
index 8f5897b..c1a5a3e 100644
--- a/src/app/purchase/address/address.component.ts
+++ b/src/app/purchase/address/address.component.ts
@@ -1,24 +1,95 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit} from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
+import { WebService } from '../../provider/web.service';
+import { SubjectService } from '../../provider/subject.service';
+import { DataserviceService } from '../../provider/dataservice.service';
@Component({
selector: 'app-address',
templateUrl: './address.component.html',
styleUrls: ['./address.component.scss']
})
+
export class AddressComponent implements OnInit {
+ loader : boolean;
+ prdtData : any = new Array();
+ product_id : any;
+ address_id : number;
+ userAddress : any;
+ loginDetails : any;
- constructor(
- private router : Router,
- private route : ActivatedRoute
- ) { }
+ constructor(private route : ActivatedRoute,
+ private router : Router,
+ public webService : WebService,
+ public subjectService : SubjectService,
+ public dataService : DataserviceService) {
+ this.loader = true;
+ this.address_id = 0;
+ }
ngOnInit() {
+ this.checkUserLogin();
+ this.checkProductId();
+ this.getUserAddress();
+ }
+
+ checkUserLogin(){
+ this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
+ if(!this.loginDetails){
+ this.goToPage('purchaseHome','');
+ }
}
+ checkProductId(){
+ this.prdtData = JSON.parse(this.webService.getLocalStorageItem('productDetails'));
+
+ if(this.prdtData && this.prdtData['product_id'] > 0){
+ this.product_id = this.prdtData['product_id'];
+ }else{
+ this.goToPage('purchaseHome','');
+ }
+ }
+
+ getUserAddress(){
+ if(!this.loginDetails || !this.loginDetails.customer_id){
+ return false;
+ }
+ this.loader = true;
+ this.webService.post_data('getUserAddress',{'user_id':this.loginDetails.customer_id}).subscribe(response => {
+ if(response.status == 'success'){
+ this.userAddress = response.data;
+ }else{
+ this.userAddress = false;
+ }
+ this.loader = false;
+ })
+ }
+
+ editAddress(address_id){
+ if(address_id == ''){
+ return false;
+ }
+ this.goToPage('addaddress',{"address_id":address_id});
+ }
+
+ select_address(address_id){
+ if(address_id === ''){
+ return false;
+ }
+ this.address_id = address_id;
+ }
+
+ deliverProduct(){
+ if(this.address_id > 0){
+ this.prdtData.address_id = this.address_id;
+ this.webService.setLocalStorageItem('productDetails', JSON.stringify(this.prdtData));
+ this.goToPage('summary','');
+ }
+ }
+
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;
}
}
diff --git a/src/app/purchase/productdetails/productdetails.component.html b/src/app/purchase/productdetails/productdetails.component.html
index 2937f50..8201ac2 100644
--- a/src/app/purchase/productdetails/productdetails.component.html
+++ b/src/app/purchase/productdetails/productdetails.component.html
@@ -2,45 +2,43 @@
<div class="container-fluid">
<app-searchbar>
</app-searchbar>
+
+ <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">
+ <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="col-md-8" *ngIf="productDetails">
<div class="product_details">
- <h1>Apollo Amazer 4G Tubeless 4 Wheeler Tyre (155/80R13, Tube Less)</h1>
- <h2>265/65R17, Tube Less</h2>
- <h3>$ 3,200</h3>
- <div class="rating_div">
- <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>
+ <h1>{{productDetails.product_name}}</h1>
+ <h2>{{productDetails.short_description}}</h2>
+ <h3>$ {{productDetails.amount}}</h3>
+ <div class="rating_div" *ngIf="productDetails.rating">
+ <fieldset class="rating prevent-click">
+ <input type="radio" [checked]="(productDetails.rating >= 4.75) ? 'true':''" id="firstStar5" name="firstRating" value="5" /><label class = "full" for="firstStar5"></label>
+ <input type="radio" [checked]="(productDetails.rating >= 4.25 && productDetails.rating < 4.75) ? 'true':''" id="firstStar4half" name="firstRating" value="4.5" /><label class="half" for="firstStar4half"></label>
+ <input type="radio" [checked]="(productDetails.rating >= 3.75 && productDetails.rating < 4.25) ? 'true':''" id="firstStar4" name="firstRating" value="4" /><label class = "full" for="firstStar4"></label>
+ <input type="radio" [checked]="(productDetails.rating >= 3.25 && productDetails.rating < 3.75) ? 'true':''" id="firstStar3half" name="firstRating" value="3.5" /><label class="half" for="firstStar3half"></label>
+ <input type="radio" [checked]="(productDetails.rating >= 2.75 && productDetails.rating < 3.25) ? 'true':''" id="firstStar3" name="firstRating" value="3" /><label class = "full" for="firstStar3"></label>
+ <input type="radio" [checked]="(productDetails.rating >= 2.25 && productDetails.rating < 2.75) ? 'true':''" id="firstStar2half" name="firstRating" value="2.5" /><label class="half" for="firstStar2half"></label>
+ <input type="radio" [checked]="(productDetails.rating >= 1.75 && productDetails.rating < 2.25) ? 'true':''" id="firstStar2" name="firstRating" value="2" /><label class = "full" for="firstStar2"></label>
+ <input type="radio" [checked]="(productDetails.rating >= 1.25 && productDetails.rating < 1.75) ? 'true':''" id="firstStar1half" name="firstRating" value="1.5" /><label class="half" for="firstStar1half"></label>
+ <input type="radio" [checked]="(productDetails.rating >= 0.75 && productDetails.rating < 1.25) ? 'true':''" id="firstStar1" name="firstRating" value="1" /><label class = "full" for="firstStar1"></label>
+ <input type="radio" [checked]="(productDetails.rating < 0.75) ? 'true':''" id="firstStarhalf" name="firstRating" value="0.5" /><label class="half" for="firstStarhalf"></label>
</fieldset>
<div class="clear"></div>
</div>
- <h2>21 Reviews</h2>
- <h4>Product Details</h4>
- <ul>
- <li>Lorem Ipsum is simply dummy text of the printing and <br>
- typesetting industry. </li>
- <li>Lorem Ipsum is simply dummy text of the printing and <br>
- typesetting industry. </li>
- <li>Lorem Ipsum is simply dummy text of the printing and <br>
- typesetting industry. </li>
- </ul>
+ <h2 *ngIf="productDetails.count > 0">{{productDetails.count}} Reviews</h2>
+ <h4 *ngIf="productDetails.description">Product Details</h4>
+ <div *ngIf="productDetails.description" [innerHTML]="productDetails.description"></div>
<h4>Quantity</h4>
<div class="counter_wrapper">
<div class="count_btn" (click)="minus()">-</div>
@@ -49,571 +47,67 @@
</div>
<div class="btn_bay">
<button class="btn_cart btn">Add to Cart</button>
- <button class="btn_buy btn" (click)="goToPage('address')">Buy Now</button>
+ <!-- <button class="btn_buy btn" (click)="goToPage('address')">Buy Now</button> -->
+ <button class="btn_buy btn" (click)="buyProduct(productDetails.amount)">{{loginDetails?'Buy Now':'Login And Continue'}}</button>
</div>
</div>
- <div class="product_details">
- <h4 class="pt0">General Details</h4>
- <div class="row">
- <div class="col-md-2">
- <p>Model Name</p></div>
- <div class="col-md-10">
- <h6>Amazer 4G Tubeless</h6>
- </div>
- </div>
- <div class="row">
- <div class="col-md-2">
- <p>Vehicle Brand</p></div>
- <div class="col-md-10">
- <h6>Marithi Suzuki, Chevorlet, Toyota</h6>
- </div>
- </div>
- <div class="row">
- <div class="col-md-2">
- <p>Vehicle Modal Name</p></div>
- <div class="col-md-10">
- <h6>Celerio, Eeco, Spark, Beat, Etios, WagonR</h6>
- </div>
- </div>
- <div class="row">
- <div class="col-md-2">
- <p>Construction Type</p></div>
- <div class="col-md-10">
- <h6>Radial</h6>
- </div>
- </div>
- <div class="row">
- <div class="col-md-2">
- <p>Speed Index</p></div>
- <div class="col-md-10">
- <h6>T</h6>
- </div>
- </div>
- <div class="row">
- <div class="col-md-2">
- <p>Suitable for</p></div>
- <div class="col-md-10">
- <h6>Road</h6>
- </div>
- </div>
- <div class="row">
- <div class="col-md-2">
- <p>Uninstallation Details</p></div>
- <div class="col-md-10">
- <h6> In case of returns, Carfixxers team will visit the customer location
- where the product was delivered to pack and pick up the prooduct.</h6>
- </div>
- </div>
- <br>
- <h4 class="pt0">Dimensions</h4>
- <div class="row">
- <div class="col-md-2">
- <p>Section width</p></div>
- <div class="col-md-10">
- <h6>155mm</h6>
- </div>
- </div>
- <div class="row">
- <div class="col-md-2">
- <p>Weight</p></div>
- <div class="col-md-10">
- <h6>7kg</h6>
- </div>
- </div>
- <div class="row">
- <div class="col-md-2">
- <p> Height</p></div>
- <div class="col-md-10">
- <h6>15.5</h6>
- </div>
- </div>
- <br>
- <h4 class="pt0">Warranty</h4>
- <div class="row">
- <div class="col-md-2">
- <p> Warranty Summary</p></div>
- <div class="col-md-10">
- <h6>2 Years Brand Warranty</h6>
- </div>
- </div>
- </div>
- <div class="product_details">
+ <div *ngIf="productDetails.about" [innerHTML]="productDetails.about" class="product_details"></div>
+ <div class="product_details" *ngIf="productDetails.rating">
<h4 class="pt0">Rating & Reviews</h4>
- <div class="big_rating_div">
- <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>
- <div class="btn_bay floatRight p10">
- <button class="btn_cart btn" style="width: 150px;" (click)="goToPage('rating')">Rate Product</button>
- </div>
+ <div class="big_rating_div" >
+ <fieldset class="rating prevent-click">
+ <input type="radio" [checked]="(productDetails.rating >= 4.75) ? 'true':''" id="secondStar5" name="secondRating" value="5" /><label class = "full" for="secondStar5"></label>
+ <input type="radio" [checked]="(productDetails.rating >= 4.25 && productDetails.rating < 4.75) ? 'true':''" id="secondStar4half" name="secondRating" value="4.5" /><label class="half" for="secondStar4half"></label>
+ <input type="radio" [checked]="(productDetails.rating >= 3.75 && productDetails.rating < 4.25) ? 'true':''" id="secondStar4" name="secondRating" value="4" /><label class = "full" for="secondStar4"></label>
+ <input type="radio" [checked]="(productDetails.rating >= 3.25 && productDetails.rating < 3.75) ? 'true':''" id="secondStar3half" name="secondRating" value="3.5" /><label class="half" for="secondStar3half"></label>
+ <input type="radio" [checked]="(productDetails.rating >= 2.75 && productDetails.rating < 3.25) ? 'true':''" id="secondStar3" name="secondRating" value="3" /><label class = "full" for="secondStar3"></label>
+ <input type="radio" [checked]="(productDetails.rating >= 2.25 && productDetails.rating < 2.75) ? 'true':''" id="secondStar2half" name="secondRating" value="2.5" /><label class="half" for="secondStar2half"></label>
+ <input type="radio" [checked]="(productDetails.rating >= 1.75 && productDetails.rating < 2.25) ? 'true':''" id="secondStar2" name="secondRating" value="2" /><label class = "full" for="secondStar2"></label>
+ <input type="radio" [checked]="(productDetails.rating >= 1.25 && productDetails.rating < 1.75) ? 'true':''" id="secondStar1half" name="secondRating" value="1.5" /><label class="half" for="secondStar1half"></label>
+ <input type="radio" [checked]="(productDetails.rating >= 0.75 && productDetails.rating < 1.25) ? 'true':''" id="secondStar1" name="secondRating" value="1" /><label class = "full" for="secondStar1"></label>
+ <input type="radio" [checked]="(productDetails.rating < 0.75) ? 'true':''" id="secondStarhalf" name="secondRating" value="0.5" /><label class="half" for="secondStarhalf"></label>
+ </fieldset>
<div class="clear"></div>
</div>
- <br>
- <h4 class="pt0">4 Rating & 23 Reviews</h4>
- <hr>
- <div class="rate_review">
+ <div class="rate_review" *ngIf="productDetails.reviews">
<ul>
- <li>
+ <li *ngFor="let revws of productDetails.reviews">
<div class="row">
<div class="col-md-9">
- <h4 class="pt0">Good Product</h4>
- <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
+ <h4 class="pt0">{{revws.title}}</h4>
+ <p>{{revws.description}}</p>
</div>
<div class="col-md-3">
<div class="feed_rating">
- <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>
+ <fieldset class="rating prevent-click">
+ <input type="radio" [checked]="(revws.rating >= 4.75) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_5'" [attr.name]="'usrReviewName_'+revws.id" value="5" /><label class = "full" for="secondStar5"></label>
+ <input type="radio" [checked]="(revws.rating >= 4.25 && revws.rating < 4.75) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_4half'" [attr.name]="'usrReviewName_'+revws.id" value="4.5" /><label class="half" for="secondStar4half"></label>
+ <input type="radio" [checked]="(revws.rating >= 3.75 && revws.rating < 4.25) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_4'" [attr.name]="'usrReviewName_'+revws.id" value="4" /><label class = "full" for="secondStar4"></label>
+ <input type="radio" [checked]="(revws.rating >= 3.25 && revws.rating < 3.75) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_3half'" [attr.name]="'usrReviewName_'+revws.id" value="3.5" /><label class="half" for="secondStar3half"></label>
+ <input type="radio" [checked]="(revws.rating >= 2.75 && revws.rating < 3.25) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_3'" [attr.name]="'usrReviewName_'+revws.id" value="3" /><label class = "full" for="secondStar3"></label>
+ <input type="radio" [checked]="(revws.rating >= 2.25 && revws.rating < 2.75) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_2half'" [attr.name]="'usrReviewName_'+revws.id" value="2.5" /><label class="half" for="secondStar2half"></label>
+ <input type="radio" [checked]="(revws.rating >= 1.75 && revws.rating < 2.25) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_2'" [attr.name]="'usrReviewName_'+revws.id" value="2" /><label class = "full" for="secondStar2"></label>
+ <input type="radio" [checked]="(revws.rating >= 1.25 && revws.rating < 1.75) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_1half'" [attr.name]="'usrReviewName_'+revws.id" value="1.5" /><label class="half" for="secondStar1half"></label>
+ <input type="radio" [checked]="(revws.rating >= 0.75 && revws.rating < 1.25) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_1'" [attr.name]="'usrReviewName_'+revws.id" value="1" /><label class = "full" for="secondStar1"></label>
+ <input type="radio" [checked]="(revws.rating < 0.75) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_half'" [attr.name]="'usrReviewName_'+revws.id" value="0.5" /><label class="half" for="secondStarhalf"></label>
+ </fieldset>
</div>
<div class="clear"></div>
- <p class="textRight">16 April 2019</p>
+ <p class="textRight">{{revws.datetime | date:'dd MMMM yyyy'}}</p>
</div>
</div>
</li>
- <li>
- <div class="row">
- <div class="col-md-9">
- <h4 class="pt0">Good Product</h4>
- <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
- </div>
- <div class="col-md-3">
- <div class="feed_rating">
- <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>
- </div>
- <div class="clear"></div>
- <p class="textRight">16 April 2019</p>
- </div>
- </div>
- </li>
- <li>
- <div class="row">
- <div class="col-md-9">
- <h4 class="pt0">Good Product</h4>
- <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
- </div>
- <div class="col-md-3">
- <div class="feed_rating">
- <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>
- </div>
- <div class="clear"></div>
- <p class="textRight">16 April 2019</p>
- </div>
- </div>
- </li>
</ul>
</div>
</div>
</div>
+ <input type="hidden" #indexLoginModal data-toggle="modal" data-target="#login">
</div>
</div>
</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>
+ <ngx-tile NgxCarouselItem> <!-- LOOP THIS -->
<li (click)="goToPage('productdetails')">
<div class="inner_div_product">
<div class="product_wrapper">
@@ -623,16 +117,16 @@
<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>
+ <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>
<span class="floatRight">$320</span>
<div class="clear"></div>
diff --git a/src/app/purchase/productdetails/productdetails.component.ts b/src/app/purchase/productdetails/productdetails.component.ts
index 76c7763..ada72ed 100644
--- a/src/app/purchase/productdetails/productdetails.component.ts
+++ b/src/app/purchase/productdetails/productdetails.component.ts
@@ -1,8 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
-import * as $ from 'jquery';
+import { WebService } from '../../provider/web.service';
import { NgxCarousel } from 'ngx-carousel';
+import { ImageStorage } from '../../../environments/server.config';
+import { SubjectService } from '../../provider/subject.service';
+import * as $ from 'jquery';
@Component({
selector: 'app-productdetails',
@@ -10,87 +13,127 @@ import { NgxCarousel } from 'ngx-carousel';
styleUrls: ['./productdetails.component.scss']
})
export class ProductdetailsComponent implements OnInit {
+
+ loader: boolean;
count:any;
- public carouselTile: NgxCarousel;
- constructor(
- private router : Router,
- private route : ActivatedRoute
- ) {
- this.count = 0;
- }
+ product_id: number;
+ imageServer: string;
+ productDetails:any;
+ product_data:any = new Array();
+ galleryImages: NgxGalleryImage[];
+ galleryOptions: NgxGalleryOptions[];
+ loginDetails:any;
+ @ViewChild("indexLoginModal") loginModalRef: ElementRef;
+ public carouselTile: NgxCarousel;
+ constructor(private router: Router,
+ private route: ActivatedRoute,
+ public webService: WebService,
+ public subjectService : SubjectService) {
+
+ this.loader = true;
+ this.count = 1;
+ this.product_id = 0;
+ this.imageServer = ImageStorage;
+ this.router.routeReuseStrategy.shouldReuseRoute = function(){
+ return false;
+ }
-add(){
- this.count = this.count + 1;
-}
+ route.params.subscribe(val => {
+ this.route.queryParams.subscribe(params => {
+ this.product_id = params['product_id'];
+ });
+ this.getProductDetails();
+ });
-minus(){
- this.count = this.count - 1;
- if(this.count < 0){
- this.count = 0;
+ if(!this.product_id){
+ this.goToPage('purchaseHome','');
+ }
}
-}
-
- galleryOptions: NgxGalleryOptions[];
- galleryImages: NgxGalleryImage[];
+ add(){this.count = this.count + 1;}
+ minus(){this.count = this.count - 1;
+ if(this.count < 1){this.count = 1;}
+ }
+
+ ngOnInit(): void {
+
+ this.designModules();
+ this.checkUserLogin();
+ }
- ngOnInit(): void {
- 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.galleryOptions = [
- {
- width: '100%',
- height: '570px',
- thumbnailsColumns: 4,
- imageAnimation: NgxGalleryAnimation.Slide
- },
- // max-width 800
- {
- breakpoint: 1440,
- width: '100%',
- height: '400px',
- imagePercent: 80,
- thumbnailsPercent: 20,
- thumbnailsMargin: 20,
- thumbnailMargin: 20
- },
- // max-width 400
- {
- breakpoint: 400,
- preview: false
- }
- ];
+ checkUserLogin(){
+ this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
+ this.subjectService.getLoginData().subscribe(loginData => {
+ this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
+ });
+ }
- this.galleryImages = [
- {
- small: 'assets/images/tyre_shot1.png',
- medium: 'assets/images/tyre_shot1.png',
- big: 'assets/images/tyre_shot1.png'
- },
- {
- small: 'assets/images/tyre_shot2.png',
- medium: 'assets/images/tyre_shot2.png',
- big: 'assets/images/tyre_shot2.png'
- },
- {
- small: 'assets/images/tyre_shot3.png',
- medium: 'assets/images/tyre_shot3.png',
- big: 'assets/images/tyre_shot3.png'
- },
- {
- small: 'assets/images/tyre_shot4.png',
- medium: 'assets/images/tyre_shot4.png',
- big: 'assets/images/tyre_shot4.png'
+ getProductDetails(){
+ this.webService.post_data('SingleProductSearch',{"product_id":this.product_id}).subscribe(response => {
+ if(response.status == 'success'){
+ let image: string = '';
+ let imageArr: any[] = new Array();
+ const thisObj = this;
+ this.productDetails = response.data;
+ console.log(response.data)
+ if(this.productDetails.images.length > 0){
+ thisObj.productDetails.images.forEach(function (data) {
+ image = thisObj.imageServer + data.image;
+ imageArr.push({small: image,medium: image,big: image});
+ });
+ }else{
+ image = thisObj.imageServer +'assets/images/no_image_text.png';
+ imageArr.push({small: image,medium: image,big: image});
+ }
+ this.galleryImages = imageArr;
+ }else{
+ this.productDetails = false;
}
-
- ];
+ this.loader = false;
+ });
+ }
+
+ buyProduct(amount){
+ if(!this.loginDetails){
+ this.loginModalRef.nativeElement.click();
+ return false;
}
+ this.product_data = {amount:amount,product_id:this.product_id,quantity:this.count,total_amount:this.count*amount};
+ this.webService.setLocalStorageItem('productDetails', JSON.stringify(this.product_data));
+ this.goToPage('address','');
+ }
+
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;
+ }
+
+ designModules(){
+ 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.galleryOptions = [
+ {
+ width: '100%',
+ height: '570px',
+ thumbnailsColumns: 4,
+ imageAnimation: NgxGalleryAnimation.Slide
+ },
+ {
+ breakpoint: 1440,
+ width: '100%',
+ height: '400px',
+ imagePercent: 80,
+ thumbnailsPercent: 20,
+ thumbnailsMargin: 20,
+ thumbnailMargin: 20
+ },
+ {
+ breakpoint: 400,
+ preview: false
+ }
+ ];
}
carouselTileLoad(){ return ''; }
-
}
+
\ No newline at end of file
diff --git a/src/app/purchase/productlist/productlist.component.html b/src/app/purchase/productlist/productlist.component.html
index 627947c..5573b2d 100644
--- a/src/app/purchase/productlist/productlist.component.html
+++ b/src/app/purchase/productlist/productlist.component.html
@@ -5,40 +5,21 @@
<div class="purchase_content_wrapper">
<div class="purchase_filter_section">
<h5>FILTERS</h5>
- <h6 href="#ac1" data-toggle="collapse">Brands</h6>
- <ul id="ac1" class="collapse in show">
- <li class="relative">
- <div class="custom_checkbox_filter">
- <input class="custom_checkbox" id="custom_checkbox-1" type="checkbox" value="value1">
- <label for="custom_checkbox-1">Acura</label>
- </div>
- </li>
- <li class="relative">
- <div class="custom_checkbox_filter">
- <input class="custom_checkbox" id="custom_checkbox-2" type="checkbox" value="value2">
- <label for="custom_checkbox-2">List one</label>
- </div>
- </li>
- <li class="relative">
- <div class="custom_checkbox_filter">
- <input class="custom_checkbox" id="custom_checkbox-3" type="checkbox" value="value2">
- <label for="custom_checkbox-3">List two</label>
- </div>
- </li>
- <li class="relative">
- <div class="custom_checkbox_filter">
- <input class="custom_checkbox" id="custom_checkbox-4" type="checkbox" value="value2">
- <label for="custom_checkbox-4">List three</label>
- </div>
- </li>
- <div class="more">
- 11 More
- </div>
- </ul>
+ <div *ngIf="productBrand && productBrand.length > 0">
+ <h6 href="#ac1" data-toggle="collapse">Brands</h6>
+ <ul id="ac1" class="collapse in show" malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
+ <li class="relative" *ngFor="let brands of productBrand; let i=index">
+ <div class="custom_checkbox_filter">
+ <input class="custom_checkbox" id="custom_checkbox_{{i}}" (click) ="selectBrand($event,brands.brand_id)" type="checkbox" value="value1">
+ <label for="custom_checkbox_{{i}}">{{brands.brand_name}}</label>
+ </div>
+ </li>
+ </ul>
+ </div>
<h6 href="#ac2" data-toggle="collapse">Price</h6>
<ul id="ac2" class="collapse in show">
<li>
- <ng5-slider [(value)]="value" [(highValue)]="highValue" [options]="options"></ng5-slider>
+ <ng5-slider #slider [(value)]="sliderMinvalue" [(highValue)]="sliderhighValue" [options]="slideroptions" (userChangeEnd)="getPrice(slider.value,slider.highValue)"></ng5-slider>
<span class="floatLeft">Min</span>
<span class="floatRight">Max</span>
<div class="clear"></div>
@@ -68,62 +49,6 @@
</select>
</h6>
</ul>
- <h6 href="#ac4" data-toggle="collapse">Color</h6>
- <ul id="ac4" class="collapse in show">
- <div class="color_select">
- <div id="custom_check_button">
- <label>
- <input type="radio">
- <p>
- <img src="/assets/images/color_1.png">
- </p>
- </label>
- </div>
- <div id="custom_check_button">
- <label>
- <input type="radio">
- <p>
- <img src="/assets/images/color_2.png">
- </p>
- </label>
- </div>
- <div id="custom_check_button">
- <label>
- <input type="radio">
- <p>
- <img src="/assets/images/color_3.png">
- </p>
- </label>
- </div>
- </div>
- </ul>
- <h6 href="#ac5" data-toggle="collapse">Customer Ratings</h6>
- <ul id="ac5" class="collapse in show">
- <li class="relative">
- <div class="custom_checkbox_filter">
- <input class="custom_checkbox" id="custom_checkbox-4" type="checkbox" value="value1">
- <label for="custom_checkbox-4">4 ★ & above</label>
- </div>
- </li>
- <li class="relative">
- <div class="custom_checkbox_filter">
- <input class="custom_checkbox" id="custom_checkbox-5" type="checkbox" value="value2">
- <label for="custom_checkbox-5">3 ★ & above</label>
- </div>
- </li>
- <li class="relative">
- <div class="custom_checkbox_filter">
- <input class="custom_checkbox" id="custom_checkbox-6" type="checkbox" value="value2">
- <label for="custom_checkbox-6">2 ★ & above</label>
- </div>
- </li>
- <li class="relative">
- <div class="custom_checkbox_filter">
- <input class="custom_checkbox" id="custom_checkbox-7" type="checkbox" value="value2">
- <label for="custom_checkbox-7">1 ★ & above</label>
- </div>
- </li>
- </ul>
</div>
<div class="purchase_content_section">
<div class="search_list_header">
@@ -131,229 +56,51 @@
<div class="col-md-8">
<p>Showing 1 -40 of 202 results for "Audi tyres"</p>
</div>
- <div class="col-md-4">
+ <!-- <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>
- <div class="search_listing_content">
+ <div class="loader_overlay" *ngIf="loader"></div>
+ <div class="search_listing_content" *ngIf="productArray && productArray.length > 0;else noProductData">
<ul>
- <li (click)="goToPage('productdetails')">
- <div class="inner_div_product">
+ <li *ngFor="let prdt of productArray">
+ <div class="inner_div_product cpoint" (click)="getSingleProductDetails(prdt.product_id)">
<div class="product_wrapper">
- <img src="/assets/images/asset_product.png">
+ <img src="{{imageServer + prdt.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>
- <span class="floatRight">$320</span>
+ <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>21 Reviews</p>
+ <p>{{(prdt.count > 0)?prdt.count+' Reviews':'Be the first one to review.'}} </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>
+ <ng-template #noProductData>
+ No Data Found
+ </ng-template>
<hr>
- <div class="pagination">
+ <!-- <div class="pagination">
<ul>
<li class="prev"><</li>
<li class="select">1</li>
@@ -363,7 +110,7 @@
<li>5</li>
<li class="next">></li>
</ul>
- </div>
+ </div> -->
</div>
<div class="clear"></div>
</div>
diff --git a/src/app/purchase/productlist/productlist.component.scss b/src/app/purchase/productlist/productlist.component.scss
index b2dfb0c..cb01a72 100644
--- a/src/app/purchase/productlist/productlist.component.scss
+++ b/src/app/purchase/productlist/productlist.component.scss
@@ -44,6 +44,7 @@
padding:0px;
padding-top: 10px;
padding-bottom: 10px;
+ height: 150px;
li{
list-style: none;
padding-left: 25px;
@@ -249,7 +250,7 @@
padding: 10px;
img{
height: 180px;
- width: auto;
+ max-width: 100%;
}
}
h5{
diff --git a/src/app/purchase/productlist/productlist.component.ts b/src/app/purchase/productlist/productlist.component.ts
index 41f7929..5cdeec2 100644
--- a/src/app/purchase/productlist/productlist.component.ts
+++ b/src/app/purchase/productlist/productlist.component.ts
@@ -1,6 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { Options } from 'ng5-slider';
+import { WebService } from '../../provider/web.service';
+import { ImageStorage } from '../../../environments/server.config';
@Component({
selector: 'app-productlist',
@@ -8,25 +10,88 @@ import { Options } from 'ng5-slider';
styleUrls: ['./productlist.component.scss']
})
export class ProductlistComponent implements OnInit {
+ loader: boolean;
+ searchKey:string;
+ imageServer: any;
+ productArray: any;
+ productBrand: any;
+ brandArr: any[] = new Array();
+ sliderMinvalue: number;
+ sliderhighValue: number;
+ slideroptions: Options;
constructor(
private router : Router,
- private route : ActivatedRoute
- ) { }
+ private route : ActivatedRoute,
+ public webService : WebService
+ ){
+ this.loader = true;
+ this.productArray = true;
- value: number = 40;
- highValue: number = 60;
- options: Options = {
- floor: 0,
- ceil: 100
- };
+ this.imageServer = ImageStorage;
+ route.params.subscribe(val => {
+ this.route.queryParams.subscribe(params => {
+ this.searchKey = params['key'];
+ this.getProductDetails({"key":this.searchKey});
+ });
+ });
+ if(this.searchKey == ''){
+ this.goToPage('purchaseHome','');
+ }
+ }
+
+ public scrollbarOptions = { axis: 'y', theme: 'minimal-dark' };
ngOnInit() {
+ this.getBrand();
}
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;
+ }
+
+ getProductDetails(params:any = ''){
+ this.loader = true;
+ this.webService.post_data('productSearch',params).subscribe(response => {
+ if(response.status == 'success'){
+ console.log(response.data);
+ this.productArray = response.data;
+ } else {
+ this.productArray = false;
+ }
+ this.loader = false;
+ });
+ }
+
+ getBrand(){
+ this.webService.get_data('getBrands').subscribe(brandResponse => {
+ if(brandResponse.status == 'success'){
+ this.productBrand = brandResponse.brands;
+ this.sliderMinvalue = 0;
+ this.sliderhighValue = brandResponse.maxamount;
+ this.slideroptions = { floor: 0, ceil: brandResponse.maxamount, step: 100 };
+ }
+ });
}
+ getSingleProductDetails(prdt_id){
+ this.goToPage('productdetails',{"product_id":prdt_id});
+ }
+
+ selectBrand(event,brand_id){
+ if (event.target.checked) {
+ this.brandArr.push(brand_id);
+ } else {
+ let id = this.brandArr.findIndex(x => x == brand_id);
+ if (id != -1) {
+ this.brandArr.splice(id, 1);
+ }
+ }
+ this.getProductDetails({"key":this.searchKey,"brand_id":this.brandArr});
+ }
+
+ getPrice(low,top){
+ this.getProductDetails({"key":this.searchKey,"brand_id":this.brandArr,"minPrice":low,"maxPrice":top});
+ }
}
diff --git a/src/app/purchase/purchase-home/purchase-home.component.html b/src/app/purchase/purchase-home/purchase-home.component.html
new file mode 100644
index 0000000..39a27aa
--- /dev/null
+++ b/src/app/purchase/purchase-home/purchase-home.component.html
@@ -0,0 +1,662 @@
+<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'><</button>
+ <button NgxCarouselNext class='rightRs'>></button>
+ </ngx-carousel>
+ </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>
+
+ <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>
\ No newline at end of file
diff --git a/src/app/purchase/purchase-home/purchase-home.component.scss b/src/app/purchase/purchase-home/purchase-home.component.scss
new file mode 100644
index 0000000..95430db
--- /dev/null
+++ b/src/app/purchase/purchase-home/purchase-home.component.scss
@@ -0,0 +1,473 @@
+.purchase_wrapper{
+ .purchase_content_wrapper{
+ .purchase_filter_section{
+ float: left;
+ width:290px;
+ background: #fff;
+ h5{
+ padding: 20px;
+ margin: 0px;
+ color: #9ba8b7;
+ font-size: 15px;
+ }
+ h6{
+ color: #262626;
+ padding: 15px;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ border-left:8px solid #fef160;
+ padding-top: 0px;
+ padding-bottom: 0px;
+ font-size: 18px;
+ background: url("/assets/images/asset_down_arrow.png");
+ background-repeat: no-repeat;
+ background-position: right 15px top 2px;
+ cursor: pointer;
+ select{
+ width: 100%;
+ border:1px solid #929db6;
+ background: url("/assets/images/asset_down_arrow.png");
+ background-repeat: no-repeat;
+ background-position: right 10px top 10px;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ height:40px;
+ padding:10px;
+ margin-bottom: 10px;
+ &:focus{
+ outline: none;
+ }
+ }
+ }
+ ul{
+ margin: 0px;
+ padding:0px;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ li{
+ list-style: none;
+ padding-left: 25px;
+ padding-right: 25px;
+ margin-bottom: 10px;
+ .custom_checkbox_filter{
+ .custom_checkbox {
+ position: absolute; // take it out of document flow
+ opacity: 0; // hide it
+
+ & + label {
+ position: relative;
+ cursor: pointer;
+ padding: 0;
+ }
+
+ // Box.
+ & + label:before {
+ content: '';
+ margin-right: 15px;
+ display: inline-block;
+ vertical-align: text-top;
+ width: 22px;
+ height: 22px;
+ background: white;
+ border:1px solid #898989;
+ box-shadow: none;
+ border-radius: 6px;
+ }
+
+ // Box hover
+ &:hover + label:before {
+ background: #2655bf;
+ }
+
+ // Box focus
+ &:focus + label:before {
+ border:1px solid #898989;
+ box-shadow: none;
+ border-radius: 6px;
+ }
+
+ // Box checked
+ &:checked + label:before {
+ background: #2655bf;
+ border:1px solid #898989;
+ box-shadow: none;
+ }
+
+ // Disabled state label.
+ &:disabled + label {
+ color: #b8b8b8;
+ cursor: auto;
+ }
+
+ // Disabled box.
+ &:disabled + label:before {
+ box-shadow: none;
+ background: #ddd;
+ }
+
+ // Checkmark. Could be replaced with an image
+ &:checked + label:after {
+ content: '';
+ position: absolute;
+ left: 5px;
+ top: 11px;
+ background: white;
+ width: 2px;
+ height: 2px;
+ box-shadow:
+ 2px 0 0 white,
+ 4px 0 0 white,
+ 4px -2px 0 white,
+ 4px -4px 0 white,
+ 4px -6px 0 white,
+ 4px -8px 0 white;
+ transform: rotate(45deg);
+ }
+ }
+ }
+
+ }
+ .more{
+ text-align: right;
+ color: #2655bf;
+ padding: 15px;
+ cursor: pointer;
+ }
+
+ .color_select{
+ padding:15px;
+ #custom_check_button {
+ width: 30px;
+ height: 30px;
+ border-radius: 0px !important;
+ overflow: auto;
+ position: relative;
+ outline: none;
+ color: #908d8d;
+ -webkit-border-radius: 5px !important;
+ -moz-border-radius: 5px !important;
+ -ms-border-radius: 5px !important;
+ -o-border-radius: 5px !important;
+ display: inline-block;
+ margin: 4px;
+
+ }
+ #custom_check_button p {
+ margin: 0px;
+ position: absolute;
+ color: #908d8d;
+ left: 0px;
+ right: 0px;
+ top: 0px;
+ bottom: 0px;
+ padding:0px;
+ cursor: pointer;
+ img{
+ width:100%;
+ height:100%;
+ object-fit: cover;
+ object-position: center;
+ -webkit-border-radius: 5px !important;
+ -moz-border-radius: 5px !important;
+ -ms-border-radius: 5px !important;
+ -o-border-radius: 5px !important;
+ }
+ }
+ #custom_check_button label {
+ width: 100%;
+ }
+ #custom_check_button label span {
+ text-align: center;
+ display: block;
+ }
+ #custom_check_button label input {
+ position: absolute;
+ top: -20px;
+ }
+ #custom_check_button input:checked+p {
+ border:2px solid #262626;
+ color: #fff;
+ border-radius: 0px !important;
+ margin: 0px;
+ -webkit-border-radius: 5px !important;
+ -moz-border-radius: 5px !important;
+ -ms-border-radius: 5px !important;
+ -o-border-radius: 5px !important;
+ }
+ }
+ }
+ }
+ .purchase_content_section{
+ float:right;
+ width:100%;
+ margin-left: 10px;
+ background: #fff;
+ padding:20px;
+ .search_list_header{
+ p{
+ margin:0px;
+ padding:0px;
+ font-size: 17px;
+ height: 40px
+
+ }
+
+ select{
+ background: url("/assets/images/asset_sort.png"),url("/assets/images/asset_down_arrow.png");
+ background-repeat: no-repeat;
+ background-position:left 10px top 10px,right 10px top 10px;
+ height:40px;
+ border:none;
+ font-size: 17px;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ padding-right: 40px;
+ padding-left: 40px;
+ &:focus{
+ outline: none;
+ }
+ }
+ }
+ .search_listing_content{
+ width:100%;
+ ul{
+ margin:0px;
+ padding:0px;
+ li{
+ list-style: none;
+ padding:10px;
+ width: calc(100% - 75%) !important;
+ display: inline-block;
+ .inner_div_product{
+ border:1px solid #eeeeee;
+ min-height: 300px;
+ padding: 15px;
+ margin:0 auto;
+ width:100%;
+ .product_wrapper{
+ text-align: center;
+ padding: 10px;
+ img{
+ height: 180px;
+ max-width: 100%;
+ }
+ }
+ h5{
+ padding:0px;
+ margin:0px;
+ color: #424242;
+ font-size: 16px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ padding-bottom: 5px;
+ }
+ p{
+ padding:0px;
+ margin:0px;
+ color: #a3afbd;
+ font-size: 14px;
+
+ }
+
+ .star_ratting{
+ padding-top: 2px;
+ span{
+ float: right;
+ color: #000000;
+ }
+ .rating {
+ border: none;
+ float: left;
+ }
+
+ .rating > input { display: none; }
+ .rating > label:before {
+ margin: 2px;
+ font-size: 16px;
+ font-family: FontAwesome;
+ display: inline-block;
+ content: "\f005";
+ }
+
+ .rating > .half:before {
+ content: "\f089";
+ position: absolute;
+ }
+
+ .rating > label {
+ color: #ddd;
+ float: right;
+ margin:0px;
+ }
+
+ /***** CSS Magic to Highlight Stars on Hover *****/
+
+ .rating > input:checked ~ label, /* show gold star when clicked */
+ .rating:not(:checked) > label:hover, /* hover current star */
+ .rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */
+
+ .rating > input:checked + label:hover, /* hover current star when changing rating */
+ .rating > input:checked ~ label:hover,
+ .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
+ .rating > input:checked ~ label:hover ~ label { color: #FFED85; }
+ }
+ }
+ }
+ }
+ }
+ .pagination{
+ width:100%;
+ ul{
+ margin:0px;
+ padding:0px;
+ width: 100%;
+ text-align: center;
+ li{
+ display: inline-block;
+ padding:7px;
+ cursor: pointer;
+ width: 40px;
+ height: 40px;
+ background-position: center !important;
+ background-repeat: no-repeat !important;
+ background-size: cover !important;
+ border-radius: 50%;
+ margin: 4px;
+ }
+ .select{
+ background-color: #fef160;
+ }
+ .prev{
+ background: url("/assets/images/asset_left.png");
+ content: none;
+ }
+ .next{
+ background: url("/assets/images/asset_right.png");
+ content: none;
+ }
+ }
+ }
+ }
+ }
+
+ .bottom_product_list{
+ background: #fff;
+ position: relative;
+ .leftRs{
+ position: absolute;
+ left:10px;
+ top: 35%;
+ width:50px;
+ height:50px;
+ border-radius: 50px;
+ background: url("/assets/images/asset_left.png");
+ border:none;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ &:focus{
+ outline: none;
+ }
+
+ }
+ .rightRs{
+ position: absolute;
+ right:10px;
+ top: 35%;
+ width:50px;
+ height:50px;
+ border-radius: 50px;
+ background: url("/assets/images/asset_right.png");
+ border:none;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ &:focus{
+ outline: none;
+ }
+
+ }
+ li{
+ list-style: none;
+ padding:10px;
+ width:100%;
+ display: inline-block;
+ .inner_div_product{
+ border:1px solid #eeeeee;
+ min-height: 300px;
+ padding: 15px;
+ margin:0 auto;
+ width:100%;
+ .product_wrapper{
+ text-align: center;
+ padding: 10px;
+ img{
+ height: 180px;
+ max-width:100%;
+ }
+ }
+ h5{
+ padding:0px;
+ margin:0px;
+ color: #424242;
+ font-size: 16px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ padding-bottom: 5px;
+ }
+ p{
+ padding:0px;
+ margin:0px;
+ color: #a3afbd;
+ font-size: 14px;
+
+ }
+
+ .star_ratting{
+ padding-top: 2px;
+ span{
+ float: right;
+ color: #000000;
+ }
+ .rating {
+ border: none;
+ float: left;
+ }
+
+ .rating > input { display: none; }
+ .rating > label:before {
+ margin: 2px;
+ font-size: 16px;
+ font-family: FontAwesome;
+ display: inline-block;
+ content: "\f005";
+ }
+
+ .rating > .half:before {
+ content: "\f089";
+ position: absolute;
+ }
+
+ .rating > label {
+ color: #ddd;
+ float: right;
+ margin:0px;
+ }
+
+ /***** CSS Magic to Highlight Stars on Hover *****/
+
+ .rating > input:checked ~ label, /* show gold star when clicked */
+ .rating:not(:checked) > label:hover, /* hover current star */
+ .rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */
+
+ .rating > input:checked + label:hover, /* hover current star when changing rating */
+ .rating > input:checked ~ label:hover,
+ .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
+ .rating > input:checked ~ label:hover ~ label { color: #FFED85; }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/purchase/purchase-home/purchase-home.component.spec.ts b/src/app/purchase/purchase-home/purchase-home.component.spec.ts
new file mode 100644
index 0000000..4b84639
--- /dev/null
+++ b/src/app/purchase/purchase-home/purchase-home.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PurchaseHomeComponent } from './purchase-home.component';
+
+describe('PurchaseHomeComponent', () => {
+ let component: PurchaseHomeComponent;
+ let fixture: ComponentFixture<PurchaseHomeComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ PurchaseHomeComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(PurchaseHomeComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/purchase/purchase-home/purchase-home.component.ts b/src/app/purchase/purchase-home/purchase-home.component.ts
new file mode 100644
index 0000000..e41146e
--- /dev/null
+++ b/src/app/purchase/purchase-home/purchase-home.component.ts
@@ -0,0 +1,54 @@
+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 { NgxCarousel } from 'ngx-carousel';
+
+@Component({
+ selector: 'app-purchase-home',
+ templateUrl: './purchase-home.component.html',
+ styleUrls: ['./purchase-home.component.scss']
+})
+export class PurchaseHomeComponent implements OnInit {
+ public carouselTile: NgxCarousel;
+
+ @ViewChild("failureModel") public failureModelRef: ElementRef;
+
+ constructor(
+ private router : Router,
+ private route : ActivatedRoute,
+ public webService : WebService
+ ) { }
+
+ value: number = 40;
+ highValue: number = 60;
+ options: Options = {
+ floor: 0,
+ ceil: 100
+ };
+
+ ngOnInit() {
+ this.route.queryParams.subscribe(params => {
+ let payStatus = params['status'];
+
+ if(payStatus && payStatus !=''){
+ if(payStatus == 'failure')
+ this.failureModelRef.nativeElement.click();
+ }
+ });
+ 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'}
+ }
+
+ unsetProdDetails(){
+ this.webService.removeLocalItem('productDetails');
+ }
+
+ goToPage(path,data=null){
+ this.router.navigateByUrl(path,{queryParams:data});
+ document.body.scrollTop = document.documentElement.scrollTop = 0;
+ }
+
+ carouselTileLoad(){ return ''; }
+
+}
diff --git a/src/app/purchase/purchase.module.ts b/src/app/purchase/purchase.module.ts
index 9465d3b..baa1188 100644
--- a/src/app/purchase/purchase.module.ts
+++ b/src/app/purchase/purchase.module.ts
@@ -1,10 +1,12 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { ProductlistComponent } from './productlist/productlist.component';
import { ProductdetailsComponent } from './productdetails/productdetails.component';
import { moduleRouting } from './purchase.routing';
import { SearchbarComponent } from './searchbar/searchbar.component';
import { Ng5SliderModule } from 'ng5-slider';
+import { MalihuScrollbarModule } from 'ngx-malihu-scrollbar';
import { NgxGalleryModule } from 'ngx-gallery';
import { NgxCarouselModule } from 'ngx-carousel';
import { CartComponent } from './cart/cart.component';
@@ -16,17 +18,20 @@ import { SummaryComponent } from './summary/summary.component';
import { TooltipModule } from 'ng2-tooltip-directive';
import { AddaddressComponent } from './addaddress/addaddress.component';
import { OrdersuccessComponent } from './ordersuccess/ordersuccess.component';
+import { PurchaseHomeComponent } from './purchase-home/purchase-home.component';
@NgModule({
- declarations: [ProductlistComponent, ProductdetailsComponent, SearchbarComponent, CartComponent, OrdersComponent, RatingComponent, TrackComponent, AddressComponent, SummaryComponent, AddaddressComponent, OrdersuccessComponent],
+ declarations: [ProductlistComponent, ProductdetailsComponent, SearchbarComponent, CartComponent, OrdersComponent, RatingComponent, TrackComponent, AddressComponent, SummaryComponent, AddaddressComponent, OrdersuccessComponent, PurchaseHomeComponent],
imports: [
CommonModule,
moduleRouting,
Ng5SliderModule,
NgxGalleryModule,
NgxCarouselModule,
- TooltipModule
+ ReactiveFormsModule,
+ TooltipModule,
+ MalihuScrollbarModule.forRoot()
]
})
export class PurchaseModule { }
diff --git a/src/app/purchase/purchase.routing.ts b/src/app/purchase/purchase.routing.ts
index e99b5e3..03ae43d 100644
--- a/src/app/purchase/purchase.routing.ts
+++ b/src/app/purchase/purchase.routing.ts
@@ -10,6 +10,7 @@ import { AddressComponent } from './address/address.component';
import { SummaryComponent } from './summary/summary.component';
import { AddaddressComponent } from './addaddress/addaddress.component';
import { OrdersuccessComponent } from './ordersuccess/ordersuccess.component';
+import { PurchaseHomeComponent } from './purchase-home/purchase-home.component';
const ModuleRoutes: Routes = [
{ path: 'productlist', component: ProductlistComponent},
@@ -21,7 +22,8 @@ const ModuleRoutes: Routes = [
{ path: 'address', component: AddressComponent},
{ path: 'summary', component: SummaryComponent},
{ path: 'addaddress', component: AddaddressComponent},
- { path: 'ordersuccess', component: OrdersuccessComponent}
+ { path: 'ordersuccess', component: OrdersuccessComponent},
+ { path: 'purchaseHome', component: PurchaseHomeComponent}
];
diff --git a/src/app/purchase/rating/rating.component.html b/src/app/purchase/rating/rating.component.html
index 20b09b9..2d6f9ce 100644
--- a/src/app/purchase/rating/rating.component.html
+++ b/src/app/purchase/rating/rating.component.html
@@ -3,449 +3,474 @@
<app-searchbar>
</app-searchbar>
<div class="ratting_div">
- <div class="row">
- <div class="col-md-3">
- <div class="auto_part_container">
- <img src="/assets/images/asset_product.png">
- </div>
- <div class="clear"></div>
- <h3>Apollo Amazer 4G Tubeless 4</h3>
- <p>Audi Q7</p>
- </div>
- <div class="col-md-9">
- <div class="ratting_inner">
- <div class="row">
- <p>Rate this Product</p>
- <div class="ratting_star">
- <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>
- <div class="clear"></div>
+ <div class="row">
+ <div class="col-md-3" *ngIf="productDetails">
+ <div class="auto_part_container">
+ <img src="{{imageServer + productDetails.images[0].image}}" onerror="this.src='assets/images/user_avatar.jpg'">
</div>
+ <div class="clear"></div>
+ <h3>{{productDetails.product_name}}</h3>
+ <p>{{productDetails.short_description}}</p>
</div>
- <hr>
- <div class="row">
- <p>Give a Title</p>
- <input class="title_input" placeholder="Type Here">
- </div>
- <hr>
- <div class="row">
- <p>Write a Review</p>
- <input class="title_input" placeholder="Type Here">
+ <div class="col-md-9">
+ <div class="ratting_inner">
+ <form [formGroup]="rateForm" (ngSubmit)="rateFormSubmit(rateForm.value)">
+ <div class="row">
+ <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="row">
+ <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="row">
+ <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>
- <hr>
- <button class="submit_btn">Submit</button>
- </div>
</div>
- </div>
</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')">
- <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'><</button>
- <button NgxCarouselNext class='rightRs'>></button>
- </ngx-carousel>
- </div>
- </div>
\ No newline at end of file
+ <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'><</button>
+ <button NgxCarouselNext class='rightRs'>></button>
+ </ngx-carousel>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/app/purchase/rating/rating.component.ts b/src/app/purchase/rating/rating.component.ts
index 8099cc5..5c94862 100644
--- a/src/app/purchase/rating/rating.component.ts
+++ b/src/app/purchase/rating/rating.component.ts
@@ -1,5 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
+import { FormGroup, FormControl, Validators, ValidationErrors } from '@angular/forms';
+import { ValidationService } from '../../provider/validation.service';
+import { WebService } from '../../provider/web.service';
+import { ImageStorage } from '../../../environments/server.config';
import { NgxCarousel } from 'ngx-carousel';
@Component({
@@ -8,19 +12,98 @@ import { NgxCarousel } from 'ngx-carousel';
styleUrls: ['./rating.component.scss']
})
export class RatingComponent implements OnInit {
+ prdt_id:any;
+ loginDetails:any;
+ rateFormClick:boolean;
+ loader:boolean;
+ productDetails:any;
+ imageServer: any;
+ rateFormResponse:any;
+
public carouselTile: NgxCarousel;
constructor(
private router : Router,
- private route : ActivatedRoute
- ) { }
-
+ private route : ActivatedRoute,
+ public errorMsg : ValidationService,
+ public webService : WebService
+ ) {
+ this.rateFormClick = false;
+ this.loader = true;
+ this.imageServer = ImageStorage;
+ }
+ rateForm;
ngOnInit() {
+ this.route.queryParams.subscribe(params => {
+ this.prdt_id = params['pId'];
+ });
+
+ if(this.prdt_id > 0){
+ this.getProductDetails();
+ }
+
+ this.rateForm = new FormGroup({
+ rating: new FormControl('5'),
+ title: new FormControl('',[Validators.required]),
+ description: new FormControl('',[Validators.required])
+ });
+
+ this.checkUserLogin();
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'));
+ if(!this.loginDetails){
+ this.goToPage('purchaseHome','');
+ }
+ }
+
+ getProductDetails(){
+ this.loader = true;
+ this.webService.post_data('SingleProductSearch',{'product_id':this.prdt_id}).subscribe(response => {
+ if(response.status == 'success'){
+ this.productDetails = response.data;
+ }else{
+ this.productDetails = false;
+ }
+ this.loader = false;
+ })
+ }
+
+ rateFormSubmit(data){
+ if(this.rateForm.invalid){
+ return false;
+ }
+ data.product_id = this.prdt_id;
+ data.customer_id = this.loginDetails.customer_id;
+ this.loader = true;
+ const This = this;
+ this.webService.post_data('rateProduct',data).subscribe(response => {
+ if(response.status == 'success'){
+ this.rateFormResponse = response;
+ setTimeout( function() {
+ This.rateFormResponse = false;
+ }, 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);
+ }
+ },error => {
+ this.rateFormResponse = {'status':'error','message':this.errorMsg.errorList.req_failure};
+ setTimeout( function() {
+ This.rateFormResponse = false;
+ }, 3000);
+ });
+ }
+
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 ''; }
diff --git a/src/app/purchase/searchbar/searchbar.component.html b/src/app/purchase/searchbar/searchbar.component.html
index 1bb573e..dff93e9 100644
--- a/src/app/purchase/searchbar/searchbar.component.html
+++ b/src/app/purchase/searchbar/searchbar.component.html
@@ -1,10 +1,19 @@
<div class="purchase_taskbar">
<div class="purchase_searchbar">
<div class="purchase_inner_search_bar">
- <input class="" type="text" placeholder="Search here">
- <button class="search_btn">Search</button>
+ <input #productSearch type="text" placeholder="Search here" (keyup)="productSearchfun(productSearch.value)">
+ <button class="search_btn" (click)="productSearchFunClick(productSearch.value)">Search</button>
<div class="clear"></div>
</div>
+ <div *ngIf="!productArray && productSearch.value != ''" style="text-align: center;">
+ <!-- <img class="imageSize" src="assets/images/no_result.png"><br> -->
+ <small>No Data Found</small>
+ </div>
+ <div *ngIf="productArray && productArray.length > 0" class="nav_bar_search_list">
+ <ul class="filter-select">
+ <li class="cpoint" *ngFor="let prdt of productArray" (click)="clickProduct(prdt.product_id)">{{prdt.product_name}}</li>
+ </ul>
+ </div>
</div>
<div class="purchase_other">
<ul>
diff --git a/src/app/purchase/searchbar/searchbar.component.ts b/src/app/purchase/searchbar/searchbar.component.ts
index 0100b25..c21f4e1 100644
--- a/src/app/purchase/searchbar/searchbar.component.ts
+++ b/src/app/purchase/searchbar/searchbar.component.ts
@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
+import { WebService } from '../../provider/web.service';
@Component({
selector: 'app-searchbar',
@@ -7,18 +8,46 @@ import { Router,ActivatedRoute } from '@angular/router';
styleUrls: ['./searchbar.component.scss']
})
export class SearchbarComponent implements OnInit {
-
- constructor(
- private router : Router,
- private route : ActivatedRoute
- ) { }
+
+ productArray: any;
+ SingleProductData:any;
+ @ViewChild("productSearch") public productSearchRef: ElementRef;
+
+ constructor(private router : Router, private route: ActivatedRoute, public webService: WebService) {
+ this.productArray = true;
+ }
ngOnInit() {
}
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;
+ }
+
+ productSearchfun(product){
+ if(product == ''){
+ this.productArray = false;
+ return;
+ }
+ this.webService.post_data('productSearch',{"key":product}).subscribe(response => {
+ if(response.status == 'success'){
+ this.productArray = response.data;
+ } else {
+ this.productArray = false;
+ }
+ console.log(this.productArray);
+ });
+ }
+
+ productSearchFunClick(key){
+ this.productArray = false;
+ this.goToPage('productlist',{"key":key});
}
+ clickProduct(product_id){
+ this.productArray = false;
+ this.productSearchRef.nativeElement.value = '';
+ this.goToPage('productdetails',{"product_id":product_id});
+ }
}
diff --git a/src/app/purchase/summary/summary.component.html b/src/app/purchase/summary/summary.component.html
index e03f564..233de32 100644
--- a/src/app/purchase/summary/summary.component.html
+++ b/src/app/purchase/summary/summary.component.html
@@ -1,64 +1,67 @@
<div class="purchase_wrapper">
<div class="container-fluid">
- <app-searchbar>
- </app-searchbar>
+ <div class="loader_overlay" *ngIf="loader"></div>
<div class="summary_wrapper">
<h3>Order Summary</h3>
<div class="summary_wrapper_inner">
<h4>Product Details</h4>
<div class="row">
- <div class="col-md-6">
- <div class="image_div"></div>
+ <div class="col-md-6" *ngIf="productDetails">
+ <div class="image_div">
+ <img src="{{(productDetails.images[0] && productDetails.images[0].image)?imageServer + productDetails.images[0].image:''}}" onerror="this.src='assets/images/user_avatar.jpg'">
+ </div>
<div class="image_detail">
- <h5>Appolo Amazer Tubeless 4 Wheeler</h5>
- <p>Audi Q7</p>
+ <h5>{{productDetails.product_name}}</h5>
+ <p>{{productDetails.short_description}}</p>
</div>
<div class="clear"></div>
</div>
<div class="col-md-6">
- <h6>
+ <!-- <h6>
<span class="head">Color</span>
<span>Black</span>
- </h6>
+ </h6> -->
</div>
</div>
<hr>
<h4>Delivery Address</h4>
<div class="row">
- <div class="col-md-6">
- <h2>Loius Morgan <span class="address">(Home)</span><span class="number">+91 996548752</span></h2>
- <p> Ground Floor, Carnival Infopark, Phase- 2 Kusumagiri PO, Kakkanad, Kochi, Kerala <strong>Pin 682030</strong> </p>
+ <div class="col-md-6" *ngIf="userAddress">
+ <h2>{{userAddress.name}}<span class="address">({{userAddress.address_type === '1'?'Home':'Office'}})</span><span class="number">{{userAddress.phone_no}}</span></h2>
+ <p>{{userAddress.house_no+', '+userAddress.area+', '+userAddress.state+', '+userAddress.city}}
+ <!-- <strong>Pin 682030</strong> -->
+ </p>
</div>
<div class="col-md-6">
- <p>Delivery Expected by Thursday 29 April, 2019</p>
+ <!-- <p>Delivery Expected by Thursday 29 April, 2019</p> -->
</div>
</div>
<hr>
<h4>Payment Details</h4>
- <div class="row">
+ <div class="row" *ngIf="prdtData">
<div class="col-md-6">
<p class="p0">Quantity </p>
</div>
<div class="col-md-6">
- <p><strong>1</strong></p>
+ <p><strong>{{prdtData.quantity}}</strong></p>
</div>
</div>
- <div class="row">
+ <div class="row" *ngIf="prdtData">
<div class="col-md-6">
<p>Total Amount</p>
</div>
<div class="col-md-6">
- <p><strong style="font-size: 18px;">$ 399</strong></p>
+ <p><strong style="font-size: 18px;">$ {{prdtData.total_amount}}</strong></p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6">
- <p>Order Confirmation mail will be sent to your mail ID <a>dummy@gmail.com</a> </p>
+ <p>Order Confirmation mail will be sent to your mail ID <a>{{loginDetails.email}}</a> </p>
</div>
<div class="col-md-6">
- <button class="continue_btn">Continue</button>
- <span tooltip="Tooltip" placement="top" show-delay="500">Tooltip on top</span>
+ <button class="continue_btn" (click)="paymentButton()">Continue</button>
+ <!-- <span tooltip="Tooltip" placement="top" show-delay="500">Tooltip on top</span> -->
<div class="clear"></div>
</div>
</div>
@@ -66,4 +69,30 @@
</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>Something Went Wrong.. Try Again</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>
\ No newline at end of file
diff --git a/src/app/purchase/summary/summary.component.ts b/src/app/purchase/summary/summary.component.ts
index 034c375..b31c9e9 100644
--- a/src/app/purchase/summary/summary.component.ts
+++ b/src/app/purchase/summary/summary.component.ts
@@ -1,5 +1,8 @@
-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 { apiConfig } from '../../../environments/server.config';
+import { ImageStorage } from '../../../environments/server.config';
@Component({
selector: 'app-summary',
@@ -7,19 +10,96 @@ import { Router,ActivatedRoute } from '@angular/router';
styleUrls: ['./summary.component.scss']
})
export class SummaryComponent implements OnInit {
+ loader:boolean;
+ loginDetails:any;
+ prdtData : any = new Array();
+ product_id : any;
+ userAddress:any;
+ serverUrl: string;
+ productDetails : any;
+ imageServer: any;
+ ref_id : any;
+
+ @ViewChild("failureModel") public failureModelRef: ElementRef;
constructor(
private router : Router,
- private route : ActivatedRoute
- ) { }
+ private route : ActivatedRoute,
+ public webService : WebService
+ ) {
+ this.loader = true;
+ this.imageServer = ImageStorage;
+ this.serverUrl = apiConfig;
+ }
ngOnInit() {
+ this.checkUserLogin();
+ this.checkProductId();
+ this.getUserAddress();
+ this.getProductDetails();
+ }
+
+ checkUserLogin(){
+ this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
+ if(!this.loginDetails){
+ this.goToPage('purchaseHome','');
+ }
+ }
+
+ checkProductId(){
+ this.prdtData = JSON.parse(this.webService.getLocalStorageItem('productDetails'));
+
+ if(this.prdtData && this.prdtData['product_id'] > 0){
+ this.product_id = this.prdtData['product_id'];
+ }else{
+ this.goToPage('purchaseHome','');
+ }
+ }
+
+ getUserAddress(){
+ if(!this.loginDetails || !this.loginDetails.customer_id){
+ return false;
+ }
+ this.loader = true;
+ this.webService.post_data('getUserAddressById',{'customer_id':this.loginDetails.customer_id,'address_id':this.prdtData.address_id}).subscribe(response => {
+ if(response.status == 'success'){
+ this.userAddress = response.data;
+ }else{
+ this.userAddress = false;
+ }
+ this.loader = false;
+ })
}
+ getProductDetails(){
+ this.loader = true;
+ this.webService.post_data('SingleProductSearch',{'product_id':this.product_id}).subscribe(response => {
+ if(response.status == 'success'){
+ this.productDetails = response.data;
+ console.log(this.productDetails)
+ }else{
+ this.productDetails = false;
+ }
+ this.loader = false;
+ })
+ }
+
+ paymentButton(){
+ this.loader = true;
+ this.prdtData.customer_id = this.loginDetails.customer_id;
+ this.webService.post_data('initOrderBooking',{'data':this.prdtData}).subscribe(response => {
+ if(response.status == 'success'){
+ document.location.href = this.serverUrl+'orderPayNow/'+response.data;
+ }else{
+ this.failureModelRef.nativeElement.click();
+ }
+ this.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;
}
}
diff --git a/src/app/purchase/track/track.component.html b/src/app/purchase/track/track.component.html
index 203d225..cfc1071 100644
--- a/src/app/purchase/track/track.component.html
+++ b/src/app/purchase/track/track.component.html
@@ -1,25 +1,27 @@
<div class="purchase_wrapper">
<div class="container-fluid">
- <app-searchbar>
- </app-searchbar>
+ <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">
+ <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">
- <h1>Apollo Amazer 4G Tubeless 4 Wheeler Tyre (155/80R13, Tube Less)</h1>
- <div class="review" (click)="goToPage('rating')">Write review</div>
+ <div class="product_details" *ngIf="orderDetails">
+ <h1>{{orderDetails.product_name}}</h1>
+ <div class="review" (click)="reviewBtn()">Write review</div>
<div class="clear"></div>
- <h2>265/65R17, Tube Less</h2>
+ <h2>{{orderDetails.short_description}}</h2>
<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>{{orderDetails.quantity}}</span></h4>
</div>
<div class="row">
<div class="col-md-5">
@@ -29,7 +31,7 @@
<div class="order_range_details">
<span>
<h5>Order Confirmed</h5>
- <p>Thurs, April 25th 2019</p>
+ <p>{{orderDetails.datetime | date: "EEE, MMMM dd yyyy"}}</p>
</span>
<span>
<h5>Packed</h5>
@@ -45,24 +47,23 @@
<div class="col-md-7">
<div class="order_delivery_details">
<div class="order_id">
- ORDID145879653
+ {{orderDetails.format_order_id}}
</div>
- <div class="order_delivery">
- <h4>
- Delivered on Thur, April 25
- </h4>
- <p>
- Item has been delivered
- </p>
+ <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>$ 3,200</h3>
+ <h3>$ {{orderDetails.amount}}</h3>
</div>
<div class="col-md-6">
<h4>
diff --git a/src/app/purchase/track/track.component.ts b/src/app/purchase/track/track.component.ts
index a741497..9164803 100644
--- a/src/app/purchase/track/track.component.ts
+++ b/src/app/purchase/track/track.component.ts
@@ -1,8 +1,10 @@
import { Component, OnInit } 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 { NgxCarousel } from 'ngx-carousel';
+import { ImageStorage } from '../../../environments/server.config';
import { Options } from 'ng5-slider';
interface RangeSliderModel {
@@ -17,95 +19,106 @@ interface RangeSliderModel {
styleUrls: ['./track.component.scss']
})
export class TrackComponent implements OnInit {
-
+ ref_id:any;
count:any;
- public carouselTile: NgxCarousel;
- constructor(
- private router : Router,
- private route : ActivatedRoute
- ) {
- this.count = 0;
- }
+ loginDetails:any;
+ loader:boolean;
+ imageServer: string;
+ orderDetails:any;
+ galleryOptions: NgxGalleryOptions[];
+ galleryImages: NgxGalleryImage[];
- add(){
- this.count = this.count + 1;
- }
-
- minus(){
- this.count = this.count - 1;
- if(this.count < 0){
+ public carouselTile: NgxCarousel;
+ constructor(private router : Router,
+ private route : ActivatedRoute,
+ public webService : WebService){
this.count = 0;
+ this.loader =true;
+ this.imageServer = ImageStorage;
+ }
+
+ 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();
+ }
+ }
+ }
+ });
+ this.designModule();
+ this.checkUserLogin();
+ this.unsetProdDetails();
}
- }
- verticalSlider2: RangeSliderModel = {
- minValue: 50,
- maxValue: 100,
- options: {
- floor: 0,
- ceil: 100,
- vertical: true
+ checkUserLogin(){
+ this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
+ if(!this.loginDetails){
+ this.goToPage('purchaseHome','');
+ }
}
- };
-
-
- galleryOptions: NgxGalleryOptions[];
- galleryImages: NgxGalleryImage[];
- ngOnInit(): void {
- 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.galleryOptions = [
- {
- width: '100%',
- height: '570px',
- thumbnailsColumns: 4,
- imageAnimation: NgxGalleryAnimation.Slide
- },
- // max-width 800
- {
- breakpoint: 1440,
- width: '100%',
- height: '400px',
- imagePercent: 80,
- thumbnailsPercent: 20,
- thumbnailsMargin: 20,
- thumbnailMargin: 20
- },
- // max-width 400
- {
- breakpoint: 400,
- preview: false
- }
- ];
-
- this.galleryImages = [
- {
- small: 'assets/images/tyre_shot1.png',
- medium: 'assets/images/tyre_shot1.png',
- big: 'assets/images/tyre_shot1.png'
- },
- {
- small: 'assets/images/tyre_shot2.png',
- medium: 'assets/images/tyre_shot2.png',
- big: 'assets/images/tyre_shot2.png'
- },
- {
- small: 'assets/images/tyre_shot3.png',
- medium: 'assets/images/tyre_shot3.png',
- big: 'assets/images/tyre_shot3.png'
- },
- {
- small: 'assets/images/tyre_shot4.png',
- medium: 'assets/images/tyre_shot4.png',
- big: 'assets/images/tyre_shot4.png'
+
+ unsetProdDetails(){
+ this.webService.removeLocalItem('productDetails');
+ }
+
+ getOrderDetail(){
+ if(this.ref_id <= 0){
+ this.goToPage('purchaseHome','');
+ }
+ this.loader = true;
+ this.webService.post_data('getOrderDetail',{'ref_id':this.ref_id}).subscribe(response => {
+ if(response.status == 'success'){
+ let image: string = '';
+ let imageArr: any[] = new Array();
+ const thisObj = this;
+ this.orderDetails = response.data;
+ if(this.orderDetails.images.length > 0){
+ thisObj.orderDetails.images.forEach(function (data) {
+ image = thisObj.imageServer + data.image;
+ imageArr.push({small: image,medium: image,big: image});
+ });
+ }else{
+ image = thisObj.imageServer +'assets/images/no_image_text.png';
+ imageArr.push({small: image,medium: image,big: image});
+ }
+ this.galleryImages = imageArr;
+ }else{
+ this.orderDetails = false;
+ this.goToPage('purchaseHome','');
}
-
- ];
+ this.loader = false;
+ });
+ }
+
+ reviewBtn(){
+ if(this.orderDetails.product_id <= 0){
+ this.goToPage('purchaseHome','');
}
+ this.goToPage('rating',{"pId":this.orderDetails.product_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 ''; }
-
-}
+ 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'}
+ this.galleryOptions = [
+ { width: '100%', height: '570px', thumbnailsColumns: 4, imageAnimation: NgxGalleryAnimation.Slide },
+ { breakpoint: 1440, width: '100%', height: '400px', imagePercent: 80, thumbnailsPercent: 20, thumbnailsMargin: 20, thumbnailMargin: 20 },
+ { breakpoint: 400, preview: false }
+ ];
+ }
+ }
+
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index 80ccab9..4875c7a 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -832,3 +832,14 @@ bs-datepicker-container{
}
}
+ .cpoint{
+ cursor: pointer !important;
+ }
+
+ .disable_btn{
+ pointer-events: none;
+ cursor: default;
+ text-decoration: none;
+ background-color: #7e7f7fc9 !important;
+ }
+