File

src/app/home/content/product-list/product-list.component.ts

Implements

OnInit

Metadata

selector app-product-list
styleUrls product-list.component.scss
templateUrl ./product-list.component.html

Inputs

products
taxonIds
toggleLayout

Constructor

constructor(checkoutService: CheckoutService, store: Store, checkoutActions: CheckoutActions)

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]?.large_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
Component
Html element with directive

results matching ""

    No results matching ""