Frontend Developer Manual / Version 2201
Table Of ContentsThis brick provides templates, SCSS and JavaScript to use shoppable videos on a website. It allows you to display products next to a video at a predefined time.
Can only be rendered as a teaser
Renders a preview of a product, for example from the video at a specified time
Disappears when the video starts playback
The brick plays the video inline and not in a pop-up
Technical Description
The shoppable video can be explicitly configured in Studio to show product teasers at certain times in a video. Those product teasers will then be rendered right next to the video one at a time. An additional teaser image can be shown when the video is loaded and until started via click on the play icon.
Templates and Parameters
In order to use a shoppable video, you can either include it as a teaser or a hero teaser by using the following templates.
CMVideo.hero[shoppable].ftlCMVideo.teaser[shoppable].ftl
The templates can be included in your theme as follows:
<@cm.include self=self view="hero" params={"blockClass": "example-class"}/>
To configure the behavior of the template you can add the following parameters to the cm.include tag:
| Parameter | Type | Default | Description |
|---|---|---|---|
additionalClass
|
String
|
""
| A string as CSS class added to the shoppable video container. |
blockClass
|
String
|
""
| This will add a CSS class to elements of the image map, all beginning with the provided string. |
renderDate
|
Boolean
|
true
| If the image map should show a date. |
renderTeaserText
|
Boolean
|
false
| Enables rendering the teaser text in addition to the shoppable video. |
timelineEntries
|
Array
|
[]
| An array of product teasers and the time points at when to be shown. |
overlay
|
Object
|
{}
|
An object with overlay settings for the product teaser. All as Boolean and defaulting to true:
|
Table 6.15. Parameters of the Image Map
Dependencies
Please note that the shoppable-video brick has dependencies on
jQuery and the Media brick for responsive images, for example, as a
teaser image, shown before the video starts.
Also, the mediaelement brick to provide the media element API for the video to have access to the
exact timing of the video so it can display product teasers in the specified moments using the teaser macro by the
default-teaser brick.
jQuery
Media Brick
MediaElement Brick
Default Teaser Brick
