File

src/app/product/components/product-detail-page/product-details/product-details.component.ts

Implements

OnInit

Metadata

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

Inputs

product

Type: Product

Constructor

constructor(variantParser: VariantParserService, variantRetriver: VariantRetriverService, checkoutActions: CheckoutActions, store: Store)

Methods

ngOnInit
ngOnInit()
Returns: void
onOptionClick
onOptionClick(option: any)

: option: { key: "small",
value: {optionValue: {etc etc},
variantIds: [1,2,3] }}

Returns: void
makeGlobalOptinTypesHash
makeGlobalOptinTypesHash(customOptionTypes: any)
Returns: void
createNewCorrespondingOptions
createNewCorrespondingOptions(newOptions: any, optionKey: any)
Returns: void
addToCart
addToCart(product: Product)
Returns: void

Properties

correspondingOptions
correspondingOptions: any
currentSelectedOptions
currentSelectedOptions: {}
customOptionTypesHash
customOptionTypesHash: any
description
description: any
images
images: any
mainOptions
mainOptions: any
variantId
variantId: any
import { AppState } from './../../../../interfaces';
import { Store } from '@ngrx/store';
import { CheckoutActions } from './../../../../checkout/actions/checkout.actions';
import { Variant } from './../../../../core/models/variant';
import { VariantRetriverService } from './../../../../core/services/variant-retriver.service';
import { Component, OnInit, Input } from '@angular/core';
import { Product } from './../../../../core/models/product';
import { VariantParserService } from './../../../../core/services/variant-parser.service';

@Component({
  selector: 'app-product-details',
  templateUrl: './product-details.component.html',
  styleUrls: ['./product-details.component.scss']
})
export class ProductDetailsComponent implements OnInit {
  @Input() product: Product;
  customOptionTypesHash: any;
  currentSelectedOptions = {};
  description: any;
  images: any;
  mainOptions: any;
  correspondingOptions: any;
  variantId: any;

  constructor(private variantParser: VariantParserService,
              private variantRetriver: VariantRetriverService,
              private checkoutActions: CheckoutActions,
              private store: Store<AppState>) {
  }

  ngOnInit() {
    this.description = this.product.description;
    this.images = this.product.master.images;
    this.variantId = this.product.master.id;
    this.customOptionTypesHash = this.variantParser
      .getOptionsToDisplay(this.product.variants, this.product.option_types);
    this.mainOptions = this.makeGlobalOptinTypesHash(this.customOptionTypesHash);
    this.correspondingOptions = this.mainOptions;
  }

  /**
   * @param: option: { key: "small",
   *                   value: {optionValue: {etc etc},
   *                   variantIds: [1,2,3] }}
   */
  onOptionClick(option) {
    const result = new VariantRetriverService()
                    .getVariant(this.currentSelectedOptions,
                                this.customOptionTypesHash,
                                option, this.product);

    this.createNewCorrespondingOptions(result.newCorrespondingOptions,
                                       option.value.optionValue.option_type_name);

    this.currentSelectedOptions = result.newSelectedoptions;
    const newVariant: Variant = result.variant;
    this.variantId = newVariant.id;
    this.description = newVariant.description;
    this.images = newVariant.images;
  }

  makeGlobalOptinTypesHash(customOptionTypes) {
    const temp = {};
    for (const key in customOptionTypes) {
      if (customOptionTypes.hasOwnProperty(key)) {
        temp[key] = Object.keys(customOptionTypes[key]);
      }
    };
    return temp;
  }

  createNewCorrespondingOptions(newOptions, optionKey) {
    for (const key in this.correspondingOptions) {
      if (this.correspondingOptions.hasOwnProperty(key) && key !== optionKey) {
        this.correspondingOptions[key] = newOptions[key];
      }
    }
  }

  addToCart(product: Product) {
    this.store.dispatch(this.checkoutActions.addToCart(this.variantId));
  }
}
<div *ngIf="product != null" class="row padding-top">

  <app-image-container 
    [images]="images" 
    [selectedImage]="images[0]"
    class="col-md-6">
  </app-image-container>

  <div class="col-md-6">

    <app-product-price-info [product]="product" class="row">
    </app-product-price-info>

    <app-product-variants
      [customOptionTypesHash]="customOptionTypesHash"
      [currentSelectedOptions]="currentSelectedOptions" 
      (onOptionClickEvent)="onOptionClick($event)"
      [correspondingOptions]="correspondingOptions"
      [mainOptions]="mainOptions"
      class="row"></app-product-variants>  

    <div>
      <button (click)="addToCart()" class="pdp-add-to-bag pdp-button">ADD TO BAG</button>
    </div>

    <app-product-description 
      [description]="product.description" 
      class="row">
    </app-product-description>  
  </div>

</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""