VlocityDCOfferColorConfig

VlocityDCOfferColorConfig

vlocity-dc-offer-color-config is a web component for displaying color options available for an offer.

Features
1.Diplay color label
2.Diplay color preview

Constructor

new VlocityDCOfferColorConfig()

Properties:
Name Type Description
offerAttribute Array.<OfferAttributeObject> attrbutes of an offer.
Properties
Name Type Description
attributeId String indicates attribute id.
inputType String indicates input type.
label String indicates color label.
multiselect String
userValues String
values Array.<OfferAttributeValueObject>
Properties
Name Type Description
value String color value.
disabled String is attribute disabled.
readonly String indicates if attribute is read only.
Example
Sample Usage -

Include the component in your template simply by adding vlocity-dc-offer-color-config custom tag

<vlocity-dc-offer-color-config .offerAttribute="${offerAttributes}"></vlocity-dc-offer-color-config>

  | Attribute Name    | Type Expected                                                                   | Required |
  |-------------------|---------------------------------------------------------------------------------|----------|
  | offerAttribute    | It expects value in OfferAttributeObject format                                 | required |

--------------------------------------------------------------------------------------------------------------------------------------

 KEY INFO -

 events fired :
               | Event Name                       | Description                                     |
               |----------------------------------|-------------------------------------------------|
               | vlocity-dc-color-selected        | Event triggered when a color option is selected |
               | vlocity-dc-configure-offer       | Event triggered when Addon button is clicked    |

 events registered : none

 Dependency - vlocity-dc-offer-color-config is a component that is commonly used as a child of vlocity-dc-offer-config-details component but it can also be used as an independent component.

               | Parent Component                  | Expected Child Component  |
               |-----------------------------------|---------------------------|
               | vlocity-dc-offer-config-details   | none                      |

Sample with slots -

<vlocity-dc-offer-color-config>
   <span slot="{slot_name}">
     Custom HTML elements goes here
   </span>
</vlocity-dc-offer-color-config>

List of available slots -

| Slot names                    | Dynamic     | Description                 | Impact               |
|-------------------------------|-------------|----------------------------------------------------|
| dc-offer-color-config-wrapper | -           | Wrapper for template        | Replaces DOM         |

Extends

  • LitElement

Members

(static, readonly) properties

Properties that will be available in the binding system
Properties:
Name Type Description
colorAttributes OfferAttributeObject color attribute object of an offer

Methods

(static) connectedCallback()

Invoked when vlocity-dc-offer-color-config component is added to the document’s DOM.

(static) selectOfferColor(selectedColor, isReadOnly)

This function is called on change of selected color.
Parameters:
Name Type Description
selectedColor String selected color value
isReadOnly Boolean attribute read only flag