### 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`
Defined in src/app/product/components/product-detail-page/product-details/product-details.component.ts:16

### Constructor

`constructor(variantParser: VariantParserService, variantRetriver: VariantRetriverService, checkoutActions: CheckoutActions, store: Store)`
Defined in src/app/product/components/product-detail-page/product-details/product-details.component.ts:23

### Methods

ngOnInit
`ngOnInit()`
Defined in src/app/product/components/product-detail-page/product-details/product-details.component.ts:31
Returns: `void`

onOptionClick
`onOptionClick(option: any)`
Defined in src/app/product/components/product-detail-page/product-details/product-details.component.ts:46
: option: { key: "small", value: {optionValue: {etc etc}, variantIds: [1,2,3] }} Returns: `void`

makeGlobalOptinTypesHash
`makeGlobalOptinTypesHash(customOptionTypes: any)`
Defined in src/app/product/components/product-detail-page/product-details/product-details.component.ts:62
Returns: `void`

createNewCorrespondingOptions
`createNewCorrespondingOptions(newOptions: any, optionKey: any)`
Defined in src/app/product/components/product-detail-page/product-details/product-details.component.ts:72
Returns: `void`

addToCart
`addToCart(product: Product)`
Defined in src/app/product/components/product-detail-page/product-details/product-details.component.ts:80
Returns: `void`

### Properties

correspondingOptions
`correspondingOptions: `any``
Defined in src/app/product/components/product-detail-page/product-details/product-details.component.ts:22

currentSelectedOptions
`currentSelectedOptions: `{}``
Defined in src/app/product/components/product-detail-page/product-details/product-details.component.ts:18

customOptionTypesHash
`customOptionTypesHash: `any``
Defined in src/app/product/components/product-detail-page/product-details/product-details.component.ts:17

description
`description: `any``
Defined in src/app/product/components/product-detail-page/product-details/product-details.component.ts:19

images
`images: `any``
Defined in src/app/product/components/product-detail-page/product-details/product-details.component.ts:20

mainOptions
`mainOptions: `any``
Defined in src/app/product/components/product-detail-page/product-details/product-details.component.ts:21

variantId
`variantId: `any``
Defined in src/app/product/components/product-detail-page/product-details/product-details.component.ts:23

    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 ""