File
Implements
Metadata
selector |
app-product-details |
styleUrls |
product-details.component.scss |
templateUrl |
./product-details.component.html |
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
|
correspondingOptions
|
correspondingOptions: any
|
|
currentSelectedOptions
|
currentSelectedOptions: {}
|
|
customOptionTypesHash
|
customOptionTypesHash: any
|
|
description
|
description: any
|
|
mainOptions
|
mainOptions: 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 with directive