VlocityDCShoppingOfferDetails

VlocityDCShoppingOfferDetails

vlocity-dc-shopping-offer-details is a web component to print the offers that are being added to cart.

Constructor

new VlocityDCShoppingOfferDetails()

Properties:
Name Type Description
offer Offer offer object that need to show in UI.
categoryName String category of offer bundle eg: Add-ons, Accessories etc. .
isQuantityEditable Boolean set to false if Quantity field is read-only.
productOnly Boolean boolean value whether to print header titles as well or just simple offer details.
Example
Sample Usage -

Include the component in your template simply by adding <vlocity-dc-shopping-offer-details> custom tag

<vlocity-dc-shopping-offer-details .offer="{}" categoryName="Phones" isQuantityEditable="true" productOnly="true">
</vlocity-dc-shopping-offer-details>

--------------------------------------------------------------------------------------------------------------------------------------
 KEY INFO -

 events fired : vlocity-dc-update-cart-offer, vlocity-dc-delete-cart-offer and vlocity-dc-open-edit-modal

 events registered :

| Event Name                   |   Event source component  |   Callback Function | Description                 |
|------------------------------|---------------------------|---------------------|-----------------------------|
| vlocity-dc-remove-from-cart  |   vlocity-dc-modal        |      deleteOffer    | deleting offer from cart    |

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

       | Parent Component                    | Expected Child Component      |
       |-------------------------------------|-------------------------------|
       | vlocity-dc-shopping-nested-offer    | vlocity-dc-modal              |

Sample with slots -

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

List of available slots -

| Slot names                     | Dynamic     | Description                            | Impact                 |
|--------------------------------|-------------|----------------------------------------|------------------------|
| dc-shopping-details-wrapper    | -           | Wrapper for component                  | Replaces template DOM  |
| dc-extra-column-title          | -           | new column in sub total section        | Adds new column        |
| dc-extra-column-value          | -           | new column value in sub total section  | Adds new column        |

Extends

  • LitElement

Members

(static, readonly) properties

Properties that will be available in the binding system
Properties:
Name Type Description
offer Object offer object to display in UI.
categoryName String category of offer bundle eg: Add-ons, Accessories etc. .
productOnly Boolean boolean value whether to print header titles as well or just simple offer details.
showAttachment Boolean set to true if offer image need to show in UI.
modalPopupDetails Object details to show delete warning modal popup.
showModalWarning Boolean boolean value to show/hide modal popup.
isQuantityEditable Boolean to determine whether Quantity field is read-only or not.

Methods

(static) connectedCallback()

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

(static) deleteOffer(data)

callback function for event vlocity-dc-remove-from-cart.
Trigger to show modal popup
Parameters:
Name Type Description
data Object {'save':true}.

(static) disconnectedCallback()

disconnectedCallback () is invoked when vlocity-dc-shopping-offer-details is removed from the document’s DOM.

(static) showDeleteWarningModal(offer)

Trigger to show modal popup
Parameters:
Name Type Description
offer Object offer object.

(static) updateQuantity(offer)

Method to fire event 'vlocity-dc-update-cart-offer' to update offer
Parameters:
Name Type Description
offer Object offer object.