Popup stacks enable a shopper to view information on a popup screen and are mostly related to product listings. For further details on popup stacks, refer to the Using Oracle Commerce Cloud guide.

One instance of the popup stack is the Quick View Popup Stack which is available out of the box within the Collection and Search Results layouts. You can apply the same quick view logic to the Related Products widget, available on the Product layout, and the Product Recommendations widget, available on all layouts.

The following example illustrates applying the quick view popup logic to the Related Products widget:

 <!-- ko foreach: relatedProductGroups -->
  <div class="item row" data-bind="css: {'active': $index()==0}, for each:
   $data">
    <div data-bind="css: $parents[1].spanClass()" class="cc-product-item">
      <div class="cc-item-detail">
      <!-- Quick View -->
        <div data-bind="setContextVariable: {name:'product', value: $data}"
         class="quickViewElement">
<!-- ko with: $parents(1) -->
            <div data-bind="element: 'product-quickview', attr: { id: 'product-
             quickview-grid-' + $parent.id() } "></div>
                    <!-- /ko -->
        </div>
      <!-- Quick View -->

#cc-relatedProducts {

 quick-view {
    position: absolute;
    display: none;
    padding: 5px 10px;
    background-color: #195d8d;
    color: white;
      border: 1px dotted white;
    cursor: pointer;
    p: {
       font-weight: bold;
       margin:0;
    }
  }
  .carousel.inner {
    .cc-item-detail {
      .quick-view {
        left: 32%;
        top: 50%;
      }
    }
  }

  .cc-item-detail: hover {
    .quick-view {
      display:inline-block;
    }
  }

Notes