This brick provides templates, SCSS and JavaScript to render content from the CoreMedia CMS as a fragment on a product detail page for an augmented product.

It will utilize the assigned catalog items of Picture, Video and 360° View documents to create a slideshow which can be controlled by an underlying carousel.

When hovering over a picture, a zoom window appears on the right side of the slideshow taking the available space of the surrounding container. Per default the container is determined by finding the closest parent matching the DOM selector .row. You can change the selector in the productAssets settings by overriding the entry zoom.containerSelector.

{
  "productAssets": {
    "zoom": {
      "containerSelector": ".my-special-class"
    }
  }
}

Videos do not have a zoom window but they can be played by clicking the rendered play button which will open a popup window.

When assigning a 360° View to a product it can be rotated after it has been selected in the carousel.