Using Quick views to create custom pop-up Windows®

The default Quick view is used in ecommerce experiences whereby a pop-up is displayed with product information to drive a purchase. However, you can trigger custom content to display in the pop-ups. Depending on the viewer that you use, customers can tap a hotspot, a thumbnail image, or an image map to see information or related content.

Quick views are supported by the following viewers in Dynamic Media:

  • Interactive Images (clickable hotspots)
  • Interactive Video (clickable thumbnail images during video playback)
  • Carousel Banners (clickable hotspots or image maps)

While the functionality of each viewer differs, the process of creating a Quick view is the same across all three supported viewers.

To use Quick views to create custom pop-up Windows®:

  1. Create a Quick view for an uploaded asset.

    You typically create a Quick view the same time you edit an asset for use with the viewer you are using.

    Viewer you are using To create the Quick view, complete these steps
    Interactive Images Adding hotspots to an image banner.
    Interactive Videos Adding interactivity to your video.
    Carousel Banners Adding Hotspots or Image Maps to a Banner.
  2. Obtain the viewer embed code to Integrate the viewer within your website.

    Viewer you are using
    To integrate the viewer with your website, complete these steps
    Interactive image Integrating an interactive image with your website.
    Interactive video
    Integrating an interactive video with your website.
    Carousel banner Adding a carousel banner to your website page.
  3. The viewer you use has to know how to use the Quick view.

    The viewer uses a handler called QuickViewActive.

    Example
    Suppose you were using the following sample embed code on your web page for an interactive image:

    chlimage_1-291

    The handler is loaded into the viewer using setHandlers:

    *viewerInstance*.setHandlers({ *handler 1*, *handler 2*}, ...

    Using the sample embed code example from above, you have the following code:

    s7interactiveimageviewer.setHandlers({
        quickViewActivate": function(inData) {
            var sku=inData.sku;
            var genericVariable1=inData.genericVariable1;
            var genericVariable2=inData.genericVariable2;
           loadQuickView(sku,genericVariable1,genericVariable2);
        }
    })
    

    Learn more about setHandlers() method at the following:

  4. Now configure the quickViewActivate handler.

    The quickViewActivate handler controls the Quick views in the viewer. The handler contains the variable list and function calls for use with the Quick view. The embed code provides mapping for the SKU variable set in the Quick view. It also makes a sample loadQuickView function call.

    Variable mapping
    Map variables for use in your web page to the SKU value and generic variables contained in the Quick view:

    var *variable1*= inData.*quickviewVariable*

    The provided embed code has a sample mapping for the SKU variable:

    var sku=inData.sku

    Map other variables from the Quick view too, as in the following:

    var <i>variable2</i>= inData.<i>quickviewVariable2</i>
     var <i>variable3</i>= inData.<i>quickviewVariable3</i>
    

    Function call
    The handler also requires a function call for the Quick view to work. The function is assumed to be accessible by your host page. The embed code provides a sample function call:

    loadQuickView(sku)

    The sample function call assumes the function loadQuickView() exists and is accessible.

    Learn more about quickViewActivate method at the following:

  5. Do the following:

    • Uncomment the setHandlers section of the embed code.

    • Map any additional variables contained in the Quick view.

      • Update the loadQuickView(sku,*var1*,*var2*) call if you add more variables.
    • Create a simple loadQuickView () function on page, outside of the viewer.

      For example, the following writes the value of SKU to the browser console:

    function loadQuickView(sku){
        console.log ("quickview sku value is " + sku);
    }
    
    • Upload a test HTML page to a webserver and open.

      The variables from the Quick view are mapped. The function call is in place. And the browser console writes the variable value to the browser console. It does this using the sample function provided.

  6. You can now use a function to invoke a simple pop-up in the Quick view. The following example uses a DIV for a popup.

  7. Style the pop-up DIV in the following manner. Add extra styling as desired.

    <style type="text/css">
        #quickview_div{
            position: absolute;
            z-index: 99999999;
            display: none;
        }
    </style>
    
  8. Place the pop-up DIV in the body of your HTML page.

    One of the elements is set with an ID that is updated with SKU value when the user invokes a Quick view. The example also includes a simple button to hide the pop-up again after it becomes visible.

    <div id="quickview_div" >
        <table>
            <tr><td><input id="btnClosePopup" type="button" value="Close"        onclick='document.getElementById("quickview_div").style.display="none"' /><br /></td></tr>
            <tr><td>SKU</td><td><input type="text" id="txtSku" name="txtSku"></td></tr>
        </table>
    </div>
    
  9. To update the SKU value in the pop-up window, add a function. Make the pop-up window visible by replacing the simple function created in step 5 with the following:

    <script type="text/javascript">
        function loadQuickView(sku){
            document.getElementById("txtSku").setAttribute("value",sku); // write sku value
            document.getElementById("quickview_div").style.display="block"; // show popup
        }
    </script>
    
  10. Upload a test HTML page to your webserver and open. The viewer displays the pop-up DIV when a user invokes a Quick view.

  11. How to display the custom pop-up window in full screen mode

    Some viewers, such as the Interactive Video viewer, support display in fullscreen mode. However, using the pop-up as described in the previous steps causes it to display behind the viewer while in full screen mode.

    To have the pop-up window display in standard and full screen modes, attach the pop-up window to the viewer container. In this case, use a second handler method, initComplete.

    The initComplete handler is invoked after the viewer is initialized.

    "initComplete":function() { code block }
    

    Learn more about init() method at the following:

    • Interactive Image viewer – init
    • Interactive Video viewer – init
  12. To attach the pop-up–described in the previous steps–to the viewer, use the following code:

    "initComplete":function() {
        var popup = document.getElementById('quickview_div');
        popup.parentNode.removeChild(popup);
        var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId();
        var inner_container = document.getElementById(sdkContainerId);
        inner_container.appendChild(popup);
    }
    

    In the code above, you have done the following:

    • Identified your custom pop-up window.
    • Removed it from the DOM.
    • Identified the viewer container.
    • Attached the pop-up to the viewer container.
  13. Your entire setHandlers code is similar to the following (Interactive Video viewer was used):

    s7interactivevideoviewer.setHandlers({
        "quickViewActivate": function(inData) {
            var sku=inData.sku;
            loadQuickView(sku);
    
        },
        "initComplete":function() {
            var popup = document.getElementById('quickview_div'); // get custom quick view container
            popup.parentNode.removeChild(popup); // remove it from current DOM
            var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId();
            var inner_container = document.getElementById(sdkContainerId);
            inner_container.appendChild(popup);
        }
    });
    
  14. After the handlers are loaded, you initialize the viewer:

    *viewerInstance.*init()

    Example
    This example uses the Interactive image viewer.

    s7interactiveimageviewer.init()

    After you embed the viewer into your host page, be sure that the viewer instance is created. Also, ensure that the handlers are loaded before the viewer is invoked using init().

On this page