The Popup brick includes the Magnific Popup jQuery plugin. It extends templates of other bricks and renders overlays for certain content types, such as Image Maps, Videos or eCommerce Products. It can also easily be used to open text and images in a popup or in a full screen gallery. Therefore, it includes templates, SCSS and JavaScript.

Extending the Image Map

The CMImageMap._areasMap.ftl of the Image Map Brick will be overwritten with the including one and a click on a hot zone will open the linked content in a popup gallery. Arrows on both sides will slide through the contents of all visible hot zones. On mobile devices the popup is fullscreen.

Using the Video Popup

Initialize magnific popup for video popup.

<a href="..." data-cm-popup="${videoLink}"> ...</a>

CoreMedia will automatically find and initialize a video popup opener for any element that contains this data attribute.

Using the Popup for Shop Now

The template LiveContextProductTeasable._shopNow.ftl adds the popup to product teaser, if the shop now functionality is enabled. This overwrites the template of the default-teaser brick.

Using Magnific Popup for other use cases

The popup functionality can be used in every view and works out of the box. Just add the data-attribute mfp-src to any element with the id of the DOM element, which should be displayed in the popup. For more information check the official documentation of Magnific Popup.

Additional Resources

Dependencies

This brick has dependencies on the npm packages jQuery and magnific-popup, some Freemarker and JavaScript from the frontend lib folder.