loading table of contents...

Frontend Developer Manual / Version 2310

Table Of Contents

6.4.17 Example Shoppable-Video

This 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.

Wireframe of shoppable video

Figure 6.30.  Wireframe of shoppable video

  1. Can only be rendered as a teaser

  2. Renders a preview of a product, for example from the video at a specified time

  3. Disappears when the video starts playback

  4. 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].ftl

  • CMVideo.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:

displayTitle, displayShortText, displayPicture, displayDefaultPrice, displayDiscountedPrice, displayOutOfStockLink

Table 6.15. Parameters of the Image Map


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

Search Results

Table Of Contents

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.