Skip to content

Instantly share code, notes, and snippets.

Avatar

Raymon S raymonschouwenaar

View GitHub Profile
@raymonschouwenaar
raymonschouwenaar / product-list.component.scss
Created Jul 30, 2020
How To Build A Serverless Webshop - part 2
View product-list.component.scss
:host {
width: 100%;
--productSize: 400px;
}
.products__container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: var(--productSize);
grid-gap: 1rem;
}
@raymonschouwenaar
raymonschouwenaar / product-item.component.html
Created Jul 30, 2020
How To Build A Serverless Webshop - part 2
View product-item.component.html
<ng-container *ngIf="productItem">
<section class="product__item">
<h1 class="product__title">{{ productItem.name }}</h1>
<ng-container *ngIf="productItem.image">
<figure class="product__figure">
<img
loading="lazy"
*ngIf="productItem.image"
width="640px"
class="product__image"
@raymonschouwenaar
raymonschouwenaar / product-item.component.ts
Created Jul 30, 2020
How To Build A Serverless Webshop - part 2
View product-item.component.ts
import { Component, OnInit } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
import { ProductService } from '../../service/product.service'
import { ProductData } from '../../models/product'
@Component({
selector: 'app-product-item',
templateUrl: './product-item.component.html',
styleUrls: ['./product-item.component.scss'],
})
export class ProductItemComponent implements OnInit {
@raymonschouwenaar
raymonschouwenaar / product.service.ts
Created Jul 30, 2020
How To Build A Serverless Webshop - part 2
View product.service.ts
import { Injectable } from '@angular/core'
import { HttpClient } from '@angular/common/http'
import { Product, ProductData } from '../models/product'
import { environment } from 'src/environments/environment'
@Injectable({
providedIn: 'root',
})
export class ProductService {
constructor(private http: HttpClient) {}
public async getProducts(): Promise<ProductData[]> {
@raymonschouwenaar
raymonschouwenaar / product-by-id.js
Created Jul 30, 2020
How To Build A Serverless Webshop - part 2
View product-by-id.js
import { ProductService } from '../lib/product-service.js'
import { client, headers } from '../lib/config.js'
const service = new ProductService({ client })
exports.handler = async (event, context) => {
console.log('Function ` products ` invoked')
const { path } = event
const productId = path.substr(path.lastIndexOf('/') + 1)
if (!productId) {
return {
statusCode: 400,
@raymonschouwenaar
raymonschouwenaar / product-service.js
Created Jul 30, 2020
How To Build A Serverless Webshop - part 2
View product-service.js
import faunadb from 'faunadb'
const q = faunadb.query
export class ProductService {
constructor(data) {
this.client = data.client
}
async getProducts() {
return new Promise((resolve, reject) => {
const query = q.Let(
{
@raymonschouwenaar
raymonschouwenaar / app.routes.ts
Created Jul 30, 2020
How To Build A Serverless Webshop - part 2
View app.routes.ts
import { NgModule } from '@angular/core'
import { Routes, RouterModule } from '@angular/router'
import { ProductListComponent } from './products/components/product-list/product-list.component'
import { ProductItemComponent } from './products/components/product-item/product-item.component'
const routes: Routes = [
{
path: '',
component: ProductListComponent,
},
{
@raymonschouwenaar
raymonschouwenaar / product-list.component.scss
Created Jul 30, 2020
How To Build A Serverless Webshop - part 2
View product-list.component.scss
:host {
width: 100%;
--productSize: 400px;
}
.products__container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: var(--productSize);
grid-gap: 1rem;
}
@raymonschouwenaar
raymonschouwenaar / product-list.component.ts
Created Jul 30, 2020
How To Build A Serverless Webshop - part 2
View product-list.component.ts
<div class="products__container">
<ng-container *ngFor="let product of products">
<section class="product__item">
<figure class="product__figure">
<img *ngIf="product.image" class="product__image" [src]="product.image" alt="" />
</figure>
<a [routerLink]="['/product/' + product.id]">
<div class="product__content">
<strong class="product__title">{{ product.name }}</strong>
<em class="product__price">{{ product.price | currency: 'EUR' }}</em>
@raymonschouwenaar
raymonschouwenaar / app.routing.module.ts
Created Jul 30, 2020
How To Build A Serverless Webshop - part 2
View app.routing.module.ts
import { NgModule } from '@angular/core'
import { Routes, RouterModule } from '@angular/router'
import { ProductListComponent } from './products/components/product-list/product-list.component'
const routes: Routes = [
{
path: '',
component: ProductListComponent,
},
]
@NgModule({
You can’t perform that action at this time.