Create custom pop-ups using Quickview using-quickviews-to-create-custom-pop-ups
The default Quickview 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, this functionality lets users select on a hotspot, or a thumbnail image, or on an image map to see information or related content.
Quickview is supported by the following viewers in Dynamic Media:
- Interactive image (clickable hotspots)
- Interactive video (clickable thumbnail images during video playback)
- Carousel banner (clickable hotspots or image maps)
While the functionality of each viewer differs, the process of creating a Quickview is the same across all three supported viewers.
To create custom pop-ups using Quickview:
-
Create a Quickview for an uploaded asset.
You typically create a Quickview the same time that you edit an asset for use with the viewer you are using.
table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header Viewer you are using Complete these steps if you want to create the Quickview 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. -
Obtain the viewer embed code to Integrate the viewer within your website.
table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header Viewer you are using Complete these steps if you want to integrate the viewer with your website 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. -
The viewer you are using must know how to use the Quickview.
The viewer uses a handler called
QuickViewActive
.Example
Suppose you use the following sample embed code on your web page for an interactive image:The handler is loaded into the viewer using
setHandlers
:*viewerInstance*.setHandlers({ *handler 1*, *handler 2*}, ...
Using the sample embed code example from above, there is the following code:
code language-xml 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:- Interactive Image viewer: https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/library/viewers-for-aem-assets-only/interactive-images/jsapi-interactive-image/r-html5-aem-int-image-viewer-javascriptapiref-sethandlers.html
- Interactive Video viewer: https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/library/viewers-for-aem-assets-only/interactive-video/jsapi-interactive-video/r-html5-aem-int-video-javascriptapiref-sethandlers.html
-
Configure the
quickViewActivate
handler.The
quickViewActivate
handler controls the Quickview in the viewer. The handler contains the variable list and function calls for use with the Quickview. The embed code provides mapping for the SKU variable set in the Quickview and a sampleloadQuickView
function call.Variable mapping
Map variables for use in your web page to the SKU value and generic variables contained in the Quickview:var *variable1*= inData.*quickviewVariable*
The provided embed code has a sample mapping for the SKU variable:
var sku=inData.sku
Map additional variables from the Quickview too, as in the following:
code language-none 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 Quickview 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:- Interactive Image viewer: https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/library/viewers-for-aem-assets-only/interactive-images/c-html5-aem-interactive-image-event-callbacks.html
- Interactive Video viewer: https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/library/viewers-for-aem-assets-only/interactive-video/c-html5-aem-int-video-event-callbacks.html
- Interactive data support in Interactive Video viewer: https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/library/viewers-for-aem-assets-only/interactive-video/c-html5-aem-int-video-int-data-support.html
-
Do the following:
-
Uncomment the setHandlers section of the embed code.
-
Map any additional variables contained in the Quickview.
- Update the
loadQuickView(sku,*var1*,*var2*)
call if you are adding additional variables.
- Update the
-
Create a simple
loadQuickView
() function on page, outside of the viewer.For example, the following writes the value of SKU to the browser console:
code language-xml function loadQuickView(sku){ console.log ("quickview sku value is " + sku); }
-
Upload a test HTML page to a webserver and open.
With the variables from the Quickview mapped and the function call in place, the browser console writes the variable value to the browser console using the sample function provided.
-
-
You can now use a function to invoke a simple pop-up in the Quickview. The following example uses a
DIV
for a popup. -
Style the pop-up
DIV
in the following manner. Add your own additional styling as desired.code language-xml <style type="text/css"> #quickview_div{ position: absolute; z-index: 99999999; display: none; } </style>
-
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 Quickview. The example also includes a simple button to hide the pop-up again after it becomes visible.
code language-xml <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>
-
Add a function so you can update the SKU value in the pop-up; make the pop-up visible by replacing the simple function created in step 5. with the following:
code language-xml <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>
-
Upload a test HTML page to your webserver and open. The viewer displays the pop-up
DIV
when a user invokes a Quickview. -
How to display the custom pop-up 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 display in both standard and full screen modes, you attach the pop-up to the viewer container. Use a second handler method,
initComplete
.The
initComplete
handler is invoked after the viewer is initialized.code language-xml "initComplete":function() { code block }
Learn more about
init()
method at the following:- Interactive Image viewer: https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/library/viewers-for-aem-assets-only/interactive-images/jsapi-interactive-image/r-html5-aem-int-image-viewer-javascriptapiref-init.html
- Interactive Video viewer: https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/library/viewers-for-aem-assets-only/interactive-video/jsapi-interactive-video/r-html5-aem-int-video-javascriptapiref-init.html
-
To attach the pop-up–described in the previous steps–to the viewer, use the following code:
code language-xml "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, the following was done:
- Identified the custom pop-up.
- Removed it from the DOM.
- Identified the viewer container.
- Attached the pop-up to the viewer container.
-
Your entire setHandlers code appears similar to the following (Interactive Video viewer was used):
code language-xml 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); } });
-
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 and the handlers are loaded before the viewer is invoked using
init()
.