22-11-2019
Showing
| ... | ... | @@ -6,7 +6,7 @@ |
| </div> | ||
| <button class="nav_btn nav_cart floatRight" (click)="goToPage('cart')"> | ||
| <div class="not" *ngIf="cartService.carts">{{cartService.carts.length}}</div> | ||
| </button> | ||
| </button> | ||
| <div class="clear"></div> | ||
| </div> | ||
| <ion-content> | ||
| ... | ... | @@ -14,14 +14,24 @@ |
| <div class="product_banner"> | ||
| <div [ngClass]="checkFavStatus(product.prodId)" (click)="changeFav(product.prodId)"></div> | ||
| <div class="featured_badge" *ngIf="product.featured">Featured</div> | ||
| <img [src]="product.image" onerror="this.src='../assets/[email protected]'"> | ||
| <ion-slides pager="true" [options]="bannerOptions"> | ||
| <ion-slide> | ||
| <img [src]="product.image" onerror="this.src='../assets/[email protected]'"> | ||
| </ion-slide> | ||
| <ion-slide> | ||
| <img [src]="product.image" onerror="this.src='../assets/[email protected]'"> | ||
| </ion-slide> | ||
| <ion-slide> | ||
| <img [src]="product.image" onerror="this.src='../assets/[email protected]'"> | ||
| </ion-slide> | ||
| </ion-slides> | ||
| </div> | ||
| <div class="product_header"> | ||
| <ion-row> | ||
| <ion-col size="8"> | ||
| <h3>{{product.prodName}}</h3> | ||
| <p><strong><span><img src="../assets/Path61_2.png"></span>0</strong> {{product.category}}, {{product.subCate}} | ||
| <br/> | ||
| <br /> | ||
| <span *ngFor="let tag of product.tag">#{{tag}} </span> | ||
| </p> | ||
| </ion-col> | ||
| ... | ... | @@ -31,25 +41,26 @@ |
| </ion-col> | ||
| </ion-row> | ||
| </div> | ||
| <div class="product_div_content"> | ||
| <h5>Color</h5> | ||
| <div class="size_div"> | ||
| <ul *ngIf="product.size"> | ||
| <ion-slides pager="false" [options]="slideOpts"> | ||
| <ion-slide *ngFor="let color of product.color; let i = index"> | ||
| <li> | ||
| <button id="custom_check_button"> | ||
| <label> | ||
| <input id="{{color}}" type="radio" name="color" value="{{color}}" (click)="cartService.choose_color(color)" [checked]="i==0"> | ||
| <p>{{color}}</p> | ||
| </label> | ||
| <div class="size_div"> | ||
| <ul *ngIf="product.size"> | ||
| <ion-slides pager="false" [options]="slideOpts"> | ||
| <ion-slide *ngFor="let color of product.color; let i = index"> | ||
| <li> | ||
| <button id="custom_check_button"> | ||
| <label> | ||
| <input id="{{color}}" type="radio" name="color" value="{{color}}" | ||
| (click)="cartService.choose_color(color)" [checked]="i==0"> | ||
| <p>{{color}}</p> | ||
| </label> | ||
| </button> | ||
| </li> | ||
| </ion-slide> | ||
| </ion-slides> | ||
| </ul> | ||
| </div> | ||
| </li> | ||
| </ion-slide> | ||
| </ion-slides> | ||
| </ul> | ||
| </div> | ||
| <h5>Size</h5> | ||
| <div class="size_div"> | ||
| <ul *ngIf="product.size"> | ||
| ... | ... | @@ -57,11 +68,12 @@ |
| <ion-slide *ngFor="let size of product.size; let i = index"> | ||
| <li> | ||
| <button id="custom_check_button"> | ||
| <label> | ||
| <input id="{{size}}" type="radio" name="services" value="{{size}}" (click)="cartService.choose_size(size)" [checked]="i==0"> | ||
| <p>{{size}}</p> | ||
| </label> | ||
| </button> | ||
| <label> | ||
| <input id="{{size}}" type="radio" name="services" value="{{size}}" | ||
| (click)="cartService.choose_size(size)" [checked]="i==0"> | ||
| <p>{{size}}</p> | ||
| </label> | ||
| </button> | ||
| </li> | ||
| </ion-slide> | ||
| </ion-slides> | ||
| ... | ... | @@ -76,7 +88,7 @@ |
| <button id="custom_check_button"> | ||
| <label> | ||
| <input id="1" type="radio" name="services" value="1"> | ||
| <p><img src="../../assets/c1.png"></p> | ||
| <p><img src="../../assets/c1.png"></p> | ||
| </label> | ||
| </button> | ||
| </li> | ||
| ... | ... | @@ -86,7 +98,7 @@ |
| <button id="custom_check_button"> | ||
| <label> | ||
| <input id="2" type="radio" name="services" value="2"> | ||
| <p><img src="../../assets/c2.png"></p> | ||
| <p><img src="../../assets/c2.png"></p> | ||
| </label> | ||
| </button> | ||
| </li> | ||
| ... | ... | @@ -202,7 +214,8 @@ |
| <li (click)="viewProd(similar)"> | ||
| <div class="product_image"> | ||
| <img [src]="similar.image" onerror="this.src='../assets/[email protected]'"> | ||
| <div [ngClass]="checkFavStatus(similar.prodId)" (click)="changeFav(similar.prodId)"></div> | ||
| <div [ngClass]="checkFavStatus(similar.prodId)" (click)="changeFav(similar.prodId)"> | ||
| </div> | ||
| </div> | ||
| <h5>{{similar.prodName}}</h5> | ||
| <p>{{similar.price}}</p> | ||
| ... | ... |
| import { Injectable } from '@angular/core'; | ||
| import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from '@angular/fire/firestore'; | ||
| import { Router, ActivatedRoute } from '@angular/router'; | ||
| import { Products } from './services/product'; | ||
| import { Cart, CartItem } from './services/cart'; | ||
| import { ServiceService } from './service.service'; | ||
| import * as firebase from 'firebase'; | ||
| import { take } from 'rxjs/operators'; | ||
| import { User } from './services/user'; | ||
| import { from } from 'rxjs'; | ||
| import undefined = require('firebase/empty-import'); | ||
| import { Injectable } from "@angular/core"; | ||
| import { | ||
| AngularFirestore, | ||
| AngularFirestoreDocument, | ||
| AngularFirestoreCollection | ||
| } from "@angular/fire/firestore"; | ||
| import { Router, ActivatedRoute } from "@angular/router"; | ||
| import { Products } from "./services/product"; | ||
| import { Cart, CartItem } from "./services/cart"; | ||
| import { ServiceService } from "./service.service"; | ||
| import * as firebase from "firebase"; | ||
| import { take } from "rxjs/operators"; | ||
| import { User } from "./services/user"; | ||
| import { from } from "rxjs"; | ||
| @Injectable({ | ||
| providedIn: 'root' | ||
| providedIn: "root" | ||
| }) | ||
| export class CartsService { | ||
| size: string; | ||
| ... | ... | @@ -28,80 +31,108 @@ export class CartsService { |
| public router: Router, | ||
| public service: ServiceService | ||
| ) { | ||
| this.custId = ''; | ||
| this.custId = ""; | ||
| this.carts = []; | ||
| const users = this.service.get('user').then((data) => { | ||
| const users = this.service.get("user").then(data => { | ||
| if (data) { | ||
| data = JSON.parse(data); | ||
| this.custId = data.uid; | ||
| console.log(this.custId); | ||
| } else { | ||
| this.custId = 'WwHnLICVY2dvZGUHuKqasiTB91a2'; | ||
| this.custId = "WwHnLICVY2dvZGUHuKqasiTB91a2"; | ||
| } | ||
| }); | ||
| } | ||
| public async buyNow(product: Products) { | ||
| this.prodId = product.prodId; | ||
| const prodRef = firebase.firestore().collection('products').doc(this.prodId); | ||
| const prodRef = firebase | ||
| .firestore() | ||
| .collection("products") | ||
| .doc(this.prodId); | ||
| this.size = this.size === undefined ? product.size[0] : this.size; | ||
| this.color = this.color === undefined ? product.color[0] : this.color; | ||
| const cartRef: AngularFirestoreCollection<any> = this.afs.collection('carts', ref => ref.where('size', '==', this.size) | ||
| .where('color', '==', this.color) | ||
| .where('custId', '==', this.custId) | ||
| .where('product', '==', prodRef) | ||
| const cartRef: AngularFirestoreCollection<any> = this.afs.collection( | ||
| "carts", | ||
| ref => | ||
| ref | ||
| .where("size", "==", this.size) | ||
| .where("color", "==", this.color) | ||
| .where("custId", "==", this.custId) | ||
| .where("product", "==", prodRef) | ||
| ); | ||
| cartRef.valueChanges().pipe(take(1)).subscribe((value) => { | ||
| console.log(value); | ||
| if (value.length === 0) { | ||
| product.image = product.image === undefined ? '../assets/[email protected]' : product.image; | ||
| const cart: Cart = { | ||
| color: this.color, | ||
| custId: this.custId, | ||
| shopperId: product.shopperId, | ||
| product: firebase.firestore().doc(`products/${this.prodId}`), | ||
| image: product.image, | ||
| prodId: product.prodId, | ||
| price: product.price, | ||
| prodName: product.prodName, | ||
| shopper: product.shopper, | ||
| qty: 1, | ||
| size: this.size | ||
| }; | ||
| console.log(cart); | ||
| this.afs.collection('carts').add(cart).then((docRef) => { | ||
| const neworderId = docRef.id; | ||
| this.afs.collection('carts').doc(neworderId).update({cartId: docRef.id}).then(() => { | ||
| console.log('Booking Successfully'); | ||
| document.body.scrollTop = document.documentElement.scrollTop = 0; | ||
| }); | ||
| }).catch((error) => { | ||
| console.error('Error adding document: ', error); | ||
| }); | ||
| } else { | ||
| cartRef | ||
| .valueChanges() | ||
| .pipe(take(1)) | ||
| .subscribe(value => { | ||
| console.log(value); | ||
| // alert('Item already added in the cart'); | ||
| const cartId = value[0].cartId; | ||
| // tslint:disable-next-line:radix | ||
| const qty = parseInt(value[0].qty) + 1; | ||
| this.afs.collection('carts').doc(cartId).update({qty: `${qty}`}).then(() => { | ||
| console.log('Booking Successfully'); | ||
| document.body.scrollTop = document.documentElement.scrollTop = 0; | ||
| }); | ||
| } | ||
| }); | ||
| if (value.length === 0) { | ||
| product.image = | ||
| product.image === undefined | ||
| ? "../assets/[email protected]" | ||
| : product.image; | ||
| const cart: Cart = { | ||
| color: this.color, | ||
| custId: this.custId, | ||
| shopperId: product.shopperId, | ||
| product: firebase.firestore().doc(`products/${this.prodId}`), | ||
| image: product.image, | ||
| prodId: product.prodId, | ||
| price: product.price, | ||
| prodName: product.prodName, | ||
| shopper: product.shopper, | ||
| qty: 1, | ||
| size: this.size | ||
| }; | ||
| console.log(cart); | ||
| this.afs | ||
| .collection("carts") | ||
| .add(cart) | ||
| .then(docRef => { | ||
| const neworderId = docRef.id; | ||
| this.afs | ||
| .collection("carts") | ||
| .doc(neworderId) | ||
| .update({ cartId: docRef.id }) | ||
| .then(() => { | ||
| console.log("Booking Successfully"); | ||
| document.body.scrollTop = document.documentElement.scrollTop = 0; | ||
| }); | ||
| }) | ||
| .catch(error => { | ||
| console.error("Error adding document: ", error); | ||
| }); | ||
| } else { | ||
| console.log(value); | ||
| // alert('Item already added in the cart'); | ||
| const cartId = value[0].cartId; | ||
| // tslint:disable-next-line:radix | ||
| const qty = parseInt(value[0].qty) + 1; | ||
| this.afs | ||
| .collection("carts") | ||
| .doc(cartId) | ||
| .update({ qty: `${qty}` }) | ||
| .then(() => { | ||
| console.log("Booking Successfully"); | ||
| document.body.scrollTop = document.documentElement.scrollTop = 0; | ||
| }); | ||
| } | ||
| }); | ||
| } | ||
| public async cartList() { | ||
| const cartRef: AngularFirestoreCollection<any> = this.afs.collection('carts', ref => ref.where('custId', '==', this.custId)); | ||
| cartRef.valueChanges().subscribe((value) => { | ||
| const cartRef: AngularFirestoreCollection<any> = this.afs.collection( | ||
| "carts", | ||
| ref => ref.where("custId", "==", this.custId) | ||
| ); | ||
| cartRef.valueChanges().subscribe(value => { | ||
| this.carts = []; | ||
| const res = value; | ||
| this.cartTotal = 0; | ||
| if (res.length > 0) { | ||
| res.forEach((item) => { | ||
| res.forEach(item => { | ||
| const cartItem: CartItem = { | ||
| cartId: item.cartId, | ||
| color: item.color, | ||
| ... | ... | @@ -112,7 +143,7 @@ export class CartsService { |
| prodName: item.prodName, | ||
| image: item.image, | ||
| qty: item.qty, | ||
| size: item.size, | ||
| size: item.size | ||
| }; | ||
| console.log(item.price, item.qty); | ||
| if (item.price) { | ||
| ... | ... | @@ -130,7 +161,7 @@ export class CartsService { |
| this.carts.push(cartItem); | ||
| }); | ||
| } else { | ||
| // alert('No Products Found'); | ||
| // alert('No Products Found'); | ||
| } | ||
| }); | ||
| } | ||
| ... | ... | @@ -145,30 +176,36 @@ export class CartsService { |
| removeCount(index) { | ||
| // tslint:disable-next-line:radix | ||
| const qty = this.carts[index].qty > 1 ? this.carts[index].qty - 1 : this.carts[index].qty; | ||
| const qty = | ||
| this.carts[index].qty > 1 | ||
| ? this.carts[index].qty - 1 | ||
| : this.carts[index].qty; | ||
| this.carts[index].qty = qty; | ||
| console.log(this.carts[index].qty); | ||
| this.afs.collection('carts').doc(this.carts[index].cartId).update({ | ||
| qty: this.carts[index].qty | ||
| }); | ||
| this.afs | ||
| .collection("carts") | ||
| .doc(this.carts[index].cartId) | ||
| .update({ | ||
| qty: this.carts[index].qty | ||
| }); | ||
| } | ||
| addCount(index) { | ||
| const qty = this.carts[index].qty + 1; | ||
| this.cartTotal = 0; | ||
| this.carts[index].qty = qty; | ||
| this.afs.collection('carts').doc(this.carts[index].cartId).update({ | ||
| qty: this.carts[index].qty | ||
| }); | ||
| this.carts[index].qty = qty; | ||
| this.afs | ||
| .collection("carts") | ||
| .doc(this.carts[index].cartId) | ||
| .update({ | ||
| qty: this.carts[index].qty | ||
| }); | ||
| } | ||
| removeItem(index) { | ||
| this.afs.collection('carts').doc(this.carts[index].cartId).delete(); | ||
| this.afs | ||
| .collection("carts") | ||
| .doc(this.carts[index].cartId) | ||
| .delete(); | ||
| } | ||
| } |
Please
register
or
sign in
to comment