File
Implements
Metadata
selector |
app-product-list |
styleUrls |
product-list.component.scss |
templateUrl |
./product-list.component.html |
Methods
ngOnInit
|
ngOnInit()
|
|
Returns: void
|
getProductImageUrl
|
getProductImageUrl(url: any)
|
|
Returns: void
|
addToCart
|
addToCart(product: Product)
|
|
Returns: void
|
getMargin
|
getMargin()
|
|
Returns: void
|
import { getSelectedTaxonIds } from './../../reducers/selectors';
import { Observable } from 'rxjs/Observable';
import { CheckoutService } from './../../../core/services/checkout.service';
import { CheckoutActions } from './../../../checkout/actions/checkout.actions';
import { AppState } from './../../../interfaces';
import { Store } from '@ngrx/store';
import { Product } from './../../../core/models/product';
import { environment } from './../../../../environments/environment';
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-product-list',
templateUrl: './product-list.component.html',
styleUrls: ['./product-list.component.scss']
})
export class ProductListComponent implements OnInit {
@Input() products;
@Input('taxonIds') selectedTaxonIds;
@Input() toggleLayout;
constructor(
private checkoutService: CheckoutService,
private store: Store<AppState>,
private checkoutActions: CheckoutActions) { }
ngOnInit() { }
getProductImageUrl(url) {
return environment.API_ENDPOINT + url;
}
addToCart(product: Product) {
const variant_id = product.master.id;
this.store.dispatch(this.checkoutActions.addToCart(variant_id));
}
getMargin() {
return this.toggleLayout.size === 'COZY' ? '0 15px 20px 0' : '0 80px 20px 0';
}
}
<div class="row-base" style="display: -webkit-flex">
<section>
<ul class="results-base">
<p *ngIf="products.length === 0">No Products found for this category</p>
<li *ngFor="let product of products | filter : selectedTaxonIds" class="product-base" [style.margin]="getMargin()">
<div class="product-thumbShim"></div>
<a [routerLink]="['/product/', product.slug]">
<img class="product-thumb"
alt="{{product.name}}"
[src]="getProductImageUrl(product.master.images[0]?.product_url)">
<div class="product-productMetaInfo">
<div class="product-brand">{{ product.name }}</div>
<h2 class="product-product">{{ product.description }}</h2>
<div class="product-price">
<span>
<!-- Discounted price -->
<span class="product-discountedPrice">$ {{ product.price }}</span>
<!-- Original price -->
<!--<span class="product-strike"> react-text: 485 Rs. /react-text react-text: 486 1699 /react-text </span>-->
</span>
<!--Percentage off --><!--<span class="product-discountPercentage">(40% OFF)</span>-->
</div>
<!-- Product Size --><!--<div class="product-sizes">Sizes: S, M, L, XL, XXL</div>-->
</div>
</a>
<div class="product-sizeDisplayDiv">
<div class="product-sizeDisplayHeader">
<span>Select a size</span>
<span class="myntraweb-sprite product-sizeDisplayRemoveMark sprites-remove"></span>
</div>
<div class="product-sizeButtonsContaier">
<button class="product-sizeButton">S</button>
<button class="product-sizeButton">M</button>
<button class="product-sizeButton">L</button>
<button class="product-sizeButton">XL</button>
<button class="product-sizeButton">XXL</button>
</div>
</div>
<div class="product-actions">
<span class="product-actionsButton product-wishlist coming-soon">save</span>
<span class="product-actionsButton product-addToBag">
<span (click)="addToCart(product)">Add to bag</span>
</span>
</div>
</li>
</ul>
</section>
</div>
Legend
Html element with directive