storefrontapp documentation
  1. Components
  2. ConfiguratorAttributeSingleSelectionBundleDropdownComponent

File

feature-libs/product-configurator/rulebased/components/attribute/types/single-selection-bundle-dropdown/configurator-attribute-single-selection-bundle-dropdown.component.ts

Extends

ConfiguratorAttributeSingleSelectionBaseComponent

Implements

OnInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector cx-configurator-attribute-single-selection-bundle-dropdown
templateUrl ./configurator-attribute-single-selection-bundle-dropdown.component.html

Index

Properties
Methods
Inputs
Outputs

Inputs

group
Type : string
Defined in feature-libs/product-configurator/rulebased/components/attribute/types/single-selection-bundle-dropdown/configurator-attribute-single-selection-bundle-dropdown.component.ts:25
attribute
Type : Configurator.Attribute
Inherited from ConfiguratorAttributeSingleSelectionBaseComponent
Defined in ConfiguratorAttributeSingleSelectionBaseComponent:17
ownerKey
Type : string
Inherited from ConfiguratorAttributeSingleSelectionBaseComponent
Defined in ConfiguratorAttributeSingleSelectionBaseComponent:18

Outputs

selectionChange
Type : EventEmitter
Inherited from ConfiguratorAttributeSingleSelectionBaseComponent
Defined in ConfiguratorAttributeSingleSelectionBaseComponent:19

Methods

extractProductCardParameters
extractProductCardParameters()
Defined in feature-libs/product-configurator/rulebased/components/attribute/types/single-selection-bundle-dropdown/configurator-attribute-single-selection-bundle-dropdown.component.ts:44

Extract corresponding product card parameters

Returns : ConfiguratorAttributeProductCardComponentOptions
  • New product card options
ngOnInit
ngOnInit()
Defined in feature-libs/product-configurator/rulebased/components/attribute/types/single-selection-bundle-dropdown/configurator-attribute-single-selection-bundle-dropdown.component.ts:27
Returns : void
extractPriceFormulaParameters
extractPriceFormulaParameters()
Inherited from ConfiguratorAttributeSingleSelectionBaseComponent
Defined in ConfiguratorAttributeSingleSelectionBaseComponent:132

Extract corresponding price formula parameters. For the single-selection attribute types the complete price formula should be displayed at the attribute level.

Returns : ConfiguratorPriceComponentOptions
  • New price formula
extractQuantityParameters
extractQuantityParameters(form?: FormControl)
Inherited from ConfiguratorAttributeSingleSelectionBaseComponent
Defined in ConfiguratorAttributeSingleSelectionBaseComponent:109

Extract corresponding quantity parameters

Parameters :
Name Type Optional Description
form FormControl Yes
  • Form control
Returns : ConfiguratorAttributeQuantityComponentOptions
  • New quantity options
extractValuePriceFormulaParameters
extractValuePriceFormulaParameters(value?: Configurator.Value)
Inherited from ConfiguratorAttributeSingleSelectionBaseComponent
Defined in ConfiguratorAttributeSingleSelectionBaseComponent:148

Extract corresponding value price formula parameters. For the single-selection attribute types only value price should be displayed at the value level.

Parameters :
Name Type Optional Description
value Configurator.Value Yes
  • Configurator value
Returns : ConfiguratorPriceComponentOptions | undefined
  • New price formula
Protected getInitialQuantity
getInitialQuantity(form?: FormControl)
Inherited from ConfiguratorAttributeSingleSelectionBaseComponent
Defined in ConfiguratorAttributeSingleSelectionBaseComponent:94
Parameters :
Name Type Optional
form FormControl Yes
Returns : number
Protected getSelectedValuePrice
getSelectedValuePrice()
Inherited from ConfiguratorAttributeSingleSelectionBaseComponent
Defined in ConfiguratorAttributeSingleSelectionBaseComponent:159
Returns : Configurator.PriceDetails | undefined
onChangeQuantity
onChangeQuantity(eventObject: any, form?: FormControl)
Inherited from ConfiguratorAttributeSingleSelectionBaseComponent
Defined in ConfiguratorAttributeSingleSelectionBaseComponent:83
Parameters :
Name Type Optional
eventObject any No
form FormControl Yes
Returns : void
onHandleQuantity
onHandleQuantity(quantity: number)
Inherited from ConfiguratorAttributeSingleSelectionBaseComponent
Defined in ConfiguratorAttributeSingleSelectionBaseComponent:68
Parameters :
Name Type Optional
quantity number No
Returns : void
onSelect
onSelect(value: string)
Inherited from ConfiguratorAttributeSingleSelectionBaseComponent
Defined in ConfiguratorAttributeSingleSelectionBaseComponent:53
Parameters :
Name Type Optional
value string No
Returns : void

Properties

attributeDropDownForm
Default value : new FormControl('')
Defined in feature-libs/product-configurator/rulebased/components/attribute/types/single-selection-bundle-dropdown/configurator-attribute-single-selection-bundle-dropdown.component.ts:22
group
Type : string
Decorators :
@Input()
Defined in feature-libs/product-configurator/rulebased/components/attribute/types/single-selection-bundle-dropdown/configurator-attribute-single-selection-bundle-dropdown.component.ts:25
selectionValue
Type : Configurator.Value
Defined in feature-libs/product-configurator/rulebased/components/attribute/types/single-selection-bundle-dropdown/configurator-attribute-single-selection-bundle-dropdown.component.ts:23
attribute
Type : Configurator.Attribute
Decorators :
@Input()
Inherited from ConfiguratorAttributeSingleSelectionBaseComponent
Defined in ConfiguratorAttributeSingleSelectionBaseComponent:17
loading$
Default value : new BehaviorSubject<boolean>(false)
Inherited from ConfiguratorAttributeSingleSelectionBaseComponent
Defined in ConfiguratorAttributeSingleSelectionBaseComponent:15
ownerKey
Type : string
Decorators :
@Input()
Inherited from ConfiguratorAttributeSingleSelectionBaseComponent
Defined in ConfiguratorAttributeSingleSelectionBaseComponent:18
selectionChange
Default value : new EventEmitter<ConfigFormUpdateEvent>()
Decorators :
@Output()
Inherited from ConfiguratorAttributeSingleSelectionBaseComponent
Defined in ConfiguratorAttributeSingleSelectionBaseComponent:19 
import {
  ChangeDetectionStrategy,
  Component,
  Input,
  OnInit,
} from '@angular/core';
import { FormControl } from '@angular/forms';
import { Configurator } from '../../../../core/model/configurator.model';
import { ConfiguratorAttributeProductCardComponentOptions } from '../../product-card/configurator-attribute-product-card.component';
import { ConfiguratorAttributeSingleSelectionBaseComponent } from '../base/configurator-attribute-single-selection-base.component';

@Component({
  selector: 'cx-configurator-attribute-single-selection-bundle-dropdown',
  templateUrl:
    './configurator-attribute-single-selection-bundle-dropdown.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ConfiguratorAttributeSingleSelectionBundleDropdownComponent
  extends ConfiguratorAttributeSingleSelectionBaseComponent
  implements OnInit
{
  attributeDropDownForm = new FormControl('');
  selectionValue: Configurator.Value;

  @Input() group: string;

  ngOnInit() {
    this.attributeDropDownForm.setValue(this.attribute.selectedSingleValue);

    const values = this.attribute.values;
    if (values && values.length > 0) {
      const value = values.find((value) => value.selected);
      if (value) {
        this.selectionValue = value;
      }
    }
  }

  /**
   * Extract corresponding product card parameters
   *
   * @return {ConfiguratorAttributeProductCardComponentOptions} - New product card options
   */
  extractProductCardParameters(): ConfiguratorAttributeProductCardComponentOptions {
    return {
      hideRemoveButton: true,
      productBoundValue: this.selectionValue,
      singleDropdown: true,
      withQuantity: false,
      loading$: this.loading$,
      attributeId: this.getAttributeCode(this.attribute),
    };
  }
}

<div
  id="{{ createAttributeIdForConfigurator(attribute) }}"
  class="form-group"
  *ngIf="attribute?.values?.length"
>
  <select
    class="form-control"
    [formControl]="attributeDropDownForm"
    [cxFocus]="{ key: attribute.name }"
    (change)="onSelect(attributeDropDownForm.value)"
  >
    <option
      *ngFor="let item of attribute.values"
      [label]="item.valueDisplay"
      [selected]="item.selected"
      [value]="item.valueCode"
    >
      {{ item.valueDisplay }}
    </option>
  </select>
</div>

<cx-configurator-attribute-product-card
  *ngIf="selectionValue?.valueCode !== '0'"
  id="{{
    createAttributeValueIdForConfigurator(attribute, selectionValue.valueCode)
  }}"
  (handleDeselect)="onSelect('0')"
  [productCardOptions]="extractProductCardParameters()"
>
</cx-configurator-attribute-product-card>

<div *ngIf="withQuantity" class="cx-attribute-level-quantity-price">
  <cx-configurator-attribute-quantity
    (changeQuantity)="onChangeQuantity($event, attributeDropDownForm)"
    [quantityOptions]="extractQuantityParameters(attributeDropDownForm)"
  ></cx-configurator-attribute-quantity>
  <cx-configurator-price
    [formula]="extractPriceFormulaParameters()"
  ></cx-configurator-price>
</div>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""