fhsons/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Added basic cart system

Browse Source
This commit is contained in:
Zakary Timson
2018-07-17 23:10:38 -04:00
parent b8305b7b26
commit 4924a72509
4 changed files with 53 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/store/products/products.component.html
View File

@ -3,6 +3,14 @@
<div class="row">
<div class="col-12 py-4">
<img [src]="product.image" class="float-left img-fluid mb-4 mr-4">
<div class="float-right">
<mat-form-field class="mr-1" style="width: 40px">
<input #quantity matInput type="number" value="1" min="1">
</mat-form-field>
<button mat-raised-button color="primary" (click)="app.addToCart(product.id, product.name, product.price, quantity.value)">
<mat-icon>add_shopping_cart</mat-icon> Buy
</button>
</div>
<h2 class="roboto">{{product.name}}</h2>
<h5 *ngIf="product.price" class="text-muted">{{product.price | currency}}</h5>
<h5 *ngIf="!product.price" class="text-muted">Contact For Price</h5>

32
src/app/store/products/products.component.ts
View File

@ -1,7 +1,9 @@
import {Component} from '@angular/core';
import {AngularFirestore} from '../../../../node_modules/angularfire2/firestore';
import {ActivatedRoute} from '../../../../node_modules/@angular/router';
import {DomSanitizer} from '../../../../node_modules/@angular/platform-browser';
import {AngularFirestore} from 'angularfire2/firestore';
import {ActivatedRoute} from '@angular/router';
import {DomSanitizer} from 'node_modules/@angular/platform-browser';
import {AppComponent} from '../../app.component';
import {map} from 'rxjs/operators';
@Component({
selector: 'products',
@ -10,19 +12,31 @@ import {DomSanitizer} from '../../../../node_modules/@angular/platform-browser';
export class ProductsComponent {
product;
constructor(private route: ActivatedRoute, private db: AngularFirestore, private domSanitizer: DomSanitizer) {}
constructor(
private route: ActivatedRoute,
private db: AngularFirestore,
private domSanitizer: DomSanitizer,
public app: AppComponent
) {}
ngOnInit() {
this.route.params.subscribe(params => {
this.db
.collection('products', ref => ref.where('name', '==', params['product']))
.valueChanges()
.snapshotChanges()
.pipe(
map(rows =>
rows.map((row: any) => Object.assign({id: row.payload.doc.id}, row.payload.doc.data())).map((row: any) => {
row.image = this.domSanitizer.bypassSecurityTrustUrl(row.image);
row.description = this.domSanitizer.bypassSecurityTrustHtml(
row.description.replace(/(\r\n|\r|\n)/g, '<br>')
);
return row;
})
)
)
.subscribe(data => {
this.product = data[0];
this.product.image = this.domSanitizer.bypassSecurityTrustUrl(this.product.image);
this.product.description = this.domSanitizer.bypassSecurityTrustHtml(
this.product.description.replace(/(\r\n|\r|\n)/g, '<br>')
);
});
});
}