Create a quick view popup using a popup stack

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, see Customize your store layouts.

One instance of the popup stack is the Quick View Popup Stack which is available 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 illustrates applying the quick view popup logic to the Related Products widget:

1. Create a new instance of the Related Products widget within the Product layout.
2. Edit the related-products-carousel element by adding the global Quick View element, within the cc-item-detail HTML element. This should be bound with an instance of a ProductViewModel.

    <!-- 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 -->

3. Add CSS styling to the Quick View element within the Related Products widget.

   #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;
        }
      }

4. Save your changes and open the Layout tab.
5. Open the Product layout and select Grid View from the configuration toolbar.
6. Locate the Product Details widget, add a new row below it, and drag a Popup Stack to that new row.
7. Open the Main sub-region and drag the Related Products widget to it from the Components menu.
8. Open the Popup sub-region and drag the Product Details widget to it from the Components menu. Use the existing instance of the Product Quick View.
9. Publish the changes, and verify them on the storefront.

Notes

• Changing the Related Products Carousel element will not cause the Related Products widget to break when it is not implemented with the Quick View, as there is a check to ensure that the widgets exist within a stack before it displays the quick view link.
• The example assumes that some related products have already been set up in the catalog, otherwise the widget is not displayed.