DCMediaViewer

DCMediaViewer

c-dc-media-viewer is a web component for cycling through media resources, like a carousel (slideshow).

Features
1.Media Carousel
2.Image and video type support
3.Thumbnails

Constructor

new DCMediaViewer()

Properties:
Name Type Description
offerAttachments Array.<offerAttachmentsObject> Offer attachment object that you want to carouse through.
Properties
Name Type Description
contentType string indicates type of content i.e. image or video.
description String indicates description of image.
url String indicates url of the media resource.
displayThumbnails boolean If set to true thumbnails will be displayed. If set to false dot indicators will be displayed.
Example
Sample Usage -

Include the component in your template simply by adding c-dc-media-viewer HTML tag

<c-dc-media-viewer offer-attachments={offer.attachments} display-thumbnails=true></c-dc-media-viewer>

| Attribute Name    | Type Expected                                                                   | Required |
|-------------------|---------------------------------------------------------------------------------|----------|
| offerAttachments  | It expects an Array of offerAttachments object.                                 | required |
|                   |                                                                                 |          |
|                   |  offerAttachments Object Properties:                                            |          |
|                   |      | Name        | Type   | Description                                    |  |          |
|                   |      |-------------|--------|------------------------------------------------|  |          |
|                   |      | contentType | String | Indicates type of content i.e. image or video. |  |          |
|                   |      | description | String | Indicates description of image.                |  |          |
|                   |      | url         | String | Indicates url of the media resource.           |  |          |
|                   |                                                                                 |          |
| displayThumbnails | It expects a boolean value.                                                     | optional |

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

 events fired : none

 events registered :

               | Event Name                | Event source component          | Callback Function      | Description                                |
               |---------------------------|---------------------------------|------------------------|--------------------------------------------|
               | vlocity-dc-color-selected | c-dc-offer-color-config         | updateColorAttribute() | Event triggered on colour attribute change |

 Dependency - c-dc-media-viewer is an independent component and has no dependency on parent or child component.

               | Parent Component | Child Components |
               |------------------|------------------|
               | none             | none             |

Sample with slots -

<c-dc-media-viewer>
   <span slot="{slot_name}">
     Custom HTML elements goes here
   </span>
</c-dc-media-viewer>

List of available slots -

| Slot names                    | Dynamic     | Description                 | Impact               |
|-------------------------------|-------------|-----------------------------|----------------------|
| dc-media-viewer-wrapper       | -           | Wrapper for template        | Replaces DOM         |
| dc-left-icon                  | -           | Left arrow icon             | Replaces DOM         |
| dc-right-icon                 | -           | Left arrow icon             | Replaces DOM         |

Extends

Members

(static) carouselCSS

Method to get CSS for carousal effect.

Methods

(static) changeMediaIndex(e)

This function is called on click of next and prev carousel navigation arrows.
Parameters:
Name Type Description
e Event current media index

(static) connectedCallback()

Invoked when c-dc-media-viewer component is added to the document’s DOM.

(static) disconnectedCallback()

disconnectedCallback () is invoked when c-dc-media-viewer is removed from the document’s DOM.

(static) filterMediaResourceByColor(selectedColor)

This function filters media resources by color
Parameters:
Name Type Description
selectedColor string device color selected by user.

(static) getSDKInstance()

This function gets digital commerce sdk instance

(static) updateColorAttribute(result)

callback function for event vlocity-dc-color-selected.
Parameters:
Name Type Description
result ColorSelectedEventResultObject Result on color selected event fire.